本文纪录jQuery,Zepto对js的一些封装库的学问,我愿望从本文最先去深切进修js这门言语,以及在面向对象,原型上封装的运用。让本身在js方面有可以有肯定提高。共勉
jQuery库
简朴的jQuery库的完成
须要先相识闭包,马上实行函数以及JavaScript原型的观点
(function(window) {
var jQuery = function(selector) {
// 一个对象工场,今后天生新对象就不必new了,直接实行这个要领即可
// 第一步就用new 关键字来实例化一个组织函数
return new jQuery.fn.init(selector);
}
// 定义组织函数
var init = jQuery.fn.init = function(selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll('*'));
var i, len = dom.length;
for(i = 0; i < len; i++) {
this[i] = dom[i];
}
this.length = len;
this.selector = selector || '';
}
jQuery.fn = jQuery.prototype = {
// 转变组织器的指向
constructor: jQuery,
css: function(key, val) {
},
html: function(val) {
}
}
// 衔接初始化实例的原型
// init.prototype = jQuery.fn;
jQuery.fn.init.prototype = jQuery.fn;
})(window);
Zepto库
简朴的zepto库的完成
(function(window) {
var zepto = {};
function Z(dom, selector) {
var i,
len = dom ? dom.length : 0;
for(i=0; i<len; i++) {
this[i] = dom[i]
}
this.length = len;
this.selector = selector || '';
}
zepto.Z = function(dom, selector) {
// 工场要领, 直接返回一个初始化实例
return new Z(dom, selector);
}
zepto.init = function(selector) {
var slice = Array.prototype.slice;
var dom = slice.call(document.querySelectorAll('*'));
return zepto.Z(dom, selector);
}
var $ = function(selector) {
return zepto.init(selector);
}
$.fn = {
// 修正组织器的指向
constructor: zepto.Z,
css: function(key, value) {
alert('css');
},
html: function(value) {
alert('html')
}
}
Z.prototype = $.fn;
window.$ = $;
})(window);
附上待进修衔接:
[几个JS代码手写专题](https://www.imooc.com/article/23902)