Javascript Patterns 摘录

编写可维护的代码:

软件 bug 的修改是需要成本的,并且这项成本总是在不断地增加,特别是对于已经广泛发布的产品代码而言,更是如此。最好的情况是当我们一发现 bug,立刻就可以修改它,这种情况只发生在刚写完这些代码后不久。否则,一旦转移到心到任务上,忘记了这部分代码,就需要重新阅读这些代码:

  • 花时间重新学习和理解相应的问题。
  • 花时间理解当时用于解决相应问题的代码。

对于大型项目或公司而言,还存在另一个问题,就是最终修改代码的人,往往并不是当初写代码的人,也不是发现 bug 的人。因此,减少理解自己以前写的代码的时间,或者减少理解团队中其他人写的代码的时间,就变得非常关键。同时,这也影响到开发完成时间(商业收入)和开发者的情绪,毕竟开发新产品更能让人兴奋,而不说花费那么多时间在老项目维护上。

另外一个事实在于,软件开发人员通常读代码比写代码更耗时间。通常的情形是,当我们专注于某个问题时,会坐下来花一下午的时间编写出大量的代码。这些代码可能当天就可运行,但要想成为一项成熟的应用项目,需要我们对代码进行重新检查、重新校正、重新调整。譬如:

  • 发现 bug
  • 项目加入新的特性
  • 项目需要在新的环境中运行(如市场上新出现的浏览器)
  • 代码变换意图
  • 代码在新的框架或体系下需要完全重写,甚至是应用一种新的语言

因为这些改变,可能最初只是几小时工时写出来的代码,最终需要花费几周的工时来阅读。这就说为什么创建易维护的代码是一个项目成功与否的关键。

易维护的代码意味着代码具有如下特性:

  • 阅读性好
  • 具有一致性
  • 预见性好
  • 看起来如同一个人编写
  • 有文档

Hello Arduino

09 年有机会接触这 Arduino 的时候,结果却跟它擦肩而过。当时没感觉到这个小东西的潜力,机缘巧合重新认识这个东西,感觉很奇妙。

该从哪里开始写呢?

掌握模块模式

原文:Mastering the Module Pattern
翻译:dreamana.com

我是 JavaScript 模块模式的狂热份子。我想分享一些这个模式的用例和不同写法,以及说明为什么这些很重要。模块模式 (Module Pattern) 就是所谓的一种“设计模式”,由于各种原因它非常的有用。我之所以喜欢模块模式(它的变体, 揭示模块模式 Revealing Module Pattern)是因为它让域界定 (scoping) 轻而易举,不会使 JavaScript 设计变得过于复杂。

这也让代码保持简单,易于阅读和使用,使用 Object 是一种非常好的方式,不会让你的代码被啰嗦的 this 和 prototype 声明弄得臃肿。我觉得我应该去分享一些领悟,关于模块非常棒的一面,以及如何去掌握它和它的变体及特性。

创建一个模块 (Creating a Module)

要理解一个模块可以带来什么,你需要理解以下函数的概念是什么:

(function () {
  // code
})();

这声明了一个函数,然后立即自己调用。这也称为 立即调用的函数表达式 (Immediately-Invoked-Function-Expressions’s),其中这函数创建了新域并创建了“私有空间 (privacy)”,JavaScript 没有私有空间,但可以用创建新域,在里面包装我们所有函数逻辑来模拟这个。这个做法的结果是,只返回我们需要的部分,其他代码从全局域 (global scope) 分离出来。

创建新域之后,我们需要给我们的代码加命名空间 (namespace),使得可以访问我们返回的任何方法。现在给我们的匿名模块一个命名空间吧。

var Module = (function () {
  // code
})();

之后我们有 Module 声明在全局域内,这意味着能够随处调用,甚至传到另一个模块里面。

复习 JavaScript

原文:A JavaScript refresh
翻译:dreamana.com

