jquery源码基本结构和插件写法
1. jquery源码基本结构
(function(w){ //工厂 function jQuery(selector, context){ //直接返回一个new实例,这样可以隐藏new过程,使用jQuery('#id')创建对象,而不是new jQuery('#id') return new jQuery.fn.init(selector, context); } //给原型提供一个简写方式,jquery.fn等于原型属性这个写法,是最经典的jquery写法 jQuery.fn = jQuery.prototype = { }; //init才是jQuery中真正的构造函数 var init = jQuery.fn.init = function(selector, context){ }; //把构造函数的原型,替换为jQuery工厂的原型 //这么做的目的是为了实现jQuery的插件机制,让外界可以通过jQuery方便的进行扩展 //构造函数的原型 == new出来的这个实例jQuery.fn = jQuery.prototype 这样就实现了原型继承,可以在$ 对象上面封装自己的方法。 init.prototype = jQuery.fn; w.jQuery = w.$ = jQuery; }(window));
2.jquery的插件写法
jquery.fn代表jquery.prototype,可以在jquery的原型上添加方法。
jquery.extend = jquery.fn.extend;
jquery.extend在jquery上扩展方法,添加全局静态方法。
jquery.fn.extend在jquery实例上扩展方法。
2.1 jquery添加静态方法
$.extend({ sayHello: function(name) { console.log('Hello,' + (name ? name : 'aaa') + '!'); } }) $.sayHello('bbb'); //Hello,bbb
2.2 jquery插件定义
$.fn.pluginName = function(){ //返回一个jquery对象,支持链式调用 return this.each(function(){ ... }) }