BlogJava-我是FE，也是Fe-随笔分类-Web开发http://www.blogjava.net/Hafeyang/category/38429.html前端来源于不断的点滴积累。我一直在努力。zh-cnThu, 31 Oct 2013 23:30:16 GMTThu, 31 Oct 2013 23:30:16 GMT60sublime text 2 (四) Emmet(之前叫Zencoding)的安装以及新特征http://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.html衡锋衡锋Sat, 19 Jan 2013 13:06:00 GMThttp://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.htmlhttp://www.blogjava.net/Hafeyang/comments/394449.htmlhttp://www.blogjava.net/Hafeyang/archive/2013/01/19/emmet_fomer_zencoding_in_sublime_text_2.html#Feedback10http://www.blogjava.net/Hafeyang/comments/commentRss/394449.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/394449.html阅读全文

衡锋 2013-01-19 21:06 发表评论
]]>smartcomb:用php实现的web模块拼合器http://www.blogjava.net/Hafeyang/archive/2013/01/05/powerful_web_module_combination_tool_smartcomb.html衡锋衡锋Sat, 05 Jan 2013 06:47:00 GMThttp://www.blogjava.net/Hafeyang/archive/2013/01/05/powerful_web_module_combination_tool_smartcomb.htmlhttp://www.blogjava.net/Hafeyang/comments/393817.htmlhttp://www.blogjava.net/Hafeyang/archive/2013/01/05/powerful_web_module_combination_tool_smartcomb.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/393817.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/393817.html阅读全文

衡锋 2013-01-05 14:47 发表评论
]]>knockoutjs中使用10绑定checkboxhttp://www.blogjava.net/Hafeyang/archive/2012/12/12/using_knockoutjs_custom_binding_to_bind_10_to_checkbox.html衡锋衡锋Wed, 12 Dec 2012 09:14:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/12/12/using_knockoutjs_custom_binding_to_bind_10_to_checkbox.htmlhttp://www.blogjava.net/Hafeyang/comments/392886.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/12/12/using_knockoutjs_custom_binding_to_bind_10_to_checkbox.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/392886.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/392886.html阅读全文

衡锋 2012-12-12 17:14 发表评论
]]>基于raphaeljs的web图实现-rgraph2http://www.blogjava.net/Hafeyang/archive/2012/12/11/rgraph2_an_graph_implementation_by_raphaeljs.html衡锋衡锋Tue, 11 Dec 2012 12:08:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/12/11/rgraph2_an_graph_implementation_by_raphaeljs.htmlhttp://www.blogjava.net/Hafeyang/comments/392832.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/12/11/rgraph2_an_graph_implementation_by_raphaeljs.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/392832.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/392832.html阅读全文

衡锋 2012-12-11 20:08 发表评论
]]>强大的管理web包管理工具-bowerhttp://www.blogjava.net/Hafeyang/archive/2012/12/11/an_introduction_of_powerfull_web_package_mange_tool_named_bower.html衡锋衡锋Tue, 11 Dec 2012 12:01:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/12/11/an_introduction_of_powerfull_web_package_mange_tool_named_bower.htmlhttp://www.blogjava.net/Hafeyang/comments/392831.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/12/11/an_introduction_of_powerfull_web_package_mange_tool_named_bower.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/392831.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/392831.html阅读全文

衡锋 2012-12-11 20:01 发表评论
]]>underscore中的function类函数解析http://www.blogjava.net/Hafeyang/archive/2012/11/08/undercore_function_uitlity.html衡锋衡锋Thu, 08 Nov 2012 05:14:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/11/08/undercore_function_uitlity.htmlhttp://www.blogjava.net/Hafeyang/comments/390932.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/11/08/undercore_function_uitlity.html#Feedback2http://www.blogjava.net/Hafeyang/comments/commentRss/390932.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/390932.html阅读全文

衡锋 2012-11-08 13:14 发表评论
]]>sublime text 2 (三) 在sublime text 2 中写coffeescripthttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.html衡锋衡锋Thu, 25 Oct 2012 15:56:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.htmlhttp://www.blogjava.net/Hafeyang/comments/390243.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/10/25/using_sublime_text_2_coffeescript_plugin_in_windows.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/390243.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/390243.html阅读全文

