Require.js:從零到一
工作中,發現前端同學使用 require.js。我不會,所以為從零到一。
require.js 講道理的話,很簡單。通常的說法是,可以非同步載入 js 和 管理依賴實現模塊化,然後就是各種好處,不一而足。
初學的我看來,非同步載入 js,跟寫代碼無關,於是忽略了。把重點放在了後者。第一感覺是,給 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
- 最後的 todo
體會和感悟
本來簡單的 todo 被自己寫得複雜。但是定義的組件可以方便以後的開發,可以節約時間。同樣,也會帶來一些問題。也許,就不那麼靈活了,明明可以暴力的。
最後,今天下午幫助一位同學過了那道 OJ。
推薦閱讀: