JS模块化工具 requirejs 学习文档

摘要：模块化工具学习文档作为一个开发者，原来写代码都是流水账式的，一直想写出模块化的，但是前端工具多如牛毛，确都是针对于的打包工具。之中导入对应模块即可。如果设为，则禁用等待超时。

作为一个Java开发者，原来写js代码都是流水账式的，一直想写出模块化的js，但是前端工具多如牛毛，确都是针对于nodejs的打包工具。但是我在实际的开发过程中，并没有使用到太多的js库，一般只使用到boostrap、jquery和其相关的插件，并不想引入nodejs和各种前端插件来增加项目的复杂度。requirejs完全符合我的要求，还可以配合maven实现自动打包和压缩代码。下面我们来简单介绍一下requirejs,实现在开发阶段，不打包，不压缩，模块化开发;部署阶段,自动打包、压缩。

requirejs是JS模块化开发的框架，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行。使用requirejs可以简化js的依赖，我们无需在html文件中使用

使用本地文件

如果需要使用其他的js，只需在require。config.js之中导入对应模块即可。

在模块中引入其他模块的语法为：

    require(["jquery"], function($) {
      //回调函数
    });

在回调函数中我们就可以使用jquery中的$符号了。
当然我们只会引用其他的模块是肯定不行的，我们还需要定义符合AMD规范的模块。

自定义模块的语法为：

    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用于配置js文件的根目录

 baseUrl: "/public/js",

paths用于配置js模块的模块名和文件位置

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

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

shims、exports、deps配置

shim：｛
    "modernizr": {         //不支持AMD的模块
        depts:["jquery"]， //依赖的模块
        exports： "Modernizr",//全局变量作为模块对象
        init : function($){
            return $; //初始化函数，返回的对象代替exports作为模块对象
        }            
    },
    "bootstrap": ["jquery"] //只配置依赖可以省略
｝

项目开发初期使用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

下载js等待的时间，默认7秒。如果设为0，则禁用等待超时。

下载文件时，在url后面增加额外的query参数

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

是json的一种使用模式，可以跨域获取数据，如json
同源策略：www.baidu.com通过ajax不能获取www.qq.com的数据

//www.qq.com中

//在www.baidu.com/user下
onload({
    username: "yoojoo",
    email： "yookoo@163.com",
    gender: "男"
})

这样通过