衡锋 2012-10-25 23:56 发表评论
]]>兼容AMD,nodejs/commonjs规范的模块定义-读knockoutjs源码http://www.blogjava.net/Hafeyang/archive/2012/08/18/compatibility_with_AMD_and_commonjs_module_definition_exaction_of_knockoutjs_sourcecode.html衡锋衡锋Sat, 18 Aug 2012 08:51:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/18/compatibility_with_AMD_and_commonjs_module_definition_exaction_of_knockoutjs_sourcecode.htmlhttp://www.blogjava.net/Hafeyang/comments/385734.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/18/compatibility_with_AMD_and_commonjs_module_definition_exaction_of_knockoutjs_sourcecode.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/385734.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/385734.html从knockoutjs源码中读到了一个很好的能兼容AMD,commonjs规范的模块定义。看代码
/闭包执行一个立即定义的匿名函数
!function(factory) {

    //factory是一个函数，下面的koExports就是他的参数

    // Support three module loading scenarios
    if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
        // [1] CommonJS/Node.js
        // [1] 支持在module.exports.abc,或者直接exports.abc
        var target = module['exports'] || exports; // module.exports is for Node.js
        factory(target);
    } else if (typeof define === 'function' && define['amd']) {
        // [2] AMD anonymous module
        // [2] AMD 规范 
        //define(['exports'],function(exports){
           //    exports.abc = function(){}
        //});
        define(['exports'], factory);
    } else {
        // [3] No module loader (plain <script> tag) - put directly in global namespace
        factory(window['ko'] = {});
    }
}(function(koExports){

    //ko的全局定义 koExports是undefined 对应着上面的[3] 这种情况
    var ko = typeof koExports !== 'undefined' ? koExports : {};

    //定义一个ko的方法
    ko.abc = function(s){
        alert(s);
    }
});

//[3]中情况的调用
ko.abc("msg");

非常巧妙的闭包实现了。三种方式的兼容。摘出来mark一下。







衡锋 2012-08-18 16:51 发表评论
]]>sublime text 2学习(二):创建可复用的代码片段http://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html衡锋衡锋Fri, 17 Aug 2012 05:30:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.htmlhttp://www.blogjava.net/Hafeyang/comments/385686.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/17/how_to_create_code_snippet_in_subline_text_2.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/385686.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/385686.html对于前端工程师来讲，写一个html页面的基本结构是体力活，每次去拷贝一个也麻烦，sublime text 2 提供了一个很好的复用代码片段。下面介绍一下创建一个html5的代码片段的过程。

在菜单上点击Tools -> New Snippet，会新建一个xml文件页签：
<snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

注释已经说的比较详细了。

content 里面就是代码模版：${序号：默认值} ，序号相同的地方光标会同时停在那可以多处同时编辑。序号大小就是tabindex。在实际使用代码的时候，可以使用tab切换光标位置。

tabTrigger是指输入该字符串后tab就是在光标插入content中的内容。

scope是指在何种文件类型中使用。

下面是html5代码片段的定义：

<snippet>
    <content><![CDATA[
<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>${1}</title> 
</head>
<body>
    <h1>${1}</h1>
    Hello, ${2:this} is a ${3:snippet}.
</body>
</html>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>html5</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

编辑完之后保存为 C:\Users\[用户]\AppData\Roaming\Sublime Text 2\Packages\User\html5.sublime-snippet  (Win7下) 默认的保存路径就行。后缀必须是.sublime-snippet。

保存完重启Sublime text 2，新建文件：输入html5,tab会出现如下效果：



${1}出现了两次，所以光标同时编辑图中两处。
${2:this}，所以在2处出现this默认值。${1}处编辑完按tab就到${2}处。

OK, That's all。









衡锋 2012-08-17 13:30 发表评论
]]>sublime text 2 学习(一)：快捷键，小技巧for前端工程师（持续更新）http://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.html衡锋衡锋Thu, 09 Aug 2012 05:22:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.htmlhttp://www.blogjava.net/Hafeyang/comments/384754.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/09/sublime_text_2_short_key_and_trick_for_frontend_engineer.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/384754.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/384754.html
Ctrl+W 关闭当前页签，很通用。
Ctrl+Shift+W关闭所有页签，估计能猜到。

Ctrl+Shift+v 粘贴并且格式化，比较实用。

Ctrl+[ 减少缩进
Ctrl+] 增加缩进

Ctrl+k,Ctrl+u 先按Ctrl+K,再按Ctrl+U，大写，这有点不习惯
Ctrl+k,Ctrl+l 小写

ctrl+left,ctrl+right 先左/右移动一个单词，VI中的W,B

Ctrl+Shift+up ,当前上上移一行，跟Eclipse一样
Ctrl+Shift+down，不说了

Ctrl+Shift+K 删除当前选中行，后来发现Ctrl+X也可以，Eclipse里面的Ctrl+D。
Ctrl+Shift+D 复制当前选中行，程序员的挚爱
Ctrl+D 是高亮光标所在词，类似VIM中的#

