典型代码示例

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加载失败的情况做了一个备用处理。

其实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脚本就可以不慌不忙的处理后续事宜了。

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

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

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

var css;
function include_css(css_file) {
    var html_doc = document.getElementsByTagName('head')[0];
    css = document.createElement('link');
    css.setAttribute('rel', 'stylesheet');
    css.setAttribute('type', 'text/css');
    css.setAttribute('href', css_file);
    html_doc.appendChild(css);

    // alert state change
    css.onreadystatechange = function () {
        if (css.readyState == 'complete') {
            alert('CSS onreadystatechange fired');
        }
    }
    css.onload = function () {
        alert('CSS onload fired');
    }
    return false;
}

var js;
function include_js(file) {
    var html_doc = document.getElementsByTagName('head')[0];
    js = document.createElement('script');
    js.setAttribute('type', 'text/javascript');
    js.setAttribute('src', file);
    html_doc.appendChild(js);

    js.onreadystatechange = function () {
        if (js.readyState == 'complete') {
            alert('JS onreadystate fired');
        }
    }

    js.onload = function () {
        alert('JS onload fired');
    }
    return false;
}

这里是Demo，有动态载入css以及js的例子。

原文地址

http://www.phpied.com/javascript-include-ready-onload/