加载 JavaScript 的各种姿势

标签:JavaScript

前天我给自己的博客做了些优化,让大部分的页面对所有人都输出相同的内容,然后再针对不同的用户,用 JavaScript 动态地修改一些细微的部分。
这样的好处是 HTTP 缓存可以设为 public 了,甚至可以用 nginx 的 proxy cache 或者完全静态化。
不过按照最近的习惯,这篇文章也不是介绍缓存的经验,而是另一个问题:我在给不同用户增加不同功能时,需要动态地加载 JavaScript 文件,那么正确的加载方式是怎样的呢?

用JavaScript读取和保存文件

标签:JavaScript

话说今天只是粗略浏览了一下Proxy SwitchySharp的源码,就收获了不少东西,其中就包括本文要介绍的读取和保存文件。
因为Google还不提供同步插件数据的功能,所以导入和导出插件配置就必须和文件打交道了。而出于安全原因,只有IE才提供访问文件的API;但随着HTML 5的到来,其他浏览器也纷纷支持了。

获取父窗口中包含自身的iframe

标签:JavaScript

今天在开发时遇到个问题:页面A包含几个标签,在切换标签时,高度会变化。页面B用iframe引用了页面A,并且在A载入完成时,把iframe的高度设为了页面A的高度(调用一个自定义的adjustHeight()函数)。可是在切换标签时,iframe的高度并不会变化,就出现滚动条了。
这个问题的难点在于页面B是框架自动生成的,我没法更改,只能在页面A里修复这个问题。

jQuery 1.6版发布,区分DOM的attributes和properties

标签:jQuery, JavaScript

今天jQuery 1.6版发布了。

新增的API和性能改进我就不提了,只提一个重要的改动:区分DOM的attributes和properties。
这2个词的中文翻译都是属性,有时候后者会被译为特性,不过我还是直接用英文吧。前者表示从文档中获取的状态信息,后者则表示文档的动态状态信息。更通俗地来说,HTML文档里是怎么样的状态,attributes就是怎样的;而JavaScript可以通过DOM API来更改DOM的状态,表单控件(如文本框)的状态也可以被用户使用键盘、鼠标等修改,这些被动态更改后的状态就由properties表示。

JavaScript,你懂的

标签:JavaScript

经常有人问我,JavaScript应该怎么学。
这个问题其实很好回答:
  1. 先学基本语法,如果曾学过C等语言,应该1小时内就能掌握了。
  2. 再去使用内置的函数、方法和DOM API,熟悉它能干什么;而在学习DOM API的过程中,你还不得不与HTML和CSS打交道。
  3. 然后弄懂匿名函数和闭包,学会至少一个常用的JavaScript库(例如jQuery)。
  4. 最后领悟它的对象实现,尝试去扩展已有库,或编写自己的库。
可学习过程却并不像回答般轻松,因为国内的网站到处充斥着转载。那些人连自己都没弄懂的玩意就转载出来,甚至包含一些明显的错误和不堪入目的代码,却还有一大批小白惊呼“好强大,看不懂”。
在这种可悲的环境中,想要学好JavaScript还真棘手,因为你得有足够的经验来判断这篇文章是否值得一看,内容是否有错,哪些地方可以改进。
为了避免这种弯路,我还是自己写篇来整理整理吧。前2个阶段的就不提了,那是浪费你我的时间。

HTML5 Canvas简易时钟

标签:HTML, JavaScript

今天下午闲得无聊,就学了下Canvas,然后捣鼓出一个时钟,顺便就放这了。
由于各种浏览器对文本的处理有些差异,因此我就只管Chrome了,用其他浏览器的自己看着办吧…

使iPhone Safari的label元素生效

标签:JavaScript, iPhone

今天在测试本站的手机页面时发现一个问题:我将一个label元素关联到一个checkbox上后,在电脑的浏览器上点击这个label时,checkbox会随之被勾选或取消;但用iPhone上的Safari浏览器测试时,却毫无反应。
本来label元素的一个很重要的作用就是方便用户点击表单控件,而iPhone上的checkbox非常小,如果不能点label的话是非常麻烦的。

« 看看还有什么好玩意