JS模塊化工具 requirejs 學習文檔

JS模塊化工具 requirejs 學習文檔

做爲一個Java開發者，原來寫js代碼都是流水帳式的，一直想寫出模塊化的js，可是前端工具多如牛毛，確都是針對於nodejs的打包工具。可是我在實際的開發過程當中，並無使用到太多的js庫，通常只使用到boostrap、jquery和其相關的插件，並不想引入nodejs和各類前端插件來增長項目的複雜度。requirejs徹底符合個人要求，還能夠配合maven實現自動打包和壓縮代碼。下面咱們來簡單介紹一下requirejs,實如今開發階段，不打包，不壓縮，模塊化開發;部署階段,自動打包、壓縮。

requirejs簡介

requirejs是JS模塊化開發的框架，它遵循AMD(Asynchronous Module Definition)規範，實現js腳本的異步加載，不阻塞頁面的渲染和其後的腳本的執行。使用requirejs能夠簡化js的依賴，咱們無需在html文件中使用<script>標籤引入大量的js文件，只需引入少許的require.js文件，其餘的js文件均可以經過requirejs引入。

官方網站|requirejs中文網|Github

什麼是AMD

define(id?, dependencies?, factory);

• Id：模塊名，能夠省略
• Dependencies：所依賴模塊的數組，能夠省略
• Factory：模塊的實現，能夠是函數或對象

requirejs安裝

1. 使用npm

npm install –g requirejs

1. 使用CDN

<script src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>

1. 使用本地文件

<script src="scripts/require.js"></script>

若是須要使用其餘的js，只需在require。config.js之中導入對應模塊便可。

requirejs經常使用Api

require導入模塊

在模塊中引入其餘模塊的語法爲：

require(['jquery'], function($) {
      //回調函數
    });

在回調函數中咱們就能夠使用jquery中的$符號了。
固然咱們只會引用其餘的模塊是確定不行的，咱們還須要定義符合AMD規範的模塊。

define定義模塊

自定義模塊的語法爲：

define(["jquery"], function($) {
        
    });

define({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
})

這個模塊是一個依賴於jquery的匿名模塊，在requirejs中定義匿名模塊也是模塊定義的最佳實踐，他將以對應的文件名做爲模塊的模塊名。

經常使用配置

requirejs.config({
      baseUrl: '/public/js',
      paths: {
        hello: 'hello'
      },
      shims: {
        hello: { exports: 'hello' }
      }
    });

baseUrl配置

baseUrl用於配置js文件的根目錄

baseUrl: '/public/js',

paths配置

paths用於配置js模塊的模塊名和文件位置

paths: {
        "jquery": "./lib/jquery.min"
    }

上面表示jquery的js文件位置爲public/js/lib/jquery.min.js

配置不支持AMD的庫和插件

shims、exports、deps配置

shim：｛
    "modernizr": {         //不支持AMD的模塊
        depts:["jquery"]， //依賴的模塊
        exports： "Modernizr",//全局變量做爲模塊對象
        init : function($){
            return $; //初始化函數，返回的對象代替exports做爲模塊對象
        }            
    },
    "bootstrap": ["jquery"] //只配置依賴能夠省略
｝

map多版本配置

項目開發初期使用jquery1.12.3，後期覺得須要支持移動開發，升級到jquery2.2.3。可是又擔憂以前依賴jquery1.12.3的代碼升級到2.2.3後可能會有問題，就保守的讓這部分代碼繼續使用1.12.3版本

map: {
    "app/api":{
        "jquery": "./lib/jquery"
    },
    "app/api2":{
        "jquery": "./lib/jquery2"
    }
}

當app/api模塊里加載jquery模塊時，將加載jquery.js
當app/api2模塊里加載jquery模塊時，將加載jquery2.js

waitSeconds

下載js等待的時間，默認7秒。若是設爲0，則禁用等待超時。

urlArgs

