Submitted by gouki on 2009, August 20, 6:39 PM
Gracecode网上的文章，好象研究了比较深。
本文的亮点写在了内容中，但我觉得argements.callee这个用法还是很有特色的。以前都是用this之类的来解决。。。
还有一个亮点就是document.Fragment这个东西。。。
不废话看原文：
异步 innerHTML
innerHTML 插入节点的性能的问题，通常是我们最关注的。在回答这问题时，James Padolsey 给出了他的解决方案，看到上述代码不仅赞叹了下：
JavaScript代码
- function asyncInnerHTML(HTML, callback) {
- var temp = document.createElement('div'),
- frag = document.createDocumentFragment();
- temp.innerHTML = HTML;
- (function(){
- if(temp.firstChild) {
- frag.appendChild(temp.firstChild);
- setTimeout(arguments.callee, 0);
- } else {
- callback(frag);
- }
- })();
- }
- 充分利用闭包解决 IE6 的内存溢出问题
- 使用延时 0 将操作从队列中拉出，防止浏览器假死
- Document Fragment 给予我们个相当好的沙盘，只是我们经常忘记了它
- 回调的节点可以使用 DOM 标准的手法（appendChild）插入
了解了参数就很容易调用，例如
JavaScript代码
- var htmlStr = '<div><p>...</p><p>...</p><div><div>...</div>';
- asyncInnerHTML(htmlStr, function(fragment){
- document.body.appendChild(fragment);
- });
再次不禁赞叹下！
组织 innerHTML 字符串
说到 innerHTML ，通常在这操作之前会有大部分的字符串操作用于连接节点。考虑下面的三种做法，有何不同
方式一
JavaScript代码
- var arr = ['item 1', 'item 2', 'item 3', ...];
- for (var i = 0, l = arr.length, list = ''; i < l; i++) {
- list += '<li>' + arr[i] + '</li>';
- }
- list = '<ul>' + list + '</ul>';
方式二
JavaScript代码
- var arr = ['item 1', 'item 2', 'item 3', ...];
- for (var i = 0, l = arr.length, list = []; i < l; i++) {
- list[list.length] = '<li>' + arr[i] + '</li>';
- }
- list = '<ul>' + list.join('') + '</ul>';
方式三
JavaScript代码
- var arr = ['item 1', 'item 2', 'item 3', ...];
- var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
详细的对比测试在这里（没错，还是 James Padolsey 那小子的 Blog）。同时，PPK 也整理了份有关 innerHTML 的速度测试报告。
IE 的陷阱
对于 IE，innerHTML 有个不大不小的陷阱（via），就是在 tbody 中插入 innerHTML 时，会报莫名的“未知的运行错误”。
测试地址在这里（经过测试，在 IE8 中仍然如此）。有兴趣的同学可以参看更详细的信息。
Tags: arguments, callee, innerhtml
Javascript | 评论:1
| 阅读:17899
Submitted by gouki on 2009, August 20, 6:20 PM
Misc | 评论:1
| 阅读:19990
Submitted by gouki on 2009, August 20, 6:09 PM
其实这个还是很好认的啦。呵呵
this，如果是取得元素的话，则对应当前元素的对象
$(this)则是当前元素被jQuery处理的对象。
看看作者是怎么写的，来源：http://www.cnblogs.com/RuiLei/archive/2009/08/20/1550804.html。
起初以为this和$(this)就是一模子刻出来。但是我在阅读时，和coding时发现,总不是一回事。
What is "this"?
In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
这里的this其实是一个Html 元素(textbox)，textbox有text属性，所以这样写是完全没有什么问题的。
但是如果将this换成$(this)就不是那回事了，Error--报了。
Error Code：
$("#textbox").hover(
function() {
$(this).title ＝ "Test";
},
function() {
$(this).title = "OK";
}
);
这里的$(this)是一个JQuery对象，而jQuery对象沒有title 属性，因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性，所以正确的写法应该是这样：
正确的代码：
$("#textbox").hover(
function() {
$(this).attr(’title’, ‘Test’);
},
function() {
$(this).attr(’title’, ‘OK’);
}
);
使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作，因此统一使用$(this)而不再用this应该是比较不错的选择。
参考：http://remysharp.com/2007/04/12/jquerys-this-demystified/
--EOF--
一般来说，在代码中，尽量使用$(this)，一来代码更规范一点，二来，jQuery的函数你也就可以直接调用了。如$(this).children()之类的。。
Tags: jquery
Javascript | 评论:3
| 阅读:86670
Submitted by gouki on 2009, August 19, 10:18 PM
8个手册，8张图片，懒得一张张的COPY，于是直接复制过来。主要的还是那8个链接，我就在想，我是否仅保留链接而不留图片呢？又怕帕兰映像说我不负责。
原文地址为：http://paranimage.com/8-html-cheat-sheets/，图片也挺标准，大小也差不多。。。
HTML做为一门基础的前端开发技术，简单易学。但元素属性过多，也记不过那么多来，比如我就一直记不得常用HTML实体字符的代码。本文收集整理一些HTML手册，包含HTML实体字符手册，HTML标签手册，XHTML手册和HTML5手册等等。
面向PHPu k3i.@F(Bk
W3CShool提供。按字母顺序列出的HTML 4.01/XHTML 1.0在线标签手册，以及显示每个标签在哪种DTD中是被允许的，点击每个标签都有详细的注解。
c Yo4I(uc W-pT!l1
#x ee t!N X3DV-Y8M1
U+P h8Q*h5{2?r1
面向PHPN1`2r#H[~3BlE
'N:Ao+N ^wI_~1
g#t%l)Kr7k1
"M1?8lS Jp7uA1
/?%Zh.O Gb1
面向PHPbJ.|:X(q7A
d9i e'SQ"o$U-}&C1liquidicity制作的手册都比较漂亮，感觉兴趣的还可以看看我们之前介绍的他们制作的WordPress模板代码帮助手册(简易版和高级版)。面向PHP7Xo+_rQ%[JN[_f
d4q J5{3i(^*n%n+a1
面向PHP&d(Y"GQ KU^ D
面向PHPdl8P/io'`'K5U-r3r
一套简易HTML手册，包含了常用标签，字符实体，空标签，属性和事情等。含PDF和PNG版本。
z.I8o&X_){[1
Z yh ~�v L7a1
T ]'s];g`p6`7Q B i N1Smashing Magazine发布的一份HTML 5标签速查手册。面向PHP9vOon9nG
最终我还是把地址整理一遍，方便大家查看或下载
-
-
-
-
-
-
-
-
Javascript | 评论:0
| 阅读:18061
Submitted by gouki on 2009, August 19, 10:13 PM
帕兰映像又改版了，把我喜欢的下部浮动层去掉了。。
为了这个下部浮动层。我还自己画了几个原型图。只是没有实现成HTML而己。。。
不多说，看文章，地址：http://paranimage.com/list-of-html-5/
HTML 5最近被讨论的越来越多，越来越烈。尽管HTML5离我们其实还挺远的， 我们绝对犯不着浪费时间现在就去学习HTML5的特性和应用 — 那是Google这等走在技术前沿有实力有干劲的家伙才干的事儿。但任何一个设计开发爱好者都不能忽视它，至少应该有个大概的了解。
HTML 5可谓集万千宠爱于一身，各种高帽戴的不亦乐乎。当然，只要是值得讨论的事情，总有不同的声音。也有一些人并不看好他，或者至少对HTML5没那么兴奋。
本文就收集整理一些有关HTML5的相关知识、热门评论和新闻动态，帮助你进一步的了解HTML。
什么是HTML 5？
HTML 5 的历史背景
HTML 5
HTML 5草案的前身名为Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的HTML工作团队。在2008年1月22日，第一份正式草案发 布。[1]WHATWG表示该规范是目前正在进行的工作，仍须多年的努力。wikipedia
WHATWG，这个HTML5背后的组织，用下面的话描述自己：“2004年由Apple，Mozilla基金会，Opera软件中的人员创建，他 们的矛头直指W3C直属的XHTML，认为HTML缺少乐趣，对现实世界的需求置之不理。这些组织中的有识之士决心改变这一切，所以超文本应用技术工作小 组 (WHATWG的英文全称)应运而生”。HTML5预计在2012年正式登上W3C候选标准的舞台。但是这并不意味着你到那时才能使用。一些技术已经成 熟，一些部分已经足够稳定，一些功能实现已经接近尾声，所以我们现在就可以体验它们的新特性了。 当前，市场正一步一步加速WHATWG项目的进程。via
注: W3C 日前宣布将从2009年底起终止同 XHTML 2 工作组的合约。
HTML 5的新标记
关于HTML5中对元素和标记的更新，我把它们划分为三部份:
- HTML5结构元素: 新增了更具语义化的标签，比如<header>表示页面的头部，<footer>表示底部，<nav>表示一个链接导航集合等。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。
- HTML5 交互元素: 我们上面说过，HTML5的前身名是Web Applications 1.0。 所以HTML5当然不只是随便加几个标签，让代码结构更具语义化这么无聊。另外一些新增的元素，诸如<details>, <datagrid>等，可以实现控制数据和内容展示等交互能力。input元素的新属性：日期和时间，email, url，可以轻松制造一个Webforms 2.0。
- 删除的HTML4元素: HTML5删除了HTML4中纯粹用来显示效果的一些标记，比如<font>和<center>，因为它们已经被CSS取代。
看着上面的这些HTML5特性，就不禁让人想到XHTML，XHTML到底做了些什么呢？为什么近几年来，我们老爱跟HTML4划清界线，钟爱XHTML？这有篇文章说的很好：XHTML 鼓励良好的代码习惯，所有标签都需要完整，严谨，XHTML 可以产生比 HTML 4 更干净的代码。也就是说，XHTML相对HTML4，就起到了一个更严格的约束作用，但事实上，用HTML4也可以写出很干净的代码，用XHTML也有人把代码写得一团糟。
当然，我等鼠辈都是墙头草，还特喜欢落井下石。HTML5没热腾起来的时候，也没谁寒碜XHTML，更多的却是讨论要用Transitional还是Strict。废话少，如果你想具体了解HTML新增的元素和属性标记，可以查看下面这些文章:
HTML的新API
除了原先的DOM接口，HTML5增加了更多样化的API。包含了设计师们需要的很多东西，本地的音频，视频支持，多栏布局工具，离线数据库，本地的矢量图支持等等。
HTML 5的试验
HTML 5的标准还八字才有一撇呢，后面一撇还得慢慢描。但已经有诸多的先锋部队开始拥抱它了。很多主流浏览器的最新版本都已经开始支持HTML5中的部份特性，除了IE。
如果你确实很迫不及待的也想做下技术先驱，下面的一些实例和资源可能会对你有用：
HTML 5的争论
关于HTML 5的争论多种多样，其中最大的争论点在于业界对HTML 5取代Flash、Silverlight这些RIA主力军。下面听听一些声音吧。
Opera称HTML5将使得Flash变得可有可无
Opera首席执行官Jon von Tetzchner近日在接受采访时表示，下一代HTML语言将使得Adobe Flash技术显得很多余，HTML 5的开放Web标准提供了除Flash之外的富媒体网络内容发布方法。
von Tetzchner表示，HTML 5处理富媒体的能力意味着Flash可有可无，“你可以用它实现大多数(Flash)现在做的事，从某种方面说，你可能不再需要Flash。”
von Tetzchner补充说，这并不意味着Flash会消亡，“我喜欢Adobe，他们是一家非常棒的公司，我想Flash还会存在很长很长一段时间，但是 Web标准演变地越来越丰富是‘自然法则’，你可以选择使用Web标准也可以选择使用Flash(发布富媒体内容)。”
编程大师Bruce Eckel不看好HTML5
《Thinking In Java》和《Think in C++》的作者Bruce Eckel最近在博客中评价了在开发团队选择现有技术时所需要掌握和了解的知识资源体系。 他指出web开发者花费了过多的精力来使CSS/HTML/JavaScript程序兼容各种浏览器，非IT行业的公司不会有太多人手维护主页，这往往导 致他们无法考虑兼容问题，最终结果是主页只支持IE。即使等到HTML5发布，这种状况也未必能有所改变。对于一般公司而言，如果想兼容各种平台，最好的 解决方案是使用flash/flex。
更多的HTML新闻和动态
Javascript | 评论:0
| 阅读:15233
