小议JavaScript泛式框架架构的逻辑形式
作者:leecade 来源:51js 发布时间:2010-07-02 12:55:00
by leecade :
我聊下我的想法
从功能上看,能不能把JS分成3层结构
1 语法设计,选择器,常用函数
2 业务逻辑(比如封装好常用的TAB啊 BUTTON啊 这些控件和抽象的功能类)
3 注册方法绑定事件等
------------------------------------
第一层结构
核心是设计语法,简写选择器,扩展常用函数;命名空间采用$
语法形式的设计,表达最简单的逻辑:
---------------------------
谁.要做什么(怎么做)
---------------------------
参考JQ 的API设计
$(who).what(how)
---------------------------
a.关于who
如果who是string的形式 则用选择器(推荐MINI选择器,简单缩写就行了,条件判断等还是应该在函数内处理)获取对象
如果who是 对象的形式,则是包装此对象以应用内建常用函数的方法链
如果who = "Ready" 则是应用 DOM Ready 方法
b.关于what
同样是参考JQ的语法实现链式写法
例: $("id").blind("click",function(){...}).show()
c.关于how
常用函数的自定义参数,没什么好说的
第二层结构
语义上不是描述方法而是描述对象,命名空间自定义 比如 Mail
API 上 我觉得使用NEW关键字还更清晰
比如 var btn = new Mail.Button
by Ozone:
站在系统论的高度并不准确的通俗宏观:
浏览器环境中的JS编程由JS自身、DOM数据输入、DOM数据输出组成,前者是主体,后两者是辅助,数据从DOM中来——经过JS处理——到DOM中出,JS数据处理的实质是计算,不外乎数值运算和逻辑运算,框架首要考虑的问题应该是JS主体抽象问题,其次才是输入输出简化。
框架应该尽量方便使用者思维“WHAT TO DO”,不被“HOW TO DO”所纠缠,把“HOW TO DO”与“WHAT TO DO”分开,从而回归“计算(运算)”这一语言的本质。
例如:
//-------- how to do ? -------------
Array.prototype.each = function(closure){
return this.length ? [closure(this[0])].concat(this.slice(1).each(closure)) : [];
}
function map(symbol, list){
return list.each(Function("x", "return x" + symbol))
}
//----------what to do ?-----------
var list = [1, 2, 3, 4, 5];
alert(map("+1", list)); // [2, 3, 4, 5, 6]
alert(map("-1", list)); // [0, 1, 2, 3, 4]
alert(map("*2", list)); // [2, 4, 6, 8,10]
alert(map("&1", list)); // [1, 0, 1, 0, 1]
alert(map("^1", list)); // [0, 3, 2, 5, 4]
alert(map("=1", list)); // [1, 1, 1, 1, 1]
alert(map(">>1", list));// [0, 1, 1, 2, 2]
alert(map(">1", list)); // [false,true,true,true,true]
alert(list); // [1, 2, 3, 4, 5]
现在不少学习书籍,开始就来个“hollo world ”,然后是没完没了的繁复的“HOW TO DO”实例,没有宏观的明细的语言体系把握,学人(特别是初学者)看得一个头两个大,晕头转向实属正常,不晕才怪!
猜你喜欢
- 在 ASP 的内建对象中除了用于发送、接收和处理数据的对象外,还有一些非常实用的代表 Active Server 应用程序和单个
- 科学设计你的网站网页:来自 Eye-Tracking研究的23节必修课 ——Christina Laun在网络设计领域关于Eye-
- asp日期转换星座函数,参数是日期型function astro(birth)astro=""if
- 聚合函数 count,max,min,avg,sum... select count (*) from T_Employee select
- ADODB.Stream在ASP编程中往往用于无组件上传,并且可以指定文件编码,可以应对各种不同的需要。但是在使用ADODB.Stream过
- 代码如下:<% sql="select * from serr where
- 写过一篇"正则表达式30分钟入门教程",有读者问:[^abc]表示不包含a、b、c中任意字符, 我想实现不包含字符串ab
- CSS中最常用的布局类属性,一个是Float(CSS浮动属性Float详解),另一个就是CSS定位属性Position。1. positio
- 本来想等到IE8正式发布时再在blog中写段代码,用来提示IE6用户升级到IE8的,不过貌似IE 8已经RTM了,今天又正好看到这个“升级I
- Data Points Archive 有时, 为了让应用程序运行得更快,所做的全部工作就是在这里或那里做一些很小调整。啊,但关键在于确定如
- 每个浏览器都有自己的默认样式,这是一段预定义的CSS,用以简单地呈现网页。在Firefox中的地址栏中输入resource://gre/re
- 不知上过ChinaRen校友录的朋友们有没有注意,ChinaRen在改版后很多方面都进行了较大的改动。例如留言与回复方面已经不再像以前那样,
- adodb.stream对象的方法/属性cancel 方法使用方法如下object.cancel说明:取消执行挂起的异步 execute 或
- 大家都知道搜索引擎比较喜欢H1。在SEO中H1也是很基础也很重要的一步。但有些时候为了界面风格的原因,很多标题性的文字做成了图片。大多数情况
- 网站 首页页面宽度 px Yahoo! 950 淘宝 950 MySpace 960 新浪 950 网易 960 Live Search 9
- 网站能切换几套CSS风格早已不是什么新鲜事了。大家也都知道怎么去弄。早上发现一个有意思得站点 http://www.leemunroe.co
- 前面的文章,主要讲到如何使用无序列表ul元素来实现复杂柱状图,但是在Web标准中,除了注重表现外,更加注重语意,所谓的语意就是样式和内容的相
- 有的时候,我们在网页中会用到复选框,也就是多选框,当用户提交输入信息的时候我们会获取复选框的内容,然后保存到数据库中,如经常用到的是用户输入
- 尽管可能是个比较老的话题了,但是我还是从来没有整理过。今天在《精通HTML》一书中看到,这里整理一下。在XHTML中,<html>
- 如何自动反馈电子邮件?很多网站上的电子邮件都是自动回复的,就象163电子邮局提供的邮件自动回复功能一样。这是怎么实现的?我们可以用ASPMa