可简单避免的三个 JavaScript 发布错误


英文原文:3 Javascript deployment mistakes that are simple to avoid Web应用程序开发是倾向于在客户端运行所有用户逻辑和交互代码,让服务器暴露REST或者RPC接口。...

英文原文:3 Javascript deployment mistakes that are simple to avoid


        Web应用程序开发是倾向于在客户端运行所有用户逻辑和交互代码,让服务器暴露REST或者RPC接口。编译器是针对JS作为一个平台,第二版ECMAScript正是考虑到这一点在设计。客户端框架例如Backbone, Ember和Require鼓励创建功能丰富的应用程序,不仅有丰富的代码,而且各个组件,组件与数据之间有很多相互作用。
          这真的很好,或许还能产生一些优秀的用户体验,但是毫无疑问的是,这是很难开发web应用程序和web页面。
         根本原因是在互联网上服务你的代码和数据,运行在一些随机的浏览器上,在javascript中,这是一种你需要特别小心的语言,它是一个完全缺乏代码部署的平台。而且它不会很快就得到改善。我觉得如果星际迷航是现实生活,那么Jean-Luc Picard队长每隔一段时间不能打架的原因是他仍然是克林仪表板加载。
        我想强调的是三个相对常见的错误和容易的解决方案,并且谈谈一些我们遇到的从ReadyForZero学到的特别的事情。
剥离“缓存清除”头信息
       你可能使用CDN来缓存静态资源,这当然是合理的。如果你向服务器请求非缓存的资源(比如在AWS<Amazon Web Service>端使用"custom-origin"将文件指向真实的网络站点),这就需要小心了。你可能会在部署新版本的文件后添加一段缓存清除的字符串(头信息)到文件名上来达到这个目的,这样你的文件名看起来是这样的:http://example.com/js/main__V0123456789abcdef__.js
        这很容易做到,你可以选择任意的Hash算法来生成一段指纹信息作为这个字符串,这样它就会随着文件内容变化而变化。当新的url被引用时,它不可能被缓存,这样就可以获取到服务器上的新版本。错误就发生在这里。在网络上有很多都建议剥离“缓存清除”头信息,而是让你的服务器直接提供新版本的文件。如果你有多台服务器集群这可能导致你的站点上不同文件(如:html、js)的版本不一致(如js已更新但是html(从另一台服务器请求)仍然是旧的),不仅如此,更严重是它很容易导致CDN缓存了错误的版本。这个错误是这样发生的:
初始阶段,所有的服务器都是HTML1 和JS1.服务器A重启了,并提供HTML2和JS2.一个客户端向CDN请求main__V2__.js,这个时候这个文件是新的所以CDN上没有缓存。CDN把这个请求传给了你设置的custom origin, 碰巧这个请求发到了服务器B上。服务器B剥离了“缓存清除”字符串并返回旧的版本。CDN把旧版的的文件当新的缓存了。
        这件事情考虑起来很简单明了,但是盲目的听从网络上的建议很可能导致错误。更糟糕的是在你这看起来一切都是好的你根本不知道发生了错误,但是其它地区的用户使用了不同CDN很可能缓存了错误的版本。解决方案是不要剥离“缓存清除”字符串并将静态资源存放在能够正确支持各个版本的地方

2. 处理庞大的JS炸弹
       每个人都知道,我们需要压缩我们的javascript文件,并把它们连接在一起。但是盲目地这样做并非明智之举。如果连接的文件很大,那么更有效的方法就是并行化。另外,如果你需要频繁的修改文件的某一部分,你可能会导致很多地方失效,而文件很大部分却没有被修改过。
        如果把频繁修改的部分分离出来,那么就可以解决两边的问题。我建议使用require.js - 它可以实现对你的javascript的真正的依赖关系管理,而且第一次使用的时候,设置很简单(稍后添加会很痛苦),而且可以帮助你理解和管理依赖关系,包括一些高级选项,例如异步载入。
       需要注意的:require.js会等待一段时间后会放弃载入资源,这个可以通过指定waitSeconds选项实现,这个选项的默认值似乎7秒,它依赖于你的用户在哪里(例如:手机),可以是很短的时间。