下載文件時，在url後面增長額外的query參數

e.g. urlArgs: 「_=" + (new Date()).getTime()

jsonp服務

什麼是jsonp

是json的一種使用模式，能夠跨域獲取數據，如json
同源策略：www.baidu.com經過ajax不能獲取www.qq.com的數據

傳統的jsonp實現

//www.qq.com中
<script src="http://www.baidu.com/user?callback=onloaded"></script>
//在www.baidu.com/user下
onload({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
})

這樣經過<script>標籤就實現了跨域請求

requirejs的jsonp實現

requirejs也是經過<script>標籤來加載模塊

//www.qq.com中
require(["http://www.baidu.com/user],function(){

});
//在www.baidu.com中
define({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
});

requirejs插件

text插件

使用text插件加載html
text插件Github
引入text插件

paths:{
    "text": "./lib/require/text"
}

使用text插件

require(["text!/user.html"],function(template){
    $("#userinfo").html(template);
});

//!strip表示只加載body內的數據
require(["text!/user.html!strip"],function(template){
    $("#userinfo").html(template);
});

css插件

css插件的Github地址
引入css插件

//方法一：經過map引入
map {
    "*" {
        "css": "./lib/require/css"
    }
}
//方法二：在paths中引入
paths: {
    "css": "./lib/require/css"
｝

使用css插件

//方法一：在require中引用
require(["jquery","bootstrap",""css!./lib/bootstrap/bootstrap.min.css""],function($){

});

//方法二：在slim中配置依賴後，在require中引用時能夠省略css
    shim: {
        "bootstrap" : ["jquery","css!./lib/bootstrap/bootstrap.min.css"]
    ｝

r.js打包

r.js的Github

r.js打包命令

1. 全局安裝requirejs

r.js –o baseUrl=js name=app out=built.js

1. 運行github中下載的r.js

node r.js –o baseUrl=js name=app out=built.js

使用配置文件打包

node r.js -o app.build.js

//app.build.js
({
    appDir : "./src", //須要打包的根目錄
    baseUrl: "./js",    //js文件在baseUrl目錄下
    dir: "./build",        //打包後的輸出目錄
    mainConfigFile: "src/js/require.config.js" ,//requirejs的配置文件
    name： "app" //打包和輸出的文件
})

modules 配置
數組：列出全部須要打包的模塊，當打包一個模塊時，默認會打包全部依賴的模塊

text打包插件

inlineText配置項：是否把文本文件一塊兒打包進模塊

css打包插件

css打包插件
經過css-builder.js和normalize.js把css文件和模塊一塊兒打包

使用npm命令自動打包

1. npm init生成package.json文件
2. 在script 中配置打包命令

"script": {
    "package": "node r.js -o app.build.js"
}

npm run package

maven打包

使用maven+npm自動打包
maven插件

npm打包缺點：手動打包會有出錯的地方，好比開發人員忘了執行打包命令，就提交代碼，服務器端在自動部署代碼的時候，打包的jar就不包含最新的js和css,這時候就用到了咱們的maven插件frontend-maven-plugin能夠再打包java文件以前自動打包js文件

<plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.0</version>
                <executions>
                    <!--下載安裝node-->
                    <execution>
                        <id>install node and npm</id>
                        <goals>
                            <goal>install-node-and-npm</goal>
                        </goals>
                        <configuration>
                            <nodeVersion>v4.4.3</nodeVersion>
                            <npmVersion>3.8.6</npmVersion>
                        </configuration>
                    </execution>
                    <!--執行npm命令-->
                    <execution>
                        <id>npm run package</id>
                        <goals>
                            <goal>npm</goal>
                        </goals>
                        <configuration>
                            <arguments>run package</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

執行流程

1. 下載node和npm，若是已經下載過一次，就從maven倉庫解壓
2. 在生成靜態資源階段，執行npm命令
3. 執行java的單元測試，打包完成