好程序员分享JavaScript代码组织结构良好的5个特点
好程序员JavaScript代码组织结构良好的5个特点,随着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.
}
有了这个简单的配置,每一个加载 lib/cool-plugin.js 的脚本都会自动加载jQuery。将有助于满足所有相关性.
最终的结果是代码更容易测试和重用,因为你总是有一个require()来调用所需的功能。
定义跟调用应该分离
这是限制JavaScript代码的可重用性和可测试性的一个常见问题。问题表现在一个单一的文件即定义了一个类/函数又调用了它。考虑下面的代码:
## js/User.js
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.
});
在这个例子中,一个单一的文件即定义了User类又调用它。这将很难重用这个代码,因为只要加载这个脚本就会出现alert。同样greeter这个非常难以测试。
解决的办法是保持定义和执行的分离。这有助于确保可重用性和可测性:
## js/User.js
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.
}
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
JavaScript 教程(二)
面向对象编程 实例对象与 new 命令 JavaScript 语言具有很强的面向对象编程能力,这里介绍 JavaScript 面向对象编程的基础知识 对象是什么 面向对象编程(Object Oriented Programming,缩写为 OOP)是目前主流的编程范式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工与合作,完成对真实世界的模拟。每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。对象可以复用,通过继承机制还可以定制。因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。那么,“对象”(object)到底是什么?我们从两个层次来理解 对象是单个实物的抽象 一本书、一辆汽车、一个人都可以是对象,一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象,实物之间的关系就变成了对象之间的关系,从而就可以模拟现实情况,针对对象进行编程 对象是一个容器,封装了属性(pro...
- 下一篇
【云周刊】第215期:阿里靠什么支撑 EB 级计算力?
欢迎订阅云周刊 本期头条 阿里靠什么支撑 EB 级计算力? MaxCompute 是阿里EB级计算平台,经过十年磨砺,它成为阿里巴巴集团数据中台的计算核心和阿里云大数据的基础服务。去年MaxCompute 做了哪些工作,这些工作背后的原因是什么?大数据市场进入普惠+红海的新阶段,如何与生态发展共赢?人工智能进入井喷阶段,如何支持与借力?本文从过去一年的总结,核心技术概览,以及每条技术线路未来展望等几个方面做一个概述。点击查看 Tablestore Timestream:为海量时序数据存储设计的全新数据模型阿里巴巴小程序繁星计划ELK日志分析方案【云吞铺子】性能抖动剖析(一)香港特首参观杭州城市大脑,阿里云技术获赞蚂蚁金服高级研究员阳振坤:为什么我们要选择自研数据库这条艰难之路蠕虫利用新公开的Confluence RCE漏洞进行大规模攻击,
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7,CentOS8安装Elasticsearch6.8.6
- CentOS8编译安装MySQL8.0.19
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- CentOS8安装Docker,最新的服务器搭配容器使用