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

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

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

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

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

主流的JS模板引擎有underscore.jsJadeEJS等等,可以横向对比一下这些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> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

调用引擎:

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

面向对象与模块化

通过上面这些工具的组合,我们有了模块的概念,有了模板引擎,有数据的加载。最终还是要通过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 
}); 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

将页面的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模板引擎

2017-01-04 15:22:57

TrimPath模板引擎

2019-11-18 17:05:02

JavaScript面向对象程序编程Java

2016-10-11 15:42:08

2021-11-08 07:48:48

Go语言对象

2023-01-10 09:38:09

面向对象系统

2023-11-10 09:16:45

SpringBootThymeleaf

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

面向对象继承接口

2016-11-01 20:26:47

前端模板underscoreWeb

2009-10-09 10:52:43

ASP.NET模板引擎

2013-03-11 09:23:22

Go语言面向对象

2024-02-29 08:02:00

2009-11-13 14:22:11

ADO.NET Dat

2022-08-16 07:57:30

架构

2022-07-30 23:41:53

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

2017-03-10 18:29:17

Androidfreemarker应用

2020-06-02 14:00:53

Vue.js组件Web开发
点赞
收藏

51CTO技术栈公众号