1.框架封装
很多人不明白框架封装的原理。最近刚刚学了可框架封装，这里我打算总结一下我的心得。
首先，看下我们要达到的目标；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
<script src="../jquery-3.1.0.js"></script>
<script>
var $dvs = $( 'div' );
$dvs.each(function(i,v){
v.innerHTMl=i;
})
</script>
</html>
这个案例很简单，只要是使用Jquery往页面里面的div 添加对应的下标。好现在我们自己来实现上面的方法。
1.首先我们要进行一些准备工作。比如说each函数，判断是否为伪数组等。
1.1完成 each方法
function isArrayLike(arr){
var length=arr&&arr.length;
return typeof length ==='number' && length>=0;
}
1.2判断时候为伪数组的方法
function each(arr,callback){
var i,k;
if(isArrayLike(arr)){
for(i=0;i<arr.length;i++){
if(callback.call(arr[i],i,arr[i]) === false) break;
}
}else{
for(k in arr){
if(callback.call(arr[k],k,arr[k]) === false) break;
}
}
}
接下来是是怎么写构造函数了,上面看起好是工厂方法模式，但是我们一般创建一个函数的实例，一般使用
new（构造器模式），那么这个使用我们要把这两个方法结合起来使用才能达到上面的效果。
function I(selector){
return new hpsteam(selector);
}
function hpsteam(selector){
var list=document.querySelectorAll(selector);
[].push.apply(this,list);
return this;
}
注意：有可能有人很疑惑，为啥使用querySelectorAll来获取节点，我这里解释下，由于其他方法
获取接待你不方便，而且还不支持css3选着器获取节点。所以为了简单所以选着里querySelectorAll；
好现在完成了一大步，我们把接下来把 .each()部分完成。很明显，这里我们需要采用继承的方式
hpstream.prototype={
constructor:hptream,
each:function(callback){
each(this,callback);
}
}
这样之后我们就可使用我们方法来调用了,效果达到了。
var dvs = I( 'div' );
dvs.each(function(i,v){
v.innerHTMl=i;
})
这样就已经完成了，只要我们把我们写的代码放到一个沙箱环境里面就完美了。
并且添加
window.I=I;
日子一天一天过去，突然有一天。我们想这样子,扩展原型上的方法，但是我们发现我们写代码
没有任何扩展性，这个需要重写了，那么我们我们在设计代码的使用就用过考利扩展性了。
var dvs = I( 'div' );
dvs.map(function(i,v){ //报错
v.innerHTMl=i;
})
那么怎么可以做到扩展呢？？由于我们只对外暴露了I一个借口那么，只能在I对象上做文章了，
其实我们可以这个样子。
hpsream.prototype=I.prototype;
然后我们在I.prototype上进行方法添加，这样就可以啦，但是出现可一个非常严重的问题；
由于给构造函数的原型赋予了新的原型，那么原来原型的方法就全没了。。。。心血白费。所以
这种方法是不可取的。
接下来介绍jquery里面使用的方法。
//向外暴露的接口
function I(selector){
return new I.prototype.init(selector);
}
I.prototype={
constructor:I,
init：funciton(selector){ //我们真是的构造函数；
var list=document.querySelectorAll(selector);
[].push.apply(this,list);
return this;
},
each:function(callback){
each(this,callback);
}
}
I.prototype.init.prototype=I.prototype;
--------------------------------
在很久很久之后，我们扩展
I.prototype.n=1;
I().n=1;
这样子我们的扩展性就非常好了。。。。
我们可以在把上的代码简化下，
//向外暴露的接口
function I(selector){
return new I.prototype.init(selector);
}
I.fn.I.prototype={
constructor:I,
init：funciton(selector){ //我们真是的构造函数；
var list=document.querySelectorAll(selector);
[].push.apply(this,list);
return this;
},
each:function(callback){
each(this,callback);
}
}
I.fn.init.prototype=I.fn;
--------------------------------
在很久很久之后，我们扩展
I.prototype.n=1;
I().n=1;
这个就是jquery的代码 不超过二十行。好了写完了，接线来把所有代码都贴出来
common.js
(function(){
function I(selector){
return new I.fn.init(selector);
}
I.fn=I.prototype={
constructor:I,
init:function(selector){
var list=select(selector);
[].push.apply(this,list);
return this;
},
each:function(callback){
each(this,callback);
}
}
I.fn.init.prototype = I.fn;
function isArrayLike(arr){
var length=arr&&arr.length;
return typeof length ==='number' && length>=0;
}
function each(arr,callback){
var i,k;
if(isArrayLike(arr)){
for(i=0;i<arr.length;i++){
if(callback.call(arr[i],i,arr[i]) === false) break;
}
}else{
for(k in arr){
if(callback.call(arr[k],k,arr[k]) === false) break;
}
}
}
function select(selector){
return document.querySelectorAll(selector);
}
window.I=I;
})()
I.fn.n=100;
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="common.js"></script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
<script>
var divs=I('div');
I('div').each(function(i,v){
v.innerHTML=i;
})
</script>
</html>
网友评论