JavaScript 中的有趣技巧

引言

在本文中，我想分享一些我所了解到的关于 JavaScript 的有趣的事情。

我们将看到这五个技巧：

• 动态脚本加载
• 无需 "new" 的实例化
• 记忆化
• 混合类
• 通过克隆继承

#1 动态脚本加载

大多数时候，我们在页面渲染时最初加载所有脚本和其他资源。最初加载所有脚本会增加对服务器的 HTTP 请求，并大大减少用户看到页面所花费的时间。

例如，在使用 Google Maps 时，通常我们最初加载 Google Maps API 并显示地图。 如果您只想在用户需要时才显示地图，会是什么情况？ 这是完成这项工作的脚本！

var api = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";

//The function that loads any external JavaScript dynamically
function loadScript(src) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = src;
  document.body.appendChild(script);
}


//Google maps api callback
function initialize() {
  var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

<div id="map_canvas" style="width:500px; height:500px"></div>
<input type="button" value="Load Map" onclick="loadScript(api)" />

#2 无需 "new" 的实例化

在大多数语言（包括 JavaScript）中，实例化类通常由 "new" 运算符完成。 下面是在 JavaScript 中实例化类的典型方法

//Book class
function Book(isbn, author, title)
{
    this.isbn = isbn;
    this.author = author;
    this.title = title;
};

Book.prototype = {
    getIsbn: function(){
        return this.isbn;
    },
    getAuthor: function(){
        return this.author;
    },
    getTitle: function(){
        return this.title;
    },
};   

//instantiating using new
var book1 = new Book("1590597273", "John Resig", "Pro JavaScript Techniques");

通过修改上面的代码，我们可以像调用方法一样实例化 Book 类

var book1 = Book("1590597273", "John Resig", "Pro JavaScript Techniques");

这是代码

function Book(isbn, author, title)
{
    if(window == this)
        return new Book(isbn, author, title);
    this.isbn = isbn;
    this.author = author;
    this.title = title;
};

#3 记忆化

记忆化是一种优化方法的技术。 如果一种方法执行不需要重复执行的复杂处理，我们可以使用这种技术来动态更改其实现。

我们可以使用这个概念的最佳位置之一是创建 XmlHttpRequest 对象。 由于 AJAX 通信所需的对象因浏览器而异，甚至在不同版本的 IE 中也不同，因此每次我们都必须在创建对象之前嗅探浏览器。

通过记忆化，我们可以避免每次创建 XHR 对象时都进行浏览器检测。

createXhrObject: function() { // Factory method.
    var methods = [
    function() { return new XMLHttpRequest(); },
    function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
    function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
    ];
    for(var i = 0, len = methods.length; i < len; i++) {
        try {
            methods[i]();
        }
        catch(e) {
            continue;
        }
    // If we reach this point, method[i] worked.
    this.createXhrObject = methods[i]; // Memoize the method.
    return methods[i];    
    }
    // If we reach this point, none of the methods worked.
    throw new Error('SimpleHandler: Could not create an XHR object.');    
    }    
};

在上面的方法 createXhrObject 中，我们正在将实例化不同 AJAX 通信对象的不同方法存储在一个数组中。 然后，我们遍历数组，找到正确的方法并将其覆盖到 createXhrObject 中。

#4 混合类

继承是代码重用的一种好方法。 有时它不会有帮助！ 例如，当您想使用完全不同的另一个类的方法时，我们无法从它继承。 在下面的示例中，我们有两个类 Mixin 和 Book。

var Mixin = function() {};

Mixin.prototype = {
    serialize: function() {
        var output = [];
        for(key in this) {
            output.push(key + ': ' + this[key]);
        }
        return output.join(', ');
    }
};

//Book class
var Book = function(isbn, author, title)
{
    this.isbn = isbn;
    this.author = author;
    this.title = title;
};

Book.prototype = {
    getIsbn: function(){
        return this.isbn;
    },
    getAuthor: function(){
        return this.author;
    },
    getTitle: function(){
        return this.title;
    },
};

Mixin 类有一个方法 serialize，它将任何对象序列化为 JSON 字符串。 我们希望在 Book 类中使用 serialize 方法。 由于这两个类完全不同，我们无法从 Mixin 继承 Book。 别担心！ 我们有一个不错的方法可以做到这一点。

function augment(receivingClass, givingClass) {
    for(methodName in givingClass.prototype) {
        if(!receivingClass.prototype[methodName]) {
            receivingClass.prototype[methodName] = 
            givingClass.prototype[methodName];
        }
    }
}

在上面的函数中，我们将 Mixin 类的所有方法复制到 Book 类。 通过使用这种技术，我们可以动态地将一个类的方法复制到完全不同的另一个类。

#5 克隆

在我见过的所有语言中，要创建对象，首先我们编写一个充当蓝图的类，然后我们实例化它。 在现实世界中，没有类，到处只有对象！ 但是在 JavaScript 中，我们可以做一些我们在其他语言中无法想象的事情。 一个例子是我们可以直接创建对象。

下面是一个直接创建的 JavaScript 对象，没有类

var Tooltip = {
    showTip: function(el, text){
    },
    hideTip: function(){
    }
}

这探索了一种新的继承方式，称为原型继承或简称克隆。 在这里，首先我们创建一个对象，然后我们克隆它来创建具有相同或更多行为的新对象。 克隆中最重要的事情是 clone 函数本身，它克隆任何对象以创建另一个对象。

下面显示的是 clone 函数

function clone(object) {
    function F() {}
    F.prototype = object;
    return new F;
}

如果要创建上述 Tooltip 对象的克隆，请调用 clone(Tooltip)。

如果您喜欢这些技巧，请不要忘记发表您的评论并投票 :)

**JavaScript 太棒了**