<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Web Development Notes &#187; RIA Technology</title>
	<atom:link href="http://blog.eood.cn/category/ria-technology/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.eood.cn</link>
	<description>PHP, Drupal, Erlang, MySQL, Java, MongoDB, Linux, vim, ssh, screen etc</description>
	<lastBuildDate>Sat, 31 Dec 2011 12:49:49 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>JSONP Library In Plain JavaScript With Timeout</title>
		<link>http://blog.eood.cn/jsonp-library-in-plain-javascript-with-timeout</link>
		<comments>http://blog.eood.cn/jsonp-library-in-plain-javascript-with-timeout#comments</comments>
		<pubDate>Fri, 19 Aug 2011 05:27:00 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[JSONP]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/?p=1699</guid>
		<description><![CDATA[JSONP enable you to send request to other domain beyond the same domain policy. And the corss domain alternative to AJAX. JSONP is natively supported by JQuery, Zepto (alternative to JQuery for mobile usages). But When you require JSONP and DO NOT want to add the huge JQuery to your code base. This library will [...]]]></description>
			<content:encoded><![CDATA[<p>JSONP enable you to send request to other domain beyond the <a href="http://en.wikipedia.org/wiki/Same_origin_policy" target="_self">same domain policy</a>. And the corss domain alternative to AJAX.</p>
<p>JSONP is natively supported by JQuery, Zepto (alternative to JQuery for mobile usages). But When you require JSONP and DO NOT want to add the huge JQuery to your code base. This library will be useful.</p>
<pre class="prettyprint">
var JSONP = (function () {
    var counter = 0,
        head, query, key, window = this;

    function load(url) {
        var script = document.createElement('script'),
        var done = false;
        script.src = url;
        script.async = true;

        script.onload = script.onreadystatechange = function () {
            if (!done &amp;&amp; (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")) {
                done = true;
                script.onload = script.onreadystatechange = null;
                if (script &amp;&amp; script.parentNode) {
                    script.parentNode.removeChild(script);
                }
            }
        };
        if (!head) {
            head = document.getElementsByTagName('head')[0];
        }
        head.appendChild(script);
    }

    function jsonp(url, params, error, callback) {
        query = "?";
        params = params || {};
        for (key in params) {
            if (params.hasOwnProperty(key)) {
                query += encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&amp;";
            }
        }
        var jsonp = "json" + (++counter);
        window[jsonp] = function (data) {
            callback(data);
            try {
                delete window[jsonp];
            } catch (e) {}
            window[jsonp] = null;
        };

        load(url + query + "callback=" + jsonp);

        error = error ||
        function () {};

        window.setTimeout(function () {
            if (typeof window[jsonp] == "function") {

                // replace success with null callback in case the request is just very latent.
                window[jsonp] = function (data) {
                    try {
                        delete window[jsonp];
                    } catch (e) {}
                    window[jsonp] = null;
                };

                // call the error callback
                error();

                // set a longer timeout to safely clean up the unused callback.
                window.setTimeout(function () {
                    if (typeof window[jsonp] == "function") {
                        try {
                            delete window[jsonp];
                        } catch (e) {}
                        window[jsonp] = null;
                    };
                }, 120000);
            };
        }, 10000);

        return jsonp;
    }
    return {
        get: jsonp
    };
}());

/*
Example:
----------------

var url = 'http://blog.eood.cn/api';
var error = function() {alert('error');};
var success = function(data) {
        // process the data
};
JSONP.get( url, {'parm1': 'parm1_value', 'parm2': 'parm2_value'}, error, success);

*/
</pre>
<p><script type="text/javascript"><!-- google_ad_client = "ca-pub-5744751471423663"; google_ad_slot = "7076368164"; google_ad_width = 336; google_ad_height = 280; //--></script></p>
<p><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/jsonp-library-in-plain-javascript-with-timeout/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Javascript 设计模式入门</title>
		<link>http://blog.eood.cn/javascript-design-patterns</link>
		<comments>http://blog.eood.cn/javascript-design-patterns#comments</comments>
		<pubDate>Sun, 03 Apr 2011 05:04:13 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[Frontend Design]]></category>
		<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[Design patterns]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[NodeJS]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/?p=1651</guid>
		<description><![CDATA[客户端计算能力的增强，使 WEB 技术发展的天枰又开始偏向客户端运算。比如 Facebook 将模板渲染的运算放到了浏览器，浏览器先将模板下载到本地，再按需从服务器请求 JSON 格式的数据，然后在浏览器中渲染。对于提供给搜索引擎抓取的内容仍然可以在服务器端拼接完成后再输出。为了提高开发效率，可以考虑在服务器端也用 Javascript 或者其他语言拼接渲染 JSON 格式的数据和与客户端一致的模板。Mustache 就提供了这样的一种机制，并且支持大部分 WEB 语言。但是比较高效的服务器端方案仍然是用 Javascript 来写，用 NodeJS 向浏览器输出 JSON 数据和重用浏览器模板渲染代码向搜索引擎输出完整 HTML 数据。 NodeJS 和倍受推崇的 WEB 服务器 Nginx 类似，都采用 Event-driven 模型，对于单核服务器，只需要开一个进程就可以同时 serve 成千上万的客户。 不仅仅是 NodeJS, 对于 RIA 来说，支持最完善的仍然是 Javascript，基于 XUL 的客户端方案也需要 Javascript 作为开发语言，并且 Javascript 支持常见的高级特性比如 lambda，map-reduce 。 所以 Javascript 在服务器端和客户端都有很大的前景。设计模式既是解决问题的template，也是代码的组织方式。略去常见模式，仅仅涉及几个在 Javascript 中比较常用的模式： 用 prototype 的构建模式： function [...]]]></description>
			<content:encoded><![CDATA[<p>客户端计算能力的增强，使 WEB 技术发展的天枰又开始偏向客户端运算。比如 Facebook 将模板渲染的运算放到了浏览器，浏览器先将模板下载到本地，再按需从服务器请求 JSON 格式的数据，然后在浏览器中渲染。对于提供给搜索引擎抓取的内容仍然可以在服务器端拼接完成后再输出。为了提高开发效率，可以考虑在服务器端也用 Javascript 或者其他语言拼接渲染 JSON 格式的数据和与客户端一致的模板。Mustache 就提供了这样的一种机制，并且支持大部分 WEB 语言。但是比较高效的服务器端方案仍然是用 Javascript 来写，用 NodeJS 向浏览器输出 JSON 数据和重用浏览器模板渲染代码向搜索引擎输出完整 HTML 数据。</p>
<p>NodeJS 和倍受推崇的 WEB 服务器 Nginx 类似，都采用 Event-driven 模型，对于单核服务器，只需要开一个进程就可以同时 serve 成千上万的客户。</p>
<p>不仅仅是 NodeJS, 对于 RIA 来说，支持最完善的仍然是 Javascript，基于 XUL 的客户端方案也需要 Javascript 作为开发语言，并且 Javascript 支持常见的高级特性比如 lambda，map-reduce 。</p>
<p>所以 Javascript 在服务器端和客户端都有很大的前景。设计模式既是解决问题的template，也是代码的组织方式。略去常见模式，仅仅涉及几个在 Javascript 中比较常用的模式：</p>
<p>用 prototype 的构建模式：</p>
<pre class="prettyprint">
function Car(model, year, miles){
   this.model = model;
   this.year    = year;
   this.miles  = miles;
}

/*
 Note here that we are using Object.prototype.newMethod rather than
 Object.prototype so as to avoid redefining the prototype object
*/
Car.prototype.toString = function(){
		return this.model + " has done " + this.miles + " miles";
};

var civic = new Car("Honda Civic", 2009, 20000);
var mondeo = new Car("Ford Mondeo", 2010, 5000);

console.log(civic.toString());
</pre>
<p>单件模式：</p>
<pre class="prettyprint">
var Singleton =(function(){
	var instantiated;
	function init (){
		/*singleton code here*/
		return {
			publicMethod:function(){
				console.log('hello world')
			},
			publicProperty:'test'
		}
	}

	return {
		getInstance :function(){
			if (!instantiated){
				instantiated = init();
			}
			return instantiated;
		}
	}
})()

/*calling public methods is then as easy as:*/
Singleton.getInstance.publicMethod();
</pre>
<p>可以传递参数的单件模式：</p>
<pre class="prettyprint">
var SingletonTester = (function(){

  //args: an object containing arguments for the singleton
  function Singleton(args) {

   //set args variable to args passed or empty object if none provided.
    var args = args || {};
    //set the name parameter
    this.name = 'SingletonTester';
    //set the value of pointX
    this.pointX = args.pointX || 6; //get parameter from arguments or set default
    //set the value of pointY
    this.pointY = args.pointY || 10;  

  }

 //this is our instance holder
  var instance;

 //this is an emulation of static variables and methods
  var _static = {
    name: 'SingletonTester',
   //This is a method for getting an instance

   //It returns a singleton instance of a singleton object
    getInstance: function (args){
      if (instance === undefined) {
        instance = new Singleton(args);
      }
      return instance;
    }
  };
  return _static;
})();

var singletonTest = SingletonTester.getInstance({pointX: 5});
console.log(singletonTest.pointX); // outputs 5
</pre>
<p>模块模式：</p>
<pre class="prettyprint">
var someModule = (function(){

  //private attributes
  var privateVar = 5;

  //private methods
  var privateMethod = function(){
  return 'Private Test';
  };

  return {
        //public attributes
        publicVar    : 10,
        //public methods
        publicMethod : function(){
        return ' Followed By Public Test ';
         }, 

         //let's access the private members
          getData : function(){
          return privateMethod() + this.publicMethod() + privateVar;
         }
       }
    })(); //the parens here cause the anonymous function to execute and return

someModule.getData();
</pre>
<p>观察者模式：</p>
<p>它适合pub-sub进行信息分发</p>
<pre class="prettyprint">
function Observer(){
    this.functions = [];
}

Observer.prototype = {
    subscribe : function(fn) {
        this.functions.push(fn);
    },

    unsubscribe : function(fn) {
        this.functions = this.functions.filter(
            function(el) {
                if ( el !== fn ) {
                    return el;
                }
            }
        );
    },

    update : function(o, thisObj) {
        var scope = thisObj || window;
        this.functions.forEach(
            function(el) {
                el.call(scope, o);
            }
        );
    }
};
</pre>
<pre class="prettyprint">
/*
    * Publishers are in charge of "publishing" eg: Creating the Event
    * They're also in charge of "notifying" (firing the event)
*/
var obs = new Observer;
obs.update('here is some test information');

/*
    * Subscribers basically... "subscribe" (or listen)
    * And once they've been "notified" their callback functions are invoked
*/
var fn = function() {
    // my callback stuff
};
obs.subscribe(fn);

/*
    * Unsubscribe if you no longer wish to be notified
*/
obs.unsubscribe(fn);
</pre>
<p>JQuery 中的遍历：</p>
<pre class="prettyprint">
  $.each(function(){});
  $('.items').each(function(){});
</pre>
<p>更多有用资源</p>
<p>http://www.hunlock.com/blogs/Functional_Javascript</p>
<p>http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#designpatternsjavascript</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/javascript-design-patterns/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Backbone JS框架指南</title>
		<link>http://blog.eood.cn/backbone</link>
		<comments>http://blog.eood.cn/backbone#comments</comments>
		<pubDate>Sun, 13 Mar 2011 03:43:31 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[Frontend Design]]></category>
		<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[Backbone]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[MVC]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/?p=1625</guid>
		<description><![CDATA[Backbone 是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的 template 库。而是和这些结合起来构建复杂的 web 前端交互应用。 如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。 Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。 Models 用来创建数据，校验数据，存储数据到服务器端， Collections 包含你创建的 functions ，Views 用来展示数据。 Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 这个 change 事件，进行重绘。 事件的绑定和触发 以下是object 绑定 [...]]]></description>
			<content:encoded><![CDATA[<p>Backbone 是一个前端 JS 代码 MVC 框架，被著名的 37signals 用来构建他们的移动客户端。它不可取代 Jquery，不可取代现有的 template 库。而是和这些结合起来构建复杂的 web 前端交互应用。<img class="alignright size-medium wp-image-1626" title="backbone" src="http://blog.eood.cn/wp-content/uploads/2011/03/backbone-300x161.png" alt="" width="300" height="161" /></p>
<p>如果项目涉及大量的 javascript 代码，实现很多复杂的前端交互功能，首先你会想到把数据和展示分离。使用 Jquery 的 selector 和 callback 可以轻松做到这点。但是对于富客户端的WEB应用大量代码的结构化组织非常必要。</p>
<p>Backbone 就提供了 javascript 代码的组织的功能。Backbone 主要包括 models, collections, views 和 events, controller 。</p>
<p>Models 用来创建数据，校验数据，存储数据到服务器端， Collections 包含你创建的 functions ，Views 用来展示数据。</p>
<p>Models 还可以绑定事件。比如用户动作变化触发 models 的 change 事件，所有展示此model 数据的 views 都会接收到 这个 change 事件，进行重绘。</p>
<p><strong>事件的绑定和触发</strong></p>
<p>以下是object 绑定 alert 事件和匿名回调函数的代码例子，object 之后 触发 alert 事件，并且传入参数 &#8220;an event&#8221;</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">var object = <span class="br0">&#123;</span><span class="br0">&#125;</span>;
&nbsp;
_.extend<span class="br0">&#40;</span>object, Backbone.Events<span class="br0">&#41;</span>;
&nbsp;
object.bind<span class="br0">&#40;</span>&quot;alert&quot;, function<span class="br0">&#40;</span>msg<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  alert<span class="br0">&#40;</span>&quot;Triggered &quot; + msg<span class="br0">&#41;</span>;
<span class="br0">&#125;</span><span class="br0">&#41;</span>;
&nbsp;
object.trigger<span class="br0">&#40;</span>&quot;alert&quot;, &quot;an event&quot;<span class="br0">&#41;</span>;</pre></div></div>

<p>假如你的网页上事件很多也可以用proxy的方式来分发所有事件：</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">proxy.bind<span class="br0">&#40;</span>&quot;all&quot;, function<span class="br0">&#40;</span>eventName<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  object.trigger<span class="br0">&#40;</span>eventName<span class="br0">&#41;</span>;
<span class="br0">&#125;</span><span class="br0">&#41;</span>;</pre></div></div>

<p><strong>Backbone 的 Models 是应用的核心</strong></p>
<p>他包含了数据对象的属性，操作数据对象的函数。还实现和服务端交互的动作。</p>
<p>以下是定时从服务器端更新 channel 的数据：</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">// Poll every <span style="">10</span> seconds to keep the channel model up-to-date.
setInterval<span class="br0">&#40;</span>function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
  channel.fetch<span class="br0">&#40;</span><span class="br0">&#41;</span>;
<span class="br0">&#125;</span>, <span style="">10000</span><span class="br0">&#41;</span>;</pre></div></div>

<p>以下是存储 book 的数据，这里通过重载 sync 函数，只让数据 alert 出来，sync 中的默认触发事件包括 fetch save refresh</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">Backbone.sync = function<span class="br0">&#40;</span>method, model<span class="br0">&#41;</span> <span class="br0">&#123;</span>
  alert<span class="br0">&#40;</span>method + &quot;: &quot; + JSON.stringify<span class="br0">&#40;</span>model<span class="br0">&#41;</span><span class="br0">&#41;</span>;
<span class="br0">&#125;</span>;
&nbsp;
var book = new Backbone.Model<span class="br0">&#40;</span><span class="br0">&#123;</span>
  title: &quot;The Rough Riders&quot;,
  author: &quot;Theodore Roosevelt&quot;
<span class="br0">&#125;</span><span class="br0">&#41;</span>;
&nbsp;
book.save<span class="br0">&#40;</span><span class="br0">&#41;</span>;</pre></div></div>

<p><strong>Backbone 的 Controller 用来对 URL 和事件进行绑定</strong></p>
<p>以下下例子中，分别将不同的以#开头的 URL 片段 绑定到不同的函数，实现服务器端 MVC 模型中的 router 一样的功能</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">var Workspace = Backbone.Controller.extend<span class="br0">&#40;</span><span class="br0">&#123;</span>
&nbsp;
  routes: <span class="br0">&#123;</span>
    &quot;help&quot;:                 &quot;help&quot;,    // #help
    &quot;search/:query&quot;:        &quot;search&quot;,  // #search/kiwis
    &quot;search/:query/p:page&quot;: &quot;search&quot;   // #search/kiwis/p7
  <span class="br0">&#125;</span>,
&nbsp;
  help: function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
  <span class="br0">&#125;</span>,
&nbsp;
  search: function<span class="br0">&#40;</span>query, page<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    ...
  <span class="br0">&#125;</span>
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span>;</pre></div></div>

<p>值得提出的是 Backbone 的 router 也支持正则表达式的匹配</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">initialize: function<span class="br0">&#40;</span>options<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
  // Matches #page/<span style="">10</span>, passing &quot;<span style="">10</span>&quot;
  this.route<span class="br0">&#40;</span>&quot;page/:number&quot;, &quot;page&quot;, function<span class="br0">&#40;</span>number<span class="br0">&#41;</span><span class="br0">&#123;</span> ... <span class="br0">&#125;</span><span class="br0">&#41;</span>;
&nbsp;
  // Matches /<span style="">117</span>-a/b/c/open, passing &quot;<span style="">117</span>-a/b/c&quot;
  this.route<span class="br0">&#40;</span>/^<span class="br0">&#40;</span>.*?<span class="br0">&#41;</span>\/open$/, &quot;open&quot;, function<span class="br0">&#40;</span>id<span class="br0">&#41;</span><span class="br0">&#123;</span> ... <span class="br0">&#125;</span><span class="br0">&#41;</span>;
&nbsp;
<span class="br0">&#125;</span></pre></div></div>

<p><strong>Backbone 的 Sync 默认通过调用Jquery的ajax方法来实现和服务器端的交互，实现数据的 CURD</strong></p>
<p>比如 fetch 方法会触发 read 事件</p>
<p><strong>Backbone 的 Views 用来接收用户的操作和修改 Model 的数据 ，另外通过 render 来展示数据</strong></p>
<p>默认 render 并没有实现，你可以用 <a href="http://github.com/janl/mustache.js">Mustache.js</a> 或者 <a href="http://documentcloud.github.com/underscore/">Underscore.js</a> 来实现。</p>
<p>以下是接收用户操作的代码例子：</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">var DocumentView = Backbone.View.extend<span class="br0">&#40;</span><span class="br0">&#123;</span>
&nbsp;
  events: <span class="br0">&#123;</span>
    &quot;dblclick&quot;                : &quot;open&quot;,
    &quot;click .icon.doc&quot;         : &quot;select&quot;,
    &quot;contextmenu .icon.doc&quot;   : &quot;showMenu&quot;,
    &quot;click .show_notes&quot;       : &quot;toggleNotes&quot;,
    &quot;click .title .lock&quot;      : &quot;editAccessLevel&quot;,
    &quot;mouseover .title .date&quot;  : &quot;showTooltip&quot;
  <span class="br0">&#125;</span>,
&nbsp;
  render: function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    $<span class="br0">&#40;</span>this.el<span class="br0">&#41;</span>.html<span class="br0">&#40;</span>this.template<span class="br0">&#40;</span>this.model.toJSON<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;
    return this;
  <span class="br0">&#125;</span>,
&nbsp;
  open: function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    window.open<span class="br0">&#40;</span>this.model.get<span class="br0">&#40;</span>&quot;viewer_url&quot;<span class="br0">&#41;</span><span class="br0">&#41;</span>;
  <span class="br0">&#125;</span>,
&nbsp;
  select: function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    this.model.set<span class="br0">&#40;</span><span class="br0">&#123;</span>selected: true<span class="br0">&#125;</span><span class="br0">&#41;</span>;
  <span class="br0">&#125;</span>,
&nbsp;
  ...
&nbsp;
<span class="br0">&#125;</span><span class="br0">&#41;</span>;</pre></div></div>

<p>以下是数据渲染 render 的例子</p>

<div class="wp_syntax"><div class="code"><pre class="" style="font-family:monospace;">var Bookmark = Backbone.View.extend<span class="br0">&#40;</span><span class="br0">&#123;</span>
  render: function<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    $<span class="br0">&#40;</span>this.el<span class="br0">&#41;</span>.html<span class="br0">&#40;</span>this.template<span class="br0">&#40;</span>this.model.toJSON<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>;
    return this;
  <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span>;</pre></div></div>

<p><strong>参考</strong></p>
<p><a href="http://documentcloud.github.com/backbone/">http://documentcloud.github.com/backbone/</a></p>
<p><a href="http://documentcloud.github.com/backbone/examples/todos/index.html">http://documentcloud.github.com/backbone/examples/todos/index.html</a></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/backbone/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Where to find flash tutorials</title>
		<link>http://blog.eood.cn/where-to-find-flash-tutorials</link>
		<comments>http://blog.eood.cn/where-to-find-flash-tutorials#comments</comments>
		<pubDate>Mon, 05 Apr 2010 07:06:45 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[tutorials]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/?p=979</guid>
		<description><![CDATA[When you want to learn something new, you should always find some tutorials firstly. Recently, flash technology is very popular. Because lots of things can be easily done with flash technology. Flash games, and small applications in facebook attracted lots of people. If you are a flash beginner, you can find flash tutorials in the [...]]]></description>
			<content:encoded><![CDATA[<p>When you want to learn something new, you should always find some tutorials firstly. Recently, flash technology is very popular. Because lots of things can be easily done with flash technology. Flash games, and small applications in facebook attracted lots of people.</p>
<p>If you are a flash beginner, you can find flash tutorials in the following sites:</p>
<p><a rel="nofollow" href="http://www.kirupa.com/" target="_blank">http://www.kirupa.com</a><br />
<a rel="nofollow" href="http://www.actionscript.org/resources/categories/Tutorials/" target="_blank">http://www.actionscript.org/resourc&#8230;ries/Tutorials/</a><br />
<a rel="nofollow" href="http://www.gotoandlearn.com/" target="_blank">http://www.gotoandlearn.com</a><br />
<a rel="nofollow" href="http://www.flashkit.com/" target="_blank">http://www.flashkit.com</a><br />
<a rel="nofollow" href="http://www.senocular.com/" target="_blank">http://www.senocular.com</a><br />
<a rel="nofollow" href="http://www.echoecho.com/flash.htm" target="_blank">http://www.echoecho.com/flash.htm</a><br />
<a rel="nofollow" href="http://www.tutorialized.com/tutorials/Flash/1" target="_blank">http://www.tutorialized.com/tutorials/Flash/1</a><br />
<a rel="nofollow" href="http://www.video-animation.com/flash8_001.shtml" target="_blank">http://www.video-animation.com/flash8_001.shtml</a><br />
<a rel="nofollow" href="http://tutorialoutpost.com/tutorials/flash/" target="_blank">http://tutorialoutpost.com/tutorials/flash/</a><br />
<a rel="nofollow" href="http://www.flashjester.com/index.php" target="_blank">http://www.flashjester.com/index.php</a><br />
<a rel="nofollow" href="http://www.4nothing.net/as/as3reference/Date.html#day" target="_blank">http://www.4nothing.net/as/as3reference/Date.html#day</a><br />
<a rel="nofollow" href="http://www.actionscript.net/" target="_blank">http://www.actionscript.net</a><br />
<a rel="nofollow" href="http://www.developingwebs.net/flash/" target="_blank">http://www.developingwebs.net/flash/</a><br />
<a rel="nofollow" href="http://www.w3schools.com/flash/default.asp" target="_blank">http://www.w3schools.com/flash/default.asp</a> &#8211; W3C<br />
<a rel="nofollow" href="http://www.good-tutorials.com/" target="_blank">http://www.good-tutorials.com/</a><a rel="nofollow" href="http://www.video-animation.com/flash_01.shtml" target="_blank"><br />
http://www.video-animation.com/flash_01.shtml</a><a rel="nofollow" href="http://www.flashdesignerzone.com/tutorials/" target="_blank"></p>
<p>http://www.flashdesignerzone.com/tutorials/</a></p>
<p><a rel="nofollow" href="http://feeds.feedburner.com/LearnFlash" target="_blank">http://feeds.feedburner.com/LearnFlash</a></p>
<p>But if you want to be a flash expert, there is a long road to go.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/where-to-find-flash-tutorials/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Convert RGB Color to HSV Color</title>
		<link>http://blog.eood.cn/convert-rgb-color-to-hsv-color</link>
		<comments>http://blog.eood.cn/convert-rgb-color-to-hsv-color#comments</comments>
		<pubDate>Sat, 13 Mar 2010 05:02:12 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[3d]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[game]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/?p=942</guid>
		<description><![CDATA[In the RGB model, The red, green, and blue components of a color are constrained to fall between zero and some maximum value. When all components are at their maximum amount, white light is produced. If all components have an equal value less than 100%, a gray tone is produced. The colors produced by the [...]]]></description>
			<content:encoded><![CDATA[<p>In the <strong>RGB</strong> model, The red, green, and blue components of a color are constrained to fall between zero and some  maximum value.  When all components are at their maximum amount, white light is produced.   If all components have an equal value less than 100%, a gray tone is produced.   The colors produced by the RGB model are very naturally arranged in a cube: if the red, green,  and blue components of a color are plotted along the x, y, and z axes respectively,  then a specific color can be located by its coordinates in a three dimensional space.</p>
<p><img class="aligncenter" src="http://www.flashandmath.com/advanced/color/RGBcube.jpg" alt="" width="250" height="250" /></p>
<p><em>This RGB cube is very straightforward, but its geometry does not reveal the &#8220;colorfulness&#8221; or &#8220;darkness&#8221; of a color in a natural way. </em>An alternate way to describe colors is with the hue, saturation and value  (<strong>HSV</strong>) model.  This model is usually geometrically described as a cone, where colors toward the point of  the cone are dark (low value), and colors further out are brighter (higher value).   Colors toward the central axis of the cone are grayer (lower saturation) than the colors located  towards the outer surface of the cone (higher saturation).  (We should mention, however, that  saturation does not entirely coincide with human perception of  &#8220;colorfulness.&#8221;)  Rotating around  the axis of the cone changes the hue of the color.  Hue can be thought of as the main descriptor  of a color independent of its intensity or grayness.</p>
<p><img class="aligncenter" src="http://www.flashandmath.com/advanced/color/HSV_cone_smaller.jpg" alt="" width="280" height="210" /></p>
<p>Convert RGB to HSV</p>
<p>Max = maximum {R,G,B}</p>
<p>Min = minimum {R,G,B}</p>
<p>Value = Max</p>
<p>Saturation = (Max &#8211; Min) / Value</p>
<p>If Max = R and G ≥ B:</p>
<p>Hue = 60*(G &#8211; B)/(Max &#8211; Min)</p>
<p>If Max = R and B &gt; G:</p>
<p>Hue = 300 + 60*(B &#8211; G)/(Max &#8211; Min)</p>
<p>If Max = G:</p>
<p>Hue = 120 + 60*(B &#8211; R)/(Max &#8211; Min)</p>
<p>If Max = B:</p>
<p>Hue = 240 + 60*(R &#8211; G)/(Max &#8211; Min)</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/convert-rgb-color-to-hsv-color/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>FLEX/FLASH/RIA</title>
		<link>http://blog.eood.cn/flex-flash-ria</link>
		<comments>http://blog.eood.cn/flex-flash-ria#comments</comments>
		<pubDate>Sun, 01 Feb 2009 21:02:30 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[flash]]></category>
		<category><![CDATA[flex]]></category>
		<category><![CDATA[ria]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/articles/221</guid>
		<description><![CDATA[标记]]></description>
			<content:encoded><![CDATA[<p>标记</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/flex-flash-ria/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>富交互技术</title>
		<link>http://blog.eood.cn/rich-interact</link>
		<comments>http://blog.eood.cn/rich-interact#comments</comments>
		<pubDate>Mon, 29 Dec 2008 23:40:46 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[ria]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/articles/188</guid>
		<description><![CDATA[标记 touchless http://www.codeplex.com/touchless casio全息 &#160;]]></description>
			<content:encoded><![CDATA[<p>标记</p>
<p>touchless</p>
<p><a href="http://www.codeplex.com/touchless">http://www.codeplex.com/touchless</a></p>
<p>casio全息</p>
<p>&nbsp;</p>
<p><embed src="http://images.soapbox.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&#038;flvfc=10001&#038;v=a89a217b-fc38-4a6c-87f8-ab59a2028391"></embed></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/rich-interact/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery初探</title>
		<link>http://blog.eood.cn/jquery%e5%88%9d%e6%8e%a2</link>
		<comments>http://blog.eood.cn/jquery%e5%88%9d%e6%8e%a2#comments</comments>
		<pubDate>Tue, 16 Dec 2008 18:17:43 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/articles/176</guid>
		<description><![CDATA[jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。 jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。 jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。 jQuery支持CSS1-CSS3,以及基本的xPath jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+]]></description>
			<content:encoded><![CDATA[<p>jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。</p>
<p>jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。</p>
<p>jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有<font color="#ff0000">15K</font>左右。</p>
<p>jQuery支持CSS1-CSS3,以及基本的xPath</p>
<p>jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/jquery%e5%88%9d%e6%8e%a2/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>flash广告引导方法</title>
		<link>http://blog.eood.cn/flash%e5%b9%bf%e5%91%8a%e5%bc%95%e5%af%bc%e6%96%b9%e6%b3%95</link>
		<comments>http://blog.eood.cn/flash%e5%b9%bf%e5%91%8a%e5%bc%95%e5%af%bc%e6%96%b9%e6%b3%95#comments</comments>
		<pubDate>Sun, 20 Jul 2008 21:48:31 +0000</pubDate>
		<dc:creator>Bruce Dou</dc:creator>
				<category><![CDATA[RIA Technology]]></category>

		<guid isPermaLink="false">http://blog.eood.cn/articles/166</guid>
		<description><![CDATA[&#160; 在最高一层做一个与舞台等大小的透明MC&#8230;&#8230; 插入元件 影片剪辑 然后加入on(release){getURL(&#34;http://abc.com&#34;,&#34;_blank&#34;); onClipEvent (mouseUp) { getURL(&#34;http://abc.com&#34;,&#34;_blank&#34;); } loadMovie(&#8216;CENTOS.jpg&#8217;,0);]]></description>
			<content:encoded><![CDATA[<p>&nbsp;</p>
<p>在最高一层做一个与舞台等大小的透明MC&hellip;&hellip;<br />
插入元件 影片剪辑<br />
然后加入on(release){getURL(&quot;<a href="http://abc.com&quot;,&quot;_blank">http://abc.com&quot;,&quot;_blank</a>&quot;);</p>
<p>onClipEvent (mouseUp) {<br />
getURL(&quot;<a href="http://abc.com&quot;,&quot;_blank">http://abc.com&quot;,&quot;_blank</a>&quot;);<br />
}<br />
loadMovie(&#8216;CENTOS.jpg&#8217;,0);</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.eood.cn/flash%e5%b9%bf%e5%91%8a%e5%bc%95%e5%af%bc%e6%96%b9%e6%b3%95/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Dynamic page generated in 0.262 seconds. -->
<!-- File not cached! Super Cache Couldn't write to: wp-content/cache/wp-cache-72694a7e486cd941e5170d291d508663.html -->

