岁月如歌

用开放的心态,打造专业的人生。

SeaJS – 对 CSS 模块的支持

with 9 comments

给 seajs 增加了 css 模块支持:

define(function(require, exports, module) {

  require('./a.css'); // 表明该模块依赖 a.css 文件

  // 运行到此处时再动态加载 b.css
  module.load('./b.css', function() {
    // b.css 模块已经下载解析好
    // do some cool thing.
  });
});

测试页面:
http://seajs.com/src/test/issues/load-css/test.html

顺便对 js 和 css 文件动态加载时的事件做了个详尽测试:
http://lifesinger.org/lab/2011/load-js-css/

小结

  • 对于 script 的动态加载来说,当文件 404 时,Opera 要等到 timeout 时才知晓,是个悲剧。司徒正美给出过 负向回调 思路,需要利用 iframe 来解决,除了 iframe 本身的消耗,还有一个弊端是存在重复请求(即便有缓存了,304 等情况下也是需要再次发起请求的),感觉太 hacky, 不妥。不过好在 Opera 在国内很小众,404 的情况也应该在开发阶段就排查掉。seajs 目前的处理方式应该足够用了。
  • css 的动态加载,一旦考虑回调,比 script 更麻烦。这里不得不感慨 IE 的“先进”,onload 就搞定了。webkit 也不错,可以通过轮询 stylesheet.ownerNode 来解决。Opera 下,404 时和 script 的动态加载一样,需要等到 timeout 时才知晓。悲剧的是 Firefox, 找遍所有资料,未找到合适的方式。虽然可以利用 image.onerror 来处理,但和 iframe 一样,有可能存在重复请求,不妥。对于 firefox, seajs 会立刻执行回调,无奈,但也算是一种“优雅”降级。

2011-05-03 更新:css 动态加载时的 onload 已比较完美,通过 linkNode 的 sheet 和 cssRules 可以判断。目前只有 Opera 在遭遇 404 时,需要等到 timeout 时才知晓,其他浏览器下都可以立刻在下载完成时调用 callback.

Advertisements

Written by lifesinger

May 2, 2011 at 22:44

Posted in Articles

9 Responses

Subscribe to comments with RSS.

  1. 你好,岁月如歌,关注你博客好久了,最近我有个问题想请教下你,谢谢。
    请问如何取得光标相对于页面的绝对位置(单位为px)?
    比如在textarea中有3行文字,光标在第二行中间,我想取得它的页面绝对位置,如果通过计算字符的宽高的话不同字符会有不同的宽,所以也麻烦,有没有好的办法?

    fisher

    May 5, 2011 at 12:56

    • @fisher: 普通的位置计算,用 getBoundingClientRect 可获取,对于 textarea 里面光标的位置,还得考虑 Range 方式去操作。具体请 google 或查看 jQuery / CKEditor 等源码。

      lifesinger

      May 5, 2011 at 15:29

  2. 请教一个问题.wordpress.com的账户在登录的时候https不好使.总是无法正常登录.你是怎么解决的?

    matthew

    May 8, 2011 at 16:11

    • @maththew: 常年翻墙

      lifesinger

      May 8, 2011 at 22:18

  3. build工具貌似没有区分css文件 如果有require css ,build的时候报错.

    skyblue

    May 10, 2011 at 22:20

  4. the load event for the element is defined in HTML5:
    http://www.w3.org/TR/html5/semantics.html#the-link-element

    adamlu

    May 18, 2011 at 11:25

  5. […] – 对 CSS 模块的支持 https://lifesinger.wordpress.com/2011/05/02/seajs-css-support/ (可能需要翻墙) 此条目发表在 CSS 迷宫, JavaScript 矩阵, […]

  6. lifesinger.org 挂掉了?

    dotnil

    March 2, 2012 at 13:17


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s