项目开发(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的组合进行开发时, 确实节省了很多不必要浪费的时间,最主要的是维护和修改~ 谁用谁知道~!
转载于:https://www.cnblogs.com/htzan/p/6186783.html
项目开发(Require + E.js)相关推荐
- 项目开发中常用JS表单取值方法
项目开发中常用JS表单取值方法 一.常用表单基本取值方法(form1为表单名称,TextBox1为控件ID,以文本框为例,html控件与web服务器控件是一样的) 1.form1.Te ...
- vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析 一.Vue.js实例 在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
- Vue.js + Vuex + TypeScript 实战项目开发与项目优化
技术栈: Vue.js + Vuex + TypeScript Todo List: 使用Vue CLI初始化项目 调整初始目录结构 删除初始化的默认文件(对于我们项目是多余的组件components ...
- 【两万字图文详解】 运动会管理系统-前后端分离-项目开发:【后端】SpringBoot, SpringMVC, MyBatis【前端】Vue.js,ElementUI
项目名称:运动会管理系统 技术栈: 后端:SpringBoot,SpringMVC,MyBatis,tkmapper,Maven聚合工程等 前端:Vue.js,Element-u ...
- Vue.js 实战系列之实现视频类WebApp的项目开发——6. 首页视频详情实现
如果想看该实战系列的其他内容,请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发. 项目仓库地址,欢迎 Star 实现效果 功能实现 视频详情页基本实现 创建 InfoBar.vue ...
- OpenHarmony JS项目开发流程
2022 CSDN OpenHarmony应用学习挑战赛火热报名中,平板电脑.智能手表.智能手环等你来拿!点击链接了解详情:2022CSDN Openharmony应用学习挑战赛(点我立即报名) 一. ...
- 微信小程序项目开发实战:用WePY、mpvue、Taro打造高效的小程序》(笔记4)支持React.js语法的Taro框架
Taro的编写代码方式和mpvue.WePY框架最大的一个差别就是,Taro并不是基于Vue.js的语法规范,而是遵循React语法规范,它采用与React一致的组件化思想,组件生命周期与React保 ...
- 用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
- vue-music(1)音乐播发器 项目开发记录
Vue-Music 跟学一个网课老师做的仿原生音乐APP跟学的笔记,记录点滴,也希望对学习vue初学小伙伴有点帮助 一| 前期工作 1.项目初始化 npm install -g vue-cli vue ...
最新文章
- 使用Python生成动态图表,一个很Cool的教程
- matlab中-psi_matlab输出论文仿真图
- 中国科学院大学研一课程教材课件共享项目
- 产业|世界十大工业自动化公司,你知道几家?
- 拓荒会员电商“无人区”,考拉海购能否拿下“新船票”?
- 成员变量的声明位置引起编译错误
- ArcGIS案例学习笔记2_2_等高线生成DEM和三维景观动画
- flask与js交互的示例代码_QT5.12 C++与前端JavaScript/HTML实现通信交互
- 团队项目:个人工作总结06
- 儿童机器人编程语言_儿童编程机器人
- 先码后看 Spring源码解析 侵立删
- 修复Win10任务栏开始菜单等系统图标无法点击问题
- uniapp如何使用uview中的loadmore上拉加载
- linux+暂停运行,如何暂停和继续运行Linux程序
- OJ 2309 Problem C 	Lemon
- DeepLab V1模型原理
- MindMapper 与MindManager之间的区别
- 火车票是一门什么生意 「上篇」
- 国家基金申请书中的科学问题与关键问题
- 雨松MOMO 之 开始学习搭建界面自适应屏幕(一)
热门文章
- linux跟aix时间同步,Linux 与AIX环境下修改时间
- 电脑小写字母怎么切换_电脑上也可以使用九州音集啦!
- 【算法竞赛学习】二手车交易价格预测-Task1赛题理解
- 计组—中央处理器(CPU)
- [机器学习]PMML预测模型标记语言
- 如何设计一个合适的系统电源
- 从晶体管特性曲线看饱和问题(Z)
- MACOS远程访问树莓派桌面
- 【目标检测_概述】recent advances in deep learning for object detection_2019
- 基于busybox构建rootfs