標籤:

Require.js:從零到一

與主題無關的圖,是這周和同學討論一道 在線OJ題目 時畫的。

工作中,發現前端同學使用 require.js。我不會,所以為從零到一。

require.js 講道理的話,很簡單。通常的說法是,可以非同步載入 js 管理依賴實現模塊化,然後就是各種好處,不一而足。

初學的我看來,非同步載入 js,跟寫代碼無關,於是忽略了。把重點放在了後者。第一感覺是,給 js 加了一個命名空間,這個命名空間就劃分了粒度,所以有各種好處啦。後來,我發現,只需要記住以下幾點就可以用它寫程序了。

  • 寫法上的變化

古老的寫法是,在 HTML 的 script 標籤里無腦寫,或者單獨寫一個文件,然後載入進來。使用require.js 以後,這樣的做法將被捨棄。從直觀的感受看,寫法變成了這樣。

// foo.jsnn// 載入依賴的模塊nrequire.config({n paths: {n // 載入網路或本地 js 文件,例子n jquery: [jquery-3.1.0.min.js]n }n});nn// 定義自己的模塊,默認為文件名 foo ,也可以自己設置n// 如果依賴其他模塊,先載入n// 例子ndefine([jquery], function($) {n // coden return {n // 返回一個對象,主要是返回定義的模塊提供的方法 n }n});nn// 使用自己的模塊nn// 在其他模塊中使用ndefine([foo], function(foo) {n // 可以使用 foo 返回的所有東西n});n// 最後,將所有的模塊都載入到一個 js 文件里,比如:main.jsn// 在 HTML 里添加如下信息就可以使用了n// <script data-main="main" src="require.js"></script>n// tips: script data-main 屬性里沒有 .js 和 一些公用的模塊可以放在main.js里n

  • js 載入的變化

使用上述 require.config 的方法。

明白以上兩點以後,我開始用 require.js 把 bootstrap 的組件再次包裝一下。

  • 下拉菜單

代碼是這樣的:

後來想,能不能用這樣的方式做一個 to-do-list 的前端了?

  • 導航標籤

  • 列表組件

  • 任務item

最後就是組裝和 CSS 美化的工作了

  • 最後的 todo

體會和感悟

本來簡單的 todo 被自己寫得複雜。但是定義的組件可以方便以後的開發,可以節約時間。同樣,也會帶來一些問題。也許,就不那麼靈活了,明明可以暴力的。

最後,今天下午幫助一位同學過了那道 OJ。


推薦閱讀:

TAG:编程 | 笔记 |