优雅的创建一个JavaScript库

wwolf 发布于2019-08-01 17:21 / 2563人阅读

摘要：通常情况下，一个库不需要任何依赖。在中，一个库是功能的集合，并且通常不需要很完美的结构。最后的结论是，一个库是一个包含在对象中的独立的模块，不会在自己的作用域以外定义函数来污染全局命名空间。这种方式允许我们创建并使用私有的变量和方法。

这篇文章的目的是通过演示一个简单的例子来介绍在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. 喜欢就关注我吧。

GPU云服务器云服务器 javascript动态库创建一个数据仓库 javascript框架库漏洞 php创建一个目录

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51118.html

优雅的创建一个JavaScript库

摘要：通常情况下，一个库不需要任何依赖。在中，一个库是功能的集合，并且通常不需要很完美的结构。最后的结论是，一个库是一个包含在对象中的独立的模块，不会在自己的作用域以外定义函数来污染全局命名空间。这种方式允许我们创建并使用私有的变量和方法。这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法，以优化他人编写或维护自己的JS库。在我们深入之前，我做了两点假设： ...

Euphoria 2019-08-20 18:36 评论0 收藏0
11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

netmou 2019-08-23 12:28 评论0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：转载来源包管理器管理着库，并提供读取和打包它们的工具。能构建更好应用的客户端包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。很棒的组件集合。隐秘地使用和用户数据。转载来源：https://github.com/jobbole/aw... 包管理器管理着 javascript 库，并提供读取和打包它们的工具。•npm – npm 是 javasc...

Hydrogen 2019-08-02 11:46 评论0 收藏0