项目开发（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）文件的引用路径 可省略后面的.js jquery : 'js/plugins/jquery.min', //为引用的js配置路径和名称 dialog : 'js/plugins/dialog' }, // 依赖关系 shim: { //（3）对paths里配置的路径做依赖关系 jquery: { exports: '$', }, dialog : { //对上面的dialog依赖于jq和ui-dialog.css deps : ['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){ //当前页面需要引用的js fn1.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的组合进行开发时， 确实节省了很多不必要浪费的时间，最主要的是维护和修改~ 谁用谁知道~！
