10 09/2014

headjs

最后更新: Wed Sep 10 2014 12:37:50 GMT+0800

headjs 等于 requiredjs + Modernizr

head.core.min.js 只有 Responsive Design + Feature Detections（等于 Modernizr）

head.load.min.js 只有 Asset Loader（等于 requiredjs）

head.min.js 包括全部。以上二者之和

Load scripts and stylesheets on demand.

JavaScript Loader

顺序加载 js，并按顺序执行

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // all done

});

异步加载的话（以下两种写法是一回事）

head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

head.js("file1.js").js("file1.js").js("file3.js");

JavaScript Organizer

// use jQuery on the body of the page even though it is not included yet
head.ready(function() {
   $("#my").jquery_plugin();
});

// load jQuery whenever you wish bottom of the page
head.js("/path/to/jquery.js");

Responsive Design / Media Queries

用 js 来 responsive。headjs 打出的 html class 为

html class="no-js js no-mobile desktop no-ie chrome chrome30 root-section gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded w-782 gt-240 gt-320 gt-480 gt-640 gt-768 lt-800 lt-1024 lt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape

所以

/* screen size less than 1024 pixels */
.lt-1024 #hero { background-image:(medium.jpg); }

/* fine tune for mobile phone */
.lt-640 #hero { background-image:(small.jpg); }

/* page in lanscape mode */
.landscape #hero { width:800px; }

/* page in portrait mode */
.portrait #hero { width:300px; }

headjs 默认观察这些查用尺寸（screens）

320, 480, 640, 768, 800, 1024, 1280, 1440, 1680, 1920

apple 设备尺寸

iPhone3: 480 x 320
iPhone4: 960 x 640
iPad: 1024 x 768
screens: 800+

配置 html screens，只观察这些

var head_conf = { screens: [500, 700, 900] };

输出哪些 gt 等

var head_conf = screensCss: {
  "gt" : true,
  "gte": false,
  "lt" : true,
  "lte": false,
  "eq" : false
};

CSS Router

根据路径和文件名加载，比如这个路径

http://mydomain.com/addons/node/router.html

以下样式将会生效

.addons-section { }
.addons-node-section { }
#router-page { }

section 和 page 名称可自定义，比如

var head_conf = { section: '-area', page: ''};

就会

.addons-area { }
.addons-node-area { }
#router { }

Browser Detection / Graceful Degradation

/ older than IE9 /
.lt-ie9 .box { padding: 10px; }

/ CSS fixes for IE6 /
.ie6 ul  { list-style: none; }

Dynamic CSS

在 html 增加自定义 class

<script>
/*
detect whether user is logged in. here we check for an
existence of a cookie
*/
head.feature("logged", mycookielib.get_cookie("auth_token"));
</script>

<style>
/ .. and write CSS accordingly /
.logged #login-box { display: none; }
</style>

CSS3 Feature Detection

/ target CSS for browsers without box-shadow support /
.no-boxshadow .box {
   border: 2px solid #ddd;
}

内置的检测项目如下：

borderimage
borderradius
boxshadow
cssreflections
csstransforms
csstransitions
fontface
multiplebgs
opacity
rgba
textshadow

自定义检测

head.feature("video", function() {
    var tag = document.createElement('video');
    return !!tag.canPlayType;
});

HTML5 Enabler

类似 html5.js 部分功能

<style>
   article { text-shadow:0 0 1px #ccc; }
</style>

<!-- works in IE too -->
<article>
   <header></header>
   <section></section>
   <footer></footer>
</article>

支持以下 html5 tag

abbr
article
aside
audio
canvas
details
figcaption
figure
footer
header
hgroup
mark
meter
nav
output
progressdisplay
section
summary
time
video

Script Organization

所有 js 初始化完毕

head.ready(function() {

});

某个 js 加载完毕

// call a function after a particular file has been loaded    
head.ready("file2.js", function() {

});

简写

// a handy shortcut for head.ready()
head(function() {

});

Labeling Scripts

给脚本起名字

// call a function immediately after jQuery Tools is loaded
head.ready("tools", function() {

   // setup Tooltips
   $(".tip").tooltip();

});

// load scripts by assigning a label for them
head.js(
   {jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"},
   {tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"},
   {heavy: "http://a.heavy.library/we/dont/want/to/wait/for.js"},

   // label is optional
   "http://can.be.mixed/with/unlabeled/files.js"
);

http://headjs.com/

Digest of guoshuang