发表于

写在前面

读zepto源码，封装自己的zepto库系列是自己在读zepto源码的一些理解，有错误的地方还望指出。如果觉得本系列对你有所帮助，还请持续关注wclimb，谢谢。

zepto的整体架构

首先来看看整体代码结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
(function(){

	var wclimb = {},$

	$ = function(selector){
		return wclimb.init(selector)
	}
	wclimb.init = function(selector){
		var dom;
		dom = document.querySelectorAll(selector);

		return wclimb.Z(dom,selector)

	}
	wclimb.Z = function(dom,selector){
		return new Z(dom,selector)
	}
	wclimb.Z.prototype  =  Z.prototype  =  {
		test:function(){
			alert(1)
		}
	}
	function Z(dom,selector) {
		for (var i  =  0; i < dom.length; i++) {
			this[i] = dom[i]
		}
		this.selector = selector;
		this.length = dom.length
	}

	window.$ = window.wclimb = $

})()

首先我们设置了一个闭包，避免产生全局变量

阅读全文 »

发表于 | 分类于 ，

canvas仿微信红包照片 By wclimb

HTML

1
<canvas id="cav" width="500" height="500"></canvas>

CSS

设置canvas的背景图

1
2
3
4
canvas{
    background:url(https://b-ssl.duitang.com/uploads/item/201501/22/20150122203239_Cfr58.thumb.700_0.jpeg) no-repeat;
    background-size:100% 100%;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var canvas = document.querySelector("#cav")
var context = canvas.getContext("2d");

var randomX = Math.floor(Math.random()*440+30)
var randomY = Math.floor(Math.random()*440+30)

context.globalAlpha = 0.96;
context.fillStyle = '#333'
context.rect(0,0,canvas.width,canvas.height);
context.fill();

context.save()
context.beginPath()
context.arc(randomX,randomY,30,0,Math.PI*2,false);
context.clip();
context.clearRect(0,0,canvas.width,canvas.height)
context.restore();

var num = 30;
var time = null;
document.body.onclick = function(){
    function circle(){
        num += 5
        context.save()
        context.beginPath()
        context.arc(randomX,randomY,num,0,Math.PI*2,false);
        context.clip();
        context.clearRect(0,0,canvas.width,canvas.height)
        context.restore();
        console.log(num)

        if (num >= 677){
        	clearInterval(timer)
        }
    }
    timer = setInterval(circle,10)
}
阅读全文 »

发表于 | 分类于 ，

入门指南–引用gulp官网示例

全局安装 gulp：

1
$ npm install --global gulp

作为项目的开发依赖（devDependencies）安装：

1
$ npm install --save-dev gulp

在项目根目录下创建一个名为 gulpfile.js 的文件：

阅读全文 »