JavaScript代码组织结构良好的5个特点[reuqire.js]

wushuiyong 发布于2019-08-21 10:23 / 1905人阅读

摘要：可重用的代码变得更可靠，单元测试的数量增加了倍也是一个因素。模块不应依赖全局变量为了进一步加强我们的代码库，我们已经几乎完全消灭了全局变量除了由提供的全局变量，如和。

随着JavaScript项目的成长，如果你不小心处理的话，他们往往会变得难以管理。我们发现自己常常陷入的一些问题：当在创建新的页面时发现，很难重用或测试之前写的代码。
当我们更深处地研究这些问题，我们发现根本原因是无效的依赖管理造成的。比如，脚本A依赖脚本B，并且脚本B又依赖脚本C，当C没有被正确引入时，整个依赖链就无法正常工作了。
为了解决这个问题，我们已经采取了异步模块定义（AMD）的模式，并引入require.js到我们的技术堆栈。经过对AMD的进一步探索，我们已经基本确定，组织严密的JavaScript一般都呈现以下五个特点：

始终声明我们的依赖

为第三方代码库添加shim（垫片）

定义跟调用应该分离

依赖应该异步加载

模块不应依赖全局变量

让我们详细讨论一下。

始终声明我们的依赖

我们最常碰到了的一个问题是，我们会经常忽略那些会被确定加载的依赖项。举例来说，如果我们创建了一个jQuery插件，一般认为没有必要申报jQuery的依赖，因为它在大多数页面都是默认装载的。虽然这似乎适用于大多数的网页，但当我们试图进行单元测试或在一个全新的页面加载时，它就变成一个问题。
始终声明我们的依赖，我们就消除了JavaScript中90％的问题。可重用的代码变得更可靠，单元测试的数量增加了4倍也是一个因素。

为第三方代码库添加shim（垫片）

在管理JavaScript依赖时经常碰到的一个有趣问题是，较旧的第三方库可能无法和您的依赖关系管理系统配合工作。例如，你们内部使用了jQuery的一个很酷的插件，但它对require.js一无所知。这会成为一个问题，因为第一个特点，我们来添加对这个插件的引用。
解决的办法是通过依赖管理工具为这个插件制作一个垫片。在require.js中，这可以很容易地通过配置来完成：

var require = {
    "shim": {
        "lib/cool-plugin": {
            "deps": ["lib/jquery"]
        }
    }
}

有了这个简单的配置，每一个加载 lib/cool-plugin.js 的脚本都会自动加载jQuery。将有助于满足所有相关性.
最终的结果是代码更容易测试和重用，因为你总是有一个require()来调用所需的功能。

定义跟调用应该分离

这是限制JavaScript代码的可重用性和可测试性的一个常见问题。问题表现在一个单一的文件即定义了一个类/函数又调用了它。考虑下面的代码：

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   var user = new User("Alice", window.alert);
   user.sayHello();
});

在这个例子中，一个单一的文件即定义了User类又调用它。这将很难重用这个代码，因为只要加载这个脚本就会出现alert。同样greeter这个非常难以测试。
解决的办法是保持定义和执行的分离。这有助于确保可重用性和可测性：

## js/User.js

define(functino(require) {
   var User = function(name, greeter) {
        this.name = name;
        this.greeter = greeter;
   };

   User.prototype.sayHello = function() {
        this.greeter("Hello, " + this.name);
   };

   return User;
});



## js/my-page.js

define(functino(require) {
    var User = require("js/User");
    var user = new User("Alice", window.alert);
    user.sayHello();
});

这种变化，User类可以安全地在许多脚本中重用。

依赖应该异步加载

因为试图同步加载脚本会导致浏览器锁死，这是非常重要的，你的脚本和你的模块应该使用异步加载机制。 Require.js在默认情况下，所有异步加载你的模块,只有所有的的依赖都加载完以后才会执行你的模块代码的函数。
通过使用一个闭包，我们可以进一步利用“use strict”的好处。

模块不应依赖全局变量

为了进一步加强我们的JavaScript代码库，我们已经（几乎）完全消灭了全局变量（除了由require.js提供的全局变量，如require()和define()）。全局变量是臭名昭著的潜在的进入模块的“隐藏的依赖关系”，它会使代码很难重用或测试。
Require.js也让我们转换第三方全局变量，require() - 通过垫补功能能模块。在这个例子中，lib/calculator 创建一个全局的计算器对象，这个库是被require化的。

var require = {
    "shim" : {
        "lib/calculator": {
            "export": "Calc"
        }
    }
}

结论

管理依赖是挺难的(hard)，但肯定不是做不到的(difficult)。通过使用依赖管理，你的代码将更可靠。

via ourjs

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

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

require.js学习记录

摘要：工作方式为使用将每一个依赖加载为一个标签。然后在被浏览器加载完毕后，便会自动继承之前配置的参数。可以单独定义键值队数据，作为配置文件来使用还可以定义依赖的关系压缩使用来进行压缩时，需要指定文件。在链接中有很好的示例，可以参看学习。 1、简介官方对requirejs的描述：RequireJS is a JavaScript file and module loader. It is o...

邹强 2019-08-23 12:18 评论0 收藏0
前端工程师的知识体系

摘要：目前只有和有这个概率。是快速开发应用程序的前端工具包。调试工具前端的调试工具很多，比如，核心的的。前端流程部署，和现在几乎是前端最流行的自动化的项目构建工具正则表达式浏览器插件开发浏览器原理沟通能力优秀下图是前端工程师图解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

itvincent 2019-08-20 17:22 评论0 收藏0
前端工程师的知识体系

摘要：目前只有和有这个概率。是快速开发应用程序的前端工具包。调试工具前端的调试工具很多，比如，核心的的。前端流程部署，和现在几乎是前端最流行的自动化的项目构建工具正则表达式浏览器插件开发浏览器原理沟通能力优秀下图是前端工程师图解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

raise_yang 2019-08-29 12:47 评论0 收藏0
前端工程师的知识体系

摘要：目前只有和有这个概率。是快速开发应用程序的前端工具包。调试工具前端的调试工具很多，比如，核心的的。前端流程部署，和现在几乎是前端最流行的自动化的项目构建工具正则表达式浏览器插件开发浏览器原理沟通能力优秀下图是前端工程师图解：showImg(http://upload-images.jianshu.io/upload_images/1807893-de7c7404345922b6.jp...

Sanchi 2019-08-01 17:00 评论0 收藏0