优雅的创建一个JavaScript库

2024年4月22日 105次阅读 来源: 蒙朦

这篇文章的目的是通过演示一个简单的例子来介绍在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();

因为greet是Library对象的成员。现在，如果我们期望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方法依然是公有的，因为通过关键字this将greet定义为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. 喜欢就关注我吧。

    原文作者：蒙朦
    原文地址: https://segmentfault.com/a/1190000010551014
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