开始之前我们将会涵盖一些 JavaScript 的关键概念。如果你过去几年没有关注 JavaScript 又或者是 JavaScript 新手,我希望这些内容能帮到你。

我们会提及到语言到基础比如变量、函数、作用域以及不同类型,但不会花太多时间在更基础但比如运算符,又或者什么是函数,什么是变量,作为开发者的你应该都知道这些了。我们将通过简单的例子,突出重点,以一个交互开发者的角度,有其他技术比如 Flash(ActionScript3),Java,C#或原生 (C++) 的开发背景,去探讨 JavaScript。

像其他受控语言 (managed language) 一样,JavaScript 运行在一个 JavaScript VM 当中,一个关键的不同点是它不是执行字节码,JavaScript VMs 是基于源代码的,直接翻译源代码为原生代码,通过一个叫 JIT(Just in Time 编译器) 的东西。JIT 在运行时(实时)对代码进行优化工作,取决于不同的架构对平台进行特定对优化。当然,当今大部分浏览器都能运行 JavaScript,下面列出都这些是当前行业界最流行的 JavaScript VMs:

相比起低层语言 (low-level language),JavaScript 提供来一些严谨的便利,比如自动内存分配和垃圾回收机制。虽然这些东西会有速度的开销,但受控语言 提供更多的价值在生产力和平台覆盖方面上。使得现在的开发者们喜欢这些语言多于低层语言,尽管性能有所损失,因为当遇上要发布到多平台上的时候,使用那些低层语言 需花费更高成本。

在我们开始之前,区分出那些浏览器上怎么运作是非常重要的。一方面,我们有核心语言 JavaScript,另一方面,我们有浏览器的 API。历史原因,大多数教程都通常将 JavaScript 和 DOM 合在一块来讲,但他们已经进化成两个强大的独立体。因此我们先谈 JavaScript,之后再深入 DOM 和浏览器 API。这第一篇文章所有提到的只是核心部分,不需要和浏览器 API 打交道,即是纯核心的 JavaScript。 下面列举的是代表着 JavaScript 中通用的核心对象:

  • Array
  • Boolean
  • Date
  • Function
  • Number
  • Object
  • RegExp
  • String
  • Error

要完整的全局对象列表,请查看 Mozilla 的 Global Objects 页。其他对象你可能再 JavaScript 中见过,比如 Window, CanvasRenderingContext2D, XMLHttpRequest 对象,又或者是其他不是 JavaScript 本身去处理的,只是针对特定浏览器的对象,比如网络访问,音频,渲染等等。我们在以后的文章中谈论这些 API。

Node.js 杂记

入门案例

The Node Beginner Book
用 NodeJS 打造你的静态文件服务器
从零开始 nodejs 系列文章

Javascript Tips

What’s so great about JavaScript Promises? (译文)
JavaScript.is(Sexy)
A JavaScript refresh
Mastering the Module Pattern

配置相关

编译安装 Node.js

npm 国内镜像 (出处:cnodejs.org)

  1. 通过 config 命令

    npm config set registry http://registry.cnpmjs.org 
    npm info underscore (如果上面配置正确这个命令会有字符串 response)
    
  2. 命令行指定

    npm --registry http://registry.cnpmjs.org info underscore`
    
  3. 编辑 ~/.npmrc 加入下面内容

    registry = http://registry.cnpmjs.org`

HTML5 入坑须知

HTML5/CSS3 学习快速笔记进行中……

HTML5 文档 | DOCTYPE Declaration

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>A Minimum HTML5 Document</title>
</head>
<body>
    Content...
</body>
</html>

文档类型声明非常简单,只需要 <!DOCTYPE html>

语义化标签 | Semantic Elements

大纲结构

section 定义文档或应用程序中的区域(或节)
nav 定义文档的主导航区域
article 用来包裹独立的内容片段
aside 用来表示与页面主内容松散相关的内容
hgroup 用来包裹标题元素

Tags