1.组件封装一般单独写在一个js文件里
2.整个插件写在一个立即执行函数里;就是function(){}();函数自执行;保证里面的变量不会与外界互相影响
function(win,doc,$,undefined){
}(window,document,jQuery)
或者写在一个闭包里
(function(){
}())
3.定义构造函数
//插件名,调用的时候直接new一下插件名就行了并传参数或者传对象
(function(window, undefined) {
//一般习惯将这个构造函数名手写字母大写
var Star = function(id){ // function Star(doc){}
// this的指向为调用的实例;我们此时姑且认为this就指向这个函数;因为这样我们之后再想获取这个btn就可以直接用this.btn了;
而不是在document.getElementById(....)
this.btn = document.getElementByTagName("button");
this.btn = document.getElementById(id);
//你也可以定义一些默认的参数
this.author = "iamlhr";
//执行下你下面写的函数;如果整个插件没有执行函数;一堆方法function就不调用;这里是调用的时候最开始执行的函数
this.init();
}
Star.prototype = {
init: function(){ //调用下面写的函数
this.otherMethod()
},
otherMethod: function(){}
};
}(window));
4.创建实例
<html>
<div id=“main”></div>
<div id="myShaoe"></div>
</html>
<script>
new Star("main"); //这里是实例1调用插件的代码
new Star("myShape"); //这里是实例2调用插件的代码
</script>
5.插件封装完成