优雅的创建一个JavaScript库

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优雅的创建一个JavaScript库相关的知识,希望对你有一定的参考价值。

这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库。

在我们深入之前,我做了两点假设:

  • 你知道简单的javascript或C语言。
  • 你不打算使用jQuery。通常情况下,一个JavaScript库不需要任何依赖。

首先,我遇到了第一个麻烦,即如何正确的看待一个JavaScript库。在C/C++中,一个库是功能的集合,并且通常不需要很完美的结构。
而JavaScript的工作方式有所不同,因此我做了一些研究。最后的结论是,一个JavaScript库是一个包含在对象中的独立的模块,不会在自己的作用域以外定义函数来污染全局命名空间。

基于此,我们可以简单的定义一个库:

var Library = {
    name: "Candy",
    greet: function() {
        alert("Hello from the " + Library.name + "  library.");
    }
}

这个库就是我们字面意思上所说的对象。调用greet函数,我们要用:

Library.greet();

因为greetLibrary对象的成员。现在,如果我们期望name变量为Library私有,应该怎么做呢?遗憾的是,这种库的定义方式无法实现这一点。

而且,不仅仅是在其他文件中要通过Library.name来引用name变量,在Library中也要通过引用自己来引用name变量。这种解决方式看起来就很差劲。

解决这个问题的方法是将Library定义为一个函数,在函数中定义对象。这种方式允许我们创建并使用私有的变量和方法。如下:

function Library() {
    var name = "Candy";
    this.greet = function() {
        alert("Hello from the " + name + " library.");
    }
}

在这种方式下,Library.name将不会暴露在全局,并且在Library内部也能被简单的引用。greet方法依然是公有的,因为通过关键字thisgreet定义为Library的一个成员。

确定将什么暴露给谁,是架构的简单实践。

但是,现在我们有了新的问题。在如下场景中,用户已经定义了一个Library对象,并且引用了你的库。

//用户自己的Library对象
var Library = {
    book_num: 1123,
    category: [
        "science",
        "social"
    ]
}

//调用Library库中的方法
Library.greet();

这时,你的Library定义被覆盖,用户还将被告知“引用错误”。

我们有一个更好的解决方案:将你的library包装在一个函数中,这个函数将在不存在命名冲突时被调用。如下:

(function(window) {
    ‘use strict‘;
    function define_library() {
        var Library = {};
        var name = "Candy";
        Library.greet = function() {
            alert("Hello from the " + name + " library.");
        }
        return Library;
    }
    
    if (typeof(Library) === "undefined") {
        window.library = define_library();
    } else {
        console.log("Library is already defined.");
    }
})(window);

首先,我们解释一下包装整个library的闭包:

(function(window) {
    //CODE
})(window);

它的工作原理是,它包装了在它其中定义的代码,因此它拥有自己的命名空间。它也将会自动执行,因为末尾添加的(window)

接着,我们介绍一下使用的use strict。这是一个可选配置,可以在这里了解更多相关知识。由于我们整个定义是一个闭包,所以只需声明一次use strict,即可将严格模式应用于整个library

然后,我们在define_library()函数中定义了Library对象,并且在函数最后返回了该对象。

最后,我们通过typeof判断当前是否有命名冲突,如果没有,我们将初始化我们的Library对象。


要开始坚持写文章啦。这是最近看到的一篇国外文章,觉得对自己有点帮助,就翻译过来了,希望对大家也有所帮助,原文戳这里

接下来的一篇文章,将封装一个JS库,实现购物网站上常见的图片跟随鼠标放大的功能。

to be continued. 喜欢就关注我吧。

以上是关于优雅的创建一个JavaScript库的主要内容,如果未能解决你的问题,请参考以下文章

常用Javascript代码片段集锦

Javascript代码片段在drupal中不起作用

JavaScript 代码片段

javascript WordPress媒体库JS片段

如何在Vuejs中优雅使用Javascript各种插件

react简介