YUI的3.4.0预览版现已在CDN

12:39 2011年7月28日,由乔治·帕克特| 开发 | 4评论

YUI团队刚刚完成的最终发展为3.4.0版本的冲刺。 在这个时候,我们考虑功能完整的代码。 我们计划用我们的下一个冲刺,专注于我们的测试和创造更多的例子和文档的最后一轮。 我们已经发布了一个FC(功能​​)建立完整的社区勘探和反馈的CDN。 你可以访问这个版本http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js

库有一些特别的地方,我们很想有社区反馈:

  • 装载机有重大更新为3.4.0。 如果你正在通过手动负载规格use("*")或利用子模块的配置,我们会非常感激你想你的代码与新的Loader,以确保我们正确处理所有的用例。 如需对本新闻稿中的装载机变化的详细信息,请参阅博客文章描述3.4.0装载机变化
  • 日历面板是全面的功能和开发利用的准备。
  • 图形:已经有几个API的变化,会影响任何实验分布在PR2的释放图形API编写的代码getShape()已更名为addShape() 也有几个属性的替代品。
  • 过渡:母语转换现在在Firefox支持。
  • WidgetButtons已经发布了一个新的Widget扩展,它允许你把任何部件,实现了标准的模块支持在页眉和页脚“CSS样式”按钮。
  • 已转换为扩展部件的形态和 Widget 自动隐藏插件。
  • 部件:为破坏的增值支持(真),这将删除并销毁所有子节点(不只是boundingBox的和contentBox)内Widget的boundingBox的中。 destroy()方法,将维持其目前的行为,由于潜在的高运行时间销毁所有子节点的成本。 如果你破坏您的应用程序部件,或者是一个自定义部件开发,帮助您在测试这种变化,将不胜感激。
  • 滚动支持垂直分页,包括滚动的列表插件添加CSS类名直接列表元素,以及一些bug修复和重构
  • 应用程序框架 :我们要扩展一个真诚的感谢你在社会上的人已采取的时间来检验推动新的应用程序框架的开发。 我们已经收到了极好的反馈后,PR2的释放。 请继续探讨这些组件,您的意见和建议发送给我们。

你可以得到更多信息,本新闻稿的内容审查历史汇总 ,并在蛋白酶处理门票的完整列表 请文件中任何的增强请求,错误和回归的票YUILibrary.com数据库

共享和扩展: 书签del.icio.us Digg它! | reddit!

锐:营业时间周四7月28日

7月25日,在下午10:56 2011年由卢克·斯密在发展营业时间 | 2评论

Y.Calendar即将到3.4.0

日历是我们更受欢迎的YUI 2家族的部件之一,它在3.4.0上YUI 3架构亮相。 艾伦拉比诺维奇组件所有者和作者,并会重新引入我们这个老喜爱的呼叫,显示2.x的日历所面临的问题,一些新的方法。 我特别是饮誉国际化的支持,但新的渲染规则也很迷人。

来吧,并把您的日期选择器,日历事件,进口从iCal中,使煎饼的问题和你的功能要求,为我们的肉,现在和未来的Y.Calendar (不,它会不会导入iCal中,但如果有人想创造一个画廊模块驯服野兽,还有肯定是你YUIConf票;))

我们又回到了本周我们平时的时间,所以我们会看到你将在上午10时PDT。

时间及详情

我们会上午10点至11点PDT星期四线上。 连接的详细信息和往常一样。

  1. 拨号到1-888-371-8922(Skype的非美国与会者*)
  2. 输入与会者代码47188953#
  3. 加入屏幕共享会话 (会提示你安装的Adobe Connect插件,如果这是您第一次使用)

:因为它是一个开放的会议行,我们要求,来电静音线 ,除非他们在积极讨论参与。

* - 如果Skype是不是一种选择,给我发电子邮件或在freenode上的#YUI IRC频道赶上我(ls_n)一个本地电话号码。

录音

感谢大家在调用! 现在可以在线录制会议的

高品质的iPhone / iPad兼容,下载的记录是在这里

共享和扩展: 书签del.icio.us Digg它! | reddit!

锐:周四7月21日营业时间

2011年7月19日,在2:16上午由卢克·斯密| 开发开放时间 | 12评论

一个DataTable更新和画廊展示

3.4.0发行周期接近尾声,并将于挤满各种强大功能,但说白了,DataTable中已经没有得到它应该有尽可能多的发展重点。 已经有一些错误修复,虽然,相当数量的规划3.5.0针对性的变化,以及社区参与其发展的一个很好的开始。

我们知道,DataTable是一个极其重要的部件很多客户,所以我们了解拖延重点发展的成本。 这将是营业时间为3.4.0更新完成什么工作,什么计划3.5.0,画廊开始兴起,以增加新的功能和修正错误的DataTable(和伟大的工作,这是引进其家庭支持类)。

