標籤：
使用模組化思維和模板引擎搭建前端架構（require+underscore）介紹： 是一個非常小巧的JavaScript模組載入架構，是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K，堪稱非常輕量。
官網：http://www.requirejs.cn/ （PS：如果沒接觸過，剛開始看都是一頭蒙蔽的，建議看下菜鳥教程）
新手教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
優點：可完成團隊協作、模組複用、單元測試等等一系列複雜的需求
介紹：JavaScript實用庫，提供了一整套函數式編程的實用功能
API：http://www.bootcss.com/p/underscore/
使用：這裡僅僅將underscore作為模板引擎來使用，使用了_.template 文法，（基礎函數按需使用，反正生產模式只有5K）
因為換工作接手了一個銀行項目，剛開始無從下手，然後稍微看了一下所使用的東西，將這個項目中的前端架構全部摳出來，做成一個小demo，然後自己學習到了，現在分享出來大家學下，自己也做個備忘。廢話不多說，開始扯淡。
在require的官方文檔中建議我們這樣布局目錄：
對於官方的布局方案只是官方建議的單個純require的布局，但是我們的項目中可不僅僅使用require，然後我參考了銀行項目的目錄結構，然後思考了方便性和可讀性，感覺這套方案還是可以的，直接
簡單說明一下：
好了，目錄就這樣，這樣的目錄思考了一下還是很有道理的，否則不會那麼多銀行項目都沿用這個目錄結構的。
2. 匯入require，配置require設定檔，然後用require來統一管理js檔案
index.html代碼如下：
| 12345678910111213141516171819 | <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"/> <title></title> <meta charset="GBK" /></head><body> <div class="head" id="header"></div> <div class="body"></div> <div class="foot"></div></body></html><script <span style="color: #ff0000;">data-main</span>="resources/common/config/requireconfig" src="resources/lib/require2.2.0.js"></script><script> <span style="color: #ff0000;"><strong>require([‘../../app/index/js/index‘], function (login) { new login(); });</strong></span></script> |
在整個頁面中，我們相當於只是搭建了一個頁面配置（3個div），然後再在這些布局中塞我們將要展示的模組代碼。這是我們看到的html內容，對於所有的js，只需要引用一個require的js檔案，然後在檔案中使用data-main指定一個設定檔，在require中使用data-main指定了這個檔案，相當於告訴require的起始搜尋位置為這個目錄。
下面我們看下requireconfig.js的配置
| 1234567891011121314151617 | require.config({ //指定基目錄 baseUrl: "resources", //配置各種庫的基本資料 paths: { ‘underscore‘: ‘lib/underscore‘, ‘jquery‘: ‘lib/jquery-1.12.1.min‘, ‘class‘: ‘lib/class‘, ‘text‘: ‘lib/text‘ //text是require的一個模組，當你載入設定檔的時候，就自動引進項目本身了 }, //配置輸出 shim: { ‘underscore‘: { exports: ‘_‘ } }}); |
在這個設定檔中，我們配置了baseUrl，指定一個根目錄，然後配置path，也就是我們所有要管理的js檔案，然後配置shim的輸出檔案。至於基礎概念不是很懂的，可以去查一下API，在這裡我就不累贅的說了
3. 建立模板檔案tpl和模組使用的js檔案
我們在resource中的app中建立一個index模組的目錄，然後在這裡建立我們所需要的tpl模板和js檔案。
PS：tpl只是一個尾碼，本質上還是txt的檔案，你建立txt檔案也可以，不過因為習慣了，而且給人一看就明白了，以tpl結尾的就是模板
index.js代碼如下：
| 1234567891011121314151617181920 | define(function (require) { require("jquery"); //使用require載入所需js，類似node的require載入模組，以及webpack安裝好的模組，然後載入這個模組 require("underscore"); var Class = require("class"); //class是一個對象類，使用該對象可以建立一個對象，然後拋出去 var login = Class.extend({ //構造方法，這個方法是必執行的，只要你建立了這個類 initialize: function () { this.render(); }, //其他方法 render: function () { //初始化模板 var header_text = require(‘text!app/index/tpl/headContent.tpl‘); var header_html = _.template(header_text)({ person: {name:"Gerry"}}); $("#header").html(header_html); } }); return login;}); |
這樣require非同步載入這個js，回調中就可以拋出這個對象，然後new這個對象，就可以調用這個js模組中的方法和一些設定，就是index.html代碼中加粗標紅的js。
headContent.tpl模板代碼
| 1234 | <div style="color:red;"> 你好:<%=person.name%>，這是頭部資訊，展示頭部模組的 角括弧的是underscore模板引擎的參數</div> |
這個tpl中，顯示了頭部的資訊，這裡只做測試，過於簡單，然後寫了一個參數。
4. 使用underscore載入tpl，並將所需要的資料塞進頁面
我們在index.js中處理了這些資料
var header_text = require(‘text!app/index/tpl/headContent.tpl‘); 這句話使用require的text的子功能去搜尋並讀取這個模板內容
var header_html = _.template(header_text)({ person: {name:"Gerry"}}); 這句話使用underscore的template方法，將參數塞進模板並渲染成html標籤
$("#header").html(header_html); 這句話當然就是將模板載入到靜態布局中，然後就出來啦
效果如下：
後記：現在前端的發展趨勢很猛烈，可能技術和架構更新很快，今天用這個明天用那個。可能上一個月還在用require，下個月就要用webpack，再下個月就要用node啥啥啥的，但是我感覺最基礎的是不會變的，萬變不離其宗，javascript基礎要學好。其次沒有哪個所謂的快速開發的架構是最好的，只有根據你索要做的項目的大小啊，需求啥的去選擇一些架構，適合的才是最好的，不要盲目去追求很多很多最新的最好的啥的。好了，已經夜裡了，該休息了，明天還要上班呢，晚安，兄弟們.......
分類: 前端架構標籤: 前端, 模組化, require, underscore模組化思維和模板引擎
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