Ctrl+M 到匹配的{[( 与vim 中的%一致
Ctrl+Shift+M 可以选中{[(内容，类似vim中的va( vi{

Ctrl+J join rows 合并选中行
Ctrl+Shift+J 打散行

Ctrl+Shift+T 旋转功能这个标签内容 vim中的vat
Ctrl+shift+a 选中匹配的标签

Ctrl+T 可以选中多行，然后讲这些行顺序反转。如果没有选中多行，会讲光标前后的字母换顺序。

双击选中一个单词,Ctrl+F3跳至下一个匹配处，F3上一个匹配处。

F11，我最喜欢的全屏快捷键。
Shift+F11更狠，只编辑当前的文件。免打扰模式。两耳清静。

alt+. 如果输入<div> 然后alt+. 可以自动完成这个tag，变成<div></div>

Ctrl+/ Ctrl+Shift+/ 注释/取消注释，各种语言都行。

一个小技巧：选中一个单词如abc ，然后输入" 这样 会变成"abc",同理还可以用( { [ '

Ctrl+shift+P 调出一个功能列表，可以探索一些好玩的功能，比如我找到了这个功能：HTML:Encoding Special Characters。选中 & 运行一下可以变成 &amp;

Ctrl+P 会调出一个对话框框，下拉选项中有当前打开的文件，可以切换，文本框非常强大，输入@funcName 可以直接到函数定义处，输入#key 可以直接查找，输入:行数可以直接到某行，也可以用快捷键Ctrl+g

安装了ZenCoding之后可以使用的快捷键： 安装教程

Ctrl+alt+Enter,zencoding开始了
alt+shift+W 环绕选中内容


官方文档中有快捷键列表：http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html







衡锋 2012-08-09 13:22 发表评论
]]>谈谈前端组件库http://www.blogjava.net/Hafeyang/archive/2012/08/01/how_to_build_frontend_component_lib.html衡锋衡锋Tue, 31 Jul 2012 17:19:00 GMThttp://www.blogjava.net/Hafeyang/archive/2012/08/01/how_to_build_frontend_component_lib.htmlhttp://www.blogjava.net/Hafeyang/comments/384477.htmlhttp://www.blogjava.net/Hafeyang/archive/2012/08/01/how_to_build_frontend_component_lib.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/384477.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/384477.html
1.基础库：

注意是库，不是框架，基础库通常提供底层方法，它必须能够屏蔽浏览器/终端的API差异。也许大家脑子里面会弹出一堆前端热门的一些库。在此不讨论哪个库哪个库怎么样，一个基础库必须提供的功能：
  • 基本类型的常见扩展：原生的javascript对象API往往在现实中不够用，比如常见的Array.indexOf/remove/each，Date.parse/format，不管是怎么封装都需要这类方法
  • DOM操作常见方法：DOM节点增删改查，CSS selector，DOMReady，contains，add/remove/toggleClass，屏蔽浏览器之间的操作差异。不多说，人人都熟。
  • 一套浏览器检测机制：以前大家都倾向于做浏览器类型和版本的检测，现在倾向于做浏览器的特性检测，这样更有实际用处。
  • Ajax的封装，对于组件库来讲可无。毕竟组件库本身的实现不太会用得上Ajax。

2.事件机制：

addEventListener/removeEventListener/dispatchEvent 是常见的封装方式，不应该只是DOM事件，而是任何对象都可以做一个事件机制。
对于DOM事件的封装需要屏蔽IE/标准Event的差异提供为用户使用，事件代理非常重要，不可小视。
  • 事件机制都无一例外的是基于第三方观察者或者叫做沙箱(Sandbox)实现。
  • 事件机制更深的功能是提供一个模块的通信机制。
  • 对于组件库，组件实例之间的通信更加重要，组件实例之间最好不要存在相互引用的关系，互相不能感知对方的存在，有了事件机制，可以通过第三方有效的通知组件实例，减少组件实例间的耦合。

3.模板机制：

实际上写组件的时候，拼装html是一件很复杂的事情，模块能够从数据模型，对于组件库来讲通常是配置信息选项。将这些选项拼装成html字符串。但是大家普遍的一个误区是在追求语法的简便的和性能。我倒觉得模板要做的事情远不止如此。功能强大的模板不仅仅只完成字符串的拼接，而是要简化整个DOM操作，从数据模型到DOM的双向绑定，Model更新了DOM也随之更新。甚至要解决动态DOM事件绑定的问题。


4.面向对象的机制

放在组件库这个角度去谈面向对象的时候，他是一个架构设计中的一个重要的一环。
面向对象的机制能有效的提升代码的可复用性和扩展性，javascript灵活的语法诸如prototype/closure的方式，能构建出一个强大的类库。
可以使用继承机制扩展已有的组件。也可以用引用的方式装饰(Facade)现有组件，个人更倾向于使用装饰。因为继承总会不可避免的直接或者间接去访问父类的一些私有属性方法。
这个机制其实决定了一个组件的代码模型，通常需要解决的问题有：
  • 该组件继承自哪些组件或者基础类，或者依赖于那些类？
  • 组件实例的管理方式，因为每个组件实例都需要在一个容器中统一存放，理想的的存放模型应该是树形的，在内存中存在类似DOM树一样的组件对象树，是否可以通过类名找到相关实例，根据ID获取实例，获取子实例，父实例，父/子实例之间的通信父实例的resize是否能通知容器内的实例resize。
  • 插件机制：作为一个非常重要的扩展机制，插件能有效的解决组件间的复用部分，通常这部分会叫做行为(behavior)，对于组件不能提供的甚至是个性化的功能，有没有提供有效的，足够多的扩展点。
  • 提供怎样的实例化方式？ new XXX() ?? 还是类似DOM的操作方式appendInstance??甚至有类似jq这种链式。我更觉得应该使用appendInstance的方式，这样能更加有效的体现组件示例间的父/子关系。就像DOM操作一样，最终组件实例也是树形结构，如果我们直接new XXX() 这种方式，其实相当于声明了一个游离态的 DOM节点。实际我写代码的时候发现要管理这些组件实例也是比较麻烦的地方，试想一个页面如果有多个组件实例，需要声明多少个实例变量，或者申明多少个对象去存放这些实例。
  • 组件提供的API，一个组件对外暴露的API会包括初始构造方法，公共方法(method)，事件(event)，对于event，提供怎样的eventData也非常重要。

5.模块化机制

如今模块化的思想已经深入人心，模块化带来了很好的团队多人完成一项大的任务的可能性，符合高内聚低耦合的思想。到了如今这个时代，万物皆模块。
组件库通常是一个庞大的工程，单靠个人英雄主义很难做的完整全面。
详细的来讲，模块化机制涉及：

  • 模块本身的定义，注册，直接影响一个组件的代码模型，一个组件是一个模块。
  • 模块的依赖申明以及追朔机制：就像前面提到的，依赖于那些类，css文件，资源，数据。不仅仅需要声明，还应该可追朔，依赖的父类，也能找到父类本身所依赖的资源，这样为按需部署打包，在线调试提供居多方便。
  • 加载机制：因为在开发阶段要么放一个整个组件库代码，要么是通过一个加载器按需加载，到了线上希望只部署引用到了模块组件，这样可以减少实际部署的文件大小。加载机制会涉及到浏览器的javascript/css文件的加载，尤其是需要尽可能的并行下载而且按照依赖关系先后执行。包括应用模块，可以方便的通过这种加载机制延迟，按需，按时的加载到页面中。
  • 打包部署机制：由于依赖可追朔，这样实际项目中用到的那些组件可以分析出来，最终可以根据实际使用到的情况打包出适合大小的组件库，减小冗余包的存在。
  • 模块间的通信机制，由于模块减轻耦合甚至是独自孤立存在，组件之间的通信就非常重要，比如通常一个页面上面的菜单组件实例点击需要触发下面组件的更新。如果直接监听菜单事件去更新下面的组件，也许菜单是每个页面都有。但是下面的组件不是每个页面都有，这样的事件监听就显然耦合较重，互相依赖对方的存在。如果菜单点击这是告诉第三方我被点击了。下面的组件只去监听第三方的事件，这样的代码思路明显要好过很多。
需要再次强调的是万物皆模块，这意味着通用组件本身实现是一个模块，实际应用场景中的业务模块也是模块，都需要遵守模块的约定。

6.前端的基本开发思想

取决于个人经验：比如MVC的思想在组件实现过程中非常重要，Model通常是构造函数中那一堆配置信息，View通常是需要通过Model提供数据用户呈现，实际上View上的操作的相应都需要Model来记住状态。Controller用于操作二者。原理大家都知道，在开发中怎样分清三者界限。保证思路清晰。

前端中javascript/css/html的角色也类似与MVC。下面的一些代码方式就有违MVC的一些思想：
  • css Expression:不仅IE only，更重要是CSS中写javascript这个风格不对，难以维护。
  • javascript直接修改style.xxx='xx'。能写成css class的最好都写成css class。
  • html中直接写onxxx="foo()"，没有人能保证foo方法存在不被修改。

7.其他需要考虑的问题：
  • 测试用例：通用组件库是一个庞大的工程，也许牵一发动全身，不知道哪个API的变动会影响多少调用者，有充足的单侧用例，一定程度上能保证整个组件库的稳定性。
  • 粒度：粒度是一个很值得思考的问题，其实html的标签可以当做是一个小的组件，只是因为粒度很小，要完成一个复杂的应用，有很多的可复用组件都需要用到大片大片的重复html片段。另外一个极端，我们我们把整个页面都写成一个组件，显然没有复用性，跟没封装一样。所以选择一个合适的组件粒度，一个组件完成特定的功能，有利于搭建出有想象力的应用。
  • 一致性：需要有很好的代码规范和约定。才能保证API的一致性，用户也会理所当然的想到怎样用API，降低学习成本，一个最常见的例子就事件监听的参数，建议统一为(eventObject,eventData)。
  • 文档&Demo:这个不用多说，没有文档和demo的东西没有人去看代码怎么使用。
  • 性能：DOM操作是组件库的性能杀手，高效的DOM操作尤其重要，事件监听也是非常耗时的，建议能采用代理的都用父节点来代理。
  • 资源释放：组件的资源，引用是否能完全释放？尤其是开发SPA，组件的资源内存释放就非常重要了。

总结：
零零星星的提到了这么几点，也是过去工作中的体会，当然会有不足，望大家补充，回头可以check一下现在用到的一些框架/组件。欢迎讨论。

衡锋 2012-08-01 01:19 发表评论
]]>如何判断link标签css文件加载完毕http://www.blogjava.net/Hafeyang/archive/2011/10/08/how_to_assert_dynamic_css_file_loaded.html衡锋衡锋Sat, 08 Oct 2011 03:44:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/10/08/how_to_assert_dynamic_css_file_loaded.htmlhttp://www.blogjava.net/Hafeyang/comments/360183.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/10/08/how_to_assert_dynamic_css_file_loaded.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/360183.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/360183.html阅读全文

衡锋 2011-10-08 11:44 发表评论
]]>使用css3画"静音"iconhttp://www.blogjava.net/Hafeyang/archive/2011/09/14/pure_css_mute_icon.html衡锋衡锋Tue, 13 Sep 2011 16:19:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/09/14/pure_css_mute_icon.htmlhttp://www.blogjava.net/Hafeyang/comments/358571.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/09/14/pure_css_mute_icon.html#Feedback2http://www.blogjava.net/Hafeyang/comments/commentRss/358571.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/358571.html阅读全文

衡锋 2011-09-14 00:19 发表评论
]]>去掉页面滚动条的两种方法http://www.blogjava.net/Hafeyang/archive/2011/07/13/354232.html衡锋衡锋Wed, 13 Jul 2011 02:31:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/07/13/354232.htmlhttp://www.blogjava.net/Hafeyang/comments/354232.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/07/13/354232.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/354232.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/354232.html阅读全文

