2014年一码中特
首頁 > 編程語言 > 詳細

javascript權威指南第22章高級技巧

時間:2019-09-16 01:01:01      閱讀:33      評論:0      收藏:0      [點我收藏+]

標簽:ray   proto   listener   ==   text   request   

//22.1
//22.1.1 安全的類型檢測
var value = new Array();
var isArray = value instanceof Array;
var isArray = typeof value; //比如正則表達式操作符會返回function
//由于所有類型都是派生于Object 對象
function isArray(value) {
    return Object.prototype.toString.call(value) == ‘[object Array]‘;
}

function isFunction(value) {
    return Object.prototype.toString.call(value) == ‘[object Function]‘;
}

function isRegExp(value) {
    return Object.prototype.toString.call(value) == ‘[object RegExp]‘;
}


// 21.1.2 作用域安全的構造函數

function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}
//正確構造
var person = new Person(‘Nicholas‘, 29, ‘Software Engineer‘); //構造一個對象
//意外的構造
person = Person(‘Nicholas‘, 29, ‘Software Engineer‘); //這樣被當函數執行,this指向window

//安全的構造對象
function Polygon(sides) {
    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 rect = new Rectangle(5, 10);
alert(rect.sides); //undefined 因為基類 Polygon 是作用域安全的
// 當new Rectangle() 構造函數已經鎖定this =Rectangle
// 通過  Polygon.call(this,2);構造函數時候 this!=Polygon
// 此時 Rectangle this 與 Polygon this 不同域因此不會被繼承屬性

//利用原型繼承方式可以解決這個問題
Rectangle.prototype = new Polygon(0);


//22.1.3 懶性載入函數
    //假如頁面js腳本會重復多次執行
    //因為瀏覽器是在當下一旦確定就不會變
    //因此這里只要第一次判斷出支持的請求方式后
    //就直接覆蓋新的聲明函數給當前函數。
    //從而實現簡化邏輯if語句
function CreateXMLHttpRequest() {
    if (typeof XMLHttpRequest != undefined) {
        return function () {
            return new XMLHttpRequest();
        }
    }else if(typeof ActiveXObject!=undefined){
        return function(){
          return  new ActiveXObject(‘‘);
        }
    }
}

//22.1.4 函數綁定

var handler ={
    message:‘Event handled‘,
    handleClick:function(event){
        alert(this.message);
    }
};

// function callback(event){
//     handler.handleClick(event);
// }

var btn = document.getElementById(‘my-btn‘);

btn.addEventListener(‘click‘,function(event){
    handler.handleClick(event);
},false);

//創建一個閉包(閉包是隔斷作用域)
function bind(fn,context){
    return function(){
        return fn.apply(context,arguments);
    }
}

btn.addEventListener(‘click‘,bind(handler.handleClick,handler),false);


//22.1.5 函數柯里化
//柯里化通用方式
function curry(fn,context){
    
    var args = Array.prototype.slice.call(arguments,2); //取從數組下表2開始后的參數(外部參數)
                                                       //前2參數是fn context
    return function(){

        var innerArgs =Array.prototype.slice.call(arguments); //閉包函數參數,即當前閉包函數
        var finalArgs =  args.concat(innerArgs); //外部函數參數和閉包函數鏈接起來    
       
        return fn.apply(context,finalArgs);

    };
}

//22.2 防篡改對象
// 22.2.1 不可拓展對象

Object.preventExtensions(person); //設置該對象不可拓展

if(Object.isExtensible(person)){

}

//22.2.2  密封的對象

Object.seal(person);
if(Object.isSealed(person)){

}

//22.2.3 凍結的對象

Object.freeze(person);


//22.3.1 重復的定時器
var interval =250;
setTimeout(function(){
    //處理邏輯
    var div = document.getElementById(‘myDiv‘);
    var left = parseInt(div.style.left)+5;
    div.style.left =left+"px";
    if(left<200){
        setTimeout(arguments.callee,interval);
    } 
},interval);


//22.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);
}

var data =[12,123,1234,453,436];

function printValue(item){
    var div = document.getElementById(‘myDiv‘);
    div.innerHTML += item+"<br>";
}

chunk(data,printValue);


//22.3.3 函數節流

var processor ={
    timeoutId:null,
    //實際進行處理的方法
    performProcessing:function(){
        //實際執行的代碼
    },
    process:function(){
        clearTimeout(this.timeoutId); //清除當前定時器,執行代碼邏輯后再設置定時器
        var that =this;  //引用this指針
        this.timeoutId =setTimeout(function(){
            that.performProcessing();
        },100);
    }
};

//嘗試開始執行
processor.process();

//簡化模式
function throttle(method,context){
    clearTimeout(method.tId);
    method.tId =setTimeout(function(){
        method.call(context);
    },100);
};


//22.4 自定義事件


//22.5 拖放

  

javascript權威指南第22章高級技巧

標簽:ray   proto   listener   ==   text   request   

原文:https://www.cnblogs.com/ms_senda/p/11525152.html

(0)
(0)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 bubuko.com 版權所有 魯ICP備09046678號-4
打開技術之扣,分享程序人生!
             

魯公網安備 37021202000002號

2014年一码中特 200元回血1万 腾讯时时彩龙虎和压住技巧 江西时时软件手机版 全天北京pk10计划团队 pk10计划软件免费下载 北京pk10赛车预测软件 3d稳赚技巧 大小彩票计划软件 pk10技巧经验 pk106码2期计划走势怎么看