模块化实现方式之AMD

• AMD模块化 - requirejs
  • 一、定义暴露模块
  • 二、引入使用模块
    • 基本语法
    • 配置项 requirejs.config()

AMD模块化 - requirejs

• 专门用于浏览器端 模块的加载是异步的
• 和commonjs浏览器使用一致 都需要进行编译才能运行

一、定义暴露模块

• 定义没有依赖的模块

define(function(){
    // xxx
    returun xxx
})

• 定义有依赖的模块

/* module1 和 module2 是requirejs.config中配置的路由 */
define(['module1','module2'],function(m1,m2){
    // xxx
    return xxx
})

二、引入使用模块

/* 当src的文件加载完成以后 立即执行data-main指向的文件 */
<script data-main="js/main.js" src="js/libs/require.js"></script>

基本语法

/* module1 和 module2 是requirejs.config中配置的路由 */
requirejs(['module1','module2'], function(m1,m2){
    // 使用m1 m2
})

• 引入第三方模块的时候 需要注意其是否符合AMD规范 或者是否为了适应AMD规范做了处理

    require.config({
        baseUrl:'xxx',
        paths:{
            jquery: './module/jquery.js',
            angular: './module/angular.min.js'
        }
        shim:{
            'angular':{
                exports:'angular'
            }
        }
    })

• 引入 jQuery.js 对象名需要小写

/* 如果使用的AMD规范 定义并暴露了一个小写的jquery对象*/
if ( typeof define === "function" && define.amd ) {
	define( "jquery", [], function() {
		return jQuery;
	} );
}

• 引入angular.js 需要配置shim

配置项 requirejs.config()

/* requirejs.config是个函数 不是对象 不能直接赋值 => require.config = {xxxx} */
requirejs.config({
    baseUrl:'xxx',
    paths:{
        module1:'./module/module1',
        module2:'./module/module2',
        jquery: './module/jquery.js',
    }
})

• baseUrl 配置的是requirejs查找文件的路径

• paths 配置的是所有引入的模块 如果配置了baseUrl 需要相对baseUrl书写paths文件路径

• 引入的文件不需要加js后缀 requirejs会默认添加

• shim 对不符合AMD规范的js脚本使用shim做导出配置

shim:{
    'module':{
        deps:['xxx','xxx'],//暴露模块依赖的模块
        exports:xxx//暴露的内容 可以是对象或者是个函数
    }
}

deps属性：此模块需要依赖的模块 如果只是作为插件存在 没有导出任何变量的话 shim可以简单配置为依赖模块

requirejs.config({
    shim:{
        'jquery.bootstrapTable':['jquery'],
        'jquery.bootstrapTable':{
            deps:['jquery'],
            exports:'jQuery.fn.bootstrapTable'
        },
    }
})

exports属性：指定暴露的对象

1. 指定的对象的名称必须和js文件中定义的全局变量的名称一致
2. 指定的对象可以是一个函数或者是一个对象

init属性：官方定义–使用该函数允许你调用库所支持的noConflict方法，或其他的清理工作。

1. 如果init函数存在返回值 那么exports的值将会被忽略
2. 一个不满足AMD规范的js文件中存在多个全局变量 那么可以通过init函数返回一个组合后的对象
3. 可以在init函数中调用库的方法，类似jquery库的onconfit方法 避免全局变量污染
4. 可以通过this来调用引入的js文件中的方法

requirejs.config({
    shim:{
        'shimModule':{
            exports:'useShim',
            init: function(){
                // 可通过this调用非AMD规范的js文件中的函数
                console.log(this.moduleName,22)
                return {
                    sayHello:sayHello,
                    useShim:useShim
                }
            }
        }
    }
})