Skip to content

05插件接口设计

jQuery插件的开发分为两种:

☑ 一种是挂在jQuery命名空间下的全局函数,也可称为静态方法;

☑ 另一种是jQuery对象级别的方法,即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法。

提供的接口

$.extend(target, [object1], [objectN])

接口的使用

<script> jQuery.extend({ data: function() {}, removeData: function() {} })

jQuery.fn.extend({ data: function() {}, removeData: function() {} }) </script>

jQuery的主体框架就是之前提到的那样,通过工厂模式返回一个内部的init构造器生成的对象。 但是根据一般设计者的习惯,如果要为jQuery添加静态方法或者实例方法从封装的角度讲是应该提供一个统一的接口才符合设计的。

jQuery支持自己扩展属性,这个对外提供了一个接口,jQuery.fn.extend()来对对象增加方法, 从jQuery的源码中可以看到,jQuery.extend和jQuery.fn.extend其实是同指向同一方法的不同引用。

在javascript的世界中一共有四种上下文调用方式:方法调用模式、函数调用模式、构造器调用模式、apply调用模式:

☑ jQuery.extend调用的时候上下文指向的是jQuery构造器

☑ jQuery.fn.extend调用的时候上下文指向的是jQuery构造器的实例对象了

jQuery的extend代码实现比较长,我们简单说一下重点:

<script> aAron.extend = aAron.fn.extend = function() { var options, src, copy, target = arguments[0] || {}, i = 1, length = arguments.length;

// 只有一个参数,就是对jQuery自身的扩展处理 // extend, fn.extend if (i === length) { target = this; // 调用的上下文对象jQuery / 或者实例 i--; }

for (; i < length; i++) { // 从i开始取参数,不为空开始遍历 if ((options = arguments[i]) != null) { for (name in options) { copy = options[name]; // 覆盖拷贝 target[name] = copy; } } } return target; } </script>

共 20 个模块,1301 篇 Markdown 文档。