項目開發（Require + E.js）

最近在做的幾個項目，分別用了不同的框架跟方式，有個H5的項目，用了vue框架， 這個項目我還沒有正式加入進去， 等手頭的這個項目完成就可以去搞vue了， 現在手頭的這個項目是一個招聘的項目， 用到了NodeJs，這個主要是用來轉接后臺的接口，穩定性還是不錯的，由一個玩前端的后端童鞋負責，但是對Node我還是一個小白， 在項目中前端的開發環境主要是Require(模塊化加載)，E.js（數據模板）的開發方式， 這個也是我解除的比較多的，不但現在的項目用到了這個組合， 之前的項目也是這樣來的， 所以我把對這套開發方式一些方法跟利與弊總結一下，僅僅只是自己對自己的總結而已~~

?

RequireJS解除的時間比較早了， 我記得我剛開始工作的時候，用的都是一個頁面里面放一個JS/或者幾個JS文件，，那個時候以為這樣就是正確的處理JS的方法，因為那時業務代碼也非常的少，也沒有回用模塊化的同事，大家都是那么耿直的一個JS一個JS的加載著，用著也沒什么問題，感覺也挺方便，但是~ 隨著業務邏輯多了，功能多了，這樣的方式就顯得有點不那么友好了，如果一個項目又幾十個功能，幾十個JS，， 一個一個JS的<script type="text/javascript" src="js/x.js"></script>這樣去引用，感覺有點不那么順暢，用起來也不方便，看起來也很臃腫~ ? 當JS多的時候，Require就顯得格外有作用了， 看起來好像十分簡潔跟方便，我們只要在一個config的定義文件去引用你需要的JS就可以了~~ 在我的理解中Require就是一個管理以及加載JS的方法/插件~~ ?先來看下Require是如何用的吧~ 下面是我現在這個項目的Require(config配置內容~)

這里面配置了所有我要用到的JS， 不管是自己寫的，還是網上要用到的插件，都可以在這里配置好，要用的時候只要找到它對應的名稱引用就好了~~

?

下圖面簡單說下Requireconfig配置說明

require.config({// 相對路徑(可不配置)baseUrl : '',  //（1）當前config引用js的路徑// 基于baseUrl路徑配置paths: {  //（2）文件的引用路徑 可省略后面的.jsjquery     : 'js/plugins/jquery.min',  //為引用的js配置路徑和名稱dialog  : 'js/plugins/dialog' },// 依賴關系shim: {  //（3）對paths里配置的路徑做依賴關系
        jquery: {exports: '$',},dialog : {  //對上面的dialog依賴于jq和ui-dialog.cssdeps : ['jquery', 'css!../css/plugins/ui-dialog']  },},map: {'*': {css: 'js/plugins/require-css/css'}},// 避免加載超時waitSeconds: 0
});

?

配置好了config，那么在頁面中是怎么引用的呢， 其實跟普通的JS引用一樣， 只是我們只需要引用2個JS文件~~

//統一引用requere插件和config配置文件
<script src="js/require.min.js"></script>
<script src="js/config.js"></script>
<script>require(['js/views/fn1'],function(fn1){ //當前頁面需要引用的jsfn1.init();  //回調中的初始化
    });
</script>

?

config配置好以后，頁面中也引用了，那么這個fn1.JS中的內容是怎么寫的呢~~

/** author       : XX* date         : XX* description  : XX* *///引用的JS用define來引用配置好的JS，
define([  'jquery','dialog'
], function($) { //看引用的JS是否有返回值var _obj = {};  //字面量一個對象/* 定義一個對象初始化的值 */_obj.init = function() {}/* 定義一個對象方法的值 */_obj.method = {}/* 定義一個對象方法的值 */_obj.binEvent = function() {        }//返回對象 return _obj;
});

以上就是Require使用的三個流程，其實目的也就是為了管理JS，讓其模塊化，一個JS就可以對應一個功能，這個JS中可以引用我們定義的任何方法和插件， 管理起來就會特別的方便，，再也不要一個頁面一個頁面的去找你要的那個JS或者你要的某段代碼~~

?

EJS一個跟Require配合起來特別好使的數據模板，為什么要用數據模板呢，因為后臺跟前端配合的多的話，就會有很多數據，如果這些數據都放在頁面上的話，管理起來會比較麻煩，Require可以一個JS對應一個功能，那么EJS就可以對應一個數據，EJS其實跟HTML是一樣的，只是后綴不一樣，還有EJS里面可以直接寫入數據~ 可以直接在數據里面做循環，判斷，或者我們要的其它操作。~ 下面是一個簡單的列表數據模板樣式~

<% if(data.length) { %>
<table class="table">
<% for(var i = 0; i < data.length; i++) {%>
<tr data-id="<%= data[i].id %>" data-default="<%= data[i].isDefault %>"><td><%= data[i].name %></td><td><div class="btn-list" data-value="<%= data[i].name %>,<%= data[i].inviteMsg %>,<%= data[i].hrName %>,<%= data[i].phone %>,<%= data[i].address %>,<%= data[i].remark %>" data-notice="<%= data[i].noticeAction %>" data-introduce="<%= data[i].isIntroduce %>"><% if(data[i].isDefault) {%><a href="javascript:;" class="bt default">默認模板</a><% } else {%><a href="javascript:;" class="bt cf-default">設為默認</a><% } %><a href="javascript:;" class="bt cf-copy" data-status="copy">復制</a><a href="javascript:;" class="bt cf-edit" data-status="edit">編輯</a><a href="javascript:;" class="bt cf-delete">刪除</a></div></td>
</tr>
<% } %>
</table>
<% } else {%><div class="no-data">暫無數據</div>
<% } %>

EJS中的<% %>是其特有的寫法，可以在里面執行JS操作和賦值，那么這個數據模板里面的data（也就是數據）是從哪里來的呢~?

之前說了Require，當然我們的EJS也是會定義在Require中的config里面的~~

?

JS中的引用~~

define(['text!../../templates/ejs.ejs'  //引入當前需要的數據模板], function(ejsTmp) {  //當前模板的返回值//ajax請求后臺數據，將后臺數據復制到當前模板中
         $.ajax({url: 'xx/xx', //請求后臺數據type: 'post'}).done(function(data) {//填充內筒$('#table').html(ejs.render(ejsTmp, data.data));  //render EJS的模板賦值數據的方法
        }).fail(function() {console.log("error");})});

?

這樣我們就可以在我們剛剛的數據文件中對我們的數據進行各種操作了， ?當數據量大的時候這樣會特別友好， 一個HTML對應一個JS/對應一個EJ ~~ 這樣在修改某個模塊的時候絕對不會污染到別的模板~~ 不管從以后迭代還是從長遠優化來說，都是非常友好的~！?

?

在使用Require + E.js的組合進行開發時， 確實節省了很多不必要浪費的時間，最主要的是維護和修改~ ?誰用誰知道~！