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;

	});