使用JS模板引擎、面向对象以及示例代码

移动开发
页面逻辑一旦复杂,比如需要有if判断或者多层循环时,这种连接字符串的方式就相形见绌了,而这也就催生出了JS模板引擎。通过上面这些工具的组合,我们有了模块的概念,有了模板引擎,有数据的加载。最终还是要通过javascript将这一切组织在一起并加入应用所需要的逻辑。为了能最大限度的复用代码,用面向对象的方式去组织内容是比较好的选择。

数据载入后,最终都会以某种形式显示在页面上。简单情况,我们可能会这样做:

  1. $('body').append('<div>' + data.name + '</div>'); 

如果页面逻辑一旦复杂,比如需要有if判断或者多层循环时,这种连接字符串的方式就相形见绌了,而这也就催生出了JS模板引擎。

主流的JS模板引擎有underscore.jsJadeEJS等等,可以横向对比一下这些JS模板引擎的优缺点

对于相对简单的页面逻辑(只需要支持if和for/each)来说,我更倾向选用轻巧的underscore.js或者JavaScript Templates

在当前例子中,使用underscore.js生成列表就非常简单了,页面模板为:

  1. <ul data-role="listview" data-inset="true"> 
  2. <script id="tmpl-restaurants" type="text/template"> 
  3.     <% _.each(data, function(restaurant) { %> 
  4.         <li> 
  5.             <a href="#" data-rel="back" data-value="<%- restaurant.name%>"><%- restaurant.name%></a> 
  6.         </li> 
  7.     <% }); %> 
  8. </script> 
  9. </ul> 

调用引擎:

  1. $("#tmpl-restaurants").replaceWith( 
  2.     _.template($("#tmpl-restaurants").html(), { 
  3.         data : restaurants 
  4.     }) 
  5. ); 

面向对象与模块化

通过上面这些工具的组合,我们有了模块的概念,有了模板引擎,有数据的加载。最终还是要通过javascript将这一切组织在一起并加入应用所需要的逻辑。为了能***限度的复用代码,用面向对象的方式去组织内容是比较好的选择。

JavaScript虽然原生并不支持面向对象,但是依然可以通过很多方式模拟出面向对象的特性。例子中采用了我个人比较喜欢的一种方式是:

  1. var foodOrder = function(ui, options){ 
  2.     //构造函数 
  3.     this.init(ui, options); 
  4. foodOrder.prototype = { 
  5.    defaultUI :  { 
  6.        form : '#form-order' 
  7.    } 
  8.    , defaultOptions : { 
  9.        debug : false 
  10.    } 
  11.    , init : function(ui, options){ 
  12.        this.ui = $.extend({}, this.defaultUI, ui); 
  13.        this.options = $.extend({}, this.defaultOptions, options); 
  14.    } 
  15. var order = new foodOrder({ 
  16.     form : '#real-form' 
  17. }, { 
  18.     debug : true 
  19. }); 

将页面的UI元素以及配置项目抽象出来,在实际构造对象时则可以通过入口参数复写,可以分离整个项目的逻辑与UI,使处理的方式更加灵活。

Web App***实践示例代码

依据此Web App开发***实践所开发的App,基于HTML5 Boilerplate、requireJS、jQuery Mobile、Underscore.js,后端逻辑用jStorage模拟实现。完成后的成品在此。所有代码可以在github查看。希望大家也能够按照本系列教程开发出好用的Web App。

责任编辑:徐川 来源: avnpc.com
相关推荐

2014-04-30 12:04:43

Velocity.js模板引擎

2019-11-18 17:05:02

JavaScript面向对象程序编程Java

2017-01-04 15:22:57

TrimPath模板引擎

2016-10-11 15:42:08

2021-11-08 07:48:48

Go语言对象

2023-11-10 09:16:45

SpringBootThymeleaf

2023-01-10 09:38:09

面向对象系统

2010-03-18 13:43:40

python面向对象

2009-06-15 14:59:31

Java代码Java

2021-02-03 09:36:36

Python

2009-01-04 09:08:30

面向对象继承接口

2009-10-09 10:52:43

ASP.NET模板引擎

2016-11-01 20:26:47

前端模板underscoreWeb

2013-03-11 09:23:22

Go语言面向对象

2009-11-13 14:22:11

ADO.NET Dat

2024-02-29 08:02:00

2022-08-16 07:57:30

架构

2020-06-02 14:00:53

Vue.js组件Web开发

2022-07-30 23:41:53

面向过程面向对象面向协议编程

2009-08-07 10:20:38

WebSphere A
点赞
收藏

51CTO技术栈公众号