搜索:
首页 >> JavaScript >> Js高级编程 >> 小议JavaScript泛式框架架构的逻辑形式

小议JavaScript泛式框架架构的逻辑形式

2010-7-2 作者:leecade 来源:51js 投递文章

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”实例,没有宏观的明细的语言体系把握,学人(特别是初学者)看得一个头两个大,晕头转向实属正常,不晕才怪!


 

Tags:框架  javascript 
相关文章
手机版 Js高级编程 Asp之家 Aspxhome.com
闽ICP备06017341号