以jquery和zepto为例子
1.传入选择器
2.使用$时返回 zepto.init初始化方法
3.通过slice和dom选择器将专为微dom节点并以数组形式存在
4.将得到的数组放入zepto.Z函数内，依次循环数组内的每一项
5.new z得到一个Z的实例（z本身是构造函数）
6.去构造函数内执行，查找节点的长度和节点选择器并以数组的形式列出来
7.在Z的原型上挂一个$.fn函数
8.$.fn本身是一个对象，对象中就有css html要返回的东西
9.页面返回对象选择器的该有样式呈现在浏览器上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./my-zepto.js"></script>
</head>
<body>
<p>jquery test1</p>
<p>jquery test2</p>
<p>jquery test3</p>
<div id="div1">
<p>jquery test in div</p>
</div>
</body>
<script>
var $p=$('p');//传入选择器
$p.css('font-size','40px');
console.log($p.html())
var $div=$('#div1');
$div.css('color','blue');
console.log($div.html())
</script>
</html>
(function(window){
var zepto={}
//5.构造函数Z
function Z(dom,selector){
var i,len=dom?dom.length:0;
for(i=0; i<len;i++){
this[i]=dom[i]
}
}
//4.zepto下的Z
zepto.Z=function(dom,selector){
//实例化Z
return new Z(dom.selector)
}
//3.zepto初始化
zepto.init=function(selector){
//以数组形势存在
var slice=Array.prototype.slice;
//通过selector查询到若干dom节点
var dom=slice.call(document.querySelectorAll(selector));
return zepto.Z(dom,selector)
}
//2.全局$
var $=function(selector){
return zepto.init(selector)
}
//1.挂载全局$
window.$=$
//7.$.fn是对象
$.fn={
css:function(key,value){
//返回css在浏览器上该有的样式
console.log('css')
},
html:function(value){
//返回html在浏览器上该有的样式
return ('这是一个模拟的html')
}
}
//6.Z原型上挂载$.fn
Z.prototype=$.fn
})(window)
拓展型
- jquery插件机制 轮播图插件，tab切换插件等
$.fn.getNodeName=function(){
return this[0].nodeName
}
其实就是在$.fn再添加一个属性，这个属性是一个getNodeName的方法,且这个方法包含插件要执行的方法和属性
将这个挂载到$.fn上，然后去挂在到Z.prototype上，实现和jquery共存的插件
好处：只有$暴露在window全局变量,不会暴露多个变量造成全局污染
插件统一在$.fn.xxxx上方便调用
网友评论