3. 没有汇总错误事件
       你不能只让你的javascript上线使用,而不关心它的运行情况。你不可能测试每一个浏览器和每个用户的状态组合。另外,不同的载入时间可能导致怪异的状态。所以,建立某种反馈机制来判断你的用户是否遇到错误,变得十分重要。这很简单,你只需通过指定一个全局错误处理程序,收集错误,并发送会服务器。以下是一个例子:

更多 javascript 相关资讯

jQuery Mobile 1.3.0发布

基金会发布了旗下的JavaScript和HTML5/CSS框架jQuery Mobile 1.3.0。更新主要集中在响应式的web设计并新增了多个移动应用的widget。 响应式web设计(RWD)旨在

JavaScript 的 MVC 框架,BackBone 1.0 发布

JavaScript 的 MVC 框架,BackBone 1.0 发布

著名的 JavaScript 的 MVC 框架 BackBone.js 今天发布 1.0 版本。详细内容:发行日志。 主要改进包括: 引入 collection.set() 用来更新集合的内容The addition

出色的 JavaScript API 设计秘诀

设计是一个很普遍的概念,一般是可以理解为为即将做的某件事先形成一个计划或框架。 (牛津英语词典)中,设计是一种将艺术,体系,硬件或者更多的东西编织到一块的主线。

NetBeans IDE 7.3 正式版发布,支持HTML5

NetBeans IDE 7.3 正式版发布,支持HTML5

甲骨文公司今天正式推出NetBeans IDE 7.3。 对开发者来说,新版本除了改善了对于Java平台的支持,还引入了一系列HTML5、JavaScript和CSS开发功能,开发者可以快

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

Groundwork:响应式 HTML5,CSS & JavaScript 工具包

Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序。Groundwork 拥有

构建杀手级应用的 JavaScript 框架、工具和技术

构建杀手级应用的 JavaScript 框架、工具和技术

Web 浏览器正变得越来越强大,而 JavaScript 则让 Web 变得更加有趣。在这篇文章中,向大家推荐最有趣的 JavaScript 框架,工具和技术帮助你创造杀手级的应用和网站。记得

如何更快的诊断 JavaScript 错误

英文原文:How to diagnose JavaScript Errors Faster with Error 就如IE10一样的大多数最新的浏览器,都支持允许Web开发者更快地诊断和修正bug的错误栈功能,尤其是对

RubyJS:用JavaScript实现的Ruby核心库

RubyJS:用JavaScript实现的Ruby核心库

RubyJS是一个基于JavaScript的Ruby库,使用JavaScript实现了Ruby中的所有方法,如Array、Numbers、Time等。 在官网介绍中,Ruby之父松本行弘这样写道: If

基于HTML5和Javascript的移动应用架构

基于HTML5和Javascript的移动应用架构

如果你认为你能够无视终端用户的移动化需求,那请记住:当个人电脑刚出现时,企业中的IT 部门也曾对它们有抵制情绪。实际情况会怎么样呢?移动设备的激增正在促使IT部门做出

自由构建UI的跨平台移动框架——Calatrava

自由构建UI的跨平台移动框架——Calatrava

移动是未来计算的趋势,越来越多的人使用移动设备来访问互联网。但是目前至少三大平台:iOS、Android、移动Web。相比桌面Web,移动用户需要更好的体验、界面和设计。然而

更多 缓存服务器 相关资讯

HTML5新特性:Web应用缓存实现离线浏览

HTML5近十年来发展得如火如荼,在HTML5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。HTML功能越来越丰富,支持图片上传拖拽、支持localstorage、支持web sql

更多 浏览器缓存 相关资讯

基于HTML5构建Web操作系统

基于HTML5构建Web操作系统

HTML5是下一代web语言的标准,具有兼容性好,安全性高,功能丰富,开发便捷等优点,特别适合如Web操作系统一类的富客户端互联网应用的前 端开发。本文将展示如何利用HTML5提

HTML5新特性:Web应用缓存实现离线浏览

HTML5近十年来发展得如火如荼,在HTML5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化。HTML功能越来越丰富,支持图片上传拖拽、支持localstorage、支持web sql