javascript插件的幾種寫法
- 2019 年 11 月 4 日
- 筆記
一、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庫腳本的引用。在引用型插件的程式碼中，最主要的就是在插件中要主動調用自己所寫的插件方法，上面程式碼中有注釋的地方。否則，我們寫的插件程式碼將不會起作用。
特別提醒，該博文有些程式碼以及說明來自大神博文，說聲抱歉，在這裡更多的是對於插件的一種整合與記憶。
