JavaScript模块化编程和项目实施心得

一、模块化

    同过JavaScript我们可以很方便去去引入js调用其中的方法，但由于JavaScript淡化了类的概念，我们会比较困难去按模块去调用既定已封装好的特定功能的方法。目前关于模块化的规范有amd和commonjs，AMD是浏览器端模块化开发的规范（requirejs采用此规范），CommonJs是服务器端模块化开发规范（nodejs采用此规范）

二、模块化js的异步加载方案

    由于市面上大多浏览器JavaScript引擎都是单线程机制的，也就是说浏览器无论是渲染ui还是运行JavaScript都是单线程执行的，一般的web项目我们调用api都会通过异步JavaScript实现，但大部分项目JavaScript文件的加载实际上都是同步的。

     实际上采用AMD规范的requirejs加载所有模块化的js都是通过异步实现的，甚至requirejs其本身也可以通过异步加载实现。

        requirejs下载链接 https://github.com/amdjs/amdjs-api/wiki/require

三、代码实现

    1、html页面中引入requirejs

<script  data-main="/res/js/product.buy" src="/res/js/require.js" defer async="true" ></script>

    2、product.buy.js中加载当前页面需要引入的模块

var shim = {　　　　
	'scroll': {　　　　　　
		deps: ['jquery'],
		exports: 'jQuery.fn.scroll'　　　　
	},
	"jquery.json-2.4": {
		deps: ['jquery'],
		exports: "JSON"　
	}　
};
require.config({　　　　
	paths: {　　　　　　
		"jquery": "/res/js/jquery-2.1.4.min",
		"cookie": "/res/js/jquery.cookie"
	},
	shim: shim
});

require([
		"xboss.wap.common.1.0",
		"module.product",
		"module.customer",
		"module.cart",
		"module.check",
		"module.collection",
		"module.praise",
		"module.render"
	],



	function (common, product, customer, cart, check, collection, praise, render) {
		$(function () {
			"user strict";
	});

3、模块定义的方法

define([
		'jquery', 
		"xboss.wap.common.1.0", 
		"module.render", 
		"module.check",
		"module.cart",
		"module.http"
	],
	function ($, common, render, check, cart, http) {　
              var product = {};
              return product;

	});