<?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; 单体</title>
	<atom:link href="http://www.ilovejs.net/archives/tag/%e5%8d%95%e4%bd%93/feed" rel="self" type="application/rss+xml" />
	<link>http://www.ilovejs.net</link>
	<description>到了创造为主的阶段，不忘继续学习</description>
	<lastBuildDate>Thu, 15 Dec 2011 06:18:39 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>惰性实例化</title>
		<link>http://www.ilovejs.net/archives/135</link>
		<comments>http://www.ilovejs.net/archives/135#comments</comments>
		<pubDate>Sat, 02 Jan 2010 17:39:38 +0000</pubDate>
		<dc:creator>Supersha</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[单体]]></category>

		<guid isPermaLink="false">http://www.ilovejs.net/?p=135</guid>
		<description><![CDATA[在这里介绍一种非常有用的类实例化技术 &#8211;惰性实例化。这种方法的原理就是：当需要使用到该类的时候才实例化它，而不是在脚本加载的时候将它实例化，加入内存里储存起来。这对于必须加载大量数据的单体的时候非常有用，在一定程度上能提高脚本的渲染速度。 首先我们来声明一个简单的单体： [javascript] var Single = (function(){ var website = &#34;http://www.ilovejs.net&#34;; var showWebsite = function(){ return website; } return &#8230; <a href="http://www.ilovejs.net/archives/135" class="more-link">了解更多</a>]]></description>
			<content:encoded><![CDATA[<p>
在这里介绍一种非常有用的类实例化技术 &#8211;惰性实例化。这种方法的原理就是：当需要使用到该类的时候才实例化它，而不是在脚本加载的时候将它实例化，加入内存里储存起来。这对于必须加载大量数据的单体的时候非常有用，在一定程度上能提高脚本的渲染速度。
</p>
<p>首先我们来声明一个简单的单体：<br />
[javascript]<br />
var Single = (function(){<br />
    var website = &quot;http://www.ilovejs.net&quot;;<br />
    var showWebsite = function(){<br />
        return website;<br />
    }<br />
    return {<br />
        website: website,<br />
        showWebsite: showWebsite<br />
    }<br />
})();<br />
[/javascript]<br />
上面是一个简单的声明一个单体的模式，下面我们将它转化惰性实例化的方式：<br />
[javascript]<br />
var Single = (function(){<br />
    //声明一个unique变量来判断是否已经实例化<br />
    var unique = null;<br />
    //将上面的单体都放入到一个constructor函数里<br />
    function constructor(){<br />
        var website = &quot;http://www.ilovejs.net&quot;;<br />
        var showWebsite = function(){<br />
            return website;<br />
        }<br />
        return {<br />
            website: website,<br />
            showWebsite: showWebsite<br />
        }<br />
    }<br />
    return {<br />
        getInstrance: function(){<br />
            //这是实现惰性实例化的关键，判断是否已经实例化<br />
            //当下次调用getInstrance的时候就可以直接使用unique内储存的单体对象<br />
            //这也从而实现了只实例化一次的作用<br />
            if (unique) { return unique; }<br />
            else {<br />
               unique=constructor();<br />
               return unique;<br />
            }<br />
        }<br />
    }<br />
})();</p>
<p>//使用方式：<br />
alert(Single.getInstrance().showWebsite());<br />
[/javascript]<br />
上面是我参照《<a  href="http://product.dangdang.com/product.aspx?product_id=20511558">Javascript设计模式</a>》里的一段代码，下面我将它改造一下，加入Lazy Definition Pattern：<br />
[javascript]<br />
var Single = (function(){<br />
    var unique = null;<br />
    function constructor(){<br />
        var website = &quot;http://www.ilovejs.net&quot;;<br />
        var showWebsite = function(){<br />
            return website;<br />
        }<br />
        return {<br />
            website: website,<br />
            showWebsite: showWebsite<br />
        }<br />
    }<br />
    return {<br />
        getInstrance: function(){<br />
            if (unique) {<br />
                //show一下Lazy Definition Pattern<br />
                this.getInstrance = function(){<br />
                    return unique;<br />
                }<br />
                return unique;<br />
            }<br />
            else {<br />
                unique=constructor();<br />
                return unique;<br />
            }<br />
        },<br />
        showWebsite: function(){<br />
            //可以直接调用showWebsite，而无需在调用方法的时候通过一个getInstrance的中间函数<br />
            return this.getInstrance().showWebsite();<br />
        }<br />
    }<br />
})();</p>
<p>//使用方式：<br />
alert(Single.showWebsite());<br />
[/javascript]<br />
上面改造过后的单例会不会雅观多了呢。:)  上面使用的是单体来说明惰性实例化的过程，下面使用函数类的方式来说明一下：<br />
<span id="more-135"></span><br />
[javascript]<br />
var Single = (function(){<br />
    var unique = null;<br />
    function constructor(){<br />
        var website = &quot;http://www.ilovejs.net&quot;;<br />
        var showWebsite = function(){<br />
            return website;<br />
        }<br />
        //返回一个类<br />
        return function(){<br />
            this.website = website;<br />
            this.showWebsite = showWebsite;<br />
        }<br />
    }<br />
    return {<br />
        getInstrance: function(){<br />
            if (unique) {<br />
                //show一下Lazy Definition Pattern<br />
                this.getInstrance = function(){<br />
                    return unique;<br />
                }<br />
                return unique;<br />
            }<br />
            else {<br />
                //注意需要两个new的过程<br />
                unique = new new constructor();<br />
                return unique;<br />
            }<br />
        },<br />
        showWebsite: function(){<br />
            //可以直接调用showWebsite，而无需在调用方法的时候通过一个getInstrance的中间函数<br />
            return this.getInstrance().showWebsite();<br />
        }<br />
    }<br />
})();<br />
[/javascript]</p>
<p>
使用类的方式则需要两个new的过程，这个看起来似乎不是很爽，可是加上Lazy Definition技巧，这个过程也就只需要执行一遍而已啦，在性能上也还是跟单体差不多的，就看是怎么去根据需求而应用不同的模式了。
</p>
<p>当然了，如果看到两个new放在一起来实例化确实不爽，还是可以将另外一个new放到constructor函数里的：<br />
[javascript]<br />
function constructor(){<br />
    var website = &quot;http://www.ilovejs.net&quot;;<br />
    var showWebsite = function(){<br />
        return website;<br />
    }<br />
    //返回一个实例化的实例对象<br />
    return new function(){<br />
        this.website = website;<br />
        this.showWebsite = showWebsite;<br />
    }<br />
}<br />
[/javascript]</p>
]]></content:encoded>
			<wfw:commentRss>http://www.ilovejs.net/archives/135/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

