深入理解jQuery框架-框架结构
这是本人结合资料视频总结出来的jQuery大体框架结构，如果大家都熟悉了之后，相信你们也会写出看似高档的js框架；
jquery框架的总体结构
(function(w, undefined){ //定义一些变量和函数 var //对外提供的接口 jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }; //结jQuery对象添加一些方法和属性 //jQuery的继承方法 //jQuery.extend 扩展一些工具的方法（静态方法） jQuery.trim(); //Sizzle 复杂选择器的实现 //Callbacks 回调对象--函数的统一管理 //Deferred 延迟对象，对异步的统一管理 //support 功能检测 //Data 数据缓存 //queue 队列管理 //Attribute 属性操作 //Event 事件处理 //DOM操作 添加删除、包装筛选等 //CSS操作 //提交的数据和ajax //运动/动画 FX //坐标和大小 //支持的模块化的模式 w.jQuery = w.$ = jQuery; })(window);
jquery为什么要使用匿名函数来封装框架
阅读jquery源码，我们可以看出jquery使用的是匿名函数来封装框架，那么为什么要使用这种方式呢，又有什么好处？
1.什么是匿名函数？
// 匿名函数的写法 function(){ console.log("test"); } // 将变量赋值给一个匿名函数 var test = function(){ return 0; } console.log(test); //打印的是变量test，即函数 console.log(test()); //打印0，test + ()表示调用这个方法
2.匿名函数自调用的方式
匿名函数有两种调用方式，第一种是()()、第二种是 (())
// ()()调用方式
(function(){ console.log("匿名函数-自调用方法1"); })();
// (())调用方式 (function(){ console.log("匿名函数-自调用方法2"); }());
3.匿名函数传参
/*错误方式*/ (function(window){ console.log(window); //undefined })(); /*正确方式*/ var jQuery; (function(win, jQuery){ console.log(win); // })(window, jQuery);
4.使用匿名函数对外提供一个接口
(function(w) { var Person = function() { this.name = "cxb"; this.talk = function() { console.log("hello, I'm " + this.name); } } w.Person = Person; })(window) var p = new Person(); console.log(p.name); p.talk();
5.使用匿名函数的好处:
防止变量方法冲突 变量与方法是独立的，写在匿名函数的变量或函数属于局部的，不会受外面的干扰，也不会影响全局变量
(function(){ var a = 10; var fun = function() { console.log("fun method"); } })(); console.log(a); //报错 undefined fun(); //报错 fun is not a function
为什么可以直接使用jQuery 或 $为调用jquery方法？
对象创建的比较
创建对象方式一：
function Student() { this.name = "cxb"; this.talk = function() { return "我叫" + this.name; } } var stu1 = new Student(); var stu2 = new Student();
创建对象方式二：
function Student() { this.name = "cxb"; } Student.prototype.talk = function() { return "我叫" + this.name; } var stu1 = new Student(); var stu2 = new Student();
方式一与方式二产生的结构几乎是一样的，而本质区别就是：方式二new产生的二个实例对象共享了原型的talk方法，这样的好处节省了内存空间，方式一则是要为每一个实例复制talk方法，每个方法属性都占用一定的内存的空间，所以如果把所有属性方法都声明在构造函数中，就会无形的增大很多开销，这些实例化的对象的属性一模一样，都是对this的引用来处理。除此之外方式一的所有方法都是拷贝到当前实例对象上。方式二则是要通过scope连接到原型链上查找，这样就无形之中要多一层作用域链的查找了。
所以说在jQuery中，可以看到很多 jQuery.fn 这样的写法（事实上在jQuery中，使用jQuery.fn替换了jQuery.prototype)。
浅拷贝与深拷贝
1. js对象的浅拷贝
var a = [1,2,3]; var b = a; var c = {name:"cxb", age:26}; var d = c; console.log(a); console.log(b); console.log(c); console.log(d);
[1, 2, 3]
[1, 2, 3]
Object {name: "cxb", age: 26}
Object {name: "cxb", age: 26}
b[2] = 5; d.age = 20; console.log(a); console.log(b); console.log(c); console.log(d);
[1, 2, 5]
[1, 2, 5]
Object {name: "cxb", age: 20}
Object {name: "cxb", age: 20}
2.js数组的深拷贝
var arr1 = [1, 2, 3]; var arr2 = []; function deepCopy(arr1, arr2) { for(var i=0; i<arr1.length; i++) { arr2[i] = arr1[i]; } } deepCopy(arr1, arr2); console.log(arr1); console.log(arr2); arr2[2] = 5; console.log(arr1); console.log(arr2);
[1, 2, 3]
[1, 2, 3]
[1, 2, 3]
[1, 2, 5]
3.js对象的深拷贝
function Parent() { this.name = "李四"; this.age = 40; this.talk = function() { console.log("hello, I'm "+ this.name); } } function Child() { this.name = "张三"; this.age = 20; this.sound = function() { console.log("haha"); } } Child.prototype = new Parent(); var child = new Child(); for(var key in child) { console.log(key); }
4.hasOwnProperty来过滤原型链上的属性
for(var key in child) { if(child.hasOwnProperty(key)) console.log(key); }
5.完整clone一个对象的方法
var child = new Child(); var childObject = {}; for(var key in child) { if(child.hasOwnProperty(key)) childObject[key] = child[key]; } console.log(childObject.name); console.log(childObject.age); childObject.sound(); childObject.talk();
jQuery框架的实现原理
/******************** jQuery 框架部分 ************************/ (function(w, undefined){ //第一步：创建一个jQuery函数 var jQuery = function() { //第四步： return new jQuery.fn.init(); } //第三步： jQuery.fn = jQuery.prototype; //是覆盖prototype jQuery.fn = { //当创建了一个函数之后，js源码会自动生成 jQuery.prototype.constructor = jQuery; //在jQuery中使用这个是为了防止恶意修改：如 jQuery.prototype.constructor = Array; constructor : jQuery, init : function() { return this; }, }; jQuery.fn.init.prototype = jQuery.fn; //如果不使用这个，在第四步当中是无法使用new的 //第五步：使用extend将jQuery模块化（其实原码并不是这样的）这里使用了拷贝，关于拷贝请看 4.js浅拷贝与深拷贝 //好处：插件扩展时直接使用此方法 jQuery.fn.extend = jQuery.extend = function( ) { var target = this, source = arguments[0] || { } ; for(var key in source) { if(source.hasOwnProperty(key)) { jQuery.fn[key] = jQuery[key] = source[key]; } } return target; } //第六步：模块一 jQuery.fn.extend({ html : function() {}, text : function() {}, }); //第六步：模块二 jQuery.extend({ ajax : function() { //处理json格式的参数及回调函数success,error console.log("ajax method"); }, each : function() {}, }); //第二步：对外提供一个接口 w.jQuery = w.$ = jQuery; })(window); //测试1 jQuery.ajax(); //测试2：外部框架的扩展 /******************** 基于jQuery框架的ui框架部分 ************************/ (function(w, jQuery) { //jQuery对象的方法扩展 jQuery.fn.extend({ drag : function() { console.log("drag method"); }, dialog : function() { console.log("dialog method"); }, }); //jQuery类的方法扩展 jQuery.extend({ tool : function() { console.log("tool method"); }, //.... }); })(window, jQuery);
示例
<html lang="zh-CN">
<head>
<script>
(function(win, undefined){ var doc = win.document; var loc = win.location; var jQuery; jQuery = function(selector, context){ return new jQuery.fn.init(selector, context); } var _jQuery = win.jQuery, _$ = win.$; jQuery.fn = jQuery.prototype; jQuery.fn = { constructor: jQuery, init : function(selector, context){ if(selector.charAt(0)=="#"){ this.context = doc.getElementById(selector.substr(1)); }else if(selector.charAt(0)=="."){ this.context = doc.getElementsByName(selector.substr(1)); }else if(selector.charAt(0)==":"){ this.context = doc.getElementsByTagName(selector.substr(1)); }else{ this.context = doc.getElementsByTagName(selector); } return this; } } jQuery.fn.init.prototype = jQuery.fn; jQuery.fn.extend = jQuery.extend = function() { var target = this; var source = agruments[0] || { }; for (var p in source) { if (source.hasOwnProperty(p)) { target[p] = source[p]; } } return target; } // 对象的方法 jQuery.fn.extend( { val : function() { if((typeof _value)=="undefined"){ return this.context.value; }else if((typeof _value)=="string"){ return this.context.value=_value; } }, html : function() {}, text : function() {}, attr : function() {}, prop : function() {}, //... }); // CSS操作 jQuery.fn.extend( { addClass : function() {}, removeClass : function() {}, css : function() {}, //... }); // 插件扩展的方法 jQuery.extend( { ajax: function() {}, each: function() {}, when: function() {}, //... });
// 对外提供的接口，即使用$ 或 jQuery win.jQuery = win.$ = jQuery; })(window); window.onload = function(){ var value = jQuery("#test").val(); console.log("------"+value); }
</script>
</head>
<body>
<input type="text" id="test" value="123456" />
</body>
</html>