衡锋 2011-07-13 10:31 发表评论
]]>mark:webkit表格设置css table-layout:fixed的bughttp://www.blogjava.net/Hafeyang/archive/2011/06/30/table-layout-fixed-bug-in-webkit.html衡锋衡锋Thu, 30 Jun 2011 10:39:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/06/30/table-layout-fixed-bug-in-webkit.htmlhttp://www.blogjava.net/Hafeyang/comments/353455.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/06/30/table-layout-fixed-bug-in-webkit.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/353455.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/353455.html通常使用table-layout:fixed用在表格上来使表格能准确的设置宽度。常见的例子莫过于
    <style type="text/css">
        table{table-layout:fixed; border-collapse:collapse;border:1px solid #000; border-width:1px 0px 0px 1px;width:200px;}
         td{text-align:left;overflow:hidden;padding:0px;margin:0px;white-space:nowrap; border:1px solid #000; 0px 1px 1px 0px;}
    </style>
    <table  border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td style="width:100px;" nowrap="nowrap" >中文中文阿飞的房间萨芬；撒</td>
            <td style="width:100px;" nowrap="nowrap" >saaaa</td>
        </tr>
    </table>

如果去掉table-layout:fixed，表格的宽度会根据内容自动调整，比如上面的例子，如果去掉table-layout:fixed。第一个单元格的宽度会超过100px;
但是最近发现，使用table-layout:fixed在webkit内核浏览器上(safari/chrome)。宽度显示会出现问题。
看看下面的例子：
 <style type="text/css">

            

        #test

        {

            border-collapse:collapse;

        }

        

        #test td, #test th

        {

            border:solid 1px black;

            padding:3px;

        }



    </style>

<table style="width:736px;table-layout:fixed;margin:0;padding:0" id="test">

        <thead>

            <tr>

                <th width="25">ID</th>

                <th width="270">Name</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

                <th width="54">xx</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>111</td>

                <td></td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

                <td>&nbsp;</td>

            </tr>

        </tbody>

    </table>

浏览器上的截图为：


搜了一番资料后。在webkit官网上有这么一个Bug

If a table has both "table-layout: fixed" and "width: 0", then cells with
borders have wrong width.
This occurs in both safari 3.x mac&win and linux svn 31841 (debian sid).
The expected behavior is rendered by IE6, IE7, Firefox 2, Firefox 3 beta and
Opera 9.2.

Consider a table with 3 columns, all with width 200px.
If one of the cells have "border-left: 50px; width: 150px;",
then according to the rules of "table-layout: fixed", the cell should still
have width 200px.
But webkit renders the cell with only width 150px.


就是设置了table-layout:fixed之后,table的td宽度style.width不再是内容的宽度，而是内容+边框。而且是忽视padding。这让人很郁闷。
总之一旦设置了table-layout:fixed之后，webkit浏览器的单元格宽度并不会像你想象的那样准确的宽度。

参考资料：
webkit的bug描述：
https://bugs.webkit.org/show_bug.cgi?id=13339
https://bugs.webkit.org/show_bug.cgi?id=18565
stackoverflow的提问：
http://stackoverflow.com/questions/2943369/table-layoutfixed-rendering-differences-in-safari

http://lists.macosforge.org/pipermail/webkit-unassigned/2008-April/071125.html









衡锋 2011-06-30 18:39 发表评论
]]>使用div模拟出frameset效果http://www.blogjava.net/Hafeyang/archive/2011/06/17/div_as_frameset.html衡锋衡锋Fri, 17 Jun 2011 04:26:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/06/17/div_as_frameset.htmlhttp://www.blogjava.net/Hafeyang/comments/352501.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/06/17/div_as_frameset.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/352501.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/352501.html阅读全文

