All posts in 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 []

喝coffee写coffeescript

好吧,这回中文,亚历山大……

其实英文有英文的好处,比如英文会使本人比较focus,因为没兴趣也没能力瞎扯,于是主题明确而不拖泥带水;中文的坏处便是我会常常迷失主题,跑题千里后蓦然回首,那人竟然还在灯火阑珊处……

anyway……

前几天看到sunng的take my coffee,一看title以为必是coffeescript,结果竟偏是如此纯结(纯是纯净水的纯),看来还是哥多虑了…… 想来最近的blog title里面随便带个coffee都会让人浮想联翩,coffee script的“火”冒三丈也就可见一斑。

标题起源于上周想到一个idea,便是让live fortune定时publish到新浪微博或是twitter,目前新浪的publisher已经实现,并顺便refactor了一下code,让之后twitter publisher的加入变的十分简单(在plan中);实现的过程中再次发现了sina clone的迹象,因为其oauth实现竟然连url抄的都一模一样,倒是方便了实现,因为twitter oauth的sample code基本上改个site base url后就能完全照搬,暂且认为这是新浪有意而为之的吧,目的便是方便第三方开发人员……

本来这篇文章一直draft着,再加上周末一直不available,所以拖到现在,为了应景,还特地决定一大早先跑去喝杯咖啡后再来奋笔疾书,无奈公司咖啡机几近坏掉,我修了半天搞的满身都是最后还是勉强喝到了一点味道有稍许异样的不知道还能不能叫做coffee的”coffee”,看来杯具如我辈是永远达不到sunng那种小资情调的呵呵;

吃葡萄不吐葡萄皮,不吃葡萄倒吐葡萄皮. i

[Footnotes]
  1. 喝coffee不写coffeescript,不喝coffee倒写coffeescript []

Deploying Live Fortune (Node.js) with Nginx and Monit

Here we will use Nginx to serve static resources and reverse proxy dynamic requests to the Node server. We will also use Monit to monitor the Node server and restart it automatically in case it crash. This is also the deployment I did at fortune.crash4.us.

[Nginx: Static Resources]
livefortunes use express.static to server static resources, but for better performance we will use nginx to do the job that it’s designed and built to do.

Config nginx to server all the static resources which located under /public :

server {
    listen       80;
    server_name  fortune.crash4.us;
    root         /path/to/livefortunes/public;
    index        index.html;

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
         root   html;
    }
}

Continue reading →

Live Fortune (Node.js) that do not crash

Do you enjoy reading interesting or funny sentences like below?

A nuclear war can ruin your whole day.

He who knows, does not speak. He who speaks, does not know.
— Lao Tsu

If you do, check out:
http://fortune.crash4.us/ i

For the record, this is a project built with Node.js, Express and Faye. One fortune will be pushed from server to each client every 2 mins thanks to the html5 WebSocket. Client can trigger a server push/broadcast as well ii. All the source code is available at github.

Next step is to convert this project to CoffeeScript.

[Footnotes]
  1. Trust me, it won’t crash… []
  2. open multiple browser windows or tabs to test []