yepnope.js – 异步加载资源文件

yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本,可以在页面上仅加载用户需要的js/css。

典型代码示例


yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。

yepnope和现有的xxx script loader有什么区别?

个人认为主要 是这两点:

  • 可以同时处理javascript以及css
  • 能够按条件加载

yepnope的全部参数

yepnope([{
  test : /* boolean(ish) - 你要检查真伪的表达式             */,
  yep  : /* array (of strings) | string - test为true时加载这项  */,
  nope : /* array (of strings) | string - test为false时加载这项 */,
  both : /* array (of strings) | string - 什么情况下都加载              */,
  load : /* array (of strings) | string - 什么情况下都加载              */,
  callback : /* function ( testResult, key ) | object { key : fn }   当某个url加载成功时执行相应的方法         */,
  complete : /* function   都加载完成了执行这个方法                                                   */
}, ... ]);

这里的参数都可以是array或者object,在加载多个资源文件的时候有用。

yepnope加载jquery的实例

yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);

这段代码异步加载了jquery和jquery.plugin.js,甚至还对jquery加载失败的情况做了一个备用处理。

推荐一下Firefox插件Stylish

Stylish是这样一个firefox插件,你可以利用它来定制目标网页或网站的css样式,甚至一些firefox app的样式,让浏览效果更加舒适。而且在UserStyles网站上已经有不少现成的样式可供下载,让不会写css的普通用户也可以享受到它的便利。

其实Stylish和greasemonkey正好是一对,一个改变css,一个改变javascript。之前我写了一个用来看新浪新闻的greasemonkey脚本,这个脚本的大概原理是删除了新浪新闻页面上的右侧边栏,这样浏览的范围会更加宽一些,但是greasemonkey脚本会有这样一个缺点,它必须等到页面load完成之后,才开始生效,这样看上去会比较突兀,洋人对这个等待load的时间有个专有名词——flicker(这个词可不是指的图片网站flickr哦)。

使用Stylish就可以有效避免flicker,它在页面最开始载入时就是生效的,也不会有greasemonkey产生的突兀效果了。比如我用来看新浪新闻的样式是这样的:


@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("http://news.sina.com.cn/") {
td.lc_blue {width:100%!important; font-size:1.2em;}
div.rightShell {display:none}
}

这个css除了把侧边广告隐藏以外,还把新闻的字体调大,像我这样的近视眼就可以看的比较轻松了。其中的-moz-document关键字是消除flicker的关键:

The @-moz-document rule is a Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets.

所以要想写出避免flicker发生的greasemonkey脚本,最好是加上Stylish支持,用-moz-document()来隐藏会变化的html部分,待到页面载入完成之后,greasemonkey脚本就可以不慌不忙的处理后续事宜了。

在页面中动态载入外部javascript

有时候需要在网页中某个div载入之后,动态引入一段javascript,IE下的解决方案:


    newjs.onreadystatechange = function () {
        if (newjs.readyState == 'loaded') {
            // ready!
        }
    }

    newjs.onload = function () {
        // ready!
    }

主要利用了onload以及onreadystatechange事件。把这个加以利用,也能动态载入外部css。下面是同时适合Ie/firefox的写法。

Continue reading “在页面中动态载入外部javascript”