衡锋 2011-06-17 12:26 发表评论
]]>google chrome浏览器页签的css实现http://www.blogjava.net/Hafeyang/archive/2011/05/19/google_tab_css_implementation.html衡锋衡锋Thu, 19 May 2011 09:30:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/19/google_tab_css_implementation.htmlhttp://www.blogjava.net/Hafeyang/comments/350621.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/19/google_tab_css_implementation.html#Feedback2http://www.blogjava.net/Hafeyang/comments/commentRss/350621.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/350621.html阅读全文

衡锋 2011-05-19 17:30 发表评论
]]>基于highcharts的系统监控模拟图表http://www.blogjava.net/Hafeyang/archive/2011/05/17/350400.html衡锋衡锋Tue, 17 May 2011 07:28:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/17/350400.htmlhttp://www.blogjava.net/Hafeyang/comments/350400.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/17/350400.html#Feedback4http://www.blogjava.net/Hafeyang/comments/commentRss/350400.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/350400.html阅读全文

衡锋 2011-05-17 15:28 发表评论
]]>position:fixed在IE6下不起作用的修正原理以及实现http://www.blogjava.net/Hafeyang/archive/2011/05/16/350318.html衡锋衡锋Mon, 16 May 2011 07:37:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/16/350318.htmlhttp://www.blogjava.net/Hafeyang/comments/350318.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/16/350318.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/350318.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/350318.htmlposition:fixed能可以是元素不随滚动条滚动而滚动，固定在视口中，在网页设计中这种效果经常用到。通常不考虑IE6的代码是：

