13518219792
本篇内容主要讲解“JavaScript代码组织结构良好的特点有哪些”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“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 = {
1.
"shim": {
2.
"lib/cool-plugin": {
3.
"deps": ["lib/jquery"]
4.
}
5.
}
6.
}
1.
define(functino(require) {
2.
var User = function(name, greeter) {
3.
this.name = name;
4.
this.greeter = greeter;
5.
};
6.
User.prototype.sayHello = function() {
7.
this.greeter("Hello, " + this.name);
8.
};
9.
var user = new User('Alice', window.alert);
10.
user.sayHello();
11.
});
1.
define(functino(require) {
2.
var User = function(name, greeter) {
3.
this.name = name;
4.
this.greeter = greeter;
5.
};
6.
User.prototype.sayHello = function() {
7.
this.greeter("Hello, " + this.name);
8.
};
9.
return User;
10.
});
11.
## js/my-page.js
12.
define(functino(require) {
13.
var User = require('js/User');
14.
var user = new User('Alice', window.alert);
15.
user.sayHello();
16.
});
这种变化，User类可以安全地在许多脚本中重用。
依赖应该异步加载
因为试图同步加载脚本会导致浏览器锁死，这是非常重要的，你的脚本和你的模块应该使用异步加载机制。
Require.js在默认情况下，所有异步加载你的模块,只有所有的的依赖都加载完以后才会执行你的模块代码的函数。
通过使用一个闭包，我们可以进一步利用“use strict”的好处。
模块不应依赖全局变量
为了进一步加强我们的JavaScript代码库，我们已经(几乎)完全消灭了全局变量(除了由require.js提供的全局变量，如require()和define())。全局变量是臭名昭著的潜在的进入模块的“隐藏的依赖关系”，它会使代码很难重用或测试。
Require.js也让我们转换第三方全局变量，require() - 通过垫补功能能模块。在这个例子中，lib/calculator 创建一个全局的计算器对象，这个库是被require化的。
var require = {
1.
"shim" : {
2.
"lib/calculator": {
3.
"export": "Calc"
4.
}
5.
}
6.
}
到此，相信大家对“JavaScript代码组织结构良好的特点有哪些”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
