JavaScript代码组织结构良好的5个特点[reuqire.js]

标签: javascript reuqire.js 代码规范 | 发表时间:2014-12-18 16:22 | 作者:江小湖Laker
出处:http://segmentfault.com/blogs

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

相关 [javascript 代码 组织结构] 推荐:

JavaScript代码组织结构良好的5个特点[reuqire.js]

- - SegmentFault 最新的文章
随着JavaScript项目的成长,如果你不小心处理的话,他们往往会变得难以管理. 我们发现自己常常陷入的一些问题: 当在创建新的页面时发现,很难重用或测试之前写的代码. 当我们更深处地研究这些问题,我们发现根本原因是无效的依赖管理造成的. 比如,脚本A依赖脚本B,并且脚本B又依赖脚本C,当C没有被正确引入时,整个依赖链就无法正常工作了.

两行 JavaScript 代码

- MessyCS - Dreamer's Blog
最近看到了两行 JavaScript 代码,很受启发. 在 JavaScript 中,我们可以获取HTML元素的属性值,例如 element.id. 但是,因为 for 和 class 是 JavaScript 中的关键字,所以在 JavaScript 中这两个属性名称分别用 htmlFor 和 className 代替,于是在封装的时候需要先对这两个属性进行特殊判断.

一段Javascript的代码

- Deland - 酷壳 - CoolShell.cn
我们先看一段Javascript的代码,如下所示:(你能看出来这是干什么的. 这段代码来自BlackHat DC 2011((黑帽安全大会,全世界最大两个黑客大会之一,另一个是Defcon)中的一个叫Ryan Barnett黑客做的XSS Street-Fight. 的演讲(XSS是Web上比较经典的跨站式攻击,操作起来也有些复杂),一共69页,基本上都是一些比较枯燥的Javascript,不过这段代码挺有意思的,如果上面这段代码换个样子:.

JavaScript代码复用模式

- - SegmentFault 最新的文章
代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序. 在谈及代码复用的时候,我们首先可以想到的是 继承性. 优先使用对象组合,而不是类继承. 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们. 但在 js中,我们可以使用构造函数和 new操作符来实例化一个对象,这与其他使用类的编程语言在语法上有其相似之处.

IT科技公司的组织结构图

- fei - 86pm沙龙—发现·学习·分享 86pm.com
上个月,Web设计师Manu Cornet在自己的博客上,画了一组美国科技公司的组织结构图. 在他笔下,亚马逊等级森严且有序;谷歌结构清晰,产品和部门之间却相互交错且混乱;Facebook架构分散,就像一张散开的网络;微软内部各自占山为….

LSM存储组织结构介绍 - bangerlee

- - 博客园_首页
LSM(Log Structured Merge Trees)数据组织方式被应用于多种数据库,如LevelDB、HBase、Cassandra等,下面我们从为什么使用LSM、LSM的实现思路两方面介绍这种存储组织结构,完成对LSM的初步了解. LSM相较B+树或其他索引存储实现方式,提供了更好的写性能.

更好的用vim浏览Javascript代码

- cRabdanceR - Kejun's Blog
vim默认没有一般IDE的outline视图,浏览长篇Javascript源文件很麻烦,taglist插件正是弥补这点不足. 它可以将所有方法和变量分级罗列出来,一目了然. taglist是依赖强大的ctags实现的. ctags支持41种编程语言,其中包括Javascript,但对Javascript支持较随意.

使用 JSLint 保证 JavaScript 代码质量

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式. JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.

也谈JavaScript代码性能优化

- 可乐加糖 - Fdream's Blog
差不多两年前写了个选择器whiz,除在DOM查找方面做了许多优化工作之外,还在代码优化上做了很多工作,一直没有分享. 抽空总结一下,基本上在jQuery、Mootools和YUI的源码里面都可以看到这些写法. 有些是已经在网上分享很多遍了,众所周知的,也有一些可能写了多年的JavaScript的开发人员也不一定想得到的.

用JSLint精炼提升JavaScript代码

- - 博客 - 伯乐在线
英文原文: Using JSLint to Refine Your Code,编译: 伯乐在线 – 胡蓉( @蓉_inShanghai). 由于移动应用的盛行和HTML5的广泛运用,JavaScript正越来越流行. JavaScript受欢迎的部分原因是因为它的灵活便捷,你可以快速上手,它不需要重量级的开发环境,也不需要第三方应用支持,只要你打开一个文本编辑器,然后保存,最后通过网页 浏览器运行即可.