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

1、模块化

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

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

    因为市面上大多浏览器JavaScript引擎都是单线程机制的，也就是说浏览器不管是渲染ui仍是运行JavaScript都是单线程执行的，通常的web项目咱们调用api都会经过异步JavaScript实现，但大部分项目JavaScript文件的加载实际上都是同步的。

     实际上采用AMD规范的requirejs加载全部模块化的js都是经过异步实现的，甚至requirejs其自己也能够经过异步加载实现。

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

3、代码实现

    一、html页面中引入requirejs

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

    二、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";
	});

三、模块定义的方法

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;

	});