爱米*阅

不是日志,不是剪切板

记录 3.13 - [技术 | Tech]

发布时间   2011-03-13 @ 21:08:00 标签    tangram kissy jquery js 编辑 | 分享 0

版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://www.blogbus.com/amixyue-logs/108835427.html

tangram 源码体验

总之,很 tricky,也很绅士,很牛!

Array

while(len--)
Array.prototype.slice
iterator
unique() push[source, empty result] slice[souce, result]
removeAt()
remove()
indexOf()
// 参考ecma262的String.prototype.indexOf实现
// 为undefined时归0,否则进行ToInteger(参见ecma262 3rd 9.4)
    position = Number(position) || 0;
    position = position < 0 ? Math.ceil(position) : Math.floor(position);
    position = Math.min(Math.max(position, 0), len);
String - Number parseXXX || -0

//如果 indexOf的 condition 不是 function,Array -> String -> String.indexOf

browser


/firefox\/(\d+\.\d)/i.test(navigator.userAgent)
parseFloat(RegExp['$1']); 又是正则的高级应用

dom


W3C有些dom 规范,Ecma 有些实现。但到了浏览器层面,就很难做了。回头看看百度浏览器如何和 tangram 高效结合吧

Date


getFullYear getMonth getDate getDay getHours getMinutes getSeconds
除过 getDate 其它都是程序员式的 -1

fn.scope
给对象绑定方法
给对象绑定静态方法
函数集合化,任何函数可以被封装成新的用于处理数组...

json


string <-> json
//我的很挫的想法
eval('{a:1}') 返回 1
eval('k={a:1}') 返回 k = {a:1}
//
return (new Function("return " + data))();

lang


instances
despose [delete function]
createClass(Clazz,{superclass:superClazz})//superClazz.call Clazz.call prototype extend
两方prototype不丢,两个 constructor初始化

number


一个很牛的 pad 操作:new Array(len-length+1).join('0');
comma:
source = String(source).split(".");
    source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{'+length+'})+$)','ig'),"$1,");
    return source.join(".");
正则表达式分组:捕获型[(...)],非捕获型[(?:...)这个组匹配后不放入 result],向前正向匹配[(?=...)非捕获,这个组匹配后回到它开始的地方],向前正向匹配[(?!...)这个组匹配失败后回到它开始的地方]

url

param <-> json

还有些经验之作,需要慢慢把玩的,也列出如下:
dom
page
swf

组件

fx 组件

1 private 不用闭包,而使用"\x06pulsed" : function

2 class TimeLine  提供一个按时间进程的时间线类

initialize //用于类初始化

transition //重新计算时间线进度曲线

render     //每个脉冲在DOM上的效果展现

restore    //效果被取消时作的恢复操作

finish     //用于类结束时时的操作

3 fx.create //create class based on TimeLine

property【七个属性】

  element  {HTMLElement}   效果作用的DOM元素

  interval    {Number}16      脉冲间隔时间(毫秒)

  duration    {Number}500     时间线总时长(毫秒)

  percent     {Number}时间线进度的百分比

  dynamic     {Boolean}       true    是否渐进式动画还是直接显示结果

  overlapping {Boolean}       false   效果是否允许互相叠加

  restoreAfterFinish  {Boolean}       false   效果结束后是否打扫战场

 method【三个方法】

  end()       直接结束

  cancel()    取消操作

  protect()   保存元素原始的CSS属性值,以便自动 restore 操作

 event【四个事件】

  onbeforestart()

  onbeforeupdate()

  onafterupdate()

  onafterfinish()

 interface【五个接口】

  initialize()    用于类初始化时的操作

  transition(percent)     重新计算时间线进度曲线

  finish()用于类结束时时的操作

  restore()       效果结束后的恢复操作

  render(schedule)每个脉冲在DOM上的效果展现

ui 组件

Base{

getId

getClass[class skin key]

getMain[mainId]

getBody[id]

uiType

addons

getCallRef

getCallString

renderMain

dispose

}

createUI //baidu一直用create方法帮助用户cover创建的细节

Dialog{

uiType:'DIALOG'

...

contentText:''

tplDOM:''

tplTitle:

tplContent:

tplFooter:

getString: format tpl with id class content

render:renderMain() update() window.onresize

open

close

update

get.../set...

dispose

}

alert

{

type:"alert",

    buttons : {

       "accept" : {

   "content" : "确定",

   "onclick" : function(){

    }

} }}

KISSY 源码体验


1 bases on mixen, owns a more robust extend, augment[r& more s], merge[more s makes a new one];
2 app namespace add|use[module]
3 uibase[Mark!]

MeTalk:Kissy 的代码风格和 tangram 很大不同。Kissy 更加像 Yahoo!,而 tangram 的精巧却如 jquery。

Jquery 源码体验

分享到: