js寫插件教程入門

原文地址：https://github.com/lianxiaozhuang/blog

轉載請註明出處

 

1. 點擊add能夠添加個自input的內容到div裏並實現變顏色

 

 <div id="demo-1">
        <input  type="" name="" id="" value="好的" />     
        <button id="add-1">add</button>  
    </div>          
    <div id="demo-2">    
        <input  type="" name="" id="" value="11" />       
        <button id="add-2">add</button>   
    </div>  

 

整個插件寫在一個當即執行函數裏；就是 function(){ }(); 函數自執行；
保證裏面的變量不會與外界互相影響，頭部的win啊,doc啊 $ 啊
都是底部的window,document,jQuery的映射；方便內部直接調用；
固然你不引用jq的話頭部的$和底部的jQuery幹掉；你若引用了更過的依賴
能夠依次添加；最後面的undefined可不寫；最好寫了，保證裏面再出現
的undefined是未定義的意思；不被其餘東西賦值。

;(function(win,doc,$,undefined){

}(window,document,jQuery))

好了下面是時候展示真正的技術了
function前的 ;(分號) 這不是寫錯了,爲了防止那個二貨寫的js結束沒有分號；
而可能發生語法上的混淆報錯;

 

+function(){   }()
!function(){   }()
~function(){   }()
viod function(){   }()
(function(){   })()
(function(){   }())

function前的 +(加號或者 ! ~)；能夠把function 直接轉換爲可執行的；

和用括號括起來同樣的做用，由於!+-()這些符號的運算符是最高的，因此

會把其後或者其中的當作表達式處理；故函數會自執行，而直接寫function(){}()

會報錯，function(){}只是匿名函數聲明；而寫　var b = function(){}； b()是能夠的

;(function(win,doc,undefined){ 

var addHtml  = function(demo,btn){
    //插件名，調用的時候直接new一下插件名就好了並傳參數或者傳對象
    //(通常這個函數名手寫字母大寫比較好，構造函數嘛，其實也是函數)        
    //很明顯我要傳id名；這裏傳什麼均可以的其實； 

        this.div = doc.getElementById(demo);
        //爲何把獲取的id傳給this.div呢？this的指向爲調用的實例；
        //咱們此時姑且認爲this就指向這個函數；由於這樣咱們以後再想獲取這個
        //div就能夠直接用this.div了好嗎；而不是在document.getElementById（。。。。）  

        this.btn  = doc.getElementById(btn);       
        this.Input =  this.div.getElementsByTagName("input")[0];
        //既然找到了div咱們在找下div下面的input；固然你要不input用
        //獲取id的形式傳參數我沒有意見      
        
        this.num = 0;
        //你也能夠寫一些其餘的默認的東西；好比默認的變量啦；方便下面調用；
        //這裏寫了什麼都不會報錯；只是有用沒用的問題這行能夠忽略    

        this.author = "lianxiaozhuang";       
        this.init();
        //執行下你下面寫的函數吧；你想一想；若是整個插件沒有執行函數；
        //多很差；一堆方法function就不調用；對；這裏是調用的時候最開始
        //執行的函數  
    }    
    
    //；給構造函數addHtml對象原型裏添加屬性（方法）   

    addHtml.prototype = {
        //給函數寫方法；這裏可能不止一個函數；你還記得你在全局裏寫一個個
        //的function嗎；賊亂找也很差找；把一個個函數都寫到對象的屬性裏；
        //調用函數就直接調用對象的屬性； 

        constructor:addHtml,
        //構造器指向構造函數；這行其實不寫沒啥毛病；不過防止構造器
        //指向Object的狀況；你仍是裝逼寫上吧； 由於當 addHtml.prototype = {}
        //的時候；把一個字面量的對象付給了他的原型上，而{}是由Object產生；
        //故此時addHtml的prototype指向了Object,因此要重新指向

        init:function(){
        //這裏的init；你也能夠寫成  nimade:function(){ }都沒有問題；
        //就是在addHtml函數裏this.init();執行下；你明白了這裏的this了吧；
        //整個插件裏this都是隻得這個函數（實例）；除非你又引入了其餘的函數裏的
        //（其餘函數裏的可能指向就是window了）         

            var _self = this;
            ////把this保存下來防止在局部函數內部取不到（局部函數內部取得this可能
            //是別的）       
            this.btn.onclick = function(){             
                var _val = _self.Input.value;                 
                var tempdiv = doc.createElement("div");
                //建立臨時div存放獲取input的值              
                tempdiv.innerHTML = _val;                 //console.log(tempdiv);                 
                _self.div.appendChild(tempdiv);                                                
                _self.setColor();
                //你把全部方法都寫在init裏絕對沒問題；仍是那句話；
                //說好的鬆耦合呢；說好的不寫一堆堆的function一層層亂套呢         
            };                
        },    
        setColor:function(){            //console.log(this.div)    

            this.div.style.color= "red"      

        },
        /*        
        
        otherFun(){           
            
            //固然你還能夠擴展其餘方法；這些方法之間均可以互相調用；          
            //  只要用this.方法名就好了；若是在取不到this好比上面的click函數中的
            //this指向點擊的button；只要在寫var _self = this;就能夠用_self 
            // 代替this（函數實例）了；固然_self  也能夠寫成別的 好比$this等自定義的   
            
        }
        
        */           
                                          }       
        win.addHtml = addHtml;
        //把這個對象附給window底下的 名字叫addHtml的對象；要不你調用的時候 
        // new addHtml() 怕在window的環境下找不到； 

}(window,document))

調用new addHtml("demo-1","add-1");//這裏是實例1調用插件的代碼

new addHtml("demo-2","add-2");    
//這裏是實例2調用插件的代碼    
//是否是明白爲何要寫插件了；要封裝；兩個相同組件即便有相同的class名在dom操做的時候
//也不會相互衝突；由於他們都new出來了個自的實例；有本身的this；有本身的一套方法了
//（其實方法都在原型裏是公用的；操做各自的dom）