資訊專欄INFORMATION COLUMN
摘要：介紹一款模塊加載工具的入門，并且重點介紹其優化工具。發布目錄項目源代碼工具目錄，例如構建工具等。另外，前端代碼發布前都會進行壓縮，使文件足夠小。原來是因為里了，所以優化工具把也合并進來了。而優化工具要用好，要多嘗試他們的配置選項。
前端變化太快，如今RequireJS已經無法吸引眼球了。
介紹一款模塊加載工具：RequireJS的入門，并且重點介紹其優化工具。
RequireJS是一個代碼模塊加載器。
最古老的時候，前端在開發頁面的時候，一般情況下，都是在Html文件里一次把所有會用到的JavaScript文件通過
隨著前端項目越來越復雜，這種方式帶來了很多問題：
命名沖突。在以前的項目里，經常為了命名沖突，出現很多類似 comm.utils.dialog的對象名。
文件依賴。例如上述代碼，如果某開發人員要調用dialog.js，那么必須在此之前知道它依賴于util.js，并在dialog.js之前引用util.js，否則會報錯。
更詳細的請看文章前端模塊化開發的價值（https://github.com/seajs/seajs/issues/54...）
所以很多人去研究模塊化開發，成果也不錯。出現了許多模塊化方案和標準，目前有以下：
符合AMD規范，如RequireJS
符合CMD 規范，如SeaJS
NodeJS規范 CommonJS
ECMAScript 6的模塊化
RequireJS就是符合AMD規范一種實現。
二、使用官網下載RequireJS，并在頁面中引用，即可享用RequireJS的所有特性。
從一個DEMO開始，此Demo沒有很多邏輯，當加載某模塊時在控制臺打印該模塊的名稱。
以上是Demo的代碼結構。
release：發布目錄
src：項目源代碼
tools：工具目錄，例如構建工具等。
點擊查看完整代碼
DEMO代碼分析
入口文件，main.html
暫忽略release和tools目錄，只關注src目錄。
先看main.html
先引入了require.js，再引入配置信息config.js，最后是一段引導啟動代碼。此Demo的啟動代碼，在require函數的第一個參數里傳入它所需要的模塊，one和two，而不需要關心它們分別依賴于什么
配置文件config.js
引入require.js后，需要先進行配置，例如baseUrl是指加載資源時，是相對此路徑的資源。
定義模塊
require函數的加載對象是模塊，對于requireJS來說，一個文件定義一個模塊。那么怎么定義模塊呢？
使用define函數定義，例如two.js里的代碼是：
其中return的對象是該模塊對外曝露的接口，調用方require此模塊后，可使用此對象所定義的所有方法和屬性。
運行DEMO
使用Chrome運行src/main.html，先后初始化了three，one，two等三個模塊。如下圖
網絡請求是這樣的
main.html通過script標簽加載require.js和config.js，然后啟動代碼通過require函數加載 one.js和two.js，two.js通過require函數加載它所依賴的three.js。
requireJs的入門要關注四樣東西
頁面引用 require.js
在使用require函數前，使用require.config方法配置路徑等信息
使用require函數加載模塊
使用define函數定義模塊
三、優化工具以上是RequireJS最基本的使用方法。然而，它還提供了優化工具，用于提升性能，此優化工具為 r.js（http://requirejs.org/docs/optimization.h...）
requireJS認為一個文件只能定義一個模塊。然而，有些模塊很小，分開文件來開發雖然有利于源代碼的維護和可讀性，但卻不利于瀏覽器環境下的加載，因此會有一些合并代碼的需求，即將幾個模塊合并到一個文件里，例如如果一個工程里使用到了jquery和backbone等第三方代碼庫，而且又是常常一起使用的，那么在發布之前就可以把它們合并成一個文件。
另外，前端代碼發布前都會進行壓縮，使文件足夠小。因此，現在介紹一下如何使用r.js的優化工具實現此兩點述求。
安裝與使用
下載r.js。
安裝NodeJS和NPM，官網去下載安裝包即可
同樣是上一節的Demo，我們要合并one.js和two.js，同時壓縮所有的代碼。
以下文件目錄中
tools里面的r.js是優化工具的代碼庫；而build.js是配置文件
src/js目錄下多了一個combine.js文件。此文件用于存放合并后的代碼。
配置文件
優化工具根據配置文件進行優化，即tools里面的build.js。
配置選項有很多，詳情請看
https://github.com/jrburke/r.js/blob/mas...
優化一：合并文件
在src/js下新建combine.js，內容為空都可以。
tools/build.js里配置要合并的config.modules。
命令行cd到tools目錄
執行 node r.js –o build.js
從輸出的信息看來，combine.js合并了one.js，three.js和two.js。
但我們在tools/build.js里明明配置的是合并one和two。原來是因為two.js里require了three.js，所以優化工具把three.js也合并進來了。那么如果我本意其實并不想把three.js合并進來呢？
Rjs的合并策略：傳入define，require的模塊參數如果是直接量就會合并，如果是變量那么不合并，例如
Two.js里require(‘three’)這樣加載，three.js是會被合并到combine.js的，而如果是var mod=”three”; require(mod)，那么three.js是不會被合并的。
優化二：代碼壓縮
默認情況下，優化工具是會壓縮代碼，但是如果某些情況下不想壓縮可以，在tools/build.js里關掉，即optimize選項設置為none。
運行結果
編譯后的release目錄文件：
運行release/main.html，同樣在控制臺打印了加載的模塊名稱，即實現了跟之前src/main.html一樣的功能。
但是，不再多帶帶加載 one.js、two.js和three.js了，而是只加載 combine.js
至此結束，只會用requireJS是不夠的，優化工具會使你的程序性能得到提升。
而優化工具要用好，要多嘗試他們的配置選項。http://requirejs.org/docs/api.html#confi...
我在深圳，歡迎關注我的公眾號
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79054.html
摘要：前端工程化的演化。前端較為流行的單元測試，等自動化測試自動化測試是軟件通過模擬瀏覽器，對頁面進行操作，判斷是否產生預想的效果。 前端工程化 ??前端工程化的概念在近些年來逐漸成為主流構建大型web應用不可或缺的一部分，在此我通過以下這三方面總結一下自己的理解。 為什么需要前端工程化。 前端工程化的演化。 怎么實現前端工程化。 為什么需要工程化 ??隨著近些年來前端技術的不斷發展，越...
摘要：以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。強大的設計使得它更像是一個構建平臺，而不只是一個打包工具。 以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。 如今，網頁不再...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：后來換了一家公司，沒有前端開發這個職位，是從轉過去的，因為項目需要，漸漸的也就坐實了這個崗位。假如我們以前的代碼是這樣的放到全局作用域。此時的代碼，其實已經具備了進入現代期的要求，那就是規范模塊化。 我是14年入的程序員大軍，當時主java兼具前端開發的活兒，在現在看來的一些流開發框架和新興思想，早在node.js開始進入大家視野的時候就流行起來了，只是在那時博主并沒有關注前端的生態圈...
摘要：并減少對樣式的請求。缺點暴露了模塊成員，外部可以修改模塊內部狀態。所有依賴這個模塊的語句，都定義在一個回調函數中，等到加載完成之后，這個回調函數才會運行。 HTML&&CSS基礎知識點整理 一、WEB標準：一系列標準的集合 1. 結構（Structure）：html 語言：XHTML[可擴展超文本標識語言]和XML[可擴展標記語言] 2. 表現（Preasentation）:css...
閱讀 1924·2021-11-19 09:40
閱讀 2132·2021-10-09 09:43
閱讀 3294·2021-09-06 15:00
閱讀 2810·2019-08-29 13:04
閱讀 2766·2019-08-26 11:53
閱讀 3512·2019-08-26 11:46
閱讀 2320·2019-08-26 11:38
閱讀 390·2019-08-26 11:27
