參考文章： https://mart.coding.net/PRojects
http://www.jcodecraeer.com/a/jquery_js_Ajaxjishu/2012/0628/290.html
jQuery.extend()
為了方便用戶創建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法
1. jQuery.extend() 方法有一個重載。
*jQuery.extend(object) ,一個參數的用于擴展jQuery類本身，增加新的函數或者叫做靜態方法
2.重載版本：jQuery.extend([deep], target, object1, [objectN])
用一個或多個其他對象來擴展一個對象，返回被擴展的對象;objectN覆蓋objectN-1.....以此類推 最終覆蓋 object1.
*這個重載的方法，我們一般用來在編寫插件時用自定義插件參數去覆蓋插件的默認參數。
jQuery.fn.extend(object)
1.jQuery.fn.extend(object)擴展 jQuery 元素集來提供新的方法（通常用來制作插件）。
問：首先我們來看fn 是什么東西呢？
答：原來 jQuery.fn = jQuery.prototype，也就是jQuery對象的原型。
則：那jQuery.fn.extend()方法就是擴展jQuery對象的原型方法。
(擴展原型上的方法，就相當于為對象添加”成員方法“；
類的”成員方法“要類的對象才能調用，所以使用jQuery.fn.extend(object)擴展的方法；
jQuery.fn.extend(object)和jQuery.extend(object)方法一定要區分開來)
自執行的匿名函數/閉包
1. 什么是自執行的匿名函數? 它是指形如這樣的函數: (function {// code})(); 2. 疑問 為什么(function {// code})();可以被執行, 而function {// code}();卻會報錯? 3. 分析 (1). 首先, 要清楚兩者的區別: (function {// code})是表達式, function {// code}是函數聲明. (2). 其次, js"預編譯"的特點: js在"預編譯"階段, 會解釋函數聲明, 但卻會忽略表式. (3). 當js執行到function() {//code}();時, 由于function() {//code}在"預編譯"階段已經被解釋過, js會跳過function(){//code}, 試圖去執行();, 故會報錯; 當js執行到(function {// code})();時, 由于(function {// code})是表達式, js會去對它求解得到返回值, 由于返回值是一 個函數, 故而遇到();時, 便會被執行.
另外， 函數轉換為表達式的方法并不一定要靠分組操作符()，我們還可以用void操作符，~操作符，!操作符……
eg:
bootstrap 框架中的插件寫法： !function($){ //do something; }(jQuery);
和 (function($){ //do something; })(jQuery); 是一回事。
*匿名函數最大的用途是創建閉包（這是javaScript語言的特性之一），并且還可以構建命名空間，以減少全局變量的使用。例如： var a=1; (function()(){ var a=100; })(); alert(a); //彈出 1
一步一步的封裝jquery插件
1.定一個閉包區域，防止插件"污染"
//閉包限定命名空間(function ($) { })(window.jQuery);2.jQuery.fn.extend(object)擴展jquery 方法，制作插件
//閉包限定命名空間(function ($) { $.fn.extend({ "highLight":function(options){ //do something } });})(window.jQuery);3.給插件默認參數，實現 插件的功能
//閉包限定命名空間(function ($) { $.fn.extend({ "highLight": function (options) { var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數 this.each(function () { //這里的this 就是 jQuery對象 //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。 var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom //根據參數來設置 dom的樣式 $this.CSS({ backgroundColor: opts.background, color: opts.foreground }); }); } }); //默認參數 var defaluts = { foreground: 'red', background: 'yellow' };})(window.jQuery);*但是我們上面的插件，就不能這樣鏈式調用了。比如：$("p").highLight().css({marginTop:'100px'}); //將會報找不到css方法，原因在與我的自定義插件在完成功能后，沒有將 jQuery對象給返回出來。方案：（其實很簡單，就是執行完我們插件代碼的時候將jQuery對像return 出來，和上面的代碼沒啥區別）
4.暴露公共方法 給別人來擴展你的插件（如果有需求的話）
5.插件私有方法
6.其他的一些設置，如：為你的插件加入元數據插件的支持將使其變得更強大
all end
完整的高亮插件代碼如下：
//閉包限定命名空間(function ($) { $.fn.extend({ "highLight": function (options) { //檢測用戶傳進來的參數是否合法 if (!isValid(options)) return this; var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆蓋插件默認參數 return this.each(function () { //這里的this 就是 jQuery對象。這里return 為了支持鏈式調用 //遍歷所有的要高亮的dom,當調用 highLight()插件的是一個集合的時候。 var $this = $(this); //獲取當前dom 的 jQuery對象，這里的this是當前循環的dom //根據參數來設置 dom的樣式 $this.css({ backgroundColor: opts.background, color: opts.foreground }); //格式化高亮文本 var markup = $this.html(); markup = $.fn.highLight.format(markup); $this.html(markup); }); } }); //默認參數 var defaluts = { foreground: 'red', background: 'yellow' }; //公共的格式化 方法. 默認是加粗，用戶可以通過覆蓋該方法達到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>"; } //私有方法，檢測參數是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; }})(window.jQuery);//調用 //調用者覆蓋 插件暴露的共公方法 $.fn.highLight.format = function (txt) { return "<em>" + txt + "</em>" } $(function () { $("p").highLight({ foreground: 'orange', background: '#ccc' }); //調用自定義 高亮插件 });
新聞熱點
疑難解答
