JavaScriptAPI设计原则

//常见的 API 调用方式：改变一些颜色，添加事件监听
var elem = document.getElementById("foobar");
elem.style.background = "red";
elem.style.color = "green";
elem.addEventListener('click', function(event) {
 alert("hello world!");
}, true);
//（设想的）方法链 API
DOMHelper.getElementById('foobar')
 .setStyle("background", "red")
 .setStyle("color", "green")
 .addEvent("click", function(event) {
 alert("hello world");
 });

var $elem = jQuery("#foobar");
//setter
$elem.setCss("background", "green");
//getter
$elem.getCss("color") === "red";
//getter, setter 合二为一
$elem.css("background", "green");
$elem.css("color") === "red";

jQuery("#some-selector")
 .css("background", "red")
 .css("color", "white")
 .css("font-weight", "bold")
 .css("padding", 10);

jQuery("#some-selector").css({
 "background" : "red",
 "color" : "white",
 "font-weight" : "bold",
 "padding" : 10
});
//通过传一个 map 映射绑定事件
jQuery("#some-selector").on({
 "click" : myClickHandler,
 "keyup" : myKeyupHandler,
 "change" : myChangeHandler
});
//为多个事件绑定同一个处理函数
jQuery("#some-selector").on("click keyup change", myEventHandler);

//原来的代码
DateInterval.prototype.days = function(start, end) {
 return Math.floor((end - start) / 86400000);
};
//修改后的代码
DateInterval.prototype.days = function(start, end) {
 if (!(start instanceof Date)) {
 start = new Date(start);
 }
 if (!(end instanceof Date)) {
 end = new Date(end);
 }
 return Math.floor((end.getTime() - start.getTime()) / 86400000);
};

function castaway(some_string, some_integer, some_boolean) {
 some_string += "";
 some_integer += 0; // parseInt(some_integer, 10) 更安全些
 some_boolean = !!some_boolean;
}

function testUndefined(expecting, someArgument) {
 if (someArgument === undefined) {
 console.log("someArgument 是 undefined");
 }
 if (arguments.length > 1) {
 console.log("然而它实际是传进来的");
 }
}
testUndefined("foo");
// 结果: someArgument 是 undefined
testUndefined("foo", undefined);
// 结果: someArgument 是 undefined , 然而它实际是传进来的

event.initMouseEvent(
 "click", true, true, window,
 123, 101, 202, 101, 202,
 true, false, false, false,
 1, null);

event.initMouseEvent(
 type="click",
 canBubble=true,
 cancelable=true,
 view=window,
 detail=123,
 screenX=101,
 screenY=202,
 clientX=101,
 clientY=202,
 ctrlKey=true,
 altKey=false,
 shiftKey=false,
 metaKey=false,
 button=1,
 relatedTarget=null);

function nightmare(accepts, async, beforeSend, cache, complete, /* 等28个参数 */) {
 if (accepts === "text") {
 // 准备接收纯文本
 }
}
function dream(options) {
 options = options || {};
 if (options.accepts === "text") {
 // 准备接收纯文本
 }
}

nightmare("text", true, undefined, false, undefined, /* 等28个参数 */);
dream({
 accepts: "text",
 async: true,
 cache: false
});

var default_options = {
 accepts: "text",
 async: true,
 beforeSend: null,
 cache: false,
 complete: null,
 // …
};
function dream(options) {
 var o = jQuery.extend({}, default_options, options || {});
 console.log(o.accepts);
}
dream({ async: false });
// prints: "text"

// jQuery 允许这么写
$(document.body).on('click', {});
// 点击时报错
// TypeError: ((p.event.special[l.origType] || {}).handle || l.handler).apply is not a function
// in jQuery.min.js on Line 3

if (Object.prototype.toString.call(callback) !== '[object Function]') { // 看备注
 throw new TypeError("callback is not a function!");
}

// 所有这些属性都返回 'true' 或 'false'
Modernizr.geolocation
Modernizr.localstorage
Modernizr.webworkers
Modernizr.canvas
Modernizr.borderradius
Modernizr.boxshadow
Modernizr.flexbox

$("#grid") // Selects by ID
$("ul.nav > li") // All LIs for the UL with class "nav"
$("ul li:nth-child(2)") // Second item in each list