本文目录：
- 1.插件的意义
- 2.插件封装的条件
- 3.案例及需求实现
1.插件的意义
把可以重复使用的代码抽离出来，写到一个单独的文件中为以后再次使用。
2.插件封装的条件
1.插件自身的作用域与用户当前的作用域相互独立，也就是插件内部的私有变量不能影响使用者的环境变量；
2.插件需具备默认设置参数；
3.插件除了具备已实现的基本功能外，需提供部分API，使用者可以通过该API修改插件功能的默认参数，从而实现用户自定义插件效果；
4.插件支持链式调用；
5.插件需提供监听入口，及针对指定元素进行监听，使得该元素与插件响应达到插件效果。
3.案例及需求实现
需求：点击id=“add”的按钮，可以将input里的内容展现到div里，并且改变div的颜色
<div id="demo">
<input type="" name="" id="" value="好的" />
<button id="add">add</button>
</div>
插件代码封装
整个插件写在一个立即执行函数里；就是 function(){ }(); 函数自执行；保证里面的变量不会与外界互相影响，头部的window,document是底部的window,document的映射；方便内部直接调用；若引用了更多的依赖可以依次添加；最后面的undefined可不写；最好写了，保证里面再出现的undefined是未定义的意思；不被其他东西赋值。
;(function(window,document,undefined){
var addHtml = function(demo,btn){
//addHtml为插件名，调用的时候直接new一下插件名就行了并传参数或者传对象
this.div = document.getElementById(demo);
//为什么把获取的id传给this.div呢？this的指向为调用的实例；
//我们此时姑且认为this就指向这个函数；因为这样我们之后再想获取这个div的时候就可以直接用this.div了；而不是再通过document.getElementById(xxx) 去获取
this.btn = document.getElementById(btn);
this.Input = this.div.getElementsByTagName("input")[0];
this.num = 0;
//你也可以写一些其他的默认的东西；比如默认的变量啦；方便下面调用；
this.author = "xxxyyyzzz";
this.init();
//这里是调用的时候最开始执行的函数
}
addHtml.prototype = {
//给构造函数addHtml对象原型里添加属性（方法）
//把函数写在对象的属性里，这样写的好处是调用的时候直接调用对象的属性就可以
//方便查找和维护
constructor:addHtml,
//构造器指向构造函数
init:function(){
//这里的init就是在addHtml函数里this.init();执行下；
var _this = this;
////把this保存下来防止在局部函数内部取不到（局部函数内部取得this可能是别的）
this.btn.onclick = function(){
var _val = _this.Input.value;
var tempdiv = document.createElement("div");
//创建临时div存放获取input的值
tempdiv.innerHTML = _val;
_this.div.appendChild(tempdiv);
_this.setColor();
//把其它的方法写在外边，同时在这里进行调用，减少代码的耦合
};
},
setColor:function(){
this.div.style.color= "red"
},
otherFun(){
//还可以扩展其他方法；这些方法之间都可以互相调用；
//只要用this.方法名就行了；如果在取不到this比如上面的click函数中的
//this指向点击的button；只要在写var _self = this;就可以用_self
//代替this（函数实例）了，当然 n_self 也可以写成别的，比如$this等自定义的
}
}
window.addHtml = addHtml;
//把这个对象附给window底下的 名字叫addHtml的对象，
//否则在调用的时候new addHtml()怕在window的环境下找不到；
}(window,document))
调用插件代码
new addHtml("demo","add");