使用JS模板引擎、面向对象以及示例代码
来源:互联网 发布:苹果手机数据怎么开 编辑:程序博客网 时间:2024/06/10 12:27
数据载入后,最终都会以某种形式显示在页面上。简单情况,我们可能会这样做:
- $('body').append('<div>' + data.name + '</div>');
如果页面逻辑一旦复杂,比如需要有if判断或者多层循环时,这种连接字符串的方式就相形见绌了,而这也就催生出了JS模板引擎。
主流的JS模板引擎有underscore.js,Jade,EJS等等,可以横向对比一下这些JS模板引擎的优缺点。
对于相对简单的页面逻辑(只需要支持if和for/each)来说,我更倾向选用轻巧的underscore.js或者JavaScript Templates。
在当前例子中,使用underscore.js生成列表就非常简单了,页面模板为:
- <ul data-role="listview" data-inset="true">
- <script id="tmpl-restaurants" type="text/template">
- <% _.each(data, function(restaurant) { %>
- <li>
- <a href="#" data-rel="back" data-value="<%- restaurant.name%>"><%- restaurant.name%></a>
- </li>
- <% }); %>
- </script>
- </ul>
调用引擎:
- $("#tmpl-restaurants").replaceWith(
- _.template($("#tmpl-restaurants").html(), {
- data : restaurants
- })
- );
面向对象与模块化
通过上面这些工具的组合,我们有了模块的概念,有了模板引擎,有数据的加载。最终还是要通过javascript将这一切组织在一起并加入应用所需要的逻辑。为了能最大限度的复用代码,用面向对象的方式去组织内容是比较好的选择。
JavaScript虽然原生并不支持面向对象,但是依然可以通过很多方式模拟出面向对象的特性。例子中采用了我个人比较喜欢的一种方式是:
- var foodOrder = function(ui, options){
- //构造函数
- this.init(ui, options);
- }
- foodOrder.prototype = {
- defaultUI : {
- form : '#form-order'
- }
- , defaultOptions : {
- debug : false
- }
- , init : function(ui, options){
- this.ui = $.extend({}, this.defaultUI, ui);
- this.options = $.extend({}, this.defaultOptions, options);
- }
- }
- var order = new foodOrder({
- form : '#real-form'
- }, {
- debug : true
- });
将页面的UI元素以及配置项目抽象出来,在实际构造对象时则可以通过入口参数复写,可以分离整个项目的逻辑与UI,使处理的方式更加灵活。
Web App最佳实践示例代码
依据此Web App开发最佳实践所开发的App,基于HTML5 Boilerplate、requireJS、jQuery Mobile、Underscore.js,后端逻辑用jStorage模拟实现。完成后的成品在此。所有代码可以在github查看。希望大家也能够按照本系列教程开发出好用的Web App。
0 0
- 使用JS模板引擎、面向对象以及示例代码
- python面向对象代码示例
- JavaScript面向对象代码示例
- Python面向对象示例代码
- 使用js模板引擎心得
- JS获取对象代码示例
- js面向过程与面向对象编程示例(使用jquery库)
- 4行代码实现js模板引擎
- js面向对象编程代码
- 面向对象的JS代码
- 使用面向对象的编程思想实现js代码
- 使用JS编写一段面向对象的代码
- 使用JS编写一段面向对象的代码
- js 面向对象的语法示例
- Java入门代码示例--面向对象
- JS模板引擎jTemplates使用笔记详解
- JS模板引擎jTemplates使用笔记详解
- baiduTemplate——js模板引擎使用
- 无法获取到新浪微博中指定用户的第一条微博??
- Video标签播放视频?谷歌浏览器?safari?? 谷歌浏览器播放不了mp4格式的视频的原因
- 超实用的JavaScript技巧及最佳实践(下)
- FFMPeg代码分析:avcodec_decode_video2函数
- windows远程桌面访问ubuntu12.04
- 使用JS模板引擎、面向对象以及示例代码
- 二叉树的非递归遍历方法
- iOS7新JavaScriptCore框架入门介绍
- FFMPeg代码分析:AVFrame结构体及其相关的函数
- _finddata_t 的使用
- ios判断系统版本
- Adobe Flex 三种方式处理事件
- 黑马程序员:Java网络编程
- Android p2p局域网聊天软件的实现