framework / lib
关注
分享
扫一扫
文章平均质量分 81
iteye_4865
这个作者很懒，什么都没留下…
展开
-
模块化高扩展性的前端框架 KISSY
模块化高扩展性的前端框架 KISSY注：本文为 2013 年 3 月程序员杂志同名文章的完整版。介绍伴随着淘宝的快速发展，诞生已三年多的 KISSY 也取得了巨大的成长。 目前应用于阿里集团的多个业务团队，特别是淘宝，天猫，一淘的绝大多数业务都采用了 KISSY， 满足了从前台的 web page 到后台的 web app 再到移动端应用（起步阶段）的广泛需求。在阿里集团以...原创 2013-03-14 14:58:21 · 512 阅读 · 0 评论 -
YUI3 StyleSheet bug
演示地址： yui3-stylesheet-bug 被 YUI3 接受了，汗我的英语表达能力：ticket 2528762 出错代码：<!doctype html><html> <head> <title>yui3 stylesheet bug</titl...2010-04-09 18:40:55 · 110 阅读 · 0 评论 -
YUI3 css 选择器实现分析
当然，现代的库都判断了浏览器是否实现了 w3c selector-api ，如果没有才采用下面的方法，目前只有ie系列会执行了。以前分析过 extjs 的css 选择器实现，也粗略看过 jquery的css 选择器实现，这次又看了 yui3的选择器实现，发现每种实现都不同，而yui3或许不是效率最高的一个，却是实现起来最简单的一个。Extjs 与...2010-04-04 16:18:02 · 155 阅读 · 0 评论 -
YUI3沙盒下的多模块交互实践
看了 NCZ 的 scalable-javascript-application-architecture 后对YUI3的沙盒设计以及模块管理有了更深的理解，尤其其中的模块交互方式非常有趣。传统模式：以前使用ext,jquery的多模块交互模式：页面两个模块 m ,m2 ，当 m 变化时需要通知 m2 更新自己的相关状态。 var m=n...2010-04-01 15:46:54 · 144 阅读 · 0 评论 -
yui3 plugin无限递归bug?
在 pluginhost-debug.js 中有段代码： PluginHost.plug = function(hostClass, plugin, config) { // Cannot plug into Base, since Plugins derive from Base [ will cause infinite recurrsion ] ...2010-03-31 16:27:29 · 120 阅读 · 0 评论 -
YUI3 core阅读笔记
node-debug.js :Node 为 HTMLElement包装(处理了缓存)，关键 addMethod ,importMethod 将 Y.DOM 中的静态方法（YUI2模型）迁移到 Node实例中去.Y.DOM.method(node,args); ==> node.method(args);NodeList 为 多个 htmlelements的包装，关键也为 No...2010-03-30 20:05:10 · 176 阅读 · 0 评论 -
Ext-core 阅读笔记 - 2 ( Ext.Fx )
基础： Ext-core 阅读笔记 - 1 中揭示了lib.anim的基本原理，这只是动画的底层，extjs 在这基础上进一步封装，形成了以元素为单元的动画效果，其中最重要的就是Fx，其中的方法直接apply到Element元素，使得每个节点元素可以方便实现自己想要的独立效果，即使底层lib.anim是单一timer集中处理的。Fx理论： ...2009-09-12 17:27:17 · 117 阅读 · 0 评论 -
Ext.Element.isScrollable 问题
习惯了 Ext.getDoc().getViewSize() 以及 Ext.getDoc().getScroll() 获取浏览器窗口的一些信息，而这次用了下 Ext.getDoc().isScrollable() 发现并不是预期的结果 ：可以查看浏览器是否有滚动条，看了下源码发现确实这个方法没有像前两个方法一样对document特殊处理，api 没有保持一致性，应该是不小心疏忽了 i...2009-09-09 17:22:35 · 270 阅读 · 0 评论 -
赋值 script 到 innerHTMl 的Extjs 解决方案
老话题：一般来说 innerHTML 只处理 html 即可，很方便代替冗余的dom操作，但是也有场合需要 从服务端返回一段代码+html一起付给innerHTML，这种情况下script是并不执行的，有兴趣可以试试 <div id="scriptTest"></div><script type="text/javascrip...2009-08-31 11:29:17 · 280 阅读 · 0 评论 -
extjs css selector 分析-1
css selector dom 实现的常见步鄹：(from Secrets of the JavaScript Ninja)1.解析 selector 字串如根据 \s+ 将 "div span a" 分解为 [div,span,a]2.获取元素如上例，先由 getElementsByTagName 得到所有的 div ,再在 di...2009-08-27 17:55:13 · 129 阅读 · 0 评论 -
Extjs Simple Selector 具体解释
在 Ext.Element 的方法中用到了不少选择器，如 Ext.Element findParentNode :simple selector first :simple selector select : selector Ext.EventObject.getTarget :simple selector Ext....2009-08-24 20:09:42 · 233 阅读 · 0 评论 -
用 ext-core 就别用 css hack
起因： 今天碰到一个奇怪的问题，ff 以及其他标准浏览器 top :0 可以达到预期效果，而 ie6 这个怪胎非得要 top :1px ，由于只有这一个属性，懒得搞懂 ie6 为什么会这样， 又不想用条件注释这种把一个css文件分成两个，就习惯的用了邪恶的 css hack （Universal* Selector）: .c { top:0; *to...2009-08-11 17:22:44 · 128 阅读 · 0 评论 -
Ext.extend 的一点改进
Extjs 中的模拟继承使用很多，比如 Component 是所有 extjs 组件的基类，机制就是 Ext.extend 函数 ，所有组件实例化前都要调用父类组件的实例化程序，如：Container : // private initComponent : function(){ Ext.Container.superclass.init...2009-08-09 22:35:34 · 110 阅读 · 0 评论 -
Ext-core 阅读笔记 - 1
1.Ext.lib.Ajax 应该是从 YUI 借鉴过来的，没有看过 YUI 源码，它的工作方式确实比较独特，没有采用常见的判断 readystatechange ，而是自己定时轮训查看状态好处：可以随时终止，只要不轮训就可以了么（例如超时判断），否则 readystatechange 的话，超时就比较麻烦，回调函数仍然会...原创 2009-07-27 17:42:08 · 106 阅读 · 0 评论 -
Extjs3.0 DomHelper Bug
Ext.apply(Ext.DomHelper,function(){ var pub, afterbegin = 'afterbegin', afterend = 'afterend', beforebegin = 'beforebegin', beforeend = 'beforeend'; // private functi...2009-07-23 22:38:50 · 144 阅读 · 0 评论 -
Extjs 正则表达式的优雅应用 -1
在 extjs 的基础库中，大量使用了正则表达式的功能，使得原来很复杂的逻辑可以用很短的代码表示出了。 举个例子: 要动态获得 元素的 width,height,top,left 等位置大小属性： 首先一点预备知识： extjs 是以像素为基本单元，以像素控制的话各个浏览器也比较容易控制，于是extjs 获得上述属性得到的都是像素为单...2009-07-20 18:15:35 · 152 阅读 · 0 评论 -
just another event model
事件模型也算是客户端兼容性的一个长期问题，早期 jquery 作者甚至因为这方面获过奖？一般来说 attachEvent 以及 addEventListener 已经基本够用，特别是 attachEvent 可以给回调传递事件参数了，不用考虑怪异的 window.event div.onclick=function(){alert(window.event==win...原创 2011-06-08 20:47:20 · 108 阅读 · 0 评论 -
google WebFont Loader 源码阅读
资料：关于新发布的google web font 官方介绍,包括三个部分：get started：介绍了最简单的直接css引用方法，包括多字体，粗体斜体的打包应用。WebFont Loader：面向javascript开发者，通过 自定义事件以及状态css类名的动态添加 提供了细力度的控制字体加载过程，今天主要是研究一下实现这一功能的字体下载...2010-05-22 01:04:44 · 198 阅读 · 0 评论 -
理解YUI3 extension:Base.create
YUI3中为了避免不必要的类继承层次，以及摆脱利用原型链模拟的单继承模型，除了利用Y.augment来扩充单一类功能的机制，对用多功能扩充更提出了扩展类的概念(另一个和augment的不同点在于扩充功能类的构造函数调用时机)，能够方便的将功能分解，对应 Base.create。利用官方例子解释： 比如某个类继承了Widget但是它想有Stack,Posi...原创 2010-05-31 03:01:27 · 144 阅读 · 0 评论 -
构建前端 DSL
目前在传统的软件开发领域 [DSL]() 已经比较普遍，特别是 [Martin Fowler]() 的突出贡献。而在前端领域尚较少涉及，而如果在前端开发中合理使用 DSL 同样也可以有效得**减少代码数量，提高可读性**，常见的一个应用场景即前端模板的构建。本质上说模板也是一个微型语言，因此可以从DSL的角度着手，使用工具快速构建一个适合于特定前端框架的模板引擎。本文将以 [KISS...原创 2012-10-11 22:10:32 · 1060 阅读 · 0 评论 -
KISSY kisses bootstrap navbar
看了下 bootstrap 的导航菜单，立刻非常喜欢，注意是浅色的那个： 而不是黑色的那个： 由于浅色的导航css定义在 docs 中，故没有 less 源码文件可以参考，纯看 css 非常混乱，这次就用 less 重新实现了下浅色导航，实现后才发现 bootsrap 对于细节非常重视，其中样式状态非常之多，和之前搞的语法解析的状态有得一比。h...原创 2012-08-03 01:12:13 · 165 阅读 · 0 评论 -
promise api 与应用场景
promise 是 commonjs 社区中提出的异步规范，其简洁直观的 api 使得异步读值操作更易于理解和使用，主要 api 包括： API Defer 功能实现者调用 Defer() 后产生 Defer 对象，它包括 promise 属性以及 resolve 和 reject 方法 promise 对象 功能调用者通过调用 promise 的 then...原创 2012-02-07 17:34:05 · 251 阅读 · 0 评论 -
unified event model
为了处理原生事件在各个浏览器下的兼容性，上次提出了应对原生事件的事件模型，但随着web的多样性以及新功能需求，常常需要自行实现 ui 组件，例如 树，按钮，菜单等，实现时推荐尽量和原生组件（select ， input 等）保持一致，那么也需要暴露事件，不过这时是自定义事件，如果想把模拟 ui 组件做到和原生控件完全一致的体验，那么自定义事件也要具备和原生事件一样的能力。 自定义事件 ...原创 2011-10-14 23:02:08 · 175 阅读 · 0 评论 -
转载：瀑布流布局浅析
简介 如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？ 类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“我要买” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。 这种布局适合于小数据块，每个数据块内容相近且...原创 2011-09-29 19:02:32 · 434 阅读 · 0 评论 -
cross domain request
场景跨域请求是随着应用服务化而越来越多遇到的问题，大体分为两类 1. 子域间通信：a.t.com 要和 b.t.com 通信 2. 完全不同域间通信：t.com 要和 m.com 通信 1 可以看做是 2 的特例，不过解决方法更简单点.解决方案完全不同域间通信w3c 很早就考虑到了这种需求，提出了 Cross-Origin Resource Sharing ...原创 2011-09-29 18:39:55 · 224 阅读 · 0 评论 -
基于多继承的树设计
分类 树是一种常见的 ui 组件，在桌面以及 web 中都经常看到，常见的表现形式有 简单树： 多选树： 如何设计？ 针对树的两种主要分类，这次主要讨论 DRY ，怎么能把重复的功能拆成独立的单元而最终又能完美的整合？我的答案是多继承: 组成部分 BaseNode : 最基本的树节点，类似 dom 树节...原创 2011-09-18 03:42:26 · 204 阅读 · 0 评论 -
框架 build 系统介绍
一个复杂的类库通常都包括很多子模块（ jquery@git ,yui3@git ），在开发中往往多人对不同的模块进行开发，在发布时通过自动脚本进行代码的压缩，合并等等，最终生成文件数量较少的所谓的打包（build）代码。jquery，yui3 采用的都是 ant 的 build 架构，kissy 借鉴了这一体系，通过共享公共 build file 以及分别编写各个组件的 b...原创 2010-07-11 01:29:20 · 259 阅读 · 0 评论 -
querySelectorAll 探讨
随着css selector engine在越来越多的javascript库中实现，进而影响了浏览器开发商，在现代（除了ie）的浏览器中都实现了css selector api : querySelector,querySelectorAll ，利用原生的 render engine ，速度得到了极大的提高，最终反馈到新的javascript库中，在进行选择器筛选时都要首先进行能力检测(fea...原创 2010-07-01 22:35:24 · 208 阅读 · 0 评论 -
caja 原理 : 前端
作为前端开放的基础安全保证，caja 是目前比较合适的运行机制，包括前端运行环境以及后端编译环境，这次先整体介绍下 caja 在前端是如何屏蔽外部模块代码对整体应用的影响 （注意：官方文档较少，以下为自己理解，难免偏颇）.组成部分1. 整体运行环境：隔离模块与宿主环境，并提供外部应用与模块的沟通机制. 2. 提供 ecmascript5 以及 dom2 的全平台兼容实现...原创 2011-09-01 16:48:06 · 2096 阅读 · 0 评论 -
ie 下 cloneNode 导致的属性克隆
这个还是很值得记下，一直存在的很大隐患终于解决，由于在 ie<9 中存在内存泄露，我们经常采用类似 data 的方式来存储数据（其实是将数据关联到节点），但另一方面 ie<9 下又存在 attribute-property 混淆现象 。 那么当我们通过 data 存储数据时，其实节点上只是存放了一个指向存储数据的指针，这个指针作为 expando 存在于节点上，...原创 2011-08-24 16:10:47 · 320 阅读 · 0 评论 -
再谈 attribute
@slideshare 原生：attribute 的访问控制从ecmascript3.1开始引入，在ecma5正式成为标准，目前有ie8与chrome支持，使用方式： foo={};Object.defineProperty(foo, "test", { getter: function() { return "foo" } ,...原创 2010-06-22 11:37:54 · 155 阅读 · 0 评论 -
事件机制探讨
由于浏览器事件机制的不兼容性，譬如最常见的注册事件差异，不常见的事件触发顺序差异，以及为了支撑 component infrastructure，基本上常见的类库 YUI3，jquery，extjs 都包含了 event 模块用来注册 dom 事件和实现自定义事件的绑定与触发，理想情况下都希望自定义事件的表现同 dom 事件完全兼容，毕竟javascript不能完全的代替原生代码，虽然...原创 2010-06-21 13:54:05 · 118 阅读 · 0 评论 -
利用Attribute重构：业务与UI分离
很简单的一个应用 通过按钮来限制输入范围 ，这样的话再配合服务器端检测就能在一定范围内限制输入数据，这次从重构的角度讲解如何一步步将代码变得更加优美：）1.原始代码，业务逻辑与ui混合 function Increaser(domInput,domAction){ this.input=domInput; this.domAction=domAc...原创 2010-06-08 16:54:33 · 157 阅读 · 0 评论 -
yui3 loader的串行加载特性
yui3 的沙箱机制可以在多人协作开发方面提供很大的便利，常被举的例子之一就是： 重复载入脚本问题： ...//开发者 A<script src="a.js"></><div></div><script>//a组件应用</>....//开发者 B<原创 2010-06-04 12:30:38 · 149 阅读 · 0 评论 -
yui3下的load事件触发
以前的一些总结：页面load 与 资源load ，这次提出来一个window的load事件触发问题以及解释一下在 yui3 中问题的解决。问题：异步脚本对页面的影响：我们知道 window 的load事件只会在页面载入完毕后触发一次且仅一次，如果你没有在页面载入前listen这个事件，则以后都没机会了。(为了简便不使用addliste...2010-06-01 13:31:06 · 192 阅读 · 0 评论 -
YUI3 use&Loader 简析
YUI3和Extjs,jquery的很大不同就是对于模块的管理，对于使用动态加载脚本的方式来管理模块，记得最早由dojo提出，但是由于实现复杂(Extjs方面自己也尝试过)且早期web开发多为小项目，就一直没有流行开来，而如今网站越来越复杂，动态加载管理模块的方式对于大团队开发能起到很好的协调作用，今天下午有空就把源码 yui-debug.js 以及 loader-debug.js读了...2010-03-27 19:06:46 · 194 阅读 · 0 评论 -
Ext.Fx 队列控制机制
承续 Ext.Fx分析 , Ext.lib.anim分析Ext.Fx 为对底层Ext.lib.Anim 的封装，提供了一些现成的配置而形成的动画，比如fadeIn渐进显示,slideIn滑动显示，都是构造配置参数传递给底层的Ext.lib.Anim 对象具体运行，但是FX也进一步提供了以动画为单元的队列机制，不同于底层按照时间片排队，fx按照元素的动画调用顺序排队。...原创 2010-01-27 00:54:02 · 135 阅读 · 0 评论 -
Jquery Fx 源码简析
相对于 Extjs Fx 模块的处理 , Jquery Fx 的处理显得紧凑，灵活，不像 Extjs 严格的分层，将基础操作，中央定时队列抽象出来，然后再对具体元素，具体属性进行动画效果，Jquery 不严格区分，将对元素属性的操作以及定时队列管理糅合在一起，代码显得更精悍。DOM动画处理的关键是对目标元素得目标 css 属性进行随时间设置不同的值，造成动画的效果，具体设计包括...原创 2009-11-09 15:52:38 · 510 阅读 · 0 评论 -
简析 Extjs 类继承
简化的 Ext 原型链的类设计 function A() { alert('a');}function B() { B.superclass.constructor.call(this);}function temp() {}temp.prototype = A.prototype;//防止A 的实例属性也搞到 B 里去 ，没有意...原创 2008-09-25 00:43:46 · 135 阅读 · 0 评论 -
简析 Ext.LoadMask
girdpanel 时如果指定了 loadmask 那么在 load 数据时会自动出现一个层遮盖，很酷,但看 gridpanel 的源码 ，丝毫找不到关于 loadmask 运动的一丝痕迹 ，而仅仅只有一段 this.loadMask = new Ext.LoadMask(this.bwrap,Ext.apply({store:store}, this.initialConfig...原创 2008-09-24 00:46:05 · 176 阅读 · 0 评论