jq外掛的機制，$.extend()和$.fn.extend()的區別及閉包的相關簡單案例
阿新 • • 發佈：2019-01-29
<body> <p>1111</p> <ul> <li style="margin: 10px 0">蘋果</li> <li style="margin: 10px 0">梨子</li> <li style="margin: 10px 0">香蕉</li> <li style="margin: 10px 0">橙子</li> <li style="margin: 10px 0">柚子</li> </ul> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> <script type="text/javascript"> /*######################jquery的外掛機制##################################*/ /** * 擴充套件jquery物件的方法【物件例項的方法？？】（通常用來製作外掛）。 */ ;(function($){ $.fn.extend({ 'bold' : function(){ return this.css({'fontWeight' : 'bold'}); } }); })(jQuery); $(function(){ $('p').bold(); }); /** * 擴充套件jQuery物件本身 */ ;(function($){ $.extend({ 'minValue' : function(a, b){ return a < b ? a : b; }, 'maxValue' : function(a, b){ return a > b ? a : b; } }) ; })(jQuery); $(function(){ var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等於 100 var max_v = $.maxValue(i, j); // max_v 等於 101 console.log(min_v) ; console.log(max_v) ; }); /** * 過載版本 * 這個過載的方法，我們一般用來在編寫外掛時用自定義外掛引數去覆蓋外掛的預設引數。 */ var male_people = {} ; var people = { name : '張三', age : 18, sex : '男' } ; var male = { height : 175, weight : 50, food : 'meat' } ; var male_people = jQuery.extend(people,male) ; console.log('male_peopleObj', male_people); /*######################自執行的匿名函式/閉包######################*/ /** * 匿名函式最大的用途是建立閉包（這是JavaScript語言的特性之一）， * 並且還可以構建名稱空間， * 以減少全域性變數的使用。 */ var a = 1 ; (function(){ var a = 100 ; })() ; // alert(a) ; // a = 1 ; console.log(a) ; // a = 1 ; /*######################一步一步封裝JQuery外掛######################*/ /** * 1、定一個閉包區域，防止外掛"汙染" */ ;(function($){ })(window.jQuery) ; /** * 2、jQuery.fn.extend(object)擴充套件jquery 方法，製作外掛 */ ;(function($){ $.fn.extend({ 'highLight' : function(options){ } }) ; })(window.jQuery) ; /** * 3、給外掛預設引數，實現外掛的功能 */ // ;(function($){ // $.fn.extend({ // 'highLight' : function(options){ // // 使用jQuery.extend 覆蓋外掛預設引數 // var opts = $.extend({}, defaults, options); // /* // * 遍歷所有的高亮的dom，當呼叫highLight()外掛的是一個集合的時候。 // * // * 這裡的this就是jQuery物件 // */ // // $.each(function(){ // this.each(function(){ // // 獲取當前dom的jQuery物件，這裡的this是當前迴圈的dom // var $this = $(this); // // 根據引數來設定dom的樣式 // $this.css({ // color: opts.fontColor, // backgroundColor: opts.backgroundColor // }); // }); // // 返回當前物件，以便用來鏈式呼叫 // return this ; // } // }) ; // // 預設引數 // var defaults = { // fontColor: 'red', // backgroundColor: 'yellow' // }; // })(window.jQuery); /** * 4、暴露公共方法，給別人來擴充套件你的外掛（如果有需求的話） * * 比如的高亮外掛有一個format方法來格式話高亮文字， * 則我們可將它寫成公共的，暴露給外掛使用者， * 不同的使用著根據自己的需求來重寫該format方法， * 從而是高亮文字可以呈現不同的格式。 * */ // ;(function($){ // $.fn.extend({ // 'highLight' : function(options){ // // 使用jQuery.extend 覆蓋外掛預設引數 // var opts = $.extend({}, defaults, options); // /* // * 遍歷所有的高亮的dom，當呼叫highLight()外掛的是一個集合的時候。 // * // * 這裡的this就是jQuery物件 // */ // // $.each(function(){ // // this.each(function(){ // this.each(function(){ // // 獲取當前dom的jQuery物件，這裡的this是當前迴圈的dom // var $this = $(this); // // 根據引數來設定dom的樣式 // $this.css({ // color: opts.fontColor, // backgroundColor: opts.backgroundColor // }); // //格式化高亮文字 // var markup = $this.html(); // markup = $.fn.highLight.format(markup); // $this.html(markup); // }); // // 返回當前物件，以便用來鏈式呼叫 // return this ; // } // }) ; // // 預設引數 // var defaults = { // fontColor: 'red', // backgroundColor: 'yellow' // }; // // 4、公共的格式化方法。預設是加粗，使用者可以通過覆蓋該方法達到不同的格式化效果。 // $.fn.highLight.format = function (str) { // return "<h3>" + str + "</h3>"; // } // })(window.jQuery); /** * 5、外掛私有方法 * * 有些時候，我們的外掛需要一些私有方法，不能被外界訪問。 * 例如 我們外掛裡面需要有個方法 來檢測使用者呼叫外掛時傳入的引數是否符合規範。 * */ ;(function($){ $.fn.extend({ 'highLight' : function(options){ if(!isValid(options)){ alert('CSS樣式輸入的不正確'); return false; } ; console.log('還有繼續執行？？？'); // 使用jQuery.extend 覆蓋外掛預設引數 var opts = $.extend({}, defaults, options); /* * 遍歷所有的高亮的dom，當呼叫highLight()外掛的是一個集合的時候。 * * 這裡的this就是jQuery物件 */ // $.each(function(){ // this.each(function(){ this.each(function(){ // 獲取當前dom的jQuery物件，這裡的this是當前迴圈的dom var $this = $(this); // 根據引數來設定dom的樣式 $this.css({ color: opts.fontColor, backgroundColor: opts.backgroundColor }); //格式化高亮文字 var markup = $this.html(); markup = $.fn.highLight.format(markup); $this.html(markup); }); // 返回當前物件，以便用來鏈式呼叫 return this ; } }) ; // 預設引數 var defaults = { fontColor: 'red', backgroundColor: 'yellow' }; // 4、公共的格式化方法。預設是加粗，使用者可以通過覆蓋該方法達到不同的格式化效果。 $.fn.highLight.format = function (str) { return "<h3>" + str + "</h3>"; } // 5、私有方法，檢測引數是否合法 function isValid(options) { return !options || (options && typeof options === "object") ? true : false; } })(window.jQuery); /** * 呼叫外掛 // ---3 */ // $(function(){ // $('li').highLight().css({'font-weight':'bold'}); // }); /** * 呼叫外掛 // ---4 */ // 呼叫者覆蓋 外掛暴露的共公方法 // $.fn.highLight.format = function (txt) { // return "<em>" + txt + "</em>" // } // $(function(){ // $('li').highLight({ // fontColor : 'yellow', // backgroundColor : 'red' // }) // .css({'padding' : '5px 0'}); // }); /** * 呼叫外掛 // ---5 */ $(function(){ $('li').highLight().css({'padding':'5px 5px'}); }); </script> </body>