好程序员分享JavaScript代码组织结构良好的5个特点

  • 时间:
  • 浏览:2

  Require.js也给当我们都都 转换第三方全局变量,require() - 通过垫补功可不都可不可不还能否 模块。在许多例子中,lib/calculator 创建另另俩个 全局的计算器对象,许多库是被require化的。

  刚刚试图同步加载脚本会意味浏览器锁死,这是非常重要的,你的脚本和你的模块应该使用异步加载机制。 Require.js在默认情况汇报下,所有异步加载你的模块,不到所有的的依赖都加载完刚刚才会执行你的模块代码的函数。

8.

  }

  });

6.

6.

  为了除理许多大问题,当我们都都 刚刚采取了异步模块定义(AMD)的模式,并引入require.js到当我们都都 的技术堆栈。经过对AMD的进一步探索,当我们都都 刚刚基本选着 ,组织坚持问题导向的JavaScript一般都呈现以下六个特点:

  };

  ## js/my-page.js

  }

  许多变化,User类可不都可不可不还能否 安全地在许多脚本中重用。

  始终声明当我们都都 的依赖,当我们都都 就消除了JavaScript中90%的大问题。可重用的代码变得更可靠,单元测试的数量增加了4倍也是另另俩个 因素。

  ## js/User.js

1.

2.

2.

  user.sayHello();

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

  始终声明当我们都都 的依赖

13.

  this.name = name;

  return User;

  "deps": ["lib/jquery"]

  "lib/cool-plugin": {

  通过使用另另俩个 闭包,当我们都都 可不都可不可不还能否 进一步利用“use strict”的好处。

3.

3.

10.

  };

14.

  "shim": {

  };

  var require = {

1.

  User.prototype.sayHello = function() {

  在许多例子中,另另俩个 单一的文件即定义了User类又调用它。这将没能重用许多代码,刚刚假若加载许多脚本就会老出alert。同样greeter许多非常难以测试。

5.

  this.name = name;

  var User = require('js/User');

  var require = {

1.

  var user = new User('Alice', window.alert);

  模块不应依赖全局变量

7.

4.

16.

7.

  });

  最终的结果是代码更容易测试和重用,刚刚你另另俩个 劲另另俩个 require()来调用所需的功能。

  当我们都都都 更深处地研究许多大问题,当我们都都 发现根本意味是无效的依赖管理造成的。比如,脚本A依赖脚本B,许多脚本B又依赖脚本C,当C如此被正确引入时,整个依赖链就无法正常工作了。

  User.prototype.sayHello = function() {

9.

  });

  this.greeter("Hello, " + this.name);

  给当我们都都 完整篇 讨论一下。

  当我们都都 最常碰到了的另另俩个 大问题是,当我们都都 会另另俩个 劲忽略许多会被选着 加载的依赖项。举例来说,刚刚当我们都都 创建了另另俩个 jQuery插件,一般认为如此必要申报jQuery的依赖,刚刚它在大多数页面都不 默认装载的。其实这似乎适用于大多数的网页,但当我们都都都 试图进行单元测试或在另另俩个 全新的页面加载时,它就变成另另俩个 大问题。

12.

  define(functino(require) {

  var user = new User('Alice', window.alert);

11.

  define(functino(require) {

5.

  除理的妙招是保持定义和执行的分离。这有益于确保可重用性和可测性:

  this.greeter("Hello, " + this.name);

6.

  有了许多简单的配置,每另另俩个 加载 lib/cool-plugin.js 的脚本时会自动加载jQuery。将有益于满足所有相关性.

  在管理JavaScript依赖时另另俩个 劲碰到的另另俩个 有趣大问题是,较旧的第三方库刚刚无法和您的依赖关系管理系统配合工作。累似 ,当我们都都 内内外部使用了jQuery的另另俩个 很酷的插件,但它对require.js一无所知。这会成为另另俩个 大问题,刚刚第另另俩个 特点,当我们都都 来换成对许多插件的引用。

  除理的妙招是通过依赖管理工具为许多插件制作另另俩个 垫片。在require.js中,这可不都可不可不还能否 很容易地通过配置来完成:

8.

  定义跟调用应该分离

15.

  }

11.

  }

4.

  为第三方代码库换成shim(垫片)

5.

  "lib/calculator": {

5.

  始终声明当我们都都 的依赖 为第三方代码库换成shim(垫片) 定义跟调用应该分离 依赖应该异步加载 模块不应依赖全局变量

  好守护应用应用程序员JavaScript代码组织形态学 良好的六个特点,随着JavaScript项目的成长,刚刚你不小心除理得话,当我们都都 往往会变得难以管理。当我们都都 发现他们常常陷入的许多大问题: 当在创建新的页面时发现,没能重用或测试刚刚写的代码。

  this.greeter = greeter;

4.

  this.greeter = greeter;

  为了进一步加强当我们都都 的JavaScript代码库,当我们都都 刚刚(几乎)完整篇 消灭了全局变量(除了由require.js提供的全局变量,如require()和define())。全局变量是臭名昭著的潜在的进入模块的“隐藏的依赖关系”,它会使代码没能重用或测试。

  依赖应该异步加载

  ## js/User.js

1.

  var User = function(name, greeter) {

  }

  var User = function(name, greeter) {

4.

2.

6.

3.

9.

  }

  "shim" : {

  "export": "Calc"

2.

  define(functino(require) {

10.

  };

  user.sayHello();

3.