OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 大话编程   关键字 分享   发布 ourjs  1418883966923
注意 转载须保留原文链接,译文链接,作者译者等信息。  
注* 作者HECTOR VIRGEN 是if(we)的前端软件工程师。当他不写JavaScript时,你通常会发现他在创作音乐或者弹钢琴。

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

原文地址: 点此
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 2015年的JavaScript:Angular之类的框架将被库取代
  2. NodeJS就是癌症[2011]
  3. 提高NodeJS网站的安全性:Web服务器防黑客攻击技巧
  4. 什么是IndexedDB:Web离线数据库入门简介及基础教程
  5. HTML5的TCP和UDP Web Socket API草案定稿
  6. 为什么io.js要从Node.js中分裂出来?
  7. Node.JS编码规范指南教程:教你优雅地写JavaScript代码
  8. 避免Node.js中的命令行注入安全漏洞
  9. 在JavaScript的Array数组中调用一组Function方法
  10. 从PhantomJS迁移到node-webkit:自动化测试框架简单比较
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 大话编程
  1. 怎样用纯HTML和CSS更改默认的上传文件按钮样式
  2. 今天我去面试, 受打击了:你是学 .net 的吧?
  3. JavaScript中的继承,构造函数以及new关键字的作用
  4. fibjs 比 nodejs 快五倍
  5. 痛苦的Java程序员
  6. OneBody:开源的社交网络,邮件列表,词典和内容管理系统
  7. 我不懂Swift
  8. 2014 Hangjs 见闻流水账第一天
  9. Linux 桌面的发展之路!
  10. 为什么我不建议你将JavaScript作为主力语言

 关键字 - 分享
  1. IntelliJ IDEA使用技巧——常用快捷键Mac篇
  2. Windows网络守门人UserLock教程:UserLock教程:阻止规定时间以外的访问连接
  3. 一流的报表产品Nevron Chart for SSRS更新v2016.1丨附下载
  4. 先进的图表Web部件Nevron Chart for SharePoint发布v2016.1版本丨附下载
  5. MyEclipse 2016 CI 4:如何正确使用Live Preview
  6. GitHub2017年度开发者报告 JavaScript依然遥遥领先Python突飞猛进
  7. IntelliJ IDEA使用技巧——设置 Sublime 代码颜色的方法
  8. 图表解决方案Nevron Chart for .NET发布v2017.1,支持Visual Studio 2017
  9. 微软免费的开源代码编辑器Visual Studio Code 1.17新增多项功能
  10. Kendo UI使用教程:Kendo UI Grid中的动态数据(二)

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号