<?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>岁月如歌 &#187; prototype</title>
	<atom:link href="http://lifesinger.org/blog/tag/prototype/feed/" rel="self" type="application/rss+xml" />
	<link>http://lifesinger.org/blog</link>
	<description>关注用户体验、前端开发，记录生活点滴、岁月足迹。</description>
	<lastBuildDate>Wed, 28 Jul 2010 00:40:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Study jQuery in a Simplified Way</title>
		<link>http://lifesinger.org/blog/2010/01/study-jquery-in-a-simplified-way/</link>
		<comments>http://lifesinger.org/blog/2010/01/study-jquery-in-a-simplified-way/#comments</comments>
		<pubDate>Mon, 25 Jan 2010 15:24:27 +0000</pubDate>
		<dc:creator>lifesinger</dc:creator>
				<category><![CDATA[开发]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[prototype]]></category>
		<category><![CDATA[push]]></category>
		<category><![CDATA[study]]></category>

		<guid isPermaLink="false">http://lifesinger.org/blog/?p=2419</guid>
		<description><![CDATA[学习复杂代码的最好方法是简化： (function(win, undefined) { var jQuery = function(selector, context) { // jQuery 对象就是 init 函数的一个实例 return new jQuery.fn.init(selector, context); }, document = window.document, push = Array.prototype.push, slice = Array.prototype.slice; jQuery.fn = jQuery.prototype = { init: function(selector, context) { // 选择器 var ret = (context &#124;&#124; document).querySelectorAll(selector); // 转换为普通数组 ret = slice.call(ret); // jQuery API 的奥妙全在下面这句，将选择器获取的元素添加到 [...]]]></description>
			<content:encoded><![CDATA[<p>学习复杂代码的最好方法是简化：</p>
<pre>
(function(win, undefined) {
    var jQuery = function(selector, context) {
            // jQuery 对象就是 init 函数的一个实例
            return new jQuery.fn.init(selector, context);
        },
        document = window.document,
        push = Array.prototype.push,
        slice = Array.prototype.slice;

    jQuery.fn = jQuery.prototype = {
        init: function(selector, context) {
            // 选择器
            var ret = (context || document).querySelectorAll(selector);

            // 转换为普通数组
            ret = slice.call(ret);

            // jQuery API 的奥妙全在下面这句，将选择器获取的元素添加到 jQuery 对象中
            // 使用 push, 速度飞快（当年担心大量 jQuery 对象实例化的性能问题，根本就不是问题）
            // 使用 push, 还能自动更新 length 属性
            push.apply(this, ret);

            return this;
        },
        length: 0,
        // 实例方法
        attr: function(name, value) {
            return access(this, name, value, jQuery.attr);
        }
    };

    // 这句保证了 init 方法里的 this 拥有 jQuery 实例的方法
    jQuery.fn.init.prototype = jQuery.fn;

    // 静态方法
    jQuery.attr = function(elem, name, value) {
        if (value === undefined) {
            return elem.getAttribute(name);
        }
        return elem.setAttribute(name, value);
    };

    // 神奇的 access, 在实例方法和静态方法中建立了一座桥梁
    // 数组批次操作的实现也在这里
    function access(elems, key, value, fn) {
        var length = elems.length;

        if (value !== undefined) {
            for (var i = 0; i < length; i++) {
                fn(elems[i], key, value);
            }
            return elems;
        }

        return length ? fn(elems[0], key) : null;
    }

    win.$ = win.jQuery = jQuery;
})(window);
</pre>
<p>测试页面：<a href="http://lifesinger.googlecode.com/svn/trunk/lab/2010/study-jquery-in-simplified-way.html">study-jquery-in-simplified-way.html</a> （请在非 IE 浏览器下运行）</p>
<p>源码：<a href="http://github.com/jquery/jquery/blob/master/src/core.js">jquery~core.js</a></p>
]]></content:encoded>
			<wfw:commentRss>http://lifesinger.org/blog/2010/01/study-jquery-in-a-simplified-way/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
	</channel>
</rss>
