让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > Js代码组织结构良好的5个特点
  • 101
  • 微信分享

    扫一扫,在手机上查看

Js代码组织结构良好的5个特点

2019.09.09 10:00 233 浏览 举报

  在if(we),使我们专注于增强技术栈的每个方面。这包含使我们的客户端JavaScript,它由不计其数的源代码或文档构成。

  伴随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)。通过使用依赖管理,你的代码将更可靠。


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