如何写jQuery插件-下

2016/04/20
上一节我们明白了如何规划一个jQuery插件的整体结构，今天这节我们大概讲讲插件的内部实现。

;(function(factory){
    'use strict';
    // 上一节中对模块化环境的判断和使用
}(function($){
    // 下文的代码全在这个作用域中
}));

简单入门

此处我们把插件命名为 MyPlugin，那么我们先写一个函数，也叫构造函数：

function myPlugin(option){
    // 初始化参数
}

然后在jQuery原型上添加这个方法的调用：

$.fn.MyPlugin = myPlugin;

我们只需要 jQuery 对象调用 myplugin 方法即可：

$('#demo').MyPlugin();

调用构造函数初始化插件之后，插件的交互行为并不需要我们再去关心，而是在插件内部自己实现。而这种实现不会再写单独的方法，而是写在 Myplugin 的原型上，不管多少实例，都共享方法，并且这些方法在内存中只占用一份空间。

myPlugin.prototype.fn1 = function(){};
myPlugin.prototype.fn2 = function(){};

其它

jQuery 插件大部分都是 UI 方面的，初始化之后，页面会出现许多关于插件的html标签，而这些标签在页面的布局是以 BFC 布局的，所以这些插件都会有单独的样式表，这是前端组件化的一种形式。

而在React、Vue等UI框架中写组件则简单很多，HTML、javascript、CSS可以写在一起，只不过框架的底层代码帮我们做了很多额外工作。

更多

实现有很多方法，根据插件需求而定，有兴趣的可以看看github 上 star 数接近两万的 jQuery 插件 select2。