标签“JavaScript”下的文章

推荐两本书

这是最近正在看的书。两本书都很权威。

1、《锋利的 jQuery》

《锋利的 jQuery》封面

此书的作者是 cssrain.cn的博主,博客里的 jQuery 学习资料和实例可谓十分丰富,其实本书就是这些资料的整理和延伸。

另一个作者的网站http://shawphy.com/

官方站点:http://www.cssrain.cn/jquery

2、《Dojo 权威指南》

《Dojo 权威指南》封面

作者博客:http://www.cn-cuckoo.com。

20个最有创意最实用的jQuery应用

昨天,1月13日,是Javascript 开发框架 jQuery 的三周岁生日。

我们看看三年来,这个被成为最优雅的Javascript框架带来那些创意应用。

以下翻译自国外网站,示例网站如无法点击访问,请自觉翻墙~

原文链接:http://nettuts.com/articles/web-roundups/the-20-most-practical-and-creative-uses-of-jquery/

开发跨浏览器JavaScript的几点注意事项

本文是《Ajax基础教程》的笔记整理。

  1. 向表中添加行
    <table id="myTable" border="0">
    <tbody id="myTableBody"></tbody></table>
    

    对于主流浏览器,可以使用appendChild方法,将创建的单元格添加到表行中,再把表行添加到表中。
    但是在IE中,这样做不会将表行添加到表中,并且不会抛出任何错误。解决方法很简单,将行增加到表体(tbody)而不是表格。
    后面一种方法并不只针对IE,在所以主流浏览器上都能用。

  2. 通过JavaScript设置元素的样式
    主流浏览器中:

    var spanElement = document.getElementById("mySpan");
    spanElement.setAttribute("style","color:red;");
    

    针对IE(此方法对除Opera外的主流浏览器都适用):

    spanElement.style.cssText = "color:red;";
    

    所以,为了让代码在所有当前主流浏览器上都可移植,需要同时使用这两种方法:

    var spanElement = document.getElementById("mySpan");
    spanElement.setAttribute("style","color:red;");
    spanElement.style.cssText = "color:red;";
    
  3. Continue reading ‘开发跨浏览器JavaScript的几点注意事项’ »

Web 前端优化最佳实践

本文作者Fenng,转载自其博客版权声明

根据 Yahoo 开发中心的 “Best Practices for Speeding Up Your Web Site” 翻译整理。

 

面向内容的优化规则目前有 10 条。

1. 尽量减少 HTTP 请求 (Make Fewer HTTP Requests)

作为第一条,可能也是最重要的一条。根据 Yahoo! 研究团队的数据分析,有很大一部分用户访问会因为这一条而取得最大受益。有几种常见的方法能切实减少 HTTP 请求:

2. 减少 DNS 查找 (Reduce DNS Lookups)

必须明确的一点,DNS 查找的开销是很大的。另外,我倒是觉得这是 Yahoo! 所有站点的通病,Yahoo!主站点可能还不够明显,一些分站点,存在明显的类似问题。对于国内站点来说,如果过多的使用了站外的 Widget ,也很容易引起过多的 DNS 查找问题。

3. 避免重定向 (Avoid Redirects)

不是绝对的避免,尽量减少。另外,应该注意一些不必要的重定向。比如对 Web 站点子目录的后面添加个 / (Slash) ,就能有效避免一次重定向。http://www.dbanotes.net/arch 与 http://www.dbanotes.net/arch/ 二者之间是有差异的。如果是 Apache 服务器,通过配置 Alias 或mod_rewrite 或是 DirectorySlash 能够消除这个问题。

4. 使得 Ajax 可缓存 (Make Ajax Cacheable)

响应时间对 Ajax 来说至关重要,否则用户体验绝对好不到哪里去。提高响应时间的有效手段就是 Cache 。其它的一些优化规则对这一条也是有效的。

5. 延迟载入组件 (Post-load Components)

6. 预载入组件 (Preload Components)

上面两条严格说来,都是属于异步这个思想灵活运用的事儿。

7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)

8. 切分组件到多个域 (Split Components Across Domains)

主要的目的是提高页面组件并行下载能力。但不要跨太多域名,否则就和第二条有些冲突了。

9. 最小化 iframe 的数量 (Minimize the Number of iframes)

熟悉 SEO 的朋友知道 iframe 是 SEO 的大忌。针对前端优化来说 iframe 有其好处,也有其弊端,一分为二看问题吧。

10. 杜绝 http 404 错误 (No 404s)

对页面链接的充分测试加上对 Web 服务器 error 日志的不断跟踪能有效减少 404 错误,亦能提升用户体验。值得一提的是,CSS 与 Java Script 引起的 404 错误因为定位稍稍”难”一点而往往容易被忽略。

Continue reading ‘Web 前端优化最佳实践’ »

无侵入脚本编程

本文为《ppk谈JavaScript》读书笔记

“无侵入脚本编程”代表了向基于 CSS 的、兼容标准的 web 站点的新理论中嵌入 JavaScript 的首次认真的尝试。

一个无侵入的脚本应该包括如下的所有特征:

  • 它应该是可用的。即给网站带来明确的可用性好处。
  • 它应该是可访问的。即如果 JavaScript 失效了,网页应该依然是可阅读和可理解的,即使不可避免的损失了一些可用性。
  • 它应该容易实现。典型的情况:只需要在页面中引入脚本本身和一个 JavaScript 钩子(hock),然后脚本即可以运行了。
  • 它应该是可分离的。它只存在于自己的.js文件中,而不是散落在 HTML 的各个角落。

 

强烈推荐这本《ppk谈JavaScript》,真正的大师级著作!

ppk谈JavaScript

Web2.0的核心技术——Ajax篇

1965年,Ted Nelson 在前人理论的基础上,首次提出了超链接(hyperlink)、超文本 (hypertext)、超媒体(hypermedia)系列概念。1982年,Tim Berners-Lee发明了HTML。他们的这些发明和创见,并没有在当时引起多大的反响,也没有立即投入实际应用。可却为二十世纪九十年代互联网 的大发展,奠定了无比重要的技术基础。
  转过头来看,在强调“以用户为中心”的核心理念指导下,Ajax 技术和 RSS 之于 Web 2.0,正像HTML和超链接之于 Web 1.0一样,作用无可替代。

Continue reading ‘Web2.0的核心技术——Ajax篇’ »