项目开发（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");})});