<body>
<div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue;">
	fixed??
</div>
<div style="height:1000px;">mock page content<div>
</body>

 

主流的做法有两种，一种使用expression表达式，在页面滚动时重新设计元素的top属性：

<body>
<div id="" class="" style="position:fixed; right:20px; top:20px;border:solid 1px blue; _position:absolute;_top:expression(parseInt(document.documentElement.scrollTop,10)+20+'px');">
	fixed??
</div>
<div style="height:1000px;">mock page content<div>
</body>

这种方法比较直接，但是每次滚动都重新计算元素的位置很消耗性能，而且页面比较复杂的时候，会出现“抖动”的现象。

另外一种方法当你弄明白是才发现奇妙无穷，是否可以改变页面的滚动条滚动的元素呢？滚动条默认滚动的是body元素。如果滚动的是一个div，而需要固定定位的元素并不在这个div中的话，自然就不会随着滚动条的滚动而滚动。

<body>
<style type="text/css">
		html,body,#content{height:100%;overflow:auto;padding:0px;margin:0px;}
		#fixed{position:fixed; right:20px; bottom:20px; border:solid 1px  blue;_position:absolute;}
	</style>
<div id="content" class="">
	<div id="" class="" style="background-color:#ccc;height:1000px;">
		mock page content
	</div>
</div>
<div id="fixed" class="">
	fixed content
</div>
</body>

设置一个div与body等高等宽，将页面内容都放到这个div中。这样页面滚动条其实是这个div的滚动条。然后在body下放上position:fixed的元素。这样就大功告成了。

这基本是一个白话版的解决办法了。基本是原理和简单实现，更多的细节可以参考：

http://www.qianduan.net/fix-ie6-dont-support-position-fixed-bug.html



衡锋 2011-05-16 15:37 发表评论
]]>textarea高度自动增加http://www.blogjava.net/Hafeyang/archive/2011/05/15/auto_height_of_textarea.html衡锋衡锋Sun, 15 May 2011 11:40:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/15/auto_height_of_textarea.htmlhttp://www.blogjava.net/Hafeyang/comments/350286.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/15/auto_height_of_textarea.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/350286.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/350286.html 最初看到这个命题，觉得不是不是直接监听事件然后设计高度么？于是我想当然的写了这么一段代码：

