Js開發在整個行業的現狀主要的有兩點
1，全局變量命名混亂沖突導致系統錯誤
2，代碼集中少量文件導致開發效率降低
3，容易出現功能重復開發
Js開發編寫方式的演進
//Inside file my/shirt.js:
define({
color: "black",
size: "unisize“
});
define(function () {
//Do setup work here
return {
color: "black",
size: "unisize“
}
});
Definition Functions with Dependencies
//module in the same directory as shirt.js
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
} );
那么，執行了這個模塊的初始化會依次的加載順序為
my/cart.js
my/inventory.js
my/shirt.js
define(["my/cart", "my/inventory"], function(cart, inventory) {
//return a function to define "foo/title".
//It gets or sets the window title.
return function(title) {
return title ? (window.title = title) : inventory.storeName + ' ' + cart.name;
}
} );
Define a Module with Simplified CommonJS Wrapper
define(function(require, exports, module) {
var a = require('a'),
b = require('b');
//Return the module value
return function () {};
} );
這個定義就可以把模塊內部的任何變量暴露給exports來作為模塊的屬性提供。比如：
內有個定義
var name=‘nickli’;
這個就僅僅是模塊的內部私有變量，但是要想作為這個模塊的屬性提供就可以
Exports.name=“nickli”;
然后在require這個模塊的時候 就可以訪問到name這個屬性了
最后一點，也是比較重要的一點
Define a Module with a Name 給一個模塊設置一個名字，這個在多個模塊壓縮成一個文件的時候是必要的，因為否則模塊系統就找不到你壓縮的文件里面哪個模塊是哪個。而且這個name的定義 在你的開發環境中也要符合模塊文件的路徑，比如你的m模塊在a文件夾下，那么你的name 的定義也要是 a/m
//Explicitly defines the "foo/title" module:
define("foo/title",
["my/cart", "my/inventory"],
function(cart, inventory) {
//Define foo/title object in here.
}
);
模塊化后的加載
Require.js加載完畢后會自動去 拉取scripts/main.js
//Inside scripts/main.js
會依次加載some/module.js a.js b.js三個文件
模塊化后的新問題