我们将在线造福埃蒙·布鲁斯南(又名,从#YUI mosen)的,谁提供一些画廊的补丁,我们将看一个小时本星期早些时候 否则,我们将有其他的#YUI的居民和画廊展示他们的产品的提供者。 如果你有一个DataTable的解决方案或正在进行的工作,你想与大家分享,请让我知道这样我就可以阻挡的时间表,以适应一切(#YUI或ls_n 叽叽喳喳 )。

时间及详情

我们会从上午9时至周四上午10时PDT在线。 连接的详细信息和往常一样。

  1. 拨号到1-888-371-8922(Skype的非美国与会者*)
  2. 输入与会者代码47188953#
  3. 加入屏幕共享会话 (会提示你安装的Adobe Connect插件,如果这是您第一次使用)

:因为它是一个开放的会议行,我们要求,来电静音线 ,除非他们在积极讨论参与。

* - 如果Skype是不是一种选择,给我发电子邮件或在freenode上的#YUI IRC频道赶上我(ls_n)一个本地电话号码。

共享和扩展: 书签del.icio.us Digg它! | reddit!

下一代YSlow的供电由锐

7月18日,2011马塞尔·杜兰在下午09:17 | 发展性能 | 4评论

几个星期前,雅虎宣布2011年速度 YSlow的移动 ,使移动世界YSlow的性能分析的力量。

YSlow的手机作为作品的bookmarklet ,从而有可能比其他浏览器火狐(附加)铬(扩展)运行。

YSlow的建筑部分被重新设计,以跨平台和YUI在沙盒,跨浏览器的抽象和简单的YQL的访问可能是重要因素。

沙箱

为了不干扰,不搞乱页面本身的性能分析和嵌入在页面上,YSlow的是一个bookmarklet,JavaScript和CSS注入任何网页,利用YUI的沙箱电源:

书签网址:

 JavaScript的:(函数(Y,P,O){
     P = y.body.appendChild(y.createElement(“IFRAME”));
     p.id ='YSlow的,书签';
     p.style.cssText ='显示:无“;
     O = p.contentWindow.document;
     o.open()写(“
         <HEAD>
         <身体的onload =“
             YUI_config = {
                胜利:window.parent,
                 DOC:window.parent.document
             };
             VARð=文件;
             d.getElementsByTagName(\'头\')[0]
                 。appendChild(
                     d.createElement(\'脚本\')
                 )。SRC = \ http://d.yimg.com/jc/yslow-bookmarklet.js的\“
         >
     ');
     o.close()
 (文件))

上面的代码:

  • 创建一个空的iframe;
  • 追加到页面的主体;
  • 隐藏的iframe *;
  • 得到它的窗口句柄;
  • 其内容写入到iframe的主体;
  • 这个机构是空的,但有一个onload事件
  • onload onload事件定义如何注入YSlow的的JS:
    • 设置YUI_config ,所以win doc点被分析的页面windowdocument分别
    • YSlow的网址,通过创建一个动态注入script到iframe的元素head

* iframe的显示YSlow的演示的全部资产装入

这将被分析的页面放入一个iframe。 这个iframe将作为沙盒环境,将驻留在YSlow的。 由于没有动态创建的iframe src属性,将有机会获得其母公司(被分析的页面),因为这里没有发生有相同的原产地政策违反。

YUI_config对象是很方便的,因为它设置win doc doc iframe的父(被分析的页面),因此任何新的YUI实例将绑定默认情况下,布线的父文档任何呼叫到Y.allY.one通过Y.config.winY.config.doc从YUI use回调。

YSlow会的演示文稿处理iframe的windowdocument引用,让YSlow的主脚本呈现的标记,以及不与父页面的样式发生冲突的情况下获取这个iframe内外部CSS。 YSlow的父页面进行扫描,以获得后来的表现分析所需的所有组件(图片,脚本,链接,背景图片,闪光灯等)。 这是做通过,访问Y.config.winY.config.doc ,因为他们是指父页面。

跨浏览器抽象

YSlow的移动应该是一个书签,在任何浏览器*工作。 YUI的抽象跨浏览器,浏览器的差异正常化问题,导致在一个干净,易于阅读和维护代码库。

YSlow的不完全移植了YUI 3 -控制器层(从即将推出的应用程序组件) -但仍,所有的DOM操纵和事件处理由nodeevent模块。 我们计划在未来的版本了YUI 3到港口的YSlow的功能。

*并非所有浏览器目前支持

YQL的

YSlow分析,通过检查发现在页面上的组件的HTTP标头页。 HTTP响应头是不是可以在页面中,因此这些部件需要再次请求为YSlow的顺序得到响应头信息。 这可以通过XMLHttpRequest请求(AJAX)的组件的URL列表,但不幸的是由于同一原产地政策的限制 ,这是不可能的,除非所有组件在同一个域的页面,这是不太可能实现。

一脉相承的政策限制的一个共同的解决方法是使用JSONP请求组件的URL列表和代理代表对YSlow的检索HTTP响应头,其中一个外部服务器。 由于YSlow的普及和最近的移动性能分析工作,我们期待着相当沉重的交通YSlow的移动书签。 为了支持这样的交通, YQL的是可伸缩的解决方案,通过一个开放数据表命名data.headers ,检索的响应头和内容,为给定的URL列表,而假冒的用户代理,以确保预期的内容是通过YSlow的检索。

YQL的查询组件所有YQL的查询,而引擎盖下的管理JSONP请求,YSlow的控制器代码更简单,易于维护管理工作。

未来的增强功能:新YSlow的移动界面友好

目前YSlow的移动用户体验是相同的桌面体验。 一长串的性能分析数据的处理是不小智能手机屏幕上的最佳体验。 自锐也抽象跨设备的手势 ,YSlow的移动将获得一个全新的移动友好的界面,在未来的版本。

性能工具的性能

YSlow的移动部署了仔细考虑其在被分析的页面加载时间性能的影响。 YSlow的使用YUI的3模块进行审议只包括需要加载尽可能快的YSlow的模块。 YUI种子文件和装载机,不包括在内,因为所有必要的模块和子模块组合在一起后, 瑞安Grove的性能禅宗的技巧,这使得它可以加载到一个单一的小单要求的一切:YSlow的bookmarklet.js:204KB,66KB( GZIP),其中:

  • 锐:75KB,27KB(GZIP)
  • YSlow的:129KB,39KB(GZIP)

更多关于YSlow的

跟上YSlow的最新公布的最新:

马塞尔·杜兰 作者简介:马塞尔·杜兰是雅虎的卓越性能团队的前端铅。 他一直到网站雅虎头版搜索队,他于高流量的网站性能优化,并研究了网络性能最好的做法使得网页甚至更快。 他现在正致力于YSlow的和其他性能工具的开发,研究和传福音。 他的目标是使网络速度甚至超过它可以认为是没有“只需几毫秒的时间不会伤害”有这样的事情。

共享和扩展: 书签del.icio.us Digg它! | reddit!

分级浏览器支持;

7月12日,2011 8:55 PM由珍妮·唐纳利和马特·斯威尼在发展分级浏览器支持 | 24评论

金紫荆星章的变化

此更新的具体变化包括:

浏览器测试基准

Internet Explorer中 6 7 8 9
火狐 3。† 4。† 5。†
铬† 最新的稳定
野生动物园 5。† 的iOS 3。† iOS 4的†
Webkit的 Android的2†

注释:

  • 匕首符号(如“火狐4。†”)表示的最当前的非-β版本,分行层面获得支持。
  • iOS或Android操作系统的设备的使用上给予任何指导。 的建议是,你选择的设备是最具代表性的每个操作系统的用户群。

从浏览器测试基准卸下年级

这GBS的更新版,代表了我们以前的更新,我们搬走直接从映射浏览器的经验等级(例如“A级”和“C级”)的离境。 而不是开什么用户体验是合适的浏览器,我们将重点放在定义一个有效的基准测试策略,测试覆盖率最大化,最大限度地减少了测试表面。 例如,IE6的仍然显着的全球市场份额的认股权证继续测试,但今天的GBS IE6的用户体验,允许不同的是从IE9经验。

删除浏览器测试基准的作业系统

为了简化测试,并最大限度地减少资源需求,我们不再指定操作系统应测试。 唯一的例外是当浏览器与操作系统的版本,在这种情况下,我们指的OS版本,而不是浏览器的版本(例如,“野生动物园的iOS 4”)紧密耦合。 这使我们能够专注于浏览器版本的测试覆盖率,减少跨平台redudant测试。 不同版本的同一个浏览器的问题是微不足道的,一般涉及到更高级别的操作系统的差异,如关键的处理和可用字体。 被称为触及问题的跨平台的代码应尽可能多的平台上进行测试,但这种测试一般可以分离到的具体问题,而不是运行完整的回归测试的所有功能。 你的用户群,我们建议调整操作系统的测试优先。

为什么是IE6名单上吗?

IE6中仍然有足够一个重要的全球市场份额,以保证验证的可接受的用户体验。 已逐步加强战略的一个常见的​​误解,一旦浏览器进入“C级”,它成为“不支持”的时候,其实它的真正含义,应交付的HTML唯一的经验。 现在我们不再规定哪个浏览器收到什么样的经验,这是留给他们的用户和资源为基础的项目来决定。 的GBS集中在指定的浏览器需要验证的实用经验的基础因素,如市场占有率和影响力。 定义什么是“可用”和specifiying可接受的水平退化留队决定。 我们还推动了一个简单的渐进增强模型,并劝阻不占发展中的额外费用,测试,维修资源创造新的层次的项目。

GBS的预测

我们期望在未来的更新以下变化:

  • 停止在iOS 3覆盖的Safari。
  • 添加Android上的3对Webkit的覆盖面。
  • 新增Firefox的6覆盖率。
  • 加入Safari的IOS 5的覆盖面。

GBS的档案

共享和扩展: 书签del.icio.us Digg它! | reddit!

“MakeNode”部件扩展

7月8日下午02:11,在2011年由萨蒂扬| 开发 | 6评论

编者按:由于该文章最初发表中, MakeNode模块已发布了YUI库,并收到了一些改进。 请参阅更新的文章, 更新:“MakeNode”部件扩展

在我以前的文章中, 一个YUI 3应用配方 ,我表明方式使用Y.substitute一个非常基本的模板处理器。 从那里生活的想法了,从#YUI IRC频道乡亲的建议,我是我的网站上提供一个Widget扩展,称为MakeNode MakeNode是不是一个通用的模板处理器,它不意味着为一体。 另一方面,它紧密集成与YUI 控件的基础类,包括ClassName和事件佣工和国际化。 在这篇文章中,我将采取微调的例子,并修改它遵循从我以前的文章的指引和使用MakeNode。 修改后的微调组件( JSCSS精灵 ),以及一个例子是从我的网站。 在本文末尾可以找到更多的资源链接。

扩展你的组件

你一旦MakeNode加载,需要包括在你的模块YUI().use()语句使用名称'makenode' 然后,延长你的widget,你列出的第三个参数Y.Base.create()像这样:

  Y.Spinner = Y.Base.create(
      “微调”,
      Y.Widget,
      [Y.MakeNode]
      {
         / /实例成员...
      },
      {
          / /静态成员
      }
 ); 

您可以添加任何合适的扩展部件,如WidgetParent,WidgetChild,WidgetStdMode,沿MakeNode等MakeNode增加了两个受保护的方法, _makeNode_locateNodes,它会读取从几个静态属性,如果找到。

这个扩展的所有成员是protected或private,因为他们是为了组件的开发和使用这些组件的实施者,谁不应该与他们的困扰。

定义模板

你通常会做的第一件事是定义为​​您的组件的模板。 对于微调,我们的模板将是:

  _template:
     <input type="text" title="{s input}" class="{c input}">“
     “<button type="button" title="{s up}" class="{c up}"> </按钮>”
     “<button type="button" title="{s down}" class="{c down}"> </按钮>”
 。加入('\ N'), 

通常会被命名为默认模板_TEMPLATE和沿线的其他类的静态属性,如宣布ATTRS 如果没有其他明文规定,MakeNode将使用此模板。 模板是纯HTML加上一系列括在大括号中的占位符,每个单个字符(加工代码)和一个或多个参数。 占位符和他们生产什么是:

  • {@ attributeName}配置属性的值

  • {p propertyName}实例的属性值

  • {m methodName arg1 arg2 ….}给定的方法的返回值。 后跟由空格隔开的参数的方法名称和任何数量的加工代码。 必须括在双引号字符串。 数字,布尔值和null字符串将被转换成适当的数据类型

  • {c classNameKey} CSS类名从产生_CLASS_NAMES静态属性

  • {s key}字符串从strings属性,子属性使用key

  • {? other placeholder }生成的字符串checked时,其余的占位符处理的结果是真实的。

  • {}任何其他值将处理就像Y.substitute不。

例如, {@ value}将转化到this.get('value') {p value}转换为this['value']

{m}占位符是稍微复杂一些。 m加工代码后的第一个参数是该方法的名称和参数,将通过给定的方法全部由空格隔开的休息。 这些参数可以是数字, nulltruefalse或字符串括在双引号。 MakeNode将解析和转换他们到正确的类型,从而{m myMethod 123.45 true “this is a string”}将导致在调用this.myMethod(123.45, true, “this is a string”)前两个参数其正确的数据类型转换为字符串可以包含空格。 包括一个双引号,使用\\"正因为JavaScript解释一个单一的一个丢弃它之前,它得到到MakeNode。只允许使用双引号,MakeNode不eval() eval eval()这样的解析器是有限的双反斜线但安全。什么,但号码, null ,布尔和双引号字符串将被忽略。

{?}占位符是很方便的使用复选框和单选按钮。 它会产生字符串“checked”根据真值的处理指令的代码如下。 因此, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/>将产生显着的复选框,如果getLength方法返回什么,但零。 {?}将接受任何其他占位符,但它不仅使前三感。

{c}占位符,我们需要定义有1 _CLASS_NAMES财产。

进一步占位符,可以添加到MakeNode加入到他们_templateHandlers哈希。

_CLASS_NAMES财产

沿着与ATTRS_TEMPLATE静态属性,我们可以定义一个_CLASS_NAMES属性,它指向一个字符串数组。 这些字符串都将被用来生成一个类的。 因此_CLASS_NAMES: ['input']会产生的className “yui3-spinner-input” 那些类名存储实例属性this._classNames {c input} “yui3-spinner-input” {c input}上面的模板中的占位符将被替换。

你可以使用_CLASS_NAMES属性来生成任意数量的类名,你是否在模板或不使用他们。 你仍然可以达到从内部this._classNames这些额外的类名。 使用yui3前缀NAME的静态属性的价值,产生的className转为小写,然后在给定的的字符串_CLASS_NAMES (这一次将不会变成小写),全部由连字符分隔。 _classNames哈希也将包含为boundingBox类名和的contentBox ,下的第一个"."键,并根据第二个“content”键。 部件分配到boundingBox NAME在继承链中的每个类的属性的值派生的类名,开始yui3-widget MakeNode存储到this._classNames只有最顶级的className boundingBox

如果一个组件是几个层次,从Widget一样, SuperSpecialSpinner从的继承SuperSpinner从继承从继承Spinner Widget, _CLASS_NAMES this._classNames Spinner Widget,如果其中的任何或全部定义_CLASS_NAMES属性,MakeNode将产生所有的类名,并存储在他们this._classNames 你不必包括在每个级别的名字已经宣布,在以前的水平。 事实上,它是更好的,你不会因为在每个级别的类名,使用该级别的属性值的NAME 因此, SuperSpecialSpinner{c input}仍将导致的“yui3-spinner-input”“yui3-superspecialspinner-input” ,所以它会保持你的CSS文件仍然有效。

{}占位符

构件有strings配置属性定义,虽然它不与任何值初始化。 此属性是为了保存字符串(或通过屏幕阅读器,阅读)的用户是可见的。 重要的是,你永远不包括直接在模板中可见字符串。 这是不是的MakeNode的要求 - 在所有它从来就不是一个好主意。 应始终被视为或读取用户的所有字符串放置在strings属性。 strings属性包含了每一个人的文字是由位于其关键的哈希。 微调器组件有以下字符串,你可以看到在上面的模板使用。

 字符串:{
    值:{
        输入:“按箭头/向下键轻微的增量,页/主要增量。”
        了起来:“增量”
        下来:“减”
     }
 }, 

这样做的最好的部分是组件可以使用您的组件的开发本地化为其他语言很容易。 当创建一个微调的实例,你可以这样做:

  mySpinner =新的微调({字符串:Y.Intl.get('微调')}); 

以这种方式设置的配置属性strings取代与使用先前定义的语言,从语言资源文件的默认strings值。 {s}占位访问存储在字符串strings属性,无论是默认的或翻译的,如果设置。 {s xxxx}占位符,在事实上,没有什么比一个快捷方式到更多的{@ strings.xxxx}占位符。 然而,第一次只能在顶层访问字符串的同时,例如, {@ strings.xxxx.yyyy.zzzz}将允许您访问字符串更深。

使用在renderUI _makeNode

我们使用模板来创建我们的组件的标记。 这样做,我们可以调用MakeNode的_makeNode方法,是这样的:

  renderUI:函数(){
     。this.get(“contentBox)追加(this._makeNode());
 }, 

这将填补我们的部件在contentBox处理模板的标记。 _makeNode方法返回一个实例Y.Node可追加或插入任何地方,或只是为以后使用而举行。 它不返回一个字符串,它产生一个Node实例。

_makeNode方法有两个可选参数:一个参考模板和对象,以填补在占位符,,作为Y.substitute 在我们简单的微调例如,有一个单一模板的整体部件,但其他部件可能需要位和几个模板件。 在这种情况下,你通常会致电_makeNode的主要部分没有参数,调用不同的模板,再次填补多余的部分。 例如包含此renderUI方法:

  renderUI:函数(){
     this._makeNode的fieldset =();
     this.each(函数(项目){
         fieldset.appendChild(this._makeNode(MultipleTemplates.RADIO_TEMPLATE项));
     });
    中this.get(“contentBox)追加(字段集);
 } 

_makeNode第一次调用返回一个Node实例存储在变量中fieldset 样品组件也延伸与Y.ArrayList所以RADIO_TEMPLATE将被从存储在数组列表中的项目和所产生的附加 ​​的节点值填充fieldset前最后追加到contentBox 如特殊的占位符{@} {p}仍将主要对象的属性或属性。 正如Y.substitute将嵌套的项目将被处理。

_locateNodes方法

MakeNode进一步提供_locateNodes方法,将尽力找到所有的元素在声明的类名_CLASS_NAMES 找到特定的元素,您可以通过任意数量的className键,否则, _locateNodes尝试他们所有。 对于每个发现的className的每个元素中, _locateNodes会产生一个私人的实例的属性,使用下划线前缀键的名称和“Node”后缀。 因此,我们飞旋例如, _locateNodes会生成的属性_inputNode_upNode_downNode 如果有多个元素具有相同的className, _locateNodes将返回一个引用到他们的第一。 如果一个元素没有被发现,没有变量将被创建。

在微调组件,我们使用_locateNodes后创建的标记:

  renderUI:函数(){
     this.get(CBX公司)追加(this._makeNode());
     this._locateNodes();
 }, 

_EVENTS的静态属性

一个进一步的属性可以被定义沿线_TEMPLATE_CLASS_NAMES ,是_EVENTS_EVENTS将包含类名键,每个包含一个事件的类型和方法来处理它们的哈希散列。 这是更好地用一个例子来解释:

  _EVENTS:{
     '。':{
        关键:{
             FN:“_onDirectionKey”
            参数:(Y.UA.opera“下来:”:!“记者:”)+“38,40,33,34”
         },
        的mousedown:'_onMouseDown'
     },
     “......”:{
        的MouseUp:'_onDocMouseUp'
     },
    输入:{
        变化:“_onInputChange”,
     }
 }, 

_EVENTS是一个具有任意数量的属性的对象(哈希)。 属性的名称,即哈希键,确定元素的事件,我们会听取。 他们是在使用相同的标识符_CLASS_NAMES 有两个额外的特殊功能键"."".." 虽然内嵌套元素contentBox的className键, "."关键指的boundingBox本身,而".."是指包含此部件的文件。 认为他们做chdir命令时,在位于boundingBox水平。 _EVENTS财产处理后renderUIbindUIsyncUI方法,被称为widget的预期,因此已经插入文档正文内,否则".."将失败。

条目中的每个_EVENTS是1进一步对象事件的类型作为其关键和1实例的方法来处理它的名称。 _EVENTS ,是一个静态变量,有没有来访问this所以它可以不采取实际功能的引用,只有名称的事件侦听器方法。 一些事件类型,如需要额外的参数, key事件。 在这种情况下,而不是提供的事件处理程序的名称,你可以提供与物业fn args args对象举行的函数的名称和额外的参数,需要时。

MakeNode将使用Node.delegate听嵌套元素的事件,而它会使用Y.on听从事件boundingBox和笔体。 (注:听任何嵌套元素的key事件仅适用于版本3.4.0pr1及以上,由于该代表团key 。事件是不是之前的所有其他功能的工作以及与以前的版本)

_EVENTS声明是累积性的,当组件从一个继承。 继承链中的每个类都会有其自己的_EVENTS声明分开处理。

_ATTRS_2_UI的静态属性

活动是双向的,从UI组件从组件到UI。 首先是处理由_EVENTS属性。 然后有由属性值的变化,必须体现在用户界面中引发的事件。 正如我在前面的文章,有任何改变配置属性的辅助疗效时提到,他们应改变事件监听器处理,而不是可选的setter方法的属性,它应该只处理正常化设置的值。 UI应该反映配置属性的状态,首先在syncUI时被初始化,然后对每一个属性更改事件。 对于后者,我们需要附加一个事件监听器,我们在做bindUI 部件已经提供了一种机制,使这个简单,我在上一篇文章的评论。

部件使用,它包含一个与另外两个性质,对象_UI_ATTRS SYNCBIND实例属性_UI_ATTRS 这些是一个数组,列出最初同步时的配置属性的名称,然后听取以反映当前值保持UI。 部件预计每个条目有一个与之关联的方法,由前缀属性名后的第一个字符转换为大写有骆驼的情况下适当的方法名称的属性名称的命名_uiSet 因此,如果"value"在任何上市_UI_ATTRS阵列( SYNCBIND )的Widget希望找到一个_uiSetValue方法。 这种方法将收到两个参数的value设置和src的变化。 这是为我们的微调代码_uiSetValue方法:

  _uiSetValue:功能(价值,SRC){
    如果(SRC ===界面){
        返回;
     }
     this._inputNode.set(值,this.get(格式化)(值));
 }, 

你在这段代码中看到对应的字符串常量的所有大写字母标识符宣布在其他地方,让YUI压缩到更好地完成其工作。 ,基本上,该方法设置的value在HTML属性<input>中的新值集,被格式化后。 被由_locateNodes提供参考文本框。 src参数的初步检查,看看是否设置为字符串值'ui' 如果是这样的,将采取任何行动。 这是为了避免无休止的循环。 如果用户在输入框中输入的东西,其价值将进入value的配置属性,然后将火的事件valueChange ,会得到_uiSetValue呼吁,如果不加以控制,然后去改变输入框的值,将再次引发整个过程。 因此, _uiSetValue ,如果我们知道的变化,从UI,我们什么也不做,所以打破循环。 然而,这需要另一块代码的其他地方。 在DOM事件监听器,当我们设置的配置属性,我们使用的第三个可选参数设置,像这样:

  _afterValueChange:功能(EV){
     this.set(值,ev.newVal {SRC:用户界面});
 } 

这是我们确保,因此,从用户界面的变化标记,然后检查相同的标志,以避免环路。

这一切说,我还没有提到_ATTRS_2_UI在本节的标题提到的静态属性。 正如我在以前的文章显示评论(通过我在他们的失误),确保正确列出的所有属性影响的UI是有些凌乱。 你永远不应该初始化_UI_ATTRS以来从头部件已经列出了一大堆的属性和那些会丢失。 你有新的属性名称串连在现有的,这有点很难记得如何做是正确的。 为了简单,MakeNode将读取静态属性_ATTRS_2_UI并为你做什么,串联。 它将连接所有这些清单,以便从继承链中的每一类,每一级,每一类可以处理自己的属性。 在微调,我们有:

  _ATTRS_2_UI:{
     BIND的:价值,
    同步:VALUE
 }, 

MakeNode将接受的名称数组或一个单一的属性名称,在这种情况下。

自然产生的问题,为什么两份名单,结合其他同步? SYNC阵列往往比少BIND列表项和,这是因为组件的模板可能已经有很相同的配置属性的默认值,有没有必要做一个初步的同步。 因此,如果的value配置属性的默认值是一个空字符串的<input>在模板中的元素没有value属性,那么有没有必要在初始化同步。

MakeNode将检查这些阵列中的任何重复的条目。 如果任何出现的,它意味着已经处理此属性和任何新的声明将最有可能超越我们的组件1类继承_uiSetXxxx它的处理程序。 顺便说一下,MakeNode重复的条目,在_CLASS_NAMES ,这也可能导致在一些冲突,但并非所有的情况下,还检查。 MakeNode会写消息到任何这样的错误日志。

结论

MakeNode提供了一个非常简单的模板处理器,简单的功能,高度集成与Widget的基础类。 它还提供了创建在模板中使用的类名,并使用这些名称来定位节点的辅助方法。 它还提供了挂接到由UI组件本身所产生的事件和与之相关的每一个方法的手段。 它所有这些东西,同时注意尊重直线上升Widget和任何级别的类,你可以定义继承链。

它不提供绝对的所有可能性,但涵盖了他们良好的范围。 然而,它并不妨碍你增加额外的功能。 You might rarely have to write a bindUI or syncUI method if you use the glue provided by MakeNode, but you may do so, since MakeNode does not use them.

As a bonus to those who had the patience to read this far, I have also modified Anthony Pipkin's Button set of gallery components:

The API docs can be found here .

共享和扩展: 书签del.icio.us Digg它! | reddit!

3.4.0 YUI和装载机变化

2011年7月1日起,在6时34分上午DAV玻璃| 发展性能 | 10评论

在3.4.0中,我们开始转向装载机的逻辑左右,不仅使其更高性能的过程,但更强大和更容易使用,在其他地方(如在服务器上)。 We will be rolling out more changes in future revisions, but I wanted to take some time and explain what was changed, why it was changed and how it may impact developers. 对于大多数用例,开发人员会发现什么不同,但事情快一点,他们的要求下载是有点小。

Seed File

我要解决的第一件事是YUI种子文件。 In previous versions of YUI, our seed file was very tiny and did not contain Loader or any of its meta-data. 我们发现这是高性能,并非如我们所希望,在90%的使用情况。 The normal user includes the seed file then requests their modules, which in turn means that the seed needs to first fetch Loader, then calculate all of its dependencies, then fetch them all. 现在,我们觉得,这个额外的HTTP请求是错误的事情,所以新标准的种子文件包含装载机和元数据。 是的,这将使稍大的初始请求,但它会使加载的模块,更快,因为其元数据的要求,现在已经在页面上。

如果你想使用它的老办法,你可以只是包括YUI基地种子文件,而不是。 It contains everything that is needed to make YUI run in stand-alone mode plus it contains the ability to fetch Loader on demand. 如果您需要更精细的细粒度的依赖,我们已经创建了一个YUI的核心正是YUI老基地种子的种子文件。

     /构建/ YUI / YUI min.js的/ /锐种子+装载机
     /构建/ YUI基/ YUI基min.js / /旧YUI的种子装载机获取支持
    /build/yui-core/yui-core-min.js //Old yui-base without Loader fetch support

应当指出的是,这些网址是比以前的URL不同。 任何使用yui/yui-base.js文件需要repoint到yui-core/yui-core.js 如果你想加载的种子和提取装载机的旧方式,你会使用的yui-base/yui-base.js种子文件。

这种变化的理由是我们YUI的运行在尽可能多的地方的路线图。 旧的种子文件,加上装载机是在一个单一的组合服务器的请求都很好,如果你有一个组合在您的应用程序的服务器, 但在服务器上呢? 或在移动设备上的脱机应用程序?这些地方需要,以尽量减少文件的访问,同时还得到他们所需要的信息。

Rollups

接下来的事情,我们改变了从系统中删除汇总和拖欠allowRollup在装载机配置为false。 这是什么意思你?好了,希望什么都没有。 之前,我解释变化的影响,让我解释一下它背后的推理。 The primary reason is, again, performance, along with payload delivery. 以这个例子:

     模块A:需要事件,事件-B
     Module B: requires event-c, event-d

当您要求,汇总逻辑到3.4.0之前用来确定你应该得到的事件汇总。 这实际上意味着,你得到:

      event.a,event.b,event.c,event.d,event.e,event.f,event.g,event.h

You ended up with more on your page than you actually needed. 通过关闭汇总支持,YUI将现在要求只有你真正要求,仅此而已。 在大多数情况下, 你不会注意到这一点 模块开发,可能会遇到的情况,在过去工作的事情,可能现在还没有工作。 这样做的原因是,他们实际上是由事故工作过。 让我用一个真实的例子: 拨号

3.3.0,拨号需要这个:

    要求:[
        'widget',
        'dd-drag',
        'substitute',
         “事件的MouseEnter, 
        'transition',
         “国际机场”
     ]

在大多数情况下,在3.4.0拨号工作,但是键盘的支持没有奏效。 做一些简单的调查后,事实证明,汇总的支持实际上是要求整个事件汇总(包括移动事件和事件的关键)。 3.4.0拨号没有在所有的事件汇总拉动逻辑,不再有其所有要求。 使拨号的要求更加具体和正确定义所有的实际依赖,使得它如预期般运作。

    要求:[
        'widget',
        'dd-drag',
        'substitute',
         “事件的MouseEnter,
         “事件的举动”,
         “事件的关键,
        'transition',
         “国际机场”
     ]

对于模块的开发,这是最好的做法是确保,正是它需要的功能模块需要。 不要以为上游模块的要求是有。 It's always better to make sure that you ask for what you need.

这也意味着,模块的要求更明确界定。 例如, datatype-date有国际机场建立在以前的版本中,您将访问这样的国际机场英寸支持:

     Y.Intl.getAvailableLangs(“数据类型的日期”);

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. 它需要更具体和实际要求语言正确的模块:

     Y.Intl.getAvailableLangs(“数据类型的日期格式”);

构建文件的爆炸和子模块去除

进行此更改后,未来的变化,我们提出了爆炸生成目录,并从核心系统子模块。 子模块的逻辑是不能完全取消,只有我们的元数据结构被改变。 这将提供当前安装的向后兼容性。

Submodules in the core system caused a couple of issues that we needed to resolve. 第一个原因是性能。 每次加载所需的计算依赖关系,它需要走的每个模块的子模块/插件结构。 这数千次受伤了,我们在装载机的性能计算程序。 通过消除为核心系统的子模块的支持,我们挽救了数以万计的函数调用和迭代。

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. 所以,如果你要求“ dd “装载机将检查dd DD “的元数据,并看到一个使用属性,看起来像这样:

     “DD-DD-DDM的基础上,DDM,DD-DDM下降,DD-阻力,DD-代理,DD-约束,DD-下降,滚动DD-DD-下拉插件”

在核心YUI种子文件,我们也包括我们调用虚拟汇总别名 正是这些模块的定义是相同的元数据在装载机。 This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. 在未来的版本中,我们将完善这种方法更。

进行此更改后,我们再preceeded爆炸我们的构建文件。 在以前的版本中,确定的子模块的模块文件的路径。 例如:

     “DD”:{
         “子模块”:{
             “DD-拖”: 
            // Module data
         }
     }

在3.3.0当您建立“DD”,文件的结构看起来像这样:

     /构建/月/ DD-drag.js的
     /构建/月/ DD-ddm.js的
    /build/dd/dd-drop.js

3.4.0爆炸生成系统,“DD”的构建文件现在看起来像这样:

     /构建/ DD-拖/ DD-drag.js的的
     /构建/ DD-DDM / DD-ddm.js的的
     /构建/ DD-滴/ DD-drop.js的的

这使我们从我们的模块元数据全部删除“路径”属性,保存文件的大小,并减少所需的组装模块的URL路径的逻辑。

如果包括一个预配置的组合URL,则必须重新计算您的网址,当您升级。

这种变化的缺点是,如果你是其中的“准备”您的网页模块组合URL,你可以不只是改变了版本号和升级。 您将需要重新配置依赖 ,并产生一个新的模块结构的新的URL。

未来

我将继续完善,重构,并最大限度地提高我们的装载机和种子战略的各个方面。 These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

共享和扩展: 书签del.icio.us Digg它! | reddit!

主办雅虎

©2006-2012雅虎公司所有权利保留。 隐私政策 - 服务条款

支持WordPress的关于雅虎 虚拟主机