30分鐘讓前端學會seajs(紐約的老鄭原創(chuàng))

吐槽:

根據(jù)《軟件框架設計的藝術(shù)》的內(nèi)容士飒,個人覺得seajs大的方向總的是好的,但個別(此處被刪200字)蔗崎,大神們的作品由不得我們po酵幕,還是學習吧,誰讓公司要用呢缓苛。

恩芳撒,筆者閑得蛋疼,google翻譯了一把....

55555.png

好,以下我們都叫大海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

0001.png

看到?jīng)]有山孔,其實這塊是在配置,其實和我們jQuery插件使用是一樣的荷憋,就是定制化我們的seajs.
我們按官方的解釋來說一下台颠,里面到底是啥?
base的意思是基礎(chǔ)路徑勒庄,說明我們?nèi)绻断鄬ξ恢枚疾患哟埃J找的就是這個../sea-modules/里的東西,也就是這些:

ken.png

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!!!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市刽脖,隨后出現(xiàn)的幾起案子羞海,更是在濱河造成了極大的恐慌,老刑警劉巖曲管,帶你破解...
    沈念sama閱讀 211,496評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件扣猫,死亡現(xiàn)場離奇詭異,居然都是意外死亡翘地,警方通過查閱死者的電腦和手機申尤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,187評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來衙耕,“玉大人昧穿,你說我怎么就攤上這事〕却” “怎么了时鸵?”我有些...
    開封第一講書人閱讀 157,091評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長厅瞎。 經(jīng)常有香客問我饰潜,道長,這世上最難降的妖魔是什么和簸? 我笑而不...
    開封第一講書人閱讀 56,458評論 1 283
  • 正文 為了忘掉前任彭雾,我火速辦了婚禮,結(jié)果婚禮上锁保,老公的妹妹穿的比我還像新娘薯酝。我一直安慰自己半沽,他們只是感情好,可當我...
    茶點故事閱讀 65,542評論 6 385
  • 文/花漫 我一把揭開白布吴菠。 她就那樣靜靜地躺著者填,像睡著了一般。 火紅的嫁衣襯著肌膚如雪做葵。 梳的紋絲不亂的頭發(fā)上占哟,一...
    開封第一講書人閱讀 49,802評論 1 290
  • 那天,我揣著相機與錄音酿矢,去河邊找鬼重挑。 笑死,一個胖子當著我的面吹牛棠涮,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刺覆,決...
    沈念sama閱讀 38,945評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼严肪,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了谦屑?” 一聲冷哼從身側(cè)響起驳糯,我...
    開封第一講書人閱讀 37,709評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎氢橙,沒想到半個月后酝枢,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,158評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡悍手,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,502評論 2 327
  • 正文 我和宋清朗相戀三年帘睦,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坦康。...
    茶點故事閱讀 38,637評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡竣付,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出滞欠,到底是詐尸還是另有隱情古胆,我是刑警寧澤,帶...
    沈念sama閱讀 34,300評論 4 329
  • 正文 年R本政府宣布筛璧,位于F島的核電站逸绎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏夭谤。R本人自食惡果不足惜棺牧,卻給世界環(huán)境...
    茶點故事閱讀 39,911評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望朗儒。 院中可真熱鬧陨帆,春花似錦曲秉、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,744評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至纲爸,卻和暖如春亥鸠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背识啦。 一陣腳步聲響...
    開封第一講書人閱讀 31,982評論 1 266
  • 我被黑心中介騙來泰國打工负蚊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人颓哮。 一個月前我還...
    沈念sama閱讀 46,344評論 2 360
  • 正文 我出身青樓家妆,卻偏偏與公主長得像,于是被迫代替她去往敵國和親冕茅。 傳聞我的和親對象是個殘疾皇子伤极,可洞房花燭夜當晚...
    茶點故事閱讀 43,500評論 2 348

推薦閱讀更多精彩內(nèi)容