原生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了;

            而不是在document.getElementById(....)

         this.btn  = document.getElementByTagName("button");

         this.btn  = document.getElementById(id);

         //你也可以定义一些默认的参数

         this.author = "iamlhr";


         //执行下你下面写的函数;如果整个插件没有执行函数;一堆方法function就不调用;这里是调用的时候最开始执行的函数

         this.init();

     }

  Star.prototype = {
         constructor:Star,//构造器指向构造函数 ,防止构造器指向Object的情况;
    init: function(){ //调用下面写的函数
      this.otherMethod()
    },
    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.插件封装完成

 

原文地址:https://www.cnblogs.com/iamlhr/p/10505071.html