JSConf 2010 (二):JS的模式编程、微格式 和 MooTools

原创 2011年01月13日 00:01:00

模式编程(programming to the patterns)

JS的通用库最基本的目的是给你解决浏览器兼容性差异,Prototype和JQuery是做得最好的两个库。

JQuery对Dom的DSL化封装,还有对method chain的大量使用,几乎让你感觉在声明行为,所以它让非常多的对啰嗦的Dom编程厌烦的前端程序员迅速“上瘾”。但是,我们知道DSL化的JQuery还不够,因为它很好的解决了可读,但是并不一定容易维护(尤其是过度使用method chaning)。

其实Javascript的各种Widget库(如ExtJS、Dojo和YUI的widget库)都做到更好的复用。缺点是目前的widget库中的高级控件都严重的绑架了Dom结构,造成自己修改Dom结构比较麻烦。而没有使用Micro Format这样的基于标准的弱耦合,这是一个很大的问题。

顺便提一下,MicroFormat(微格式)是什么,WikiPedia上面有描述:

A Microformat (sometimes abbreviated μF or uF) is a way of adding simple semantic meaning to human-readable content which is otherwise, from a machine's point of view, just plain text. They allow data items such as events, contact details or locations, on HTML (or XHTML) web pages, to be meaningfully detected and the information in them to be extracted by software, and indexed, searched for, saved or cross-referenced, so that it can be reused or combined.

Both Firefox 3 and Internet Explorer 8 will support micro formats natively. If you cannot wait for the next version of Firefox or IE, then you can download the Operator micro format extension for Firefox and start testing your site.

这是一个最简单的从POSH(Plain Old Semantic HTML)变成hCard Micro Format的方法:

image

这样一来,这些本来含义难以使用爬虫和机器猜测的片段都有了具体含义。

不好意思,扯远了,让我们再回到模式编程上来。

会上提倡更多地采用模式编程,比如从OO开始,比如从继承一个类开始:

image

JS 类的关键切面包括:简单继承关系;把逻辑打碎成小的方法;把函数打碎成小的类;为编组的函数建立控制类;使用类库和事件库;必要时重构。

这样一段绑定事件的JS逻辑:

image

就可以这样进行模式编程,把整个行为逻辑定义为一个类,然后把绑定分别定义为方法,代码倒是复杂了,不过逻辑清晰不少,这个见仁见智吧。我还是觉得所有的重构、模式化和泛化都要建立在价值的基础之上:

image

未来如果子类出现:

image

最后他建议使用MooTools,它可以把JS中许多事情放在框架里面做完,让接口的使用更加简单,鼓励你重用代码,并写流畅、扩展性好和复用性好的代码。

 

MooTools(http://mootools.net/是一个简洁,模块化,面向对象的开源JavaScript web应用框架。 它为web开发者提供了一个跨浏览器js解决方案。在处理js css html时候。它提供了一个比普通js更面向对象的document API。

MooTools的优点:

1.灵活,模块化的框架,用户可以选择自己需要的组件。

2.MooTools符合OO的思想,使代码更强壮,有力,有效。

3.高效的组件机制,可以和flash进行更好的交互。

4.对于DOM的扩展增强,使开发者更好的利用document。

最后用一个MooTools的实例结束本文:

var Animal = new Class({

     initialize: function(name){

         this.name = name;

     }

});

var Cat = new Class({

     Extends: Animal,

     talk: function(){

         return 'Meow!';

     }

});

var Dog = new Class({

     Extends: Animal,

     talk: function(){

         return 'Arf! Arf';

     }

});

var Animals = {

     a: new Cat('Missy'),

     b: new Cat('Mr. Bojangles'),

     c: new Dog('Lassie')

};

for(var animal in Animals)

           alert(animal.name + ': ' + animal.talk());

// alerts the following:

// Missy: Meow!

// Mr. Bojangles: Meow!

// Lassie: Arf! Arf!

jsconf2010

  • 2011年05月04日 21:28
  • 483KB
  • 下载

JSConf 2010 (三):Raphaël、优化前端性能

提到Raphaël,就得先说说SVG,可缩放矢量图形(Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,...

JSConf 2010 (一):介绍、Google Chrome Frame 和 GitHub

一年一度的JSConf大会又召开,这是2010的官网 http://jsconf.us/2010: 真是够简陋的。 其中的Sliders请看这里:http://devthought.com/20...

5月10日云栖精选夜读:阿里专家直击前端盛会JSConf2017_Day2:见证Moment.js精彩分享

摘要: 第二天的会议个人认为最精彩的是来自于微软的一位女分享者,她是moment库的作者之一。此分享的精彩之处在于作者以moment为例讲解了开发一个类库的4个关键要素,一方面推广了moment,同时...

阿里专家直击前端盛会JSConf2017_Day2:见证Moment.js精彩分

原文链接 阿里专家直击前端盛会JSConf2017 Day2:见证Moment.js精彩分享 黎山 2017-05-09 19:57:51 浏览146 评论1 发表于: 开源自动化...

阿里专家直击前端盛会JSConf2017_Day2:见证Moment.js精彩分享

原文链接 阿里专家直击前端盛会JSConf2017 Day2:见证Moment.js精彩分享 yq传送门 2017-05-10 18:08:40 浏览126 评论0 深度...

jQuery,Mootools,Dojo,Ext JS的对比

现在的javascript真是百花争鸣,但是带来了很多的负面影响: 对javascript过度封装,学习曲线增加,反而帮倒忙侵入性过强,要看懂?要会用?学一遍吧,就算你是js高手,为什么?封装了...

AJAX框架jQuery,Mootools,Dojo,Ext JS的对比

AJAX 是web20 的基石,现在网上流行几种开源 的AJAX框架,比如:jQuery,Mootools,Dojo,Ext JS等等,那么我们到底在什么情况下该使用那个框架?以下是一组摘抄的数...

仿新浪微博返回顶部的js实现(jQuery/MooTools)

一、引言   在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮。例如:   其中淘宝网的是要滚动条的滚动距离大于某一段距离才显示返回顶部按钮;...

Ajax 框架_几种流行的 Ajax 框架 jQuery、Mootools、Dojo、Ext JS比较

AJAX是Web 2.0的基石,现在流行的几种开源Ajax框架,如jQuery、Mootools、Dojo、Ext JS等,应该如何选择?Ajaxian在2007年进行了调查(数字为使用该工具的百分比...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JSConf 2010 (二):JS的模式编程、微格式 和 MooTools
举报原因:
原因补充:

(最多只允许输入30个字)