吐槽:
根據(jù)《軟件框架設計的藝術(shù)》的內(nèi)容士飒,個人覺得seajs大的方向總的是好的,但個別(此處被刪200字)蔗崎,大神們的作品由不得我們po酵幕,還是學習吧,誰讓公司要用呢缓苛。
恩芳撒,筆者閑得蛋疼,google翻譯了一把....
好,以下我們都叫大海js吧笔刹。
直接從例子上手
下載體seajs快速上手版repo(git的使用見這里)
git clone https://github.com/moyu-edu/seajs_searn.git
學習這個例子
我們打開app文件夾庐完,里面有一個文件叫hello.html,sublime打開,直接定位到這里:
// Set configuration
seajs.config({
base: "../sea-modules/",
alias: {
"jquery": "jquery/jquery/1.10.1/jquery.js"
}
});
看上面徘熔,是不是和我們自己創(chuàng)建jquery插件效果很像呢?沒錯淆党,你不要管那些專家們的文章一堆的commonjs規(guī)范啥的酷师,直接先用起來,你就直接把它當jQuery插件來用吧染乌。
上面大的范圍來看是一個這樣的東西:
seajs.config({我是對象})
config我查下google
看到?jīng)]有山孔,其實這塊是在配置,其實和我們jQuery插件使用是一樣的荷憋,就是定制化我們的seajs.
我們按官方的解釋來說一下台颠,里面到底是啥?
base的意思是基礎(chǔ)路徑勒庄,說明我們?nèi)绻断鄬ξ恢枚疾患哟埃J找的就是這個../sea-modules/里的東西,也就是這些:
alias意思是別名实蔽,其實也別搞得這么高大上了荡碾,我用三行js代碼解釋吧:
var a = [];
var b = a;
上面這個b就是a的別名,懂了不局装?
OK坛吁,我們繼續(xù)往后看:
// For 開發(fā)環(huán)境
if (location.href.indexOf("?dev") > 0) {
seajs.use("../static/hello/src/main");
}
// For 線上環(huán)境
seajs.use("examples/hello/1.0.0/main");
}
這塊我們看到了第一課學的if else有沒有?
遇到這塊我們直接只看一塊開發(fā)環(huán)境就行了铐尚,所以我們直接看
seajs.use("../static/hello/src/main");
這又是seajs這個對象的另一個方法叫use拨脉。
用官方的話解釋是use用來在頁面中加載一個或多個模塊,用白話就是seajs說了宣增,咱們得使用../static/hello/src/main.js這個文件:
OK玫膀,我們打開這個文件:
define(function(require) {
var Spinning = require('./spinning');
var s = new Spinning('#container');
s.render();
});
上面是啥意思呢?define這個詞是seajs都得用的统舀,是定義的意思匆骗,我們打開這個文件,同時看一眼我們的spinning.js文件誉简,我們發(fā)現(xiàn)規(guī)律就是碉就,它們長得一樣:
define(function(){})
不過,一個函數(shù)參數(shù)有一個闷串,一個是三個瓮钥,我們直接說三個參數(shù)啥意思:
- require 如果你想在當前的js中用別的js,請加上require
- exports 你想給別人用啥,請加這個
- module 如果你一下子想用一個對象給別人用一堆東西碉熄,請加這個
看到這里桨武,如果會nodejs的同學肯定知道,這特媽的不就是nodejs的一套東西嗎锈津?恩呀酸,這個你自己意會吧.....
ok,其實這些都是浮云,我們只要記住一點就行了琼梆,seajs的作用是啥性誉?
自從有了seajs,我們寫代碼沒啥大的變化茎杂,要說真有變化的話错览,就是之前我們可能會像下面的任意一種寫法:
!(function(){
var a = 1;
var b = 2;
window.moyu.A = {
c:a + b
}
}());
;(function(){
window.moyu.B = {
fn:function(){
console.log("www.moyu-edu.com");
}
}
}());
jQuery(function(){
});
document.addEventListener("DOMContentLoaded",function(){
});
看起來風格是不是不統(tǒng)一,有了seajs,以后的代碼外表全一個樣子啦:
define(function(require,exports,module){
module.exports = {
}
})
define(function(require,exports,module){
module.exports = {
}
})
define(function(require,exports,module){
module.exports = {
}
})
define(function(require,exports,module){
module.exports = {
}
})
OK煌往,30分鐘到了倾哺,新技能get!!!