JavaScript代码构造构造优越的5个特性[reuqire.js]

2024年1月4日 230次阅读 来源: 江小湖Laker

跟着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

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