原创作者: jindw
阅读:1495次
评论:1条
更新时间:2011-05-26
今天看到bellstar大侠发布的SUI,也看了一些设计及实现原理。觉得也应该吧自己以前的一些想法拉出来晒晒,交流一下,也希望对SUI的发展能有些参考价值,仅供参考而已。
文章是一年前写的,而且这些想法也在我JSISide中得到实现。与SUI重装出击的风格不同的是我在JSISide中的实现是非常轻量级的。
演示地址见:http://www.xidea.org/project/jsiside/decorator/
* 标签约定
o 放弃以前的自定义标签形式,而采用自定义属性
* 属性约定
o 通过-字符切分单词,能后使用骆驼风格转换成属性,赋值给装饰器对象
o 可以通过 #{}取脚本返回值,以定义复杂属性,和非字符串型的属性。
* ID自动生成
o 沿用1.0的方式,获取或自动生成html元素id,而不记录html元素对象。
* 装饰器装载
o 决定抛弃1.0中的provider属性,直接使用 d:class 属性指明装饰器类路径。
o 也可以设置默认装饰器包,装载装饰器时,探测默认包中是否存在指定的类名,不存在则按照完整路径寻找并异步装载装饰类。
* 构造函数
o MyDecorator(engin,parentDecorator);
o 构造器中传入装饰引擎对象和父装饰器,是否记录自行决定。
* 初始化
o 当装饰器实例身成后,立即更具元素属性,自动设置html标签中指定的属性集。
* before
o MyDecorator.prototype.before(child1,child2,child3...)
o 传入子装饰器元素,这时子装饰器紧紧执行了构造函数,赋值操作,并未执行before方法。
* decorate
o MyDecorator.prototype.decorate(child1,child2,child3...)
o 传入子装饰器元素,这时子装饰器已经完成了全部行为。
文章是一年前写的,而且这些想法也在我JSISide中得到实现。与SUI重装出击的风格不同的是我在JSISide中的实现是非常轻量级的。
演示地址见:http://www.xidea.org/project/jsiside/decorator/
引用
* 标签约定
o 放弃以前的自定义标签形式,而采用自定义属性
* 属性约定
o 通过-字符切分单词,能后使用骆驼风格转换成属性,赋值给装饰器对象
o 可以通过 #{}取脚本返回值,以定义复杂属性,和非字符串型的属性。
* ID自动生成
o 沿用1.0的方式,获取或自动生成html元素id,而不记录html元素对象。
* 装饰器装载
o 决定抛弃1.0中的provider属性,直接使用 d:class 属性指明装饰器类路径。
o 也可以设置默认装饰器包,装载装饰器时,探测默认包中是否存在指定的类名,不存在则按照完整路径寻找并异步装载装饰类。
* 构造函数
o MyDecorator(engin,parentDecorator);
o 构造器中传入装饰引擎对象和父装饰器,是否记录自行决定。
* 初始化
o 当装饰器实例身成后,立即更具元素属性,自动设置html标签中指定的属性集。
* before
o MyDecorator.prototype.before(child1,child2,child3...)
o 传入子装饰器元素,这时子装饰器紧紧执行了构造函数,赋值操作,并未执行before方法。
* decorate
o MyDecorator.prototype.decorate(child1,child2,child3...)
o 传入子装饰器元素,这时子装饰器已经完成了全部行为。
1 楼 u013680195 2014-04-02 18:34
此教程共17篇,由浅到深、循序渐进的讲述CSS知识。
对初学者有很大的学习价值,对已入门的朋友也有重要的参考价值。
1、CSS的应用
http://www.weby.com.cn/view.asp?id=13
2、CSS Selectors,Properties,and Values 选择器 、属性、值
http://www.weby.com.cn/view.asp?id=14
3、CSS的color颜色
http://www.weby.com.cn/view.asp?id=15
4、CSS的Text 文本
http://www.weby.com.cn/view.asp?id=16
5、Margin和Padding
http://www.weby.com.cn/view.asp?id=17
补充:CSS盒模型(Box Model)问题详解
http://www.weby.com.cn/view.asp?id=18
6、CSS的Border边框
http://www.weby.com.cn/view.asp?id=19
7、CSS属性结合起来使用
http://www.weby.com.cn/view.asp?id=20
8、CSS的Class以及ID选择器
http://www.weby.com.cn/view.asp?id=21
9、CSS的Grouping and Nesting分组和嵌套
http://www.weby.com.cn/view.asp?id=22
10、CSS的Pseudo Classes 伪类
http://www.weby.com.cn/view.asp?id=23
11、CSS的属性缩写
http://www.weby.com.cn/view.asp?id=24
12、CSS的Background Images 背景图片
http://www.weby.com.cn/view.asp?id=25
13、CSS的display属性
http://www.weby.com.cn/view.asp?id=26
14、CSS网页布局Page Layout
http://www.weby.com.cn/view.asp?id=27
15、CSS的At-Rules@规则
http://www.weby.com.cn/view.asp?id=28
16、CSS的伪元素Pseudo Elements
http://www.weby.com.cn/view.asp?id=29
17、CSS的优先级特性Specificity
http://www.weby.com.cn/view.asp?id=30