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的单元测试，打包完成