原⽣JS组件编写，构造函数封装步骤
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了；            ⽽不是在ElementById（....）
this.btn  = ElementByTagName("button");
this.btn  = ElementById(id);
//你也可以定义⼀些默认的参数
this.author = "iamlhr";
//执⾏下你下⾯写的函数；如果整个插件没有执⾏函数；⼀堆⽅法function就不调⽤；这⾥是调⽤的时候最开始执⾏的函数
this.init();
}
Star.prototype = {
    constructor:Star,//构造器指向构造函数 ，防⽌构造器指向Object的情况；
init: function(){ //调⽤下⾯写的函数jquery是什么功能组件
      herMethod()
    },
otherMethod: function(){}
};
　window.Star = window.Star || Star; //把这个对象附给window底下的 名字叫Star的对象；要不你调⽤的时候  new Star() 怕在window的环境下不到；
}(window));
4.创建实例
<html>
  <div id=“main”></div>
  <div id="myShaoe"></div>
</html>
<script>
new Star("main");    //这⾥是实例1调⽤插件的代码
new Star("myShape");    //这⾥是实例2调⽤插件的代码</script>
5.插件封装完成

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。