收藏本站 收藏本站
積木網首頁 - 軟件測試 - 常用手冊 - 站長工具 - 技術社區
首頁 > JavaScript > JavaScript技巧 > 正文

首頁 - PHP - 數據庫 - 操作系統 - 游戲開發 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell編程 - DOS命令 - jQuery - CSS樣式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

JavaScript自執行函數和jQuery擴展方法詳解

我們通常將JS代碼寫在一個單獨的JS文件中,然后在頁面中引入該文件。但是,有時候引入后會碰到變量名或函數名與其它JS代碼沖突的問題。那么如何解決這個問題呢?作用域隔離。在JS中,作用域是通過函數來劃分的,將JS代碼封裝到函數中進行調用可以避免變量名/函數名沖突的問題,但是這也并不是萬無一失,因為封裝函數本身有可能和其它函數重名,解決方案:自執行函數。

自執行函數是用一對圓括號將匿名函數包起來,加括號(傳參)會立即執行。因為函數無名字,實現了作用域的絕對隔離和函數名的沖突問題。基本形式如下:

(function () {
  console.log('do something');
})();

比如我們在custome.js文件中寫了一些JS邏輯,并封裝到函數init中。我們用自執行函數將自己定義的函數init包起來,就像下面這樣。

(function () {

  function init() {
    console.log('execute init...');
  }

  init();
})();

當我們在html中引入custome.js:<script src="custome.js"></script>,自執行函數會立即執行,進而執行內部定義的init函數:

不過,自執行函數立即執行的特性,使其很難調用。通過定義jQuery擴展方法,可以解決這一問題,拿到自執行函數調用和執行的主動權。

首先我們看一下定義jQuery擴展方法的基本形式:

jQuery.extend({
  'myMethod': function () {
    console.log('do something');
  }
});

這樣,通過$.myMethod()或jQuery.myMethod()就可以調用上面定義的方法。

定義jQuery擴展方法還有另外一種方式:.fn

jQuery.fn.extend({
  'myMethod': function () {
    console.log('do something');;
  }
});

通過如上方式定義的擴展方法,需要通過jQuery選擇器調用,比如通過標簽選擇器$("button").myMethod(args)

了解了JS自執行函數和jQuery擴展方法后,我們將二者結合起來。

下面我們利用自執行函數立即執行的特點,來定義jQuery擴展方法:

(function (jq) {

  function init() {
    console.log('do something');
  }

  jq.extend({
    'myMethod': function () {
      init();
    }
  })
})(jQuery);

說明,這個自執行函數接收jQuery對象作為參數,然后在內部為jQuery定義一個擴展方法myMethod,該方法執行真正的邏輯代碼init函數

調用:

<script src="jquery-3.2.1.js"></script>
<script src="custome.js"></script>
<script>

 $(function () {
  $.myMethod();
 });

</script>

說明:

jQuery文件引入后,jQuery對象全局可用;
緊接著引入自定義JS文件custome.js,其中的自執行函數接收jQuery對象為參數,立即執行,在內部為jQuery定義一個擴展方法myMethod
然后我們就可以在頁面加載完成后,通過調用$.meMethod()或jQuery.myMethod()來執行init函數

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持積木網。

JavaScript中Require調用js的實例分享
在我最初開始寫JavaScript函數時,通常是這樣的:functionfun1(){//somecodehere}functionfun2(){//someothercodehere}...函數全寫在全局環境中,項目很小時,通常不會有

JS+CSS實現網頁加載中的動畫效果
本文實例為大家分享了JS實現網頁加載中效果的具體代碼,供大家參考,具體內容如下需要材料:一張loading動畫的gif圖片基本邏輯:模態框遮罩+loading.gi

淺析Javascript中雙等號(==)隱性轉換機制
在Javascript中判斷相等關系有雙等號(==)和三等號(===)兩種。其中雙等號(==)是值相等,而三等號(===)是嚴格相等(值及類型是否完全相等)。因此有幾個常

本周排行

更新排行

強悍的草根IT技術社區,這里應該有您想要的! 友情鏈接:b2b電子商務
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP備05050695號
36选7走势图大全 江苏快三开奖官方网站 赢真钱可以提现的游戏 英国五分彩网站 北京十一选五开奖结果走势图一定牛 pc幸运28猜测软件 云南11选5任五号码推荐 河南快三开奖结果走势图 02489博彩论坛 广东股票配资公司 快3平台 3d试机号203 山西十一选五官方网站 上海时时乐出号视频 网信理财 七星彩5OO期走势图 手机可以买时时彩平台