1 、高级函数
1.1 安全类型检测
typeof操作符经常会检测数据类型不靠谱的结果， safari对正则表达式应用typeof 返回funtion很难确定类型对不对
或者是检测json是不是原生的，还是自定义的全局json对象
解决方法：任何值上调用Object原生的toString()的方法都会返回一个【Object NativeConstrucorName】格式的字符串，每个类都有一个class属性这个属性就指定了上述字符串中的构造函数名
function isArray(value){
"use strict";
return Object.prototype.toString.call(value)=="[object Array]";
}
function isFunction(value) {
"use strict"
return Object.prototype.toString.call(value) == "[object Function]";
}
function isRegExp(value){
"use strict";
return Object.prototype.toString.call(value) == "[object RegExp]";
}
d
1.2 作用域安全的构造函数
构造函数就是一个使用new操作符调用的函数，当属用new调用时候，构造函数内用到的this对象会指向新创建的的对象实例，如下
function Persion(name,age,job) {
"use strict";
this.name = name;
this.age = age;
this.job= job;
}
这段，用new的时候毫无问题，但是如果直接调用呢？
var persion = Persion("baipu",12,"engineer");
这时候就会将这三个参数挂到window下，从而出现问题,所以我们需要创建一个作用域安全的构造函数
function Persion(name,age,job) {
"use strict";
if(this instanceof Persion){
this.name = name;
this.age = age;
this.job= job;
}else{
return new Persion(name,age,job);
}
}
怎么样，这种方法机灵不?
但是如果使用构造函数窃取模式的集成而不使用原型链，继承很有可能被破坏，
function Polygon(sides){
"use strict";
if(this instanceof Polygon){
this.sides = sides;
this.getArea = function () {
return 0;
}
}else{
return new Polygon(sides);
}
}
function Rectangle(width,height) {
Polygon.call(this,2);
this.width = width;
this.height = height;
this.getArea - function () {
return this.width*this.height;
};
}
var a = new Rectangle(1,2);
console.log(a.sides);
这个时候调用polygon的方法的环境的时候，this是Rectangle而不是自己，所以没有赋值成功，
如果构造函数窃取使用原生链或者寄生组合，可以解决这个问题：
Rectangle.prototype = new Polygon();
var rect = new Rectangle(5,10);
alert(rect.sides)//2
1.3 惰性载入函数
多幸哉儒表示函数执行的分支仅会发生一次。
两种实现方式：
1、函数被调用时才处理函数，也就是说，第一次调用过程中该函数会被覆盖为另外一个按合适方式执行的函数，
function createXHR() {
if(typeof XMLHttpRequest != "undefined"){
createXHR = function () {
return new XMLHttpRequest();
}
}else if (typeof ActiveXObject !="undefined"){
createXHR = function () {
if(typeof arguments.callee.activeXString != "string"){
var version = [],i,len;
for(i=0,len = version.length;i2、声明函数是后就制定适当的函数，这样第一次调用函数是后就不会损失性能了
闭包的方式进行处理：
var createXHR = (function(){
"use strict";
if(typeof XMLHttpRequest != "undefined"){
return function(){
new XMLHttpRequest();
};
}else if(typeof ActiveXObject !="undefined"){
return function () {
//这里是这个情况下的function
}
}else{
return function () {
throw new Error("no xhr object available")
}
}
})();
1.4 函数绑定
详情请见bind的用法
1.5 函数柯里化
柯里化：调用另一个函数，并为他传入要柯里化的函数和必要参数
function curry(fn) {
"use strict";
var args = Array.prototype.slice.call(arguments,1);
return function () {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return fn.apply(null ,finalArgs);
}
}
2 防篡改对象
Configurable Writable Enumerable Value Get Set以改变其属性的行为
注意：一旦把对象定义为防篡改，就无法撤销
2.1 不可扩展对象：
Object.preventExtensions();
(function () {
"use strict";
var persion = {};
Object.preventExtensions(persion);
persion.age = 11;
console.log(persion.age);//undefined
})()
Object.isExtensible(Persion)//来判断对象是否可扩展
2.2密封的对象
configurable 不能删除属性和方法
var person = {name:"Nicholas"};
Object.seal(person);
person.age = 29;
delete person.name;
console.log(person.age);//undefined 添加失败
console.log(person.name);//Nocholas//删除失败
但是不能在严格模式中用
用Object.isSealed()的方法来判断是否密封
2.3 冻结的对象
既不可扩张也是密封的，writable为false
Object.freeze(person);
person.age = 20;//console.log undefined
delete person.name// 删除失败
person.name = "Greg";//Nicholads修改失败
3 高级定时
简单来说就是：setTimeout(function(){},200)表示200秒后，将function添加到队列中,而不是多线程处理
3.1 重复的定时器
使用setInterval()
这个setInterval的问题是可能在代码再次添加到队列之前还没有完成执行，导致定时器代码连续运行好几次，之间没有任何停顿，使用setInterval的时候仅仅当没有改定时器的任何其他代码示例时候，才将定时器代码添加到队列中，确保了定时器代码加入到队列中的最小时间间隔为指定间隔
3.2、Yielding Processes
function chunk(array,process ,context) {
setTimeout(function () {
var item = array.shift();
process.call(context,item);
if(array.length>0){
setTimeout(arguments.callee,100);
}
},100);
}
3.3 函数节流
基本思想：某些代码不可以在没有间断的情况连续重复执行，第一次调用函数，创建一个定时器，在制定的时间间隔之后运行代码，第二次调用该函数术后，他会清除前一次定时器，并设值另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。
应对连续不断的调整界面，然后进行的修改,就好比onresize的时候，会连续不断的执行：
function throttle(method,context) {
clearTimeout(method.tId);
method.tId = setTimeout(function () {
method.call(context);
},100)
}
function resizeDiv() {
var div = document.getElementById("myDiv");
div.style.height = div.offsetWidth+"px";
}
window.onresize = function () {
throttle(resizeDiv)
};
4 自定义事件
function EventTarget() {
this.handlers = {};
}
EventTarget.prototype = {
constructor:EventTarget,
addHandler:function (type,handler) {
if(typeof this.handlers[type] == "undefined"){
this.handlers[type] = [];
}
this.handlers[type].push(handler)
},
fire:function (event) {
if(!event.target){
event.target = this;
}
if (this.handler[event.type] instanceof Array){
var handlers = this.handlers[event.type];
for(var i=0,len=handlers.length;i以下是寄生组合继承：
function Person(name,age) {
EventTarget.call(this);
this.name = name;
this.age =age;
}
inheritPrototype(Person,EventTarget);
Person.prototype.say = function (message) {
this.fire({type:"message",message:message})
};
function handleMessage(event) {
alert(event.target.name+"says："+event.message);
}
var person = new Person("Nicholas",30);
person.say("Hi there .");
5.跨浏览器的事件对象
// 跨浏览器的事件对象
var EventUtil = {
addHandler:function (element,type,handler) {
//省略的代码
if(element.addEventListener){
element.addEventListener(type,handler,false);//使用dom2级方法添加事件
}else if(element.attachEvent){
element.attachEvent("on"+type,handler);
}else{
element["on"+type] = handler;
}
},
getEvent:function (event) {
return event?event:window.event;
},
getTarget:function (event) {
return event.target||event.srcElement;
},
preventDefault:function (event) {
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
},
removeHandler:function (element, type, handler) {
//todo：remove the handler
if(element.removeEventListener){
element.removeEventListener(type,handler,false);
}else if(element.detachEvent){
element.detachEvent("on"+type,handler);
}else{
element["on"+type] = null;
}
},
stopPropagation:function (event) {
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
},
getRelatedTarget:function (event) {//mouseover mouseout
if(event.relateTarget){
return event.relateTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.formElement){
return event.fromElement;
}else{
return null;
}
},
getButton :function (event) {//获取mousedown 或者是mouseuo按下或释放的按钮式鼠标中的哪一个
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch (event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;//摁下的是主按钮
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
},
getWheelDelta:function (event) {//滚轮滚动的方向
if(event.wheelDelta){
return event.wheelDelta;
}else{
return -event.detail*40
}
},
getCharCode:function (event) {//keypress取得相同的字符编码
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
6、拖放：
EventUtil.addHandler(document,"mousemove",function (event) {
var myDiv = document.getElementById("myDiv");
myDiv.style.left = event.clientX+"px";
myDiv.style.top= event.clientY+"px";
});
var DragDrop = function () {
var dragdrop = new EventTarget(),
dragging =null,
diffx = 0,
diffy = 0;
function handleEvent(event) {
event = EventUtil.getTarget(event);
var target = EventUtil.getTarget(event);
switch (event.type){
case "mousedown":
if (target.className.indexOf("draggable")>-1){
dragging = target;
diffx = event.clientX-target.offsetLeft;
diffy = event.clientY - target.offsetTop;
dragdrop.fire({
type:"dragstart",
target:dragging,
x:event.clientX,
y:event.clientY
});
}
break;
case "mouseove":
if(dragging !=null){
dragging.style.left = (event.clientX- diffx)+"px";
dragging.style.top = (event.clientY-diffy)+"px";
dragdrop.fire({
type:"drag",
target:dragging,
x:event.clientX,
y:event.clientY
})
}
break;
case "mouseup":
dragdrop.fire({
"type":"draggend",
target:dragging,
x:event.clientX,
y:event.clientY
});
dragging = null;
break;
}
}
dragdrop.enable = function () {
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
};
dragdrop.disable = function () {
EventUtil.removeHandler(document,"mousedown",handleEvent);
EventUtil.removeHandler(document,"mousemove",handleEvent);
EventUtil.removeHandler(document,"mouseup",handleEvent);
}
return dragdrop;
}();