<script type="text/javascript">
function autoheight(){
this.height= this.scrollHeight+this.height+"px";
}
</script>
<textarea id="" rows="" cols="" onpropertychange="autoheight();" oninput="autoheight()" style="overflow:hidden;"></textarea>

这个代码我没有运行，因为一边写就发现不对劲，在propertychange函数中改变property会再次触发propertychange事件，结果就可想而知了。stack overflow。

所以需要换一种思路，新建一个textarea，将同样大的文本放到属性一样的textarea中计算其高度，然后把高度设置到目标textarea中。

<script type="text/javascript">

    //基本函数*2
    var addHandler = window.addEventListener?
    function(elem,event,handler){elem.addEventListener(event,handler);}:
    function(elem,event,handler){elem.attachEvent("on"+event,handler);};

    var $ = function(id){return document.getElementById(id);}

        
    function autoTextArea(elemid){
        //新建一个textarea用户计算高度
        if(!$("_textareacopy")){
            var t = document.createElement("textarea");
            t.id="_textareacopy";
            t.style.position="absolute";
            t.style.left="-9999px";
            document.body.appendChild(t);
        }
        function change(){
            $("_textareacopy").value= $(elemid).value;
            $(elemid).style.height= $("_textareacopy").scrollHeight+$("_textareacopy").style.height+"px";
        }
        addHandler($("target"),"propertychange",change);//for IE
        addHandler($("target"),"input",change);// for !IE
        $(elemid).style.overflow="hidden";//一处隐藏，必须的。
        $(elemid).style.resize="none";//去掉textarea能拖拽放大/缩小高度/宽度功能
    }

    addHandler(window,"load",function(){
        autoTextArea("target");
    });
</script>
<textarea id="target" rows="" cols=""></textarea>

搞清楚原理其实就简单多了。要捕捉textarea的change事件在IE下可以使用propertychange,在!IE下可以使用input。

一些textarea资料做参考：

  1. textarea 的一些小技巧 http://css-tricks.com/textarea-tricks/
  2. 本文的直接资料来源：http://www.planeart.cn/?p=1489

 

 



衡锋 2011-05-15 19:40 发表评论
]]>jQuery中的stopImmediatePropagation与stopPropagation的区别http://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.html衡锋衡锋Fri, 06 May 2011 10:04:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.htmlhttp://www.blogjava.net/Hafeyang/comments/349697.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/05/06/stoppropagataion_vs_stopimmediatepropagation.html#Feedback2http://www.blogjava.net/Hafeyang/comments/commentRss/349697.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/349697.html 
<script type="text/javascript">
        $(function(){
            $("#t").keyup(function(e){
                $("#s").html("keyup1");
                //stopImmediatePropagation可以阻止在这之后绑定的事件
                //比较注释和不注释这一行的区别
                e.stopImmediatePropagation();
            });
            $("#t").keyup(function(e){
                $("#s").html("keyup2");
            });
        });
    </script>
<input type="text" id="t" name="" value="" />
<span class="" id="s"></span>
 
如果在第一个事件中需要阻止第二个事件的执行可以在第一个事件中使用event.stopImmediatePropagation方法。jQuery的event的对象是增强的event对象，
stopImmediatePropagation就是jQuery独有的一种阻止jQuery绑定事件机制。可以通过isImmediatePropagationStopped()来判断是否阻止了jQuery立即冒泡。
 
stopImmediatePropagation的实现可以参见我之前的一篇文章，从jQuery的缓存到事件监听 在这篇文章中提到jQuery将事件都缓存在一个数组中按照先后顺序执行。如果stopImmediatePropagation就停止执行数组中的监听函数。
 
stopPropagation是阻止默认事件监听函数。不是jQuery独有，阻止默认事件的冒泡，比如监听了DOM节点和该节点的父节点的事件，默认是事件执行将从里到外，这就是所谓的冒泡。在IE9-浏览器中可以使用event.cancelBubble=false来做到，标准浏览器使用event.stopPropagation方法。jQuery也把stopPropagation扩展方式到IE上这样有了一致的方法。
 
综上所述，其实stopImmediatePropagation与stopPropagation就不是一个东西，所以也不存在什么区别了。
参考资料
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation
http://api.jquery.com/event.stopImmediatePropagation/
http://stackoverflow.com/questions/5299740/jquery-stoppropagation-vs-stopimmediatepropagation
 


衡锋 2011-05-06 18:04 发表评论
]]>jQuery中的delegate与live实现方式简析http://www.blogjava.net/Hafeyang/archive/2011/04/19/the_implementation_of_jquery_delegate_and_live.html衡锋衡锋Tue, 19 Apr 2011 04:07:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/04/19/the_implementation_of_jquery_delegate_and_live.htmlhttp://www.blogjava.net/Hafeyang/comments/348563.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/04/19/the_implementation_of_jquery_delegate_and_live.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/348563.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/348563.html阅读全文

