本文主要和大家分享js如何寫插件教程分享，希望能幫助到大家。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>document</title>
<style type="text/css">
#demo-1, #demo-2 {
width: 200px;
height: 200px;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<h3>點擊add可以添加個自input的內容到p里并實現變顏色</h3>
<!--組件實例1-->
<p id="demo-1">
<input type="" name="" id="" value="好的" />
<button id="add-1">add</button>
</p>
<br /> <br />
<!--組件實例2-->
<p id="demo-2">
<input type="" name="" id="" value="11" />
<button id="add-2">add</button>
</p>
<script type="text/javascript">
//這里是插件的代碼；我為了方便都寫到一個html中了；請把這個script標簽中的內容單獨寫在一個js文件里
//整個插件寫在一個立即執行函數里；就是function(){}();函數自執行；保證里面的變量不會與外界互相影響
//頭部的win啊,doc啊 $ 啊都是底部的window,document,jQuery的映射；方便內部直接調用；
//當然你不引用jq的話頭部的$和底部的jQuery干掉；你若引用了更過的依賴可以依次添加；
//最后面的undefined可不寫；最好寫了；保證里面再出現的undefined是未定義的意思；不被其他東西賦值；
//好了下面是時候展現真正的技術了
//function前的!號(嘆號)或者;(分號)這不是寫錯了,為了防止那個二貨寫的js結束沒有分號；而可能發生報錯
(function (win, doc, undefined) {
//我們隨便寫一個插件吧 比如你要點擊按鈕 添加input的值到 p里
var addHtml = function (demo, btn) {//插件名，調用的時候直接new一下插件名就行了并傳參數或者傳對象(一般這個函數名手寫字母大寫比較好，構造函數嘛，其實也是函數)
//很明顯我要傳id名；這里傳什么都可以的其實；
this.p = doc.getElementById(demo);//為什么把獲取的id傳給this.p呢？this的指向為調用的實例；我們此時姑且認為this就指向這個函數；因為這樣我們之后再想獲取這個p就可以直接用this.p了好嗎；而不是在document.getElementById（。。。。）
this.btn = doc.getElementById(btn);
this.Input = this.p.getElementsByTagName("input")[0];//既然找到了p我們在找下p下面的input；當然你要不input用獲取id的形式傳參數我沒有意見
this.num = 0;//你也可以寫一些其他的默認的東西；比如默認的變量啦；方便下面調用；這里寫了什么都不會報錯；只是有用沒用的問題這行可以忽略
this.author = "lianxiaozhuang";
this.init();//執行下你下面寫的函數吧；你想想；如果整個插件沒有執行函數；多不好；一堆方法function就不調用；對；這里是調用的時候最開始執行的函數
}
//；給構造函數addHtml對象原型里添加屬性（方法）
addHtml.prototype = {//給函數寫方法；這里可能不止一個函數；你還記得你在全局里寫一個個的function嗎；賊亂；
//找也不好找；把一個個函數都寫到對象的屬性里；調用函數就直接調用對象的屬性；
constructor: addHtml,//構造器指向構造函數；這行其實不寫沒啥毛病；不過有時候防止構造器指向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 tempp = doc.createElement("p");//創建臨時p存放獲取input的值
tempp.innerHTML = _val;
//console.log(tempp);
_self.p.appendChild(tempp);
_self.setColor();//你把所有方法都寫在init里絕對沒問題；還是那句話；說好的松耦合呢；說好的不寫一堆堆的function一層層亂套呢
};
},
setColor: function () {
//console.log(this.p)
this.p.style.color = "red"
}
}
win.addHtml = addHtml;//把這個對象附給window底下的 名字叫addHtml的對象；要不你調用的時候 new addHtml() 怕在window的環境下找不到；
}(window, document))
</script>
<script type="text/javascript">
new addHtml("demo-1", "add-1");//這里是實例1調用插件的代碼
new addHtml("demo-2", "add-2"); //這里是實例2調用插件的代碼
//是不是明白為什么要寫插件了；要封裝；兩個相同組件即使有相同的class名在dom操作的時候也不會相互沖突；因為他們都new出來了個自的實例；有自己的this；有自己的一套方法了（其實方法都在原型里是公用的；操作各自的dom）
</script>
<!--這里是最簡單的插件寫法；當然還有傳對象參數的插件等等。。。。-->
</body>
</html>相關推薦：
Jquery操作Select 簡單方便 一個js插件搞定_jquery
js實現md5加密插件代碼分享
JS代碼實現瀑布流插件
以上就是js如何寫插件教程分享的詳細內容，更多請關注php中文網其它相關文章！