js的發展歷史,筆記
阿新 • • 發佈:2018-11-23
1,遠古
function foo(){
//...
}
function bar(){
//...
}
2,上古
var MYAPP = {
foo: function(){},
bar: function(){}
}
MYAPP.foo();
3,近古
var Module = (function(){ var _private = "safe now"; var foo = function(){ console.log(_private) } return { foo: foo } })() Module.foo(); Module._private; // undefined
4,
var Module = (function($){
var _$body = $("body"); // we can use jQuery now!
var foo = function(){
console.log(_$body); // 特權方法
}
// Revelation Pattern
return {
foo: foo
}
})(jQuery)
Module.foo();
二,1,石器時代
body script(src="zepto.js") script(src="jhash.js") script(src="fastClick.js") script(src="iScroll.js") script(src="underscore.js") script(src="handlebar.js") script(src="datacenter.js") script(src="deferred.js") script(src="util/wxbridge.js") script(src="util/login.js") script(src="util/base.js") script(src="util/city.js") script(src="util/date.js") script(src="util/cookie.js") script(src="app.js")
2,
script(src="LAB.js" async)
$LAB.script("framework.js").wait()
.script("plugin.framework.js")
.script("myplugin.framework.js").wait()
.script("init.js");
3,Sugar
$LAB .script( [ "script1.js", "script2.js", "script3.js"] ) .wait(function(){ // wait for all scripts to execute first script1Func(); script2Func(); script3Func(); });
三,蒸汽朋克,工業模組化,
// YUI - 編寫模組
YUI.add('dom', function(Y) {
Y.DOM = { ... }
})
// YUI - 使用模組
YUI().use('dom', function(Y) {
Y.DOM.doSomeThing();
// use some methods DOM attach to Y
})
// hello.js
YUI.add('hello', function(Y){
Y.sayHello = function(msg){
Y.DOM.set(el, 'innerHTML', 'Hello!');
}
},'3.0.0',{
requires:['dom']
})
// main.js
YUI().use('hello', function(Y){
Y.sayHello("hey yui loader");
})
// Sandbox Implementation function Sandbox() { // ... // initialize the required modules for (i = 0; i < modules.length; i += 1) { Sandbox.modules[modules[i]](this); } // ... }
script(src="/path/to/yui-min.js") // YUI seed
script(src="/path/to/my/module1.js") // add('module1')
script(src="/path/to/my/module2.js") // add('module2')
script(src="/path/to/my/module3.js") // add('module3')
YUI().use('module1', 'module2', 'module3', function(Y) {
// you can use all this module now
});
四,跳出瀏覽器,模組的定義與使用
// math.js
exports.add = function(a, b){
return a + b;
}
// main.js
var math = require('math') // ./math in node
console.log(math.add(1, 2)); // 3
// server.js
var http = require("http"),
PORT = 8000;
http.createServer(function(req, res){
res.end("Hello World");
}).listen(PORT);
console.log("listenning to " + PORT);
$ node server.js
// timeout.js
var EXE_TIME = 2;
(function(second){
var start = +new Date();
while(start + second*1000 > new Date()){}
})(EXE_TIME)
console.log("2000ms executed")
// main.js
require('./timeout'); // sync load
console.log('done!');
//CommonJS Syntax
var Employee = require("types/Employee");
function Programmer (){
//do something
}
Programmer.prototype = new Employee();
//如果 require call 是非同步的,那麼肯定 error
//因為在執行這句前 Employee 模組根本來不及載入進來
//AMD Wrapper
define(
["types/Employee"], //依賴
function(Employee){ //這個回撥會在所有依賴都被載入後才執行
function Programmer(){
//do something
};
Programmer.prototype = new Employee();
return Programmer; //return Constructor
}
)
define(function (require) {
var dependency1 = require('dependency1'),
dependency2 = require('dependency2');
return function () {};
});
// parse out require...
define(
['require', 'dependency1', 'dependency2'],
function (require) {
var dependency1 = require('dependency1'),
dependency2 = require('dependency2');
return function () {};
});
// Module/1.0
var a = require("./a"); // 依賴就近
a.doSomething();
var b = require("./b")
b.doSomething();
// AMD recommended style
define(["a", "b"], function(a, b){ // 依賴前置
a.doSomething();
b.doSomething();
})
// Module/1.0
var a = require("./a"); // 執行到此時,a.js 同步下載並執行
// AMD with CommonJS sugar
define(["require"], function(require){
// 在這裡, a.js 已經下載並且執行好了
var a = require("./a")
})
<a href="http://huangxuan.me/js-module-7day/#/80">http://huangxuan.me/js-module-7day/#/80</a>