iteye_4865-CSDN博客

原创 blog 搬到 yiminghe.me 啦

再见了 javaeye，还记得 2008 年 9 月 12 号学生时代写的第一篇博客，感谢你陪伴我5年整！ http://blog.yiminghe.me/2013/09/26/blog-migration/

2013-09-26 21:53:47 191

原创 continuation, cps

起随着 nodejs 的兴起，异步编程成为一种潮流，而异步也对编程风格带来了一些影响，典型的比如在客户端尚不明显的 cps 风格的大量出现: getUser(function(){ // .... getItem(function(){ // ... });}) 回调嵌套带来性能，栈溢出，以及代码阅读上的一系列的问题，目前有不...

2013-09-12 16:49:48 302

原创一种基于匹配回朔的 css3 选择器引擎实现

一种基于匹配回朔的 css3 选择器引擎实现介绍CSS 选择器是一种应用于 DOM 节点查找场景的特定微型语法，本质上和正则表达式一样都是一种模式匹配语言，灵活使用可以方便得获取指定位置的节点集合。目前 W3C 推荐标准为 Selectors Level 3 ，在 ie9+ 以及 firefox，chrome，mobile 等浏览器上原生有基本一致的实现，而在 ie 下则需要 ...

2013-05-07 20:40:13 232

原创模块化高扩展性的前端框架 KISSY

模块化高扩展性的前端框架 KISSY注：本文为 2013 年 3 月程序员杂志同名文章的完整版。介绍伴随着淘宝的快速发展，诞生已三年多的 KISSY 也取得了巨大的成长。目前应用于阿里集团的多个业务团队，特别是淘宝，天猫，一淘的绝大多数业务都采用了 KISSY，满足了从前台的 web page 到后台的 web app 再到移动端应用（起步阶段）的广泛需求。在阿里集团以...

2013-03-14 14:58:21 423

cubic-bezier 曲线是 css3 动画的一个重要基石。另一个为 steps （ease 等都是 cubic-bezier 的特殊形式），css3 中的 cubic_bezier 曲线限制了首尾两控制点的位置，通过调整中间两控制点的位置可以灵活得到常用的动画效果，同时 canvas 也进行了相应的支持，也存在相应的工具可以根据想要的曲线得到对应 cubic bezier 曲线的控制点参数。...

2013-01-05 16:34:03 940

原创构建前端 DSL

目前在传统的软件开发领域 [DSL]() 已经比较普遍，特别是 [Martin Fowler]() 的突出贡献。而在前端领域尚较少涉及，而如果在前端开发中合理使用 DSL 同样也可以有效得**减少代码数量，提高可读性**，常见的一个应用场景即前端模板的构建。本质上说模板也是一个微型语言，因此可以从DSL的角度着手，使用工具快速构建一个适合于特定前端框架的模板引擎。本文将以 [KISS...

2012-10-11 22:10:32 962

原创 KISSY kisses bootstrap navbar

看了下 bootstrap 的导航菜单，立刻非常喜欢，注意是浅色的那个：而不是黑色的那个：由于浅色的导航css定义在 docs 中，故没有 less 源码文件可以参考，纯看 css 非常混乱，这次就用 less 重新实现了下浅色导航，实现后才发现 bootsrap 对于细节非常重视，其中样式状态非常之多，和之前搞的语法解析的状态有得一比。h...

2012-08-03 01:12:13 136

原创 css reset revisit

正如 javascript 兼容库的作用， css reset 也扮演着类似的角色，css reset 保证了各个浏览器最基本元素渲染的一致性和统一性，从而减少在构建复杂界面过程中遇到各个浏览器出现不同展现的问题。以前对于 css 框架关注比较少，而近来随着 bootstrap 以及 lesscss 等的出现，使得构建 css 框架也开始成为一种必要。那么先从 css reset 开始...

2012-07-25 00:32:49 102

原创 Get cursor position and coordinates from textarea

最近需要从 textarea 中获取当前输入的光标位置以及绝对坐标，希望达到 github 以及 weibo 输入自动提示的效果，例如：如今网络上都是零散的技巧（包括曾今的一篇），没有完善可靠的解决方案，于是就直接把这些功能实现兼容到 KISSY 的 DOM 操作中。兼容正规化 cursor position 光标位置(cursor positio...

2012-04-10 20:50:37 194

原创兼容 ie 的 transform

css 2d transform 是 css3 引入的一个新的 css 属性，特别是可以很方便对元素进行旋转和扭曲变换，摆脱了传统枯燥的方方正正的形象，很好玩，但其实 ie 早就支持这种变化了，通过 matrix 滤镜在一些限制条件下完全可以达到同样的效果. 兼容从角度转化为 matrix 滤镜所需要的矩阵值涉及基础的坐标旋转方面的知识，可参考 wiki . 简单举例： ...

2012-02-23 14:00:31 1335

原创 promise api 与应用场景

promise 是 commonjs 社区中提出的异步规范，其简洁直观的 api 使得异步读值操作更易于理解和使用，主要 api 包括： API Defer 功能实现者调用 Defer() 后产生 Defer 对象，它包括 promise 属性以及 resolve 和 reject 方法 promise 对象功能调用者通过调用 promise 的 then...

2012-02-07 17:34:05 204

原创 closure compiler 代码优化实例

closure compiler 可以进行不少有意思的优化，一般只有在编译器优化中才会出现的，比如：编译时计算（computation during compilation）优化前： var x=5*11;alert(x*Math.random()); 优化后：优化时进行直接量计算，得到： var x=55;alert(x*...

2012-01-08 03:23:29 403

原创 circular dependency

循环依赖是和语言无关的一个设计问题，在各个语言环境下都可能存在循环依赖，甚至引起 stackoverflow，这种大多数是由于不好的设计而导致的，一般来说都可以通过提取公共模块而解决，特定的场景下对应用程序做一定的调整也可以在维持循环依赖的前提下避免栈溢出。语言机制： c++ c++ 中的循环类定义引用会导致编译出错，一般的解决方案可以通过提前声明来解决: ...

2011-12-11 18:23:52 1306

原创 write html parser

首先需要声明 html 不能用正则表达式来直接匹配进行内容抽取等处理，这样做的结果很严重！ Not XHTML Parser 另一点需要注意的是：不是构建 xhtml parser ，如果是 xhtml 的话可采用 parser generator 根据 grammar 直接生成解析器即可，而 html 由于对错误很宽容（比如普遍的标签不闭合问题），具备超强的错误纠正机制，...

2011-12-01 02:48:54 118

原创获取剪贴板数据

兼容性：获取剪贴板数据这块各个浏览器间存在很大的兼容性问题： ie: 通过监听 paster 或 beforepaste ，在全局变量 clipboardData 中取得黏贴数据: onpaste=function(){alert(clipboardData.getData("Text"););} 但局限性在于只能取得文本数...

2011-11-07 23:31:57 1056

原创 url 映射问题

背景 url mapping 我最早知道是作为 java web 容器的一个功能点，遵从 servlet 规范，大致的形式是通过在配置文件中配置 url 路径和指定 servlet 的对应关系，当请求过来时根据 url 路径来调用相应的服务器端逻辑。例如： <servlet-mapping><servlet-name>milk</...

2011-11-07 21:52:52 287

原创 tip：如何原生播放声音

如果不想考虑浏览器间的兼容性就用 flash , 但如果考虑普适性，还是使用浏览器提供的原生功能比较好，这时就要对各个浏览器的特性特别区分下： 1. html5 compatible audio 使用起来挺简单，但要注意是的: 1.需要真正生成 audio 标签并插入 dom 而不是直接 new Audio().src 就可以的。 2.需要调用 canPlayT...

2011-10-19 12:45:38 108

原创 unified event model

为了处理原生事件在各个浏览器下的兼容性，上次提出了应对原生事件的事件模型，但随着web的多样性以及新功能需求，常常需要自行实现 ui 组件，例如树，按钮，菜单等，实现时推荐尽量和原生组件（select ， input 等）保持一致，那么也需要暴露事件，不过这时是自定义事件，如果想把模拟 ui 组件做到和原生控件完全一致的体验，那么自定义事件也要具备和原生事件一样的能力。自定义事件 ...

2011-10-14 23:02:08 136

原创转载：瀑布流布局浅析

简介如果你经常网上冲浪，这样参差不齐的多栏布局，是不是很眼熟啊？类似的布局，似乎一夜之间出现在国内外大大小小的网站上，比如 Pinterest (貌似是最早使用这种布局的网站了)，Mark之，蘑菇街，点点网，以及淘宝最新上线的“我要买” 等等，倒是很流行哈~ 在淘宝即将上线的众多产品中，你还会大量看到这样的形式呢。这种布局适合于小数据块，每个数据块内容相近且...

2011-09-29 19:02:32 373

原创 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 171

原创基于多继承的树设计

分类树是一种常见的 ui 组件，在桌面以及 web 中都经常看到，常见的表现形式有简单树：多选树：如何设计？针对树的两种主要分类，这次主要讨论 DRY ，怎么能把重复的功能拆成独立的单元而最终又能完美的整合？我的答案是多继承: 组成部分 BaseNode : 最基本的树节点，类似 dom 树节...

2011-09-18 03:42:26 155

原创 caja 原理 : 前端

作为前端开放的基础安全保证，caja 是目前比较合适的运行机制，包括前端运行环境以及后端编译环境，这次先整体介绍下 caja 在前端是如何屏蔽外部模块代码对整体应用的影响（注意：官方文档较少，以下为自己理解，难免偏颇）.组成部分1. 整体运行环境：隔离模块与宿主环境，并提供外部应用与模块的沟通机制. 2. 提供 ecmascript5 以及 dom2 的全平台兼容实现...

2011-09-01 16:48:06 1902

原创 tokenization of html

html 符号解析问题场景：在页面上输出包含已有数据的 textarea ，一般的做法即是，将所有的数据从数据库取出后都 escapeHtml 一下： <textarea>&lt;script&gt;if(a&amp;&amp;1)alert(1);&lt;script&gt;</textarea&g...

2011-08-29 22:38:50 152

原创 ie 下 cloneNode 导致的属性克隆

这个还是很值得记下，一直存在的很大隐患终于解决，由于在 ie<9 中存在内存泄露，我们经常采用类似 data 的方式来存储数据（其实是将数据关联到节点），但另一方面 ie<9 下又存在 attribute-property 混淆现象。那么当我们通过 data 存储数据时，其实节点上只是存放了一个指向存储数据的指针，这个指针作为 expando 存在于节点上，...

2011-08-24 16:10:47 270

原创循环引用下的深度克隆

深度复制和浅度复制是当初初学 c 遇到的第一批问题，似乎使不少人困惑，而类 c 的 javascript 也同样存在这个问题. 第一版： javascript 中引用类型(Object.prototype.toString.call(object))有 : Array 以及 Object , Date , RegExp ,Number, Function,Bool...

2011-08-04 20:39:54 650

原创模块的静态与动态循环依赖

场景：循环依赖我是不支持的，但现实中似乎又确实需要循环依赖，例如前端的选择器场景（ie<8）：首先实现了 DOM 模块来保证各个浏览器的兼容性以及 api 的易用性，其中包含必要简单的选择器逻辑然后实现了高级选择器模块，但这并不是最常用，为了效率该模块是不放入核心 DOM 模块中的，而选择将它作为独立模块 :selector，显然 selector 模块依...

2011-07-25 03:43:14 347

原创 visual rect computation of element

元素的可视矩阵（区域）计算元素常常需要展现在用户的可视区域内，而元素是否出现在用户的可视区域实际上受以下因素的限制（目前已知，待补充） : 窗口 ( viewport ) 限制，随浏览器滚动条变化自身是否使用了脱离文档流的定位 ( absolute fixed )父（祖先）元素是否定位父（祖先）元素包括祖先元素是否设置了 overflow != visi...

2011-07-14 21:50:11 170

原创 using mustache with spring mvc

spring 基本不用介绍了，是目前最好的 IOC 容器了，它的 mvc 架构也十分出色，特别是基于标注的开发方式，免除了大多数框架庞大配置的缺点。而 mustache 则是新兴的模板语言，难能可贵的是在各个主流语言下都有对应的解析器，恰好有机会尝试将 spring mvc 的 view 层替换为 mustache ，感觉很不错~~ 1.写个 controller p...

2011-06-16 20:30:07 166

原创 just another event model

事件模型也算是客户端兼容性的一个长期问题，早期 jquery 作者甚至因为这方面获过奖？一般来说 attachEvent 以及 addEventListener 已经基本够用，特别是 attachEvent 可以给回调传递事件参数了，不用考虑怪异的 window.event div.onclick=function(){alert(window.event==win...

2011-06-08 20:47:20 79

原创第三方 cookie 写入问题

场景：在 xx.com/y.html 代码为： <iframe id='ok' name='ok' src='http://zz.com/w.htm?authKey=ertwg'></iframe> w.htm 需要根据 authKey 写入 cookie，授权 y.html 嵌入 zz.com 站点的其他页面（例如即时重定向到另...

2011-05-23 14:10:05 704

原创 aria practice

aria practice 1. WAI 工作组制定 ARIA 规范，aria 标准被映射到本地原生的无障碍机制中。 1.1 支持浏览器：ie8,9 chrome firefox，读屏器：nvda 2.包括角色 ( role ) 以及和角色相关联的状态 ( state) 和属性 ( property ). 2.1 角色包括：文档...

2011-05-21 21:48:10 73

原创 xhr 二进制操作

XMLHttpRequest 最常用到的功能就是文本操作以及 xml 处理，但其实 xhr 还可用来对二进制进行直接操作，例如比较强悍的 linux in js . 1. responseText 方式读取 1.1 服务器干涉的全平台兼容根据 xmlhttprequest w3 规范，对于返回体的处理会根据 charset 来decode 字...

2011-05-21 20:27:25 273

原创备忘：使用 intellij idea 进行远程调试

以前都是很土得打 log ，发现一篇关于 java 调试器架构，以及 eclipse 上使用的文章，在常用的 intellij idea 以及 tomcat 上调试成功，结合调用堆栈希望可以加快 ``how tomcat works`` 读书进度。 1. tomcat 7.0.5 启动支持调试新建文件 setenv.bat SET CATALINA_OPTS=-s...

2011-05-03 18:56:44 1583

原创 socket in js

socket 如今也出现在了 javascript 中，浏览器端有 html5 规范的 websocket 来完成客户端信息发送，服务器端则可以在 nodejs 平台上实现对应的服务器信息接收（原生支持的异步io读取），而另一方面客户端 api 由 w3c 制定，具体的通信协议则由 IETF 指定，目前尚处于草稿阶段，最新的规范也已过期。客户端发送：目前只有 ...

2011-04-13 22:47:40 201

原创 narcissus 试用

narcissus 是一个由 javascript 自身实现的 javascript 解释器，最终效果和 spidermonkey 引擎保持一致，足以证明 javascript 本身就是一个完备的元循环语言。运行@shellnarcissus 可以跑在 spidermonkey shell 以及浏览器 spidermonkey 引擎环境下，经过修改也可运行于最新的 fir...

2011-04-07 00:41:10 158

原创入门：兼容 nodejs

nodejs 可以在服务器端执行 javascript 脚本，并提供了一些核心模块可以进行读写，大大扩充了 javascript 的作用范围，并且经过简单的修改，原先的客户端脚本甚至可以直接运行在服务器端，即同样的代码可以自由选择在服务器端或者客户端渲染。客户端脚本转化服务器端脚本 windows 下安装 nodejs 1.下载整合版本，推荐...

2011-03-15 17:37:50 123

原创读书笔记：整数位表示

From : Computer System ( A Programmer's Perspective) 整数分为正整数，0，负整数, 当今负整数使用补码表示，方便机器运算。正整数二进制表示为 0Xw-1Xw-2..X0 =Xw-1* 2^(w-1) + Xw-2 * 2^(w-2)....+X0*1 正整数进行扩展时，增加的位用0填充负整...

2011-03-06 22:55:47 129

原创 simple button overview

采样自: yui , closure , kissy editor ,一般 button 分为四种： button , toogle button , menu button , split button 。展现层： button yui google kissy editor ...

2011-02-24 11:16:48 112

原创基于mvc具备可访问性的按钮设计

借鉴自强大的 google button . mvc 分解：总体架构： Model and control : 不涉及 ui 渲染，用来表示按钮的实质，按钮具备以下数据属性： content : 按钮显示值 value : 按钮的内在存储值 tooltip : 按钮的鼠标掠过（得到焦点）提示 d...

2011-02-21 18:52:36 109

原创 cookie 中文编码问题

http 协议根据 RFC2616 ，一个 http 请求/响应可以分为三段状态行头区域体区域其中状态行和头区域只能包含 ascii(iso8859-1) 编码的字符，而 cookie 恰恰属于头区域，那么要想使得 cookie 承载中文字符，则要进行编码，使得编码后的字符在 ascii 字符范围内。服务器编码：一般...

2011-02-16 19:33:07 568

空空如也

Javascript闭包与python 闭包