原生JavaScript插件開發學習

插件一般把它放到一個閉包用來與外部變量隔絕以防汙染全局變量。

！(function(){
          
 })()

插件制作步驟：

(一)構造函數 使用時new一下生成新的實例

var myUtil=function(name,age){
    this.name=name;
    this.age=age;
}

（二）使用原型模式 可以讓多個實例的使用一個方法

var myUtil=function(name,age){
    this.name=name;
    this.age=age;
}

myUtil.prototype
 
={

 　// 將構造函數置為MathUtil，這裏一定要將constructor重新設置回MathUtil，不然會指向Object的構造函數 
　　constructor:myUtil,
    add: function(a, b) {      
        var result= a + b;      
        alert("result == " + result);      
    }
}

（三）創建一個閉包用來與外部變量隔絕以防汙染全局變量。把以上代碼放入其中

(function(window){
   var myUtil=function(name,age){
         
 
this.name=name;
         this.age=age;
    }

   myUtil.prototype={
        // 將構造函數置為MathUtil，這裏一定要將constructor重新設置回MathUtil，不    然會指向Object的構造函數 
        constructor: MathUtil,
        add: function(a, b) {      
        var result= a + b;      
        alert("result == " + result);      
        }
  }
  window.myUtil=myUtil;//把代碼掛載到window上以便外面調用
 

 })(window)

（四）使用時new一下就可以調用裏面的方法了

!(function(window) {
         var myUtil = function(name, age) {
                    this.name = name;
                    this.age = age;
                }

          myUtil.prototype = {
                    //將構造函數置為myUtil，這裏一定要將constructor重新設置回myUtil，不 然會指向Object的構造函數 
                    //有輕度強迫癥的表示最好重定向回來，避免挖坑
 　　　　　　　　　　  constructor: myUtil,
                    add: function(a, b) {
                        var result = a + b;
                        alert("result == " + result);
                    }
                }
           window.myUtil = myUtil; //把代碼掛載到window上以便外面調用
})(window)

            var v1 = new myUtil("hellow", 14);
            v1.add(3,5);

這樣一個JavaScript插件小demo就完成了

javascript插件制作學習-制作步驟