- 浏览: 1431555 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
luhouxiang:
写的很不错,学习了
Extjs 模块化动态加载js实践 -
kingkongtown:
如果想改成淘宝后台那样,可以在编辑器批量上传图片呢?
kissy editor 阶段体会 -
317966578:
兄弟我最近也在整jquery和caja 开放一些接口。在git ...
caja 原理 : 前端 -
liuweihug:
Javascript引擎单线程机制及setTimeout执行原 ...
setTimeout ,xhr,event 线程问题 -
辽主临轩:
怎么能让浏览器不进入 文档模式的quirks模式,进入标准的
浏览器模式与文本模式
原生:
attribute 的访问控制从ecmascript3.1开始引入,在ecma5正式成为标准,目前有ie8与chrome支持,使用方式:
foo={}; Object.defineProperty(foo, "test", { getter: function() { return "foo" } , setter: function(v){this.test=v;} } ); alert(foo.test);
那么在每次读取foo的test属性时,都会调用其相应description部分的getter和setter函数。
而早在javascript1.5,firefox通过新语法实现了对应的功能,目前除了ie之外的浏览器都支持这种语法:
var lost = { loc : "Island", get location () { return this.loc; }, set location(val) { this.loc = val; } }; lost.location = "Another island";
通过属性支持,可以产生很多写代码的新方式,确切的说对于类库编写者可以更好的处理兼容性问题,使得接口通过属性暴露更加直观明了,参见 ajaxian 的讨论部分 。
1.children 模拟在firefox,遍历childNodes取元素节点。
2.outHTML 模拟在firefox ,创建临时div包裹,再取innerHTML。
模拟:
YUI3 为了跨浏览器的最大兼容性通过attribute模块实现了对应的功能,并添加属性事件变化触发机制,大大增加了属性机制的实用性。简单的说 yui3的属性机制约束用户调用指定的接口通过自定义事件以及自身维护的内部属性信息使调用者可以摆脱达到类似功能需要写的程式化模板代码。
这里自己模拟实现一下yui3的属性处理:
关键在于控制 get,set 的调用,触发相关事件,设置内部属性。
使用:
前文 yui3 例子的加强版 ,规定范围的累加框 。
例子图解:
组件部分:
通过after属性事件来同步业务数据同 ui 状态,setter 以及 before 属性事件来验证修正输入:
AttributeIncreaser.ATTRS = { "v": { /* 初始值取得,取得后该属性删除,添加默认值value=valueFn() */ valueFn: function () { return this.input.val(); }, //domain业务逻辑 setter: function (v) { if (v == this._edge) return this.get("min"); } }, max: { value: "3" }, min: { value: "0" } }; /* note : cfg should be first argument. */ function AttributeIncreaser(cfg, domInput, domAction) { var self = this; AttributeIncreaser.superclass.constructor.apply(this, arguments); this.input = domInput; this.domAction = domAction; this._edge = parseInt(this.get("max")) + 1 + ""; //domain业务逻辑 this.domAction.on("click", function (e) { self.increase(e); }); //利用after事件触发实现属性与gui同步,属性首字母大小,after/before + Attribute + Change this.on("afterVChange", function () { self.afterVChange.apply(self, arguments); }); //dimain业务逻辑,利用before事件触发,阻止非规范值输入 this.on("beforeVChange", function (e) { if (parseInt(e.newVal) > parseInt(self._edge)) { alert("invalid input,refuse"); return false; } }); } S.extend(AttributeIncreaser, S.Base, { increase: function () { this.set("v", parseInt(this.get("v")) + 1); }, afterVChange: function (e) { this.input.val(e.newVal); } });
好处:
1.由于浏览器dom engine同javascript engine的分离设计,通过复制dom属性到javascript属性尽可能少得 touch dom,减少js同dom间的通信提高效率。
2.组件开发者不需要自己显式在构造器中动态建立对应dom的js属性,不需要显式定义相关状态事件
3.使用attribute更适合多状态组件(对比多行为组件)
4.组件开发者后期修改程序更加方便,某个属性变化的处理函数可以通过事件触发调用而放在
分离
的
合适
位置
KISSY 实现 Attribute :
1. 实例内部维护属性值 map。
2. augment 自 KISSY.EventTarget
3.set,get 调用相关setter ,getter
4.set 前后触发自定义事件
5.new 时
1.根据继承构造器沿链初始化:为了读写效率属性 meta information从构造器链深度复制到实例。
2.将用户值添加到实例属性值map
注意:
1.prevent conflict attribute name in constructor chain
2.事件在初始化 new XX(cfg) 时并不会触发,new 时参数出错对象也就没有意义了,请在new 之前程序员自己保证正确。
调用部分:
var attrIn = new AttributeIncreaser({ //属性值设置,覆盖默认值 max: 3 }, S.one("#v"), S.one("#r")); //通过输入框设置组件状态部分代码 var v2 = S.one("#v2"); var r2 = S.one("#r2"); //设置组件属性,通知组件更新自己的状态 r2.on("click", function () { attrIn.set("v", v2.val()); }); //监听属性状态变化,同步外部数据 attrIn.on("afterVChange", function () { v2.val(attrIn.get("v")); }); //全部重置部分代码 var r3 = S.one("#r3"); r3.on("click", function () { attrIn.reset(); });
好处:
组件使用者,可以使用属性直观得和组件交互,同组件完全解耦分离,且组件开发者和使用者通过监控同一属性变化又达到了一定的统一协作。
代价:
1.任何多余的继承抽象都会带来的相同问题:code float,attribute的基础代码 yui compressor 1.4k
2.引入自定义事件间接层带来的监听器触发,比原来多了一次函数调用
参考阅读:
复杂的attribute应用:游戏编写中的属性管理
jquery作者关于gettter,settter的简单介绍
发表评论
-
模块化高扩展性的前端框架 KISSY
2013-03-14 14:58 8541模块化高扩展性的前端框架 KISSY 注:本文为 2 ... -
构建前端 DSL
2012-10-11 22:10 5280目前在传统的软件开 ... -
KISSY kisses bootstrap navbar
2012-08-03 01:12 5952看了下 bootstrap 的导航菜单,立刻非常喜欢,注意是浅 ... -
promise api 与应用场景
2012-02-07 17:34 7277promise 是 commonjs 社区中提出的异步规范,其 ... -
unified event model
2011-10-14 23:02 1740为了处理原生事件在各 ... -
转载:瀑布流布局浅析
2011-09-29 19:02 2780简介 如果你经 ... -
cross domain request
2011-09-29 18:39 2782场景 跨域请求是随着 ... -
基于多继承的树设计
2011-09-18 03:42 2194分类 树是一种常见 ... -
caja 原理 : 前端
2011-09-01 16:48 6927作为前端开放的基础安全保证,caja 是目前比较合 ... -
ie 下 cloneNode 导致的属性克隆
2011-08-24 16:10 2406这个还是很值得记下,一直存在的很大隐患终于解决,由于在 ie& ... -
just another event model
2011-06-08 20:47 2119事件模型也算是客户端兼容性的一个长期问题,早期 jquery ... -
框架 build 系统介绍
2010-07-11 01:29 1583一个复杂的类库通常都包括很多子模块( jquery@git ... -
querySelectorAll 探讨
2010-07-01 22:35 4383随着css selector engine在越来越多的java ... -
事件机制探讨
2010-06-21 13:54 2172由于浏览器事件机制的不兼容性,譬如最常见的注册事件差异 ... -
利用Attribute重构:业务与UI分离
2010-06-08 16:54 1532很简单的一个应用 通过按钮来限制输入范围 ,这样的话再 ... -
yui3 loader的串行加载特性
2010-06-04 12:30 1764yui3 的沙箱机制可以在 ... -
yui3下的load事件触发
2010-06-01 13:31 3156以前的一些总结:页面l ... -
理解YUI3 extension:Base.create
2010-05-31 03:01 1954YUI3中为了避免不必要的类继承层次,以及摆脱利用原型链模拟的 ... -
google WebFont Loader 源码阅读
2010-05-22 01:04 2710资料: 关于新发 ... -
jquery yui 对比
2010-04-29 09:58 0http://carlos.bueno.org/jq-yui. ...
相关推荐
一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值; setAttribute:建立一个属性,并同时给属性捆绑一个值; createAttribute:仅建立一个属性; ...
如下所示: 函数 说明 type() 返回数据结构类型(list、dict、numpy.ndarray 等) ...返回数据元素的数据类型(int、float等) 备注:1)由于 list、dict 等可以包含不同的数据类型,因此不可调用dtype()函数 ...
#define MACHINE_START(_type,_name) __attribute__ machine_desc .arch.info.init 标号 多寄存器加载存储指令 do_initcalls
1:获取对象的三种方法 1)document.getElementById(id);... 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)object.setAttribute(attribute,value);设置元素的属性.==
1、AttributeError: ‘module’ object has no attribute ‘rnn_cell’ S:将tf.nn.rnn_cell替换为tf.contrib.rnn 2、TypeError: Expected int32, got list containing Tensors of type ‘_Message’ instead. S:...
主要介绍了浅谈python中截取字符函数strip,lstrip,rstrip的相关资料,需要的朋友可以参考下
IronPython 承载和消费WCF服务.docx是开始学习IronPython 的时候了文章里谈到了“IronPython 2.6提供了新特性clrtype,允许程序员用纯IronPython代码提供property、attribute等CLR类型信息。这样IronPython代码就...
今天小编就为大家分享一篇浅谈pyqt5在QMainWindow中布局的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
AttributeError: 'DataFrame' object has no attribute 'sort' 解决方式: sort_values()即可解决 以上这篇解决DataFrame排序sort的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多...
背景知识: ...报错信息’FigureCanvasQTAgg’ object has no attribute ‘manager’ 将一个navigation toolbar渲染成Qt widgets 使用用户事件来实时更新matplotlib plot matplotlib针对GUI设计了两层结构
视图、模型与控制器里不应使用语言相关设置与字串。...然后 User.model_name.human 会返回 “Member” ,而 User.human_attribute_name(“name”) 会返回 “Full name”。这些属性的翻译会被视图作为
所以,需要在保存前根据提交的审核状态和设置的方式得到商品状态再保存,而通过$form->model()->attribute_name只能获取提交后的值,不能更改。 Google之后发现了已经有解决方案:可以修改提交表单时的逻辑吗 #375 ...
第2章 编程经验谈6则 经验01 培养编程的兴趣 经验02 编程学习经验谈 经验03 代码规范经验谈 经验04 数据库设计经验谈 经验05 项目实战经验谈 第2篇 陷阱或谬误篇 第3章 不可忽视的30个技术陷阱 陷阱01 版本不一致...
首先,我们完全不谈unicode。 s = "人生苦短" s是个字符串,它本身存储的就是字节码。那么这个字节码是什么格式的? 如果这段代码是在解释器上输入的,那么这个s的格式就是解释器的编码格式,对于windows的cmd...
l 用户发的主贴 l 用户发的跟贴(回贴) l 版块:论坛的各个版块信息 标识每个实体的属性(Attribute) 标识对象之间的关系(Relationship) l 跟贴和主贴有主从关系:我们需要在跟贴对象中表明它是谁的跟贴;...
收集信息 与该系统有关⼈员进⾏交流、坐谈,充分理解数据库需要完成的任务 1. b. 标识对象(实体-Entity) 标识数据库要管理的关键对象或实体 1. 3. 标识每个实体的属性(Attribute) 1. 4. 标识对象之间的关系...
30.简要谈一下您对微软.NET 构架下remoting和webservice两项技术的理解以及实际中的应用。 答:WS主要是可利用HTTP,穿透防火墙。而Remoting可以利用TCP/IP,二进制传送提高效率。 31.公司要求开发一个继承System....
NEAT 开 发 指南 文档 适用于 PT80 系列 移动数据终端 版本记录 版本号 版本描述 发布日期 V 1.0 初始版本。 2012-04-12 V1.1 修改前三章内容 2012-09-25 目录 第一章 关于本手册.....................................