javascript外掛的幾種寫法
阿新 • • 發佈：2019-02-05
一、js原生外掛的寫法
（1）工廠模式
var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = function(str){ _aim_obj.innerHTML = str; HelloWorld.sayHello('hello','hello text'); } return{ sayHello:_say_hello } }
var Hei = new Helloword('hello');
Hei.sayHello('Hello Word');
var Hei2 = new Helloword('hi');
Hei2.sayHello('hi');由呼叫我們可以看出，每呼叫一次就要重新示例化一次，這樣次數少了還好，加入一百次，一千次，佔用記憶體不說，還相當繁瑣，如此我們應該想到讓記憶體中儲存一份就夠了
（2）自執行函式
; var plugin =(function(){ function _firstFunc(str){ console.log(str); }; return{ firstFunc: _firstFunc, }; })();
<script type="text/javascript">
plugin.firstFunc("Hello ! I am firstFunc");
</script>這樣看起來很方便，當然也是我很喜歡的一種外掛寫法
（3）面向物件，prototype原型模式
//自定義類 function plugin(){} //提供預設引數 plugin.prototype.str = "default param"; //提供方法(如果不傳參,則使用預設引數) plugin.prototype.firstFunc = function(str = this.str){ alert(str); } //建立"物件" var p = new plugin(); //呼叫方法 p.firstFunc("Hello ! I am firstFunc");//Hello ! I am firstFunc p.firstFunc();//default param
二、jQuery外掛寫法
（1）對JQuery自身的擴充套件外掛
這種外掛是對JQuery自身的方法庫進行擴充套件的。在使用的時候通過$.MethodName()的方式直接使用。
$.extend({
handleTableUI: function(table){
varthisTable = $("#" +table);
$(thisTable).find("tr").bind("mouseover",function () {
$(this).css({color: "#ff0011", background:"blue" });
});
$(thisTable).find("tr").bind("mouseout",function () {
$(this).css({color: "#000000", background:"white" });
});
}
});<scripttype="text/javascript">
$(document).ready(function() {
$.handleTableUI("newTable");
});
</script>（2）對HTML標記或頁面元素進行擴充套件
使用這種外掛的擴充套件方式，在使用此外掛時，需要首先引用經過JQuery包裝的頁面元素，如：$("#tableId").Method()。
(function ($) {
$.fn.setTableUI= function(options){
var defaults = {
evenRowClass:"evenRow",
oddRowClass:"oddRow",
activeRowClass:"activeRow"
}
var options = $.extend(defaults, options);
this.each(function(){
varthisTable=$(this);
$(thisTable).find("tr").bind("mouseover",function () {
$(this).css({color: "#ff0011", background:"blue" });
});
$(thisTable).find("tr").bind("mouseout",function () {
$(this).css({color: "#000000", background:"white" });
});
});
};
})(jQuery);<script type="text/javascript">
$(document).ready(function() {
$("#newTable").setTableUI();
});
</script>（3）對HTML標記或頁面元素進行擴充套件
不要用在頁面顯式呼叫JQuery的方法，而是通過直接新增JQuery外掛指令碼引用，即可實現對該外掛的呼叫。
一般，如果需要用到一些全域性的JQuery外掛，即：外掛的方法不需要顯式呼叫，而是引用指令碼即可；同時，這種外掛一般對整個Web頁面起到全域性配置或設定的作用，如：對<body></body>內部的內容進行整體佈局，此時可以採用指令碼引用的方式實現。 外掛程式碼示例：(function ($) {
$.tableUI= { set: function (){
varthisTable = $("table");
$(thisTable).find("tr").bind("mouseover",function () {
$(this).css({color: "#ff0011", background:"blue" });
});
$(thisTable).find("tr").bind("mouseout",function () {
$(this).css({color: "#000000", background:"white" });
});
}
};
//此處需要進行自呼叫
$(function() {
$.tableUI.set();
});
})(jQuery);示例說明：如果上面這段程式碼在my.plugin.js檔案中，那麼，我們只需要在頁面上新增對此指令碼檔案的引用即可，引用方式為：<scriptsrc="Scripts/my.plugin.js"type="text/javascript"></script>，當然，在所有要用到JQuery的地方，需要首先新增對JQuery庫指令碼的引用。在引用型外掛的程式碼中，最主要的就是在外掛中要主動呼叫自己所寫的外掛方法，上面程式碼中有註釋的地方。否則，我們寫的外掛程式碼將不會起作用。
特別提醒，該博文有些程式碼以及說明來自大神博文，說聲抱歉，在這裡更多的是對於外掛的一種整合與記憶。