jQuery，zepto源码的简单实现记录

本文记录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代码手写专题