初识异步加载require与AMD模式

写过php的人对于require函数都不陌生，它的作用为文件导入，也可以把文件理解为模块、导入理解为调用，称为模块调用

随着用户体验的极致追求，前端业务所占比重逐渐增加，于是出现了前端领域的模块化编程

但是模块加载（javascript文件加载）的先后顺序却给我们带来了不小的麻烦，比如处理模块间的依赖关系

核心是通过define方法对无序的代码进行有序的模块化定义，通过require方法实现代码的模块化加载

需要载入的文件：require

主要作用是把庞大的客户端代码分割为各模块从而实现模块化管理，便于代码的编写与维护

require可以理解为一个工具库，帮助我们更好的架构前端框架，其本身并非前端框架

其次实现了异步加载解决了网页加载时的阻塞问题

客户端代码被定义为各模块后，模块之间错综复杂的依赖关系以及模块的按需加载、加载顺序就成了问题

require很好的解决了这个问题，它的模块化管理遵循AMD规范，模块加载不影响后续语句执行

不得不说的ADM规范

Asynchronous Module Definition - 异步加载模块规范

解决模块化编程带来的代码加载先后顺序问题及常规异步加载代码带来的不确定因素

载入require实现模块化编程

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

data-main指定了入口配置文件shop.js，同时指定了基于shop.js的相对路径baseUrl，baseUrl可以在config配置方法内重置

require.config配置方法

baseUrl重置相对路径

require.config({
    baseUrl : 'js/lib'
});

paths配置待调用模块路径

require.config({
    paths : {
        jquery : 'jquery.min',
        control : 'control'
    }
});

已配置路径的模块的调用方式

require(['jquery', 'control'], function ($, Control){
    return true;
});

shim垫片

require.config({
    paths : {
        underscore : 'underscore.min',
        backbone : 'backbone.min'
    },
    shim : {
        underscore : {
            exports : '_'
        },
        backbone : {
            deps : ['underscore'],
            exports : 'Backbone'
        }
    }
});

有时我们需要使用非AMD定义模块，如jQuery，需要shim参数来帮助解决这些库的解析名称及载入顺序问题

项目入口配置文件shop.js代码展示

require.config({
	paths : {
		jquery   : 'jquery.min',
		jqmd5    : 'jquery.md5',
		cookie   : 'public/cookie',

		jqui     : 'jquery.ui.min', /* 前端UI框架 */
		jquid    : 'jquery.ui.dialog.min', /* 前端UI框架 - 模态框模块 */
		jqtmpl   : 'jquery.tmpl.min', /* 模版引擎 */
		jqvali   : 'jquery.validation.min', /* 表单验证 */
		jqvalicn : 'jquery.validation.cn.min', /* 表单验证汉化 */

		base     : 'base', /* 基础功能 */
		control  : 'control', /* 控制器模块 */
		login    : 'login/index', /* 登录页模块 */
		register : 'register/index', /* 注册页模块 */
		detail   : 'detail/index' /* 详情页模块 */
	}
});

require(['control'], function (Control){
	Control.cookie();
	Control.template();
});

 

定义模块的define方法

独立模块

define(function (){
    var control = {};
    return control;
});

该模块调用不依赖其它模块

依赖模块

define(['base'], function (){
    var control = {};
    return control;
});

该模块调用需要依赖base模块

项目控制器模块control.js代码展示

define(['jquery', 'jqmd5', 'cookie', 'base'], function (){
	var control = {};

	/**
	 * 登录状态检测
	 */
	control.cookie = function (){
		setTimeout(WK.LC.syncLoginState, 100);
	};

	/**
	 * 模块调用及配置
	 */
	control.template = function (){
		if($('.naver').length > 0) base.naver();

		if(CATEGORY == 'login')
		{
			if(MODEL == 'index'){
				// 登录页
				require(['login'], function (Login){
					Login.form();
				});
			};

			if(MODEL == 'register' || MODEL == 'check'){
				// 注册页
				require(['register'], function (Register){
					Register.form(MODEL);
				});
			};
		};

		if(CATEGORY == 'goods')
		{
			// 详情页
			if(MODEL == 'index'){
				require(['detail'], function (Detail){
					// Detail.form();
				});
			};
		};
	};

	return control;
});

加载模块的require方法

异步加载

require(['control'], function (Control){
	Control.cookie();
	Control.template();
});

AMD模式

定义模块的define方法和调用模块的require方法，合称AMD模式

该模式的定义模块方法清晰且不会污染全局环境，能够清楚的显示依赖关系

require是一款可以帮助我们架构好前端框架的好工具，为我们带来更为方便的模块化编程，轻松控制好模块载入的数量和顺序，并且性能优秀