All posts tagged JavaScript

YUI3: Creating a Module with Dependencies

前文类似,本文为译文,相关事宜同前文。

[问题]
你想要创建一个自定义的YUI模块并确保它会把另外一个YUI模块作为依赖加载。

[解决办法]
使用YUI.add()方法注册你的code作为一个YUI全局对象(YUI global object)的一个模块,注册的过程中把模块的依赖作为配置对象传给它。在模块名字和定义之后,YUI.add()还接收两个可选的参数:

  • 一个模块的字符串形式的版本数字。这是你的模块的版本号,并不是你的模块所兼容的YUI版本。
  • 一个包含模块metadata的配置对象。目前这个配置对象(configuration object)里面最常见的field是一个叫requires的array,它列出了该模块的所有依赖。对里面所列出的每个模块,YUI会自动在需要的时候加载它们,必要的时候会远程的加载。

下面的例子对前文例子做了修改。Y.Hello.sayHello()不在返回一个字符串值,而是改变一个单个Y.Node的内容。这个hello模块定义了一个node-base的依赖,来确保调用hello模块的时候node.setHTML()是存在并可用的。
Continue reading →

YUI3: Creating Your Own Modules

本文节选翻译自YUI3 Cookbook,翻译的目的是force自己focus看完,因为最近实在过于焦躁不安心神不宁;好了废话不多说,我们开始,因为可能牵涉到版权问题,所以恕不能同时附上英文原文。水平有限,如有错误皆是本人认知问题,与原文无关。

[问题]
你需要以YUI模块的形式来包装并复用你的code。

[解决办法]
使用YUI.add()方法把你的code注册成为YUI全局对象(YUI global object)的一个模块。最少需要给YUI.add()提供:

  • 一个模块的名字。习惯上,YUI模块的名字一般为小写字母,使用hyphens(-)分割;
  • 一个实际定义模块代码的回调函数(callback function)。可以通过把这个component定义到Y对象上的方法来expose这个模块的相关属性或方法。

一旦YUI.add()执行完毕,你便可以像其它任何YUI模块一样来使用你自己的代码。下面的例子里面i,模块定义之后紧接着的就是YUI().use(),它会加载模块以及其依赖,并在回调函数里面执行其模块方法。

< !DOCTYPE html>
<title>Creating and using a Hello World module</title>
<div id="demo"></div>
<script type="text/javascript" src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script><script type="text/javascript">
  YUI.add('hello', function (Y) {
    Y.namespace('Hello');
    Y.Hello.sayHello = function () {
      return 'GREETINGS PROGRAMS';
    };
  });
  YUI().use('node-base', 'hello', function (Y) {
    Y.one('#demo').setHTML(Y.Hello.sayHello());
  });
</script>

为了避免命名冲突,你可以使用Y.namespace()来创造一个“Hello”的namespace作为这个sayHello()方法的命名空间。Y.namespace()是个方便实用的工具,虽然这里例出的例子非常简单,本质上等同于:

Y.Hello = {};
注:上面这个例子只展现出最基本的创建模块的代码block。这个example对于构建真正可复用的code并不足够。真实世界里面的模块需要定义依赖和其它metadata,且它们通常会被定义在另外独立的文件中。

Continue reading →

[Footnotes]
  1. 译者改成了使用yui3最新版:3.8.0 []

Felix’s Node.js Style Guide (Part 2)

接上篇:Felix’s Node.js Style Guide (Part 1)

创建Object / Array

逗号应放在行尾而不是行首,每一行放置简短的变量声明。只在你的解释器抱怨的时候才应该去给array的key上加上引号。

正确:

var a = ['hello', 'world'];
var b = {
  good: 'code',
  'is generally': 'pretty',
};

错误:

var a = [
  'hello', 'world'
];
var b = {"good": 'code'
        , is generally: 'pretty'
        };

Continue reading →

Felix’s Node.js Style Guide (Part 1)

本文为译文,翻译自原文 http://nodeguide.com/style.html

标题咱就不翻了吧,说实话guide这个词还真不好翻,不能显得很高深又不能显得很for dummy的样子,索性就不翻了……

本guide应该较上篇略有意思,作者泰国海滩度假的时候写出来的东西想来也不会多么干巴巴(海滩不是到处都是水吗……),当然本文所涉及的编程风格之类的选择应该完全是作者自己的opinion,不代表我台观点。

============================== 我是分割线 ==============================

本文不是node.js应用程序所应该遵循风格的官方文档。本guide只是试图带给你一整套instructions,虽说本人有点固执己见,但这套东西确实能让你创建美观且统一的软件。

本guide假设你只针对node.js。如果你的代码需要在浏览器或者其它环境里面运行,请勇敢的忽略其中一些部分。

另外请注意node.js和围绕node的其它很多package都有其自身略显不同的风格,所以如果你对那些项目感兴趣,请遵守他们那边的规则。(别到时被砍……译者注)
Continue reading →

Felix的Node.js初学者入门指南

本文为译文,翻译自原文 http://nodeguide.com/beginner.html

网上有很多关于node.js的资料,但鉴于其快速的开发进度,初学者可能会很难找到比较好且最新的入门资料。本文就是在力求提供这份资料,并且力求时刻和最新的node.js稳定版本保持同步。

本guide已经针对node 0.4.x的最新改动做过更新,node 0.4.x也是当前node的稳定分支。

学习JavaScript

本guide假设你已经对JavaScript有所熟悉。如果你不是很熟悉,你可以去读读:Marijn Haverbeke写的Eloquent JavaScript,它可以在网上免费阅读。
Continue reading →