<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          詳解JavaScript模塊化開發require.js

          時間:?2017-11-13閱讀:?1064標簽:?es6
          前言

          前端開發中,起初只要在script標簽中嵌入幾十上百行代碼就能實現一些基本的交互效果,后來js得到重視,應用也廣泛起來了,jQuery,Ajax,Node.Js,MVC,MVVM等的助力也使得前端開發得到重視,也使得前端項目越來越復雜,然而,JavaScript卻沒有為組織代碼提供任何明顯幫助,甚至沒有類的概念,更不用說模塊(module)了,所以,進行模塊化開發的重要性就不言而喻了。那么什么是模塊呢?

          一個模塊就是實現特定功能的文件,有了模塊,我們就可以更方便地使用別人的代碼,想要什么功能,就加載什么模塊。所以,今天小編介紹一下js模塊化開發的幾種方法。

           

          一、模塊化開發規范

          js模塊化的開發并不是隨心所欲的,為了便于他人的使用和交流,需要遵循一定的規范。目前,通行的js模塊規范主要有兩種:CommonJS和AMD。

           

          1.1AMD

          AMD 即Asynchronous Module Definition,中文名是“異步模塊定義”的意思。它是一個在瀏覽器端模塊化開發的規范,服務器端的規范是CommonJS;

          模塊將被異步加載,模塊加載不影響后面語句的運行。所有依賴某些模塊的語句均放置在回調函數中。

          關于AMD有兩個非常重要的概念,那就是用于模塊定義的define方法和用于處理依賴加載的require方法。

           

          (1)作為一個規范,只需定義其語法API,而不關心其實現。define函數定義如下:

          define(
               [module-name?] /*可選*/, 
               [array-of-dependencies?] /*可選*/, 
               [module-factory-or-object]
          );


          其中:
          • module-name: 模塊標識,可以省略。如果沒有這個屬性,則稱為匿名模塊。
          • array-of-dependencies: 所依賴的模塊,可以省略。
          • module-factory-or-object: 模塊的實現,或者一個JavaScript對象

          舉個栗子:

          define(
              "myModule",
              ["foo", "bar"],
              // 模塊定義函數,依賴(foo,bar)作為參數映射到函數上
              function (foo, bar) {
                  // 創建模塊
                  var myModule = {
                      myFun: function () {
                          console.log("Jeri");
                      }
                  }
                  // 返回定義的模塊
                  return myModule;
              }
          );


          (2)require()方法,有兩個參數:

          require([module], callback);


           其中:

          • 第一個參數[module],是一個數組,里面的成員就是要加載的模塊;
          • 第二個參數callback,則是加載成功之后的回調函數。

           舉個實際栗子:

          require([‘math‘], function (math) {
             math.add(2, 3);
          });


          1.2CommonJS規范

           CommonJS是服務器端模塊的規范,根據CommonJS規范,一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域,也就是說,在該模塊內部定義的變量,無法被其他模塊讀取,除非定義為global對象的屬性。輸出模塊變量的最好方法是使用module.exports對象。

          不過,與AMD表現形式不同的是,CommonJS模塊并不使用define進行定義。CommonJS模塊由兩部分組成:變量exports和require函數。

          (1)exports/require:加載模塊使用require方法,該方法讀取一個文件并執行,最后返回文件內部的module.exports對象。

          再舉個栗子:創建兩個js文件:

          libJS:

          // 新定義的模塊方法
           function log(arg) {
               console.log(arg);
           }
           // 把方法暴露給其他模塊
          exports.log = log;


           

           app.JS:

          // ./lib是我們需要的一個依賴
          var lib = requrie("./lib"); 
          // 新定義的模塊方法
          function foo() {
               lib.log("jeri");
          }
          // 把方法暴露給其他模塊
           exports.foo = foo;


          (2)module.exports

          直接舉栗子:

          var i = 1;
          var max = 30; 
          module.exports = function () {
             for (i -= 1; i++ < max; ) {
               console.log(i);
             }
            max *= 1.1;
          };


           

          二、JS模塊的常用寫法

           在前言中小編也提過,模塊:就是一個模塊就是實現特定功能的文件,有了模塊,我們就可以更方便地使用別人的代碼,想要什么功能,就加載什么模塊。

          除了接下來要講的require.js,還有適合于一些簡單模塊的幾種常用寫法。

           

          2.1字面量寫法

          要知道,模塊就是實現特定功能的一組方法。

          只要把不同的函數(以及記錄狀態的變量)簡單地放在一起,就算是一個模塊。這也是最簡單的一種寫法。也就是說,每一個函數就是一個簡單的模塊。

          function func1 (){
             alert("這是func1");
          };
          function func2 (){
             alert("這是func2");
          }


           把栗子中的兩個函數func1()和func2()就組成了一個模塊;

          不過,這種寫法有著一定的缺點:

          如果只是實現一些簡單的功能還好,如果實現復雜的功能,太多的函數就會出現問題,"污染"了全局變量,無法保證不與其他模塊發生變量名沖突,而且模塊成員之間看不出直接關系。

          2.2對象寫法

           所以,為了解決上述的問題,把模塊寫成一個對象,所有的模塊成員都放到這個對象里面不失為一個好的方式。

          再再舉個栗子:

          var module = {
                func1 : function(){
                  alert(1);      
               }
               func2 : function(){
                 alert(2);      
               }
          }
          module.func1();
          module.func2();


           

          2.3通過閉包實現

           在JavaScript中,并不能可以直接聲明類,但我們可以使用閉包來封裝私有的屬性和方法,進而模擬類的概念,在JavaScript中實現Module模式;

          瘋狂的舉栗子:

          var myModule = (function () {
               // 私有變量
               var privateVar = 0;
               // 私有函數
               var privateFun = function (foo) {
                   console.log(foo);
               };
               return {
                   // 私有變量
                   publicVar: "foo",
                      // 公有函數        
                      publicFun: function (arg) {
                       // 修改私有變量
                       privateVar ++; 
                       // 傳入bar調用私有方法
                       privateFun(arg);
                   }
               };
          }) ()


           

          2.4輸入全局變量

          獨立性是模塊的重要特點,模塊內部最好不與程序的其他部分直接交互。為了在模塊內部調用全局變量,必須顯式地將其他變量輸入模塊。

          var module1 = (function ($, YAHOO) {
               //...
          })(jQuery, YAHOO);

           

          三、require.js

           requir.JS本就是為了實現js的模塊開發而創建的一個js腳本,其主要有著兩大優點:

          (1)實現js文件的異步加載,避免網頁失去響應;

          (2)管理模塊之間的依賴性,便于代碼的編寫和維護。

           

          3.1require.js的實現步驟

           (1)眾所周知,要導入js文件,為了避免網頁失去響應有兩種方法;

          第一種,把<script></script>放在文件的最后。

          今天,我們主要說第二種:

          <script src="js/require.js" defer async="true" ></script>


           async屬性表明這個文件需要異步加載,避免網頁失去響應。但是,IE不支持這個屬性,只支持defer,所以需要把defer也寫上。

          (2)在HTML中導入require.JS文件后,就可以編寫自己的main.js文件。

          首先,導入main.js文件:

          <script src="js/require.js" data-main="js/main"></script>

           

          其中:data-main屬性的作用是,指定網頁程序的主模塊。

          在上例中,就是js目錄下面的main.js,這個文件會第一個被require.js加載。由于require.js默認的文件后綴名是js,所以可以把main.js簡寫成main。 

          (3)編寫main.js;

          require([‘moduleA‘, ‘moduleB‘, ‘moduleC‘], function (moduleA, moduleB, moduleC){
              // some code here
          });
           

           通過require方法,實現代碼的模塊加載,傳入兩個參數:

          ①第一個參數是一個數組,表示代碼所依賴的模塊。
          ②第二個參數是一個回調函數,當前面的模塊加載完成后,就會被調用。
          加載的模塊一參數的形式傳入,從而在回調函數內部可以使用這些模塊,回調函數就是整個頁面的JS代碼;

          再次瘋狂的舉栗子:

          require([‘jquery‘, ‘underscore‘, ‘backbone‘], function ($, _, Backbone){
               // some code here});

           

          3.2模塊的加載

          在上面的栗子中,我們可以使用require.config()方法,對模塊的加載行為進行自定義。

          (1)require.config()就寫在主模塊(main.js)的頭部。參數就是一個對象,這個對象的paths屬性指定各個模塊的加載路徑。 

           不要命的舉栗子:

          require.config({
               paths: {
                 "jquery": "jquery.min",
                 "underscore": "underscore.min",
                 "backbone": "backbone.min"
               }
          });

           

           (2)上面的代碼給出了三個模塊的文件名,路徑默認與main.js在同一個目錄(js子目錄)。

          如果這些模塊在其他目錄,比如js/lib目錄,則有兩種寫法。

          一種是逐一指定路徑。

          再次舉栗子:

          require.config({
               paths: {
                "jquery": "lib/jquery.min",
                 "underscore": "lib/underscore.min",
                 "backbone": "lib/backbone.min"
               }
          });


          另一種則是直接改變基目錄(baseUrl)。

          再再次舉栗子:

          require.config({
              baseUrl: "js/lib",
              paths: {
                "jquery": "jquery.min",
                "underscore": "underscore.min",
                "backbone": "backbone.min"
              }
            });


           (3)如果某個模塊在另一臺主機上,也可以直接指定它的網址;

          舉栗子:

          require.config({
              paths: {
                "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
              }
          });


          3.3require的AMD模塊寫法

          require.js加載的模塊,采用AMD規范。也就是說,模塊必須按照AMD的規定來寫。

          具體來說,就是模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊,那么可以直接定義在define()函數之中。

          假定現在有一個math.js文件,它定義了一個math模塊。那么,math.js就要這樣寫:

          // math.js
          define(function (){
               var add = function (x,y){
                 return x+y; 
               }; 
               return { 
                 add: add
               }; 
          });


          加載方法如下:

          // main.js 
          require([‘math‘], function (math){
              alert(math.add(1,1));
          });


          如果這個模塊還依賴其他模塊,那么define()函數的第一個參數,必須是一個數組,指明該模塊的依賴性。

          define([‘myLib‘], function(myLib){
              function foo(){
                myLib.doSomething();
               } 
               return {
                 foo : foo
              };
          });


          作者編

           在日常的工作中,js的模塊法開發是一個不可或缺的一部分。在這里只是介紹了基于AMD模塊的require.js。還有基于commonJS規范的node.js。小編會在下次和大家一起學習。

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/91

          ES6迭代器精煉講解

          Iterator 是 ES6 引入的一種新的遍歷機制,迭代器有兩個核心概念:迭代器是一個統一的接口,它的作用是使各種數據結構可被便捷的訪問,它是通過一個鍵為Symbol.iterator 的方法來實現。

          ES6 Iterators

          本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用來循環任意集合。 在ES6中登場的Iterators。因其可被廣泛使用,并且已在多處場景派上用場,

          24個常用的es6方法

          本文主要介紹 24 中 es6 方法,這些方法都挺實用的,本本請記好,時不時翻出來看看。如何檢查元素是否具有指定的類?頁面DOM里的每個節點上都有一個classList對象,程序員可以使用里面的方法新增、刪除、修改節點上的CSS類。

          javascript es6是什么?

          ES6就是ECMAScript6是新版本JavaScript語言的標準。已經在2015年6月正式發布了。Mozilla公司將在這個標準的基礎上,推出JavaScript 2.0。ECMAScript6在保證向下兼容的前提下

          ES6 Promise用法詳解

          Promise是一個構造函數,接受一個參數(Function),并且該參數接受兩個參數resolve和reject(分別表示異步操作執行成功后的回調函數、執行失敗后的回調函數)

          commonjs 與 es6相關Module語法的區別

          export 在接口名字與模塊內部的變量之間建立了一一對應的關系,export輸出的接口; export的寫法,除了像上面這樣,還有另外一種。export命令除了輸出變量,還可以輸出函數或類(class)。

          ES6箭頭函數(Arrow Functions)

          箭頭函數中的 this 指向的是定義時的對象,而不是使用時的對象;由于 箭頭函數沒有自己的this指針,通過 call() 或 apply() 方法調用一個函數時,只能傳遞參數,他們的第一個參數會被忽略

          es6 class

          構造函數的prototype屬性,在 ES6 的“類”上面繼續存在。事實上,類的所有方法都定義在類的prototype屬性上面。

          es6之迭代器

          迭代器是被設計專用于迭代的對象,帶有特定接口。所有的迭代器對象都擁有 next() 方法,會返回一個結果對象。該結果對象有兩個屬性:對應下一個值的 value ,以及一個布爾類型的 done

          ES6 - let、const、var的區別

          為了使JavaScript語言可以用來編寫復雜的大型應用程序,成為企業級開發語言,ECMAScript 6.0(簡稱ES6)在標準中添加了很多新的特性。我們將用幾篇文章總結一下ES6標準中一些常用的新特性。本片文章主要講解ES6中的let、const命令,并區分其與var命令的區別。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网