衡锋 2011-04-19 12:07 发表评论
]]>面包屑效果分析http://www.blogjava.net/Hafeyang/archive/2011/03/10/cool_breadcrumbs.html衡锋衡锋Thu, 10 Mar 2011 03:34:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/03/10/cool_breadcrumbs.htmlhttp://www.blogjava.net/Hafeyang/comments/346068.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/03/10/cool_breadcrumbs.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/346068.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/346068.html阅读全文

衡锋 2011-03-10 11:34 发表评论
]]>有史以来本人获得的至高评价。http://www.blogjava.net/Hafeyang/archive/2011/01/25/proud_of_myself.html衡锋衡锋Tue, 25 Jan 2011 08:36:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/25/proud_of_myself.htmlhttp://www.blogjava.net/Hafeyang/comments/343505.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/25/proud_of_myself.html#Feedback3http://www.blogjava.net/Hafeyang/comments/commentRss/343505.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/343505.html

衡锋 2011-01-25 16:36 发表评论
]]>datagrid性能（一）：性能问题何来？http://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.html衡锋衡锋Tue, 18 Jan 2011 02:25:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.htmlhttp://www.blogjava.net/Hafeyang/comments/343131.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/18/the_performance_challenge_of_datagrid_you_may_face.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/343131.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/343131.html阅读全文

衡锋 2011-01-18 10:25 发表评论
]]>javascript解析平铺树形数据http://www.blogjava.net/Hafeyang/archive/2011/01/13/how_to_parse_flat_tree_data_to_hierarchy.html衡锋衡锋Thu, 13 Jan 2011 08:40:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/13/how_to_parse_flat_tree_data_to_hierarchy.htmlhttp://www.blogjava.net/Hafeyang/comments/342937.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/13/how_to_parse_flat_tree_data_to_hierarchy.html#Feedback1http://www.blogjava.net/Hafeyang/comments/commentRss/342937.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/342937.html阅读全文

衡锋 2011-01-13 16:40 发表评论
]]>使用table自带方法和DOM方法操作HTML table的区别 http://www.blogjava.net/Hafeyang/archive/2011/01/04/difference_between_2_ways_of_table_operating.html衡锋衡锋Tue, 04 Jan 2011 08:37:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/04/difference_between_2_ways_of_table_operating.htmlhttp://www.blogjava.net/Hafeyang/comments/342289.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/04/difference_between_2_ways_of_table_operating.html#Feedback0http://www.blogjava.net/Hafeyang/comments/commentRss/342289.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/342289.html阅读全文

衡锋 2011-01-04 16:37 发表评论
]]>从jQuery的缓存到事件监听http://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.html衡锋衡锋Tue, 04 Jan 2011 07:20:00 GMThttp://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.htmlhttp://www.blogjava.net/Hafeyang/comments/342286.htmlhttp://www.blogjava.net/Hafeyang/archive/2011/01/04/jquery_cache_and_events_bind.html#Feedback5http://www.blogjava.net/Hafeyang/comments/commentRss/342286.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/342286.html阅读全文

衡锋 2011-01-04 15:20 发表评论
]]>怎样高效的批量删除javascript 数组中的元素？http://www.blogjava.net/Hafeyang/archive/2010/12/29/how_to_batch_remove_items_in_javascript_array.html衡锋衡锋Wed, 29 Dec 2010 07:58:00 GMThttp://www.blogjava.net/Hafeyang/archive/2010/12/29/how_to_batch_remove_items_in_javascript_array.htmlhttp://www.blogjava.net/Hafeyang/comments/341917.htmlhttp://www.blogjava.net/Hafeyang/archive/2010/12/29/how_to_batch_remove_items_in_javascript_array.html#Feedback4http://www.blogjava.net/Hafeyang/comments/commentRss/341917.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/341917.html阅读全文

衡锋 2010-12-29 15:58 发表评论
]]>office web 2010 初次使用http://www.blogjava.net/Hafeyang/archive/2010/12/23/first_look_of_microsoft_web_app_2010.html衡锋衡锋Thu, 23 Dec 2010 04:20:00 GMThttp://www.blogjava.net/Hafeyang/archive/2010/12/23/first_look_of_microsoft_web_app_2010.htmlhttp://www.blogjava.net/Hafeyang/comments/341373.htmlhttp://www.blogjava.net/Hafeyang/archive/2010/12/23/first_look_of_microsoft_web_app_2010.html#Feedback2http://www.blogjava.net/Hafeyang/comments/commentRss/341373.htmlhttp://www.blogjava.net/Hafeyang/services/trackbacks/341373.html阅读全文

衡锋 2010-12-23 12:20 发表评论
]]>