atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[博客 SPRABBIT 超科学兔耳中队]]></title>
  <link href="http://blog.sprabbit.com/atom.xml" rel="self"/>
  <link href="http://blog.sprabbit.com/"/>
  <updated>2014-09-03T16:30:19+08:00</updated>
  <id>http://blog.sprabbit.com/</id>
  <author>
    <name><![CDATA[火雾宗师]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[IOS Safari 浏览器的点击事件问题]]></title>
    <link href="http://blog.sprabbit.com/blog/2014/09/03/onclick-ios-safari/"/>
    <updated>2014-09-03T16:11:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2014/09/03/onclick-ios-safari</id>
    <content type="html"><![CDATA[<p>今天碰到一个问题，在IOS的Safari浏览器中，一个网页的div元素在绑定了click事件后点击时有变暗的闪烁。在其他浏览器均无出现此现象，即使是桌面的Safari也没有。</p>

<p>我于是清空了click事件中的所有代码，仍然会出现此状况，但是直接去掉时间绑定则不会变暗，于是确定是因为绑定click事件引起的变暗。</p>

<p>后面我又在事件处理中写了个alert()，发现在提示框弹出的时候，那个div已经变暗了，也就是说在处理事件之前，浏览器已经给div附加了变暗效果。那基本上可以确定是IOS Safari的默认样式效果了。</p>

<p>于是StackOverflow了一下问题迎刃而解：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="nt">html</span> <span class="p">{</span>
</span><span class='line'>  <span class="o">-</span><span class="n">webkit</span><span class="o">-</span><span class="n">tap</span><span class="o">-</span><span class="n">highlight</span><span class="o">-</span><span class="k">color</span><span class="o">:</span><span class="k">transparent</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>参考：<a href="http://stackoverflow.com/questions/2355154/iphone-darkens-div-on-click">http://stackoverflow.com/questions/2355154/iphone-darkens-div-on-click</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Javascript备忘]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/22/javascript-memo-1/"/>
    <updated>2013-08-22T20:21:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/22/javascript-memo-1</id>
    <content type="html"><![CDATA[<p>这个系列只是一个备忘录，主要是讲述平时编程遇到的一些奇怪的问题。
本来标题叫做Javascript奇技淫巧系列，但是现在我又被掉往服务端开发了，所以这个系列可能会不再更新，于是改回Javascript备忘。
其实这种奇怪的问题一般都出在IE上，所以重点就放在IE上了。</p>

<p>这次的主题是图片拖拽的问题，主要情景有几种，第一种是可以在网页上面拖拽的图片，另一种是在可拖动的元素下面有一张图。
当然还有一种是浏览器默认的图片拖拽，使用浏览器默认的图片拖拽可以直接将图片拖出浏览器，在新网页中打开，或者拖到其他软件中处理。
但是，往往我们都不希望出现默认的情况，尤其是想制造出前面两种效果的时候。</p>

<!--more-->


<h2>可以在网页上面拖拽的图片</h2>

<p>下面这里有一个例子:</p>

<div class="photo">
    <img class="photo_drag" src="http://blog.sprabbit.com/images/jsmemo/enako.jpg" alt="enako" />
</div>


<p>点击图片可以拖动，如果你在IE之外支持canvas的浏览器中打开，还会有旋转的效果。
但是，如果只添加了拖动相关的代码的话，一开始会是下面这样：</p>

<div class="photo">
    <img src="http://blog.sprabbit.com/images/jsmemo/enako.jpg" alt="enako" />
</div>


<p>没错，就跟没添加没什么区别（实际上我懒得再写一份没做处理的javascript了，所以上面这个确实没添加-_-|||，嘛效果是一样的）。</p>

<p>好了，区别在于前者在处理在图片上的<code>mousedown</code>事件时，做了如下操作:</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span class='line'><span class="nx">e</span><span class="p">.</span><span class="nx">stopPropagation</span><span class="p">();</span>
</span></code></pre></td></tr></table></div></figure>


<p><code>e</code>是传进jQuery事件处理函数的jQuery事件参数，前者阻止了浏览器使用默认方法对事件的处理，后者阻止事件冒泡。
于是事件传递到此结束，浏览器也就不会产生拖拽图片的操作。
其他浏览器事件都支持preventDefault()方法，IE是比较奇淫的，通过返回值来判断是否执行默认操作。
所以jQuery事件的preventDefault()方法类似下面：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">originalEvent</span><span class="p">;</span>
</span><span class='line'>
</span><span class='line'><span class="k">this</span><span class="p">.</span><span class="nx">isDefaultPrevented</span> <span class="o">=</span> <span class="nx">returnTrue</span><span class="p">;</span>
</span><span class='line'><span class="k">if</span> <span class="p">(</span> <span class="o">!</span><span class="nx">e</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="k">return</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// If preventDefault exists, run it on the original event</span>
</span><span class='line'><span class="k">if</span> <span class="p">(</span> <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span> <span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">e</span><span class="p">.</span><span class="nx">preventDefault</span><span class="p">();</span>
</span><span class='line'>
</span><span class='line'><span class="c1">// Support: IE</span>
</span><span class='line'><span class="c1">// Otherwise set the returnValue property of the original event to false</span>
</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">e</span><span class="p">.</span><span class="nx">returnValue</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>而停止冒泡基本就是方法名不一样了。</p>

<h2>可以在图片上面拖拽的元素</h2>

<p>上面的解决方案可能很多人都知道。
不过在图片上拖拽元素这个可能就比较少实现。
一个比较常见的应用就是截图插件：</p>

<div id="photo">
    <img id="scene" src="http://blog.sprabbit.com/images/jsmemo/scene.jpg" alt="scene"/> 
</div>


<p>如果你想做出来选中内容跟未选中内容表现得不一样的效果，如上面的模糊与清晰的差别，那么很幸运，你将不会遇到奇怪的问题。
一旦你选择做出下面这种没有差别的效果，那就跪了，在IE你几乎无法移动那个小框（点小框的边框就可以）。</p>

<div id="photo2">
    <img id="scene2" src="http://blog.sprabbit.com/images/jsmemo/scene.jpg" alt="scene"/> 
</div>


<p>一开始我百思不得其解，因为点选框内，却产生了默认拖拽图片的操作，于是按上面的方法来修改onmouse事件，却无效。
最令人想不明白的是，明明小框显示在图片之上，为什么图片反而拦截到了点击事件？</p>

<p>其实答案却非常简单，只要仔细想想为什么点小框的边框就可以移动就明白了，点小框可以移动，证明小框获取消息的等级确实是比背景图要高。
而点击中间部分却无法移动，因为我们没有点到小框上的任何东西！是真的没有任何东西，直接穿透了小框，点到了图片上。
然后你就会发现，在IE中，原来元素里面没有任何东西，包括背景的话，点击的消息传递时是会直接跳过这个元素的。
IE在这里耍了点小聪明，以为这样可以方便消息的穿透，谁知道却适得其反。
不过好在解决方法是简单的，希望保持透明的话，加一层透明的背景就行了，这就不是没内容，而只是内容看不见而已。</p>

<div id="photo3">
    <img id="scene3" src="http://blog.sprabbit.com/images/jsmemo/scene.jpg" alt="scene"/> 
</div>


<p>而第一个效果分离的截图插件之所以不会遇到问题是因为这种效果一般是在小框内再包含一幅图像来实现的，就不再是透明的小框了。</p>

<h2>总结</h2>

<p>其实这里还有一个技巧，就是实现模糊效果的方法。
目前只有Chrome支持高斯模糊滤镜，为了在其他浏览器实现模糊效果，只能进行模拟。
我们知道高斯模糊可以通过横向模糊加纵向模糊叠加实现，于是我们就可以用多张半透明图像进行错位叠加实现。</p>

<p>总而言之，在做前端开发中会遇到很多神奇的问题，以后我将一一记录在这里。另外吐槽一下，IE你为什么那么傲娇啊，看到IE就想哭啊有木有啊。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Dust.js语法简介（三）]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/19/introduction-dustjs-3/"/>
    <updated>2013-08-19T15:53:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/19/introduction-dustjs-3</id>
    <content type="html"><![CDATA[<p><a href="http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2/">上一篇</a>介绍了Dust的最基本的语法，已经足够应付一般的模板翻译。这一章将介绍一些涉及逻辑的Dust语法以及介绍如何在前端应用模板。</p>

<!--more-->


<h2>逻辑区段</h2>

<h3>?标签</h3>

<p>用<code>?</code>来代替区段标签中的<code>#</code>时，仅当<code>name</code>的值为真时，才执行区段主体部分。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{?name} body {/name}
</span></code></pre></td></tr></table></div></figure>


<h3>^标签</h3>

<p>用<code>^</code>来代替<code>#</code>时，仅当<code>name</code>的值为假时，才执行区段主体部分。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{^name} body {/name}
</span></code></pre></td></tr></table></div></figure>


<h3>{:else}标签</h3>

<p>当一个区段标签（包括<code>#</code>、<code>?</code>、<code>^</code>、以及逻辑标签等）的值为假时，若区段主体中包含{:else}标签，则执行<code>{:else}</code>标签以及区段结束标签之间的内容，否则忽略这些内容。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;ul&gt;</span>
</span><span class='line'>{#friends}
</span><span class='line'>  <span class="nt">&lt;li&gt;</span>{name}, {age}{~n}<span class="nt">&lt;/li&gt;</span>
</span><span class='line'>{:else}
</span><span class='line'>  <span class="nt">&lt;p&gt;</span>You have no friends!<span class="nt">&lt;/p&gt;</span>
</span><span class='line'>{/friends}
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>若friend为空，则仅仅输出：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;ul&gt;</span>
</span><span class='line'>  <span class="nt">&lt;p&gt;</span>You have no friends!<span class="nt">&lt;/p&gt;</span>
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<h3>值的真假</h3>

<p>在区段中判断标签的真假的方法与Javascript本身稍有不同，Dust将以下值判断为假：</p>

<ul>
<li>空字符串<code>’’</code>、<code>””</code></li>
<li>布尔<code>false</code></li>
<li><code>null</code></li>
<li><code>undefined</code></li>
<li>空列表<code>[]</code></li>
</ul>


<p>其余值均为真值，包括数字“0”，空对象<code>{}</code>。</p>

<h2>拆分（Partials）</h2>

<p>拆分是一种将重复使用的模板抽取出来，并在使用到这段模板的模板中直接导入该模板，避免重复劳动的方法。在服务端，一个名为“xxx”的Dust模板通常通常保存在一个名为xxx.dust的模板文件中。我们可以利用模板名来在模板中插入一段来自其他模版文件的模板：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{&gt;name /}
</span></code></pre></td></tr></table></div></figure>


<p>以上是一个自封闭的区段标签，代表将name.dust中的模版插入到当前位置。若文件包含路径，则用双引号包裹：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{&gt;”dust/name” /}
</span></code></pre></td></tr></table></div></figure>


<p>标签中也可以填写参数：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{&gt;”dust/name” foo=”Hello” bar=” World”/}
</span></code></pre></td></tr></table></div></figure>


<p>甚至可以使用动态路径：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{&gt;”dust/{pathName}” /}
</span></code></pre></td></tr></table></div></figure>


<h2>区块（Blocks）</h2>

<p>通过拆分可以重用一个模版，但是用这种方法来派生模版有一个缺点，就是你需要记得需要在什么位置插入哪个模版，并且对每一个派生出来的模版都要重新布局一次。区块可以解决这个问题，在父模板中使用区块可以方便地在子模板中替换区块中的内容。区块也是一种特殊的区段，定义方法如下：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{+name /}
</span></code></pre></td></tr></table></div></figure>


<p>或者在区段中填写默认内容，当区块没有被替换时，将显示默认内容：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{+name}default Content{/name}
</span></code></pre></td></tr></table></div></figure>


<p>使用区块替换需要在子模板中使用拆分区段（<code>&gt;</code>）导入父模板，并使用替换区段（<code>&lt;</code>）进行替换：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{&gt;father/}
</span><span class='line'>{<span class="nt">&lt;name</span><span class="err">}</span><span class="na">Content</span><span class="err">{/</span><span class="na">name</span><span class="err">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>比如一个父模板可以写成这样：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;page&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>  <span class="nt">&lt;h1&gt;</span>{+pageHeader}PayPal{/pageHeader}<span class="nt">&lt;/h&gt;</span>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;bodyContent&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>          {+bodyContent/}
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'>  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;footer&quot;</span><span class="nt">&gt;</span>
</span><span class='line'>  {+pageFooter}Contact Us {/pageFooter}
</span><span class='line'>  <span class="nt">&lt;/div&gt;</span>
</span><span class='line'><span class="nt">&lt;/div&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>然后保存为shared/base_template.dust文件，然后定义子模板：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{! 首先导入父模板 !}
</span><span class='line'>{&gt;&quot;shared/base_template&quot;/}
</span><span class='line'>
</span><span class='line'>{! 然后定义对应的部分 !}
</span><span class='line'>{<span class="nt">&lt;bodyContent</span><span class="err">}</span>
</span><span class='line'><span class="err">&lt;</span><span class="na">p</span><span class="nt">&gt;</span>These are your current settings:<span class="nt">&lt;/p&gt;</span>
</span><span class='line'><span class="nt">&lt;ul&gt;</span>
</span><span class='line'>  <span class="nt">&lt;li&gt;</span>xxxx<span class="nt">&lt;/li&gt;</span>
</span><span class='line'>  <span class="nt">&lt;li&gt;</span>yyy<span class="nt">&lt;/li&gt;</span>
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span><span class='line'>{/bodyContent}
</span><span class='line'>{<span class="nt">&lt;pageFooter</span><span class="err">}</span>
</span><span class='line'>       <span class="err">&lt;</span><span class="na">hr</span><span class="nt">&gt;</span>
</span><span class='line'>       <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/contactUs&quot;</span><span class="nt">&gt;</span>About Us<span class="nt">&lt;/a&gt;</span> |
</span><span class='line'>       <span class="nt">&lt;a</span> <span class="na">href=</span><span class="s">&quot;/contactUs&quot;</span><span class="nt">&gt;</span>Contact Us<span class="nt">&lt;/a&gt;</span>
</span><span class='line'>{/pageFooter}
</span></code></pre></td></tr></table></div></figure>


<h2>应用Dust模板</h2>

<p>至此，Dust自带的基本功能语法已经介绍完毕，目前大家可能只在测试器中使用过模板，以下将介绍如何直接在前端中应用模板。</p>

<h3>编译</h3>

<p>之前也介绍过，Dust是编译型模板，意思则是若需应用模板，首先要将模板可执行化，即将模板变成可执行的代码。如果你使用过Dust测试器，那么你会发现在你输入模板后，会在2号框中显示一个函数定义，那就是编译生成的代码。使用编译型模板有一个好处，就是当模板编译好之后，若需要重复使用模板，不需要每次都对模板重新进行分析，加快模板解析的速度，而且，模板可以预先编译好保存在服务器，甚至让前端连第一次编译的时间都节省了。</p>

<p>因此Dust库有两种发行版本：</p>

<ul>
<li>dust-core-2.0.2.js</li>
<li>dust-full-2.0.2.js</li>
</ul>


<p>前者为核心（Core）版本，其只包含模板解析的相关代码，大小只有十几k，而完全版（Full）则包含Dust的所有代码，包括编译器，大小有一百多k。对于不需要在前端进行编译的项目，仅仅需要使用核心版本即可，这也是速度比较快的做法。但是对于需要在前端动态编译的项目，则只能使用包含编译器的完全版。</p>

<p>编译模板的方法很简单，使用完全版的dust.compile()方法：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">compiled</span> <span class="o">=</span> <span class="nx">dust</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="s2">&quot;Hello {name}!&quot;</span><span class="p">,</span> <span class="s2">&quot;intro&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>其中第一个参数为模板字符串，第二个参数为模板名，函数将返回包含编译好的可执行代码的字符串。这个操作不会注册这个模板，仅进行编译，此时仍不可通过模板名来调用这段代码。</p>

<h3>注册</h3>

<p>如果直接执行一遍compiled中的代码，则模板会按之前指定的名字注册到dust，从而可以通过模板名来调用该模板。但若compiled代码未被执行过，则需要在渲染前手动将其注册到dust中，注册的方法很简单：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">dust</span><span class="p">.</span><span class="nx">loadSource</span><span class="p">(</span><span class="nx">compiled</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<h3>渲染</h3>

<p>通过编译注册可以让多套模板处于就绪状态，对于这些模板，我们可以直接用它将JSON对象渲染成HTML文本，通过调用dust.render()方法。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">dust</span><span class="p">.</span><span class="nx">render</span><span class="p">(</span><span class="s2">&quot;intro&quot;</span><span class="p">,</span> <span class="p">{</span><span class="nx">name</span><span class="o">:</span> <span class="s2">&quot;Fred&quot;</span><span class="p">},</span> <span class="kd">function</span><span class="p">(</span><span class="nx">err</span><span class="p">,</span> <span class="nx">out</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
</span><span class='line'><span class="p">});</span>
</span></code></pre></td></tr></table></div></figure>


<p>这个方法接受3个参数，第一个为模板名，第二个为JSON对象，第三个是一个接受两个参数的回调函数。执行这个方法后Dust会使用注册好的对应模板对JSON对象进行处理，得出一个渲染结果字符串，然后调用回调函数，其中第一个参数包含了在处理过程中出现的错误信息，第二个参数就是渲染结果字符串。一般会在回调函数中将渲染结果插入到当前的DOM结构中，以便在浏览器中显示渲染结果。</p>

<h3>区块和拆分</h3>

<p>一般使用文件来保存模板并且使用区块和拆分是让Dust作为服务端模板时应用的技术，因为在客户端Javascript中无法很方便地对分布式文件进行操作。但是我们可以通过在本地部署模板数据，编译成可执行代码并用一个js文件来保存的方式来使用区块和拆分。</p>

<p>若在Linux平台则直接在终端安装npm和dust并使用dustc命令编译成代码，得到js文件。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class='sh'><span class='line'><span class="nv">$ </span>npm install dustjs-linkedin
</span><span class='line'><span class="nv">$ </span>dustc input.dust output.js
</span></code></pre></td></tr></table></div></figure>


<p>或者在js引擎中使用dust.compile()，将模板复制到第一个参数，指定第二参数为其不带后缀的文件名，并将结果输出到js文件。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">output1</span> <span class="o">=</span> <span class="nx">dust</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">partialStr</span><span class="p">,</span> <span class="s2">&quot;partial&quot;</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">output2</span> <span class="o">=</span> <span class="nx">dust</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">baseStr</span><span class="p">,</span> <span class="s2">&quot;base&quot;</span><span class="p">);</span>
</span><span class='line'><span class="kd">var</span> <span class="nx">output3</span> <span class="o">=</span> <span class="nx">dust</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="nx">childStr</span><span class="p">,</span> <span class="s2">&quot;child&quot;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>最后在HTML中导入所有生成的js文件即可使用。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;partial.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;base.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span><span class='line'><span class="nt">&lt;script </span><span class="na">type=</span><span class="s">&quot;text/javascript&quot;</span> <span class="na">src=</span><span class="s">&quot;child.js&quot;</span><span class="nt">&gt;&lt;/script&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>注意此时不再需要使用dust.loadSource()来注册，因为script标签将js文件执行了一次，已经将模板注册好了。此时已可使用dust.render()进行渲染。</p>

<h2>结语</h2>

<p>至此，我们已经可以在前端中使用模板了，但是还有一些高级功能这里并未涉及，包括<code>@</code>辅助标签以及自定义扩展标签，如果有动力写Dust.js语法简介（四）的话，我将会在那介绍。除此之外，这里只提供了在Linux编译模板的一些官方方法，若需要在Windows下编译模板，则比较麻烦，有机会再写一篇如何在Windows下编译模板的教程吧。</p>

<h2>文章链接</h2>

<ul>
<li><a href="http://blog.sprabbit.com/blog/2013/08/16/introduction-dustjs-1">Dust.js语法简介（一）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2">Dust.js语法简介（二）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/19/introduction-dustjs-3">Dust.js语法简介（三）</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Dust.js语法简介（二）]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2/"/>
    <updated>2013-08-17T16:26:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2</id>
    <content type="html"><![CDATA[<p>从这篇文章开始我将介绍Dust的语法，其实内容基本上和Dust的<a href="https://github.com/linkedin/dustjs/wiki/Dust-Tutorial">Tutorial</a>差不多，可能还要简化一点。</p>

<!--more-->


<h2>Dust在线测试器</h2>

<p>首先要介绍一下Dust项目中的一个<a href="http://linkedin.github.io/dustjs/test/test.html">在线测试器</a>，在了解Dust语法的同时，在这个测试器上尝试应用学到的语法，既可以验证语法是否正确，也可以加强对语法的记忆。进入测试器后可以见到四个框，从左上、左下、右上、右下分别编号为1、2、3、4。测试时在1号框中填入一个Dust模板，然后2号框将显示该模板编译后的结果，再在3号框填入一个JSON对象，4号框中将显示最终的渲染结果。</p>

<h2>标签（Tag）</h2>

<p>Dust模板以一种嵌入到HTML中的标签的形式存在。Dust标签使用一对花括号包裹，类似于HTML标签使用一对尖括号包裹：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{name}
</span></code></pre></td></tr></table></div></figure>


<h2>注释</h2>

<p>以下标签将不会产生任何内容，即可用作注释（感叹后之间）：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{! Comment syntax !}
</span></code></pre></td></tr></table></div></figure>


<h2>键（Key）</h2>

<p>一般Dust标签的表示只有两种形式，一种是键，另一种是区段。键是一个最简单的Dust标签，其中包含的花括号中的值称之为键，对应于JSON对象的属性名，对应的属性值一般为简单类型，比如字符串，渲染后将直接以属性值代替整个标签。如果搜索不到任何匹配值，则不会返回任何数据。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{name}
</span></code></pre></td></tr></table></div></figure>


<p>在键名后面可以跟随过滤器，使用竖线分隔，一般用于选择处理“&lt;”，“>”等特殊符号的转义：</p>

<ul>
<li>{name|s} 禁用自动转码</li>
<li>{name|h} 强制使用HTML转码</li>
<li>{name|j} 强制使用Javascript转码</li>
<li>{name|u} 使用encodeURI编码</li>
<li>{name|uc} 使用encodeURIComponent编码</li>
<li>{name|js} 将JSON对象转换为字符串</li>
<li>{name|jp} 将JSON 字符串转换为JSON对象</li>
</ul>


<p>过滤器也可以进行组合：</p>

<pre><code>{name|jp|h}
</code></pre>

<p>一些特殊字符也可以键的形式直接取值输出：</p>

<ul>
<li>{~n}  换行</li>
<li>{~r}  CR换行</li>
<li>{~lb}     左花括号</li>
<li>{~rb}     右花括号</li>
<li>{~s}  空格</li>
</ul>


<h2>区段（Section）</h2>

<p>以下两个标签及其包裹的部分称之为区段，用于循环显示数据。其中“#”为开始标签，“/”为结束标签，其后的键值同样对应于JSON对象的属性名，对应的属性值一般为数组或单个对象，单个对象将被当做一个只有一个元素的数组来对待。模板会按下标对数组中的每个元素调用一次区段包裹着的模板。上一篇中的例子就是利用了区段来循环输出列表元素。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#names}....{/names}
</span></code></pre></td></tr></table></div></figure>


<p>在区段中可以使用两个特殊的键：</p>

<ul>
<li>{$idx}    表示当前迭代的序号（从0开始）</li>
<li>{$len}    表示数组长度</li>
</ul>


<h2>上下文（Context）</h2>

<p>Dust对键或区段值的查询与javascript中对作用域链中变量值的查询类似，换而言之使用区段时会临时改变当前的上下文。</p>

<p>例如一个嵌套的JSON对象：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;root&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;anotherName&quot;</span><span class="o">:</span> <span class="s2">&quot;root2&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;A&quot;</span><span class="o">:</span><span class="p">{</span>
</span><span class='line'>      <span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="s2">&quot;Albert&quot;</span><span class="p">,</span>
</span><span class='line'>      <span class="s2">&quot;B&quot;</span><span class="o">:</span><span class="p">{</span>
</span><span class='line'>          <span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="s2">&quot;Bob&quot;</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>使用区段索值：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A}{name}{/A}
</span></code></pre></td></tr></table></div></figure>


<p>则会得到这个对象的<code>A.name</code>的值：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>Albert
</span></code></pre></td></tr></table></div></figure>


<p>因为使用区段时将上下文转移到A属性对应的对象中。</p>

<p>而使用以下区段索值：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A}{anotherName}{/A}
</span></code></pre></td></tr></table></div></figure>


<p>因为在对象A的属性中不存在“anotherName”属性，于是Dust会向上查询A所处的上下文，发现存在“anotherName”属性，于是得到：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>root2
</span></code></pre></td></tr></table></div></figure>


<p>若往上查找到JSON对象根部间的所有的上下文均无对应属性时将返回空白，索值不会向下查找。</p>

<h2>路径（Path）</h2>

<p>若使用不带路径的区段索值，那么相当于从JSON对象的根部开始定位区段上下文。而使用路径可以指定开始搜索的位置。路径使用标志“.”来标记标签，跟javascript语法类似。依然是这个JSON对象：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;root&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;anotherName&quot;</span><span class="o">:</span> <span class="s2">&quot;root2&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;A&quot;</span><span class="o">:</span><span class="p">{</span>
</span><span class='line'>      <span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="s2">&quot;Albert&quot;</span><span class="p">,</span>
</span><span class='line'>      <span class="s2">&quot;B&quot;</span><span class="o">:</span><span class="p">{</span>
</span><span class='line'>          <span class="s2">&quot;name&quot;</span><span class="o">:</span><span class="s2">&quot;Bob&quot;</span>
</span><span class='line'>      <span class="p">}</span>
</span><span class='line'>  <span class="p">}</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>若我们需要取A属性下的B属性的name则可以表达成这样：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{A.B.name}
</span></code></pre></td></tr></table></div></figure>


<p>或者使用路径标记区块：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A.B}{name}{/A.B}
</span></code></pre></td></tr></table></div></figure>


<p>或者使用单个“.”表示当前上下文对象（当前为字符串）：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A.B.name}{.}{/A.B.name}
</span></code></pre></td></tr></table></div></figure>


<p>规定路径后，首先在指定的上下文进行查找name的值，找不到时不会向上追溯，而是从根部开始查找。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A.B}{A.name}{/A.B}
</span></code></pre></td></tr></table></div></figure>


<p>上面这个模板将会在A.B中搜索A，因为B并无A属性，所以从JSON对象根部开始找到A属性，从而找到A.name，返回“Albert”，若从根部也无法找到，则返回空白。</p>

<h2>修改上下文</h2>

<p>我们也可以在一定程度上修改上下文的关系。通过使用冒号“:”可以用冒号后面的键值代替前面的键值的父级上下文：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#A:A2} ... {/A}
</span></code></pre></td></tr></table></div></figure>


<p>以上这个区段会屏蔽掉A的父级上下文，临时将A2作为A的父级上下文，即在A中找不到目标时不会往上回溯，而去搜索A2下的属性。</p>

<h2>区段参数</h2>

<p>在区段中可以设置参数：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span><span class="err">#</span><span class="nx">A</span><span class="p">.</span><span class="nx">B</span> <span class="nx">foo</span><span class="o">=</span><span class="s2">&quot;Hi&quot;</span> <span class="nx">bar</span><span class="o">=</span><span class="s2">&quot; Good to see you&quot;</span><span class="p">}</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">foo</span><span class="p">}</span> <span class="p">{</span><span class="nx">name</span><span class="p">}</span> <span class="p">{</span><span class="nx">bar</span><span class="p">}</span>
</span><span class='line'><span class="p">{</span><span class="err">/A.B}</span>
</span></code></pre></td></tr></table></div></figure>


<p>模板会将参数值替代键值标签，结果为：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>Hi Bob Good to see you
</span></code></pre></td></tr></table></div></figure>


<p>参数也可以是键名，但是赋值时的上下文在区段之外：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span><span class="err">#</span><span class="nx">A</span><span class="p">.</span><span class="nx">B</span> <span class="nx">foo</span><span class="o">=</span><span class="nx">A</span><span class="p">.</span><span class="nx">name</span> <span class="nx">bar</span><span class="o">=</span><span class="nx">anotherName</span><span class="p">}</span>
</span><span class='line'>  <span class="p">{</span><span class="nx">foo</span><span class="p">}</span> <span class="p">{</span><span class="nx">name</span><span class="p">}</span> <span class="p">{</span><span class="nx">bar</span><span class="p">}</span>
</span><span class='line'><span class="p">{</span><span class="err">/A.B}</span>
</span></code></pre></td></tr></table></div></figure>


<h2></h2>

<p>至此，我们已经可以简单地将模板付诸应用了。下一节将介绍一些逻辑相关的语法。</p>

<h2>文章链接</h2>

<ul>
<li><a href="http://blog.sprabbit.com/blog/2013/08/16/introduction-dustjs-1">Dust.js语法简介（一）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2">Dust.js语法简介（二）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/19/introduction-dustjs-3">Dust.js语法简介（三）</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Dust.js语法简介（一）]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/16/introduction-dustjs-1/"/>
    <updated>2013-08-16T09:44:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/16/introduction-dustjs-1</id>
    <content type="html"><![CDATA[<p><a href="http://blog.sprabbit.com/blog/2013/08/15/introduction-client-template/">经过一轮挣扎</a>，我作出了与LinkedIn一样的选择，使用Dust.js作为模板，但是因为Dust.js缺少中文文档，导致在国内的普及率比较低。于是我决定在这里对Dust的语法进行一些必要的介绍。</p>

<!--more-->


<h2>为什么要用前端模板？</h2>

<p>在静态页面中，包括已经从后台生成的HTML中，一般很少需要应用到模板，但是随着AJAX技术的发展，不刷新页面而动态更新内容的需求越来越高。为了降低通讯成本，这种通讯技术传输的一般是一个JSON对象，而不是一整串HTML字符串，所以在前端接受JSON数据之后，还要经过处理才能按要求显示在浏览器上。若只是用纯javascript进行拼接处理，将是一个比较繁琐的过程，而且写出来的代码不直观，可读性比较低。比如如果一个JSON对象<code>people</code>是下面这样的：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">{</span>
</span><span class='line'>  <span class="s2">&quot;title&quot;</span><span class="o">:</span> <span class="s2">&quot;Famous People&quot;</span><span class="p">,</span>
</span><span class='line'>  <span class="s2">&quot;names&quot;</span><span class="o">:</span> <span class="p">[{</span> <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;Larry&quot;</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;Curly&quot;</span> <span class="p">},</span> <span class="p">{</span> <span class="s2">&quot;name&quot;</span><span class="o">:</span> <span class="s2">&quot;Moe&quot;</span> <span class="p">}]</span>
</span><span class='line'><span class="p">}</span>
</span></code></pre></td></tr></table></div></figure>


<p>我们要把他渲染成一个HTML列表如下：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>Famous People
</span><span class='line'><span class="nt">&lt;ul&gt;</span>
</span><span class='line'>　　<span class="nt">&lt;li&gt;</span>Larry<span class="nt">&lt;/li&gt;</span>
</span><span class='line'>　　<span class="nt">&lt;li&gt;</span>Curly<span class="nt">&lt;/li&gt;</span>
</span><span class='line'>　　<span class="nt">&lt;li&gt;</span>Moe<span class="nt">&lt;/li&gt;</span>
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>使用纯粹的javascript将是这样的：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">result</span> <span class="o">=</span> <span class="nx">people</span><span class="p">.</span><span class="nx">title</span> <span class="o">+</span> <span class="s1">&#39;\n&#39;</span><span class="p">;</span>
</span><span class='line'><span class="nx">result</span> <span class="o">+=</span> <span class="s1">&#39;&lt;ul&gt;&#39;</span> <span class="o">+</span> <span class="s1">&#39;\n&#39;</span><span class="p">;</span>
</span><span class='line'><span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">people</span><span class="p">.</span><span class="nx">names</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
</span><span class='line'>  <span class="nx">result</span> <span class="o">+=</span> <span class="s1">&#39;&lt;li&gt;&#39;</span> <span class="o">+</span> <span class="nx">people</span><span class="p">.</span><span class="nx">names</span><span class="p">[</span><span class="nx">i</span><span class="p">].</span><span class="nx">name</span> <span class="o">+</span> <span class="s1">&#39;&lt;/li&gt;&#39;</span> <span class="o">+</span> <span class="s1">&#39;\n&#39;</span><span class="p">;</span>
</span><span class='line'><span class="p">}</span>
</span><span class='line'><span class="nx">result</span> <span class="o">+=</span> <span class="s1">&#39;&lt;/ul&gt;&#39;</span>
</span></code></pre></td></tr></table></div></figure>


<p>当然了这只是一个比较简单的例子，而且代码具有专用性且不是最简形式，但是为了兼顾可读性和简介性这样写是比较好的。而使用dust模板将只需要一个模板：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{title}
</span><span class='line'><span class="nt">&lt;ul&gt;</span>
</span><span class='line'>{#names}
</span><span class='line'>　　<span class="nt">&lt;li&gt;</span>{name}<span class="nt">&lt;/li&gt;</span>{~n}
</span><span class='line'>{/names}
</span><span class='line'><span class="nt">&lt;/ul&gt;</span>
</span></code></pre></td></tr></table></div></figure>


<p>然后将<code>people</code>传给编译好的模板则可生成所需要的结果，非常直观。</p>

<h2>什么是Dust.js？</h2>

<p>Dustjs、dust.js或者直接叫Dust，是一种模板，一开始是由<a href="https://github.com/akdubya">Aleksander</a> 编写并于2010发布第一个版本<a href="https://github.com/akdubya/dustjs">于Github</a>。因为后台编译使用 Node.js 所以延续了在插件名后加.js的传统。Aleksander 很喜欢胡子模板 Mustache 的语法。但是Mustache缺少了Aleksander想要的特性，比如模板块和高性能。</p>

<p>从<a href="http://akdubya.github.io/dustjs/">dust.js的导引页面</a>看来，这个模板制作者还是很有诚意的。可惜这个项目已于两年前停止更新，版本停留在0.3.0。好消息是大型职业社交网<a href="http://www.linkedin.com">LinkedIn</a>也了解到了这个模板的优点和潜力，并接手了Dust.js的后续开发，最终出来的就是现在的<a href="http://linkedin.github.io/dustjs/">Dust.js(LinkedIn)</a>，为了简便起见后面继续称之为Dust。经过不断地更新，Dust目前已经到了2.0版本了。</p>

<h2></h2>

<p>由于时间关系，我还是决定将真正的语法介绍留到下一篇文章了，敬请期待。</p>

<h2>文章链接</h2>

<ul>
<li><a href="http://blog.sprabbit.com/blog/2013/08/16/introduction-dustjs-1">Dust.js语法简介（一）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/17/introduction-dustjs-2">Dust.js语法简介（二）</a></li>
<li><a href="http://blog.sprabbit.com/blog/2013/08/19/introduction-dustjs-3">Dust.js语法简介（三）</a></li>
</ul>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[前端模板的选择]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/15/introduction-client-template/"/>
    <updated>2013-08-15T20:01:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/15/introduction-client-template</id>
    <content type="html"><![CDATA[<p>最近接到一个任务，让我选一个前端模板。但是我其实连js模版实战经验都没有，为什么要让我选呢。不过接到任务就得照办了。首先得先知道什么是前端模板呢，稍微查了些百科，简单来说就是利用内嵌于HTML中的一些标记，来直观迅速生成HTML字符串的工具了，类似于后台用PHP标记&lt;?=xxx>来生成HTML这样，而不需要繁琐的字符串拼接操作。需要在前端用javascript来使用，所以叫做前端模板。那么类似后台有多种语言，前端模板也有多种多样，以至于有人在github上做了一个应用方便大家选择前端模板：<a href="http://garann.github.io/template-chooser/">TemplateChooser</a></p>

<!--more-->


<p>虽然其中没有包括所有的模板，但是人们最常用的都在里面了，点开左边的标签设置选项，右面剩下的模板名就是符合要求的了。</p>

<p>第一项 Is this for use on the client or the server，就是模板需要运行在前端还是后台，对于前端模板当然选前台，但是不少模板是可以运行在前后端的。</p>

<p>第二项 How much logic should it have，表明你需要模板中可以包含多少逻辑处理。其中 the entirety of JS 选项代表模板中需要可以运行JS代码；just the basics 则代表模板中仅包含基本的逻辑，比如判断这类的；none at all 则表示模板中不包含任何逻辑，换而言之几乎只能做变量替换的操作。</p>

<p>第三项 Does it need to be one of the very fastest，表示你是否对速度有特别严苛的要求，yes or no。选完yes后会发现只剩三种doT.js、Microtemplating、Underscore templates，这是由一个应用来判定的：<a href="http://jsperf.com/javascript-templating-shootoff-extended">jsPerf</a>。这三种在测试中是排行前三的。但是我们发现里面评测的模板并不完全，所以其实这项并没有太大的参考价值。</p>

<p>第四项 Do you need to pre-compile templates，表示你是否需要可以预编译的模板。首先要解释一下编译的意思，对于一般编程语言，编译就是让代码转换并优化成机器可以识别的机器码，从而机器可以直接运行。这里的编译意思类似，一个模板只是一个直观的数据字符串，我们需要让他变得可执行，那么我们就要让他转变成一个可以执行的函数对象，虽然这个对象一般也是以字符串的形式存在的。是否可以预编译的差别在于，如果你的模板是固定不变的，那么如果预先编译好并将编译结果保存起来，要使用的时候就不需要再动态编译，可以减少你分析模板的时间。</p>

<p>第五项 Do you need compile-time partials，表示你是否需要在编译时的模板拆分。这里的拆分其实并不是准确的表达，但是我找不到一个更好的词来形容了。实际上这个概念很简单，就是模块化的思想，可以将多个模板中重复使用的部分拆分出来单独存成一个模板文件，而让其他需要使用这个部分的模板导入这个模板文件。这种操作一般只在服务端模板中进行，因为在前端难以动态读取后台的分布式拆分文件。但是对于可以预编译的模板，则可以预先将分布式的文件编译好，然后在前台一一导入后使用。</p>

<p>第六项 Do you want a DOM structure, or just a string，那是问你的模板是一个字符串还是一个DOM结构。关于这点我也不太清楚，因为在我的印象中模板就是一个字符串，而里面包含了所渲染的HTML字符串的直观表示。选了DOM之后，同样只剩下三种模板dom.js、pure.js、Transparency。我简单地查看了一下pure.js模板（他同时也是一个不包含逻辑的模板），发现他并不是将一个模板保存为字符串，而是直接在HTML文件中为标签添加一些特殊的类，然后渲染的时候再用选择器出这个DOM对象进行渲染，换而言之他的模板是直接内嵌在HTML文件中的！那么确实如果希望应用逻辑是不大可能的，因为必须保证模板符合XHTML规范。</p>

<p>第七项 Aside from template tags, should it be the same language before and after rendering，这项比较好理解，除了模板标签之外，模板的语法要和模板渲染后的语法一样，那么在这里我们要渲染出HTML语言，结果是显然易见的，就是模板是一种在HTML语言中内嵌标签的语言。或许你会觉得很奇怪，难道还有什么除了插入标签外的神奇的语法吗？选No之后又再一次出现了三种模板dom.js、Jade templates、Microtemplating。我再一次简单的看了下dom.js，因为他同时也是一个使用DOM结构的模板。结果发现DOM是一种完全使用Javascript的模板！他的语法还是非常直观的：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nx">header</span><span class="p">(</span>
</span><span class='line'>    <span class="nx">h1</span><span class="p">(</span><span class="s1">&#39;Heading&#39;</span><span class="p">),</span>
</span><span class='line'>    <span class="nx">h2</span><span class="p">(</span><span class="s1">&#39;Subheading&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'><span class="nx">nav</span><span class="p">(</span>
</span><span class='line'>    <span class="nx">ul</span><span class="p">({</span> <span class="s1">&#39;class&#39;</span><span class="o">:</span> <span class="s1">&#39;breadcrumbs&#39;</span> <span class="p">},</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">a</span><span class="p">({</span> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;/&#39;</span> <span class="p">},</span> <span class="s1">&#39;Home&#39;</span><span class="p">)),</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">a</span><span class="p">({</span> <span class="nx">href</span><span class="o">:</span> <span class="s1">&#39;/section/&#39;</span><span class="p">},</span> <span class="s1">&#39;Section&#39;</span><span class="p">)),</span>
</span><span class='line'>      <span class="nx">li</span><span class="p">(</span><span class="nx">a</span><span class="p">(</span><span class="s1">&#39;Subject&#39;</span><span class="p">))));</span>
</span><span class='line'>
</span><span class='line'><span class="nx">article</span><span class="p">(</span>
</span><span class='line'>    <span class="nx">p</span><span class="p">(</span><span class="s1">&#39;Lorem ipsum...&#39;</span><span class="p">));</span>
</span><span class='line'>
</span><span class='line'><span class="nx">footer</span><span class="p">(</span><span class="s1">&#39;Footer stuff&#39;</span><span class="p">);</span>
</span></code></pre></td></tr></table></div></figure>


<p>明白了上面的含义的话，其实还是很好选择的。关于选项中的第二项可能有点争议，到底模板需要多少逻辑呢。如果从模板的出发点来看的话，其实答案是显然易见的。有些人可能觉得功能越强大的模板越好，但是事实恰好相反，人们发明了模板就是为了直观地设计输出数据的表现形式，让显示与逻辑数据分离。此时若为了让模板支持更强大的功能而硬是往里面添加复杂的逻辑，甚至让其支持javascript，是本末倒置的，这些明明可以直接在javascript中操作的东西又何必硬塞到模板里面让其可读性降低呢。然而不包含任何逻辑毕竟不现实，因此大多数模板都提供了最基本的逻辑能力，比如遇到空对象的特殊处理方法。所以这里一般选择just the basics。</p>

<p>最后剩下来的模板也只剩6个，但是到底要如何取舍，还是不能简单的决定。经过一些对比评测[1]，大家普遍认为以下三种是综合评分最高的：Mustache.js、Handlebars.js、dust.js。</p>

<p><a href="https://github.com/janl/mustache.js/">Mustache</a> 应该是最流行的模版了，显示与逻辑分离，模板语法清晰，但是逻辑功能太过缺乏，代码庞大而且效率比较低，已经停止维护超过两年。他的语法如下：</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{ {#stooges} }
</span><span class='line'><span class="nt">&lt;b&gt;</span>{ {name} }<span class="nt">&lt;/b&gt;</span>
</span><span class='line'>{ {/stooges} }
</span></code></pre></td></tr></table></div></figure>


<p><a href="https://github.com/wycats/handlebars.js/">Handlebars</a>
是Mustache的改进，显示与逻辑分离，语法兼容Mustache，可以编译成代码，改进Mustache对路径的支持，但是若需要在服务端运行需要使用服务端Javascript引擎如Node.js。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{ {#each comments} }
</span><span class='line'><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;body&quot;</span><span class="nt">&gt;</span>{ {body} }<span class="nt">&lt;/div&gt;</span>
</span><span class='line'>{ {/each} }
</span></code></pre></td></tr></table></div></figure>


<p></p>

<p><a href="https://github.com/linkedin/dustjs">Dust</a>
也是显示与逻辑分离，语法比Mustache更清晰简便（少写一对花括号{}!），可以编译成代码，比Mustache提供更好的路径支持，支持更多的扩展功能，异步渲染，执行效率更高。但是若需要在服务端运行需要使用服务端Javascript引擎如Node.js。</p>

<figure class='code'><figcaption><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class='html'><span class='line'>{#names}
</span><span class='line'><span class="nt">&lt;li&gt;</span>{name}<span class="nt">&lt;/li&gt;</span>{~n}
</span><span class='line'>{/names}
</span></code></pre></td></tr></table></div></figure>


<p>以上三种都是最优秀的模板了，语法可以说是比较类似，但是无论从结果还是过程看Dust都有着无比强大的优势。目前Dust.js是由LinkedIn团队维护的，最近已更新到2.0版本，相比以前有更大的优化，所以我觉得选用dust.js作为模版是比较合适的。只可惜Dust.js毕竟没有胡子Mustache家族势力广泛，尤其在我大天朝，少有见到关于dust的技术文章。下次我打算尽我微薄之力，为大家介绍一下Dust的使用方法，普及一下dust这个LinkedIn推荐的模板。</p>

<p>参考：</p>

<p>[1] <a href="http://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more">The client-side templating throwdown: mustache, handlebars, dust.js, and more</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[从游戏服务端到Web前端]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/08/13/game-server-to-front-end/"/>
    <updated>2013-08-13T16:03:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/08/13/game-server-to-front-end</id>
    <content type="html"><![CDATA[<p>虽然这个标题看起来很厉害，但是其实只是我的一篇随笔，没有很大的技术参考价值，况且我无论哪个方面也没有很高的造诣。这里只是抒发一下我开始工作后的感受，在这个公司提前下班的七夕里。</p>

<p>怀着对游戏的满腔热情，我拿到了一个主营网络游戏的公司的Offer，心想，迎合我的兴趣和特长，我一定能成就一番事业。于是我在几个月前开始了实习，刚开始是一段自学期，因为公司用python作为游戏脚本，而且推荐教材是《Python核心编程》，于是前两周便都在啃那本书。然后是一个考核，决定我们这帮新来的程序猿将进入哪个项目组。我灰常荣幸地进入了公司最赚钱的游戏的服务端，顺便说一下在公司里对程序猿的划分从牛掰到水逼是服务端>客户端>应用软件>移动平台游戏>WEB，当然这只是由公司文化决定的。</p>

<!--more-->


<p>然而我的想象很快就被扑灭了，作为一个服务端的程序员，你要做的只有根据策划提出的要求，写逻辑写逻辑写逻辑。如果这是一个独立游戏，我想最有趣的地方就是写逻辑了吧，然而对于网游来说却并不是这样的。</p>

<p>这是一个已经完全引擎化的东西，基本上公司所有游戏都是用的同一个引擎，服务器引擎基本上只定义了客户端与服务端通信的方法以及数据库存储的抽象化。因此逻辑与显示被完全分离了，显示完全就是客户端做的事情，逻辑完全属于服务端，两者之间只是通过socket来相互传递命令。如果只是这样的话还不错的，逻辑与显示分离一直是很多框架所追求的，然而基本的脚本框架也都基本是从一个游戏拷贝到另一个游戏中的，所以程序员能做的基本上只是往框架里面填东西。明明可以使用更好的设计模式，更好的结构，但是为了让你从一个项目组调到另一个项目组时能很快进入状态，这些都是不允许你去改的。</p>

<p>于是随着功能的添加，局部代码只能越来越臃肿，甚至臃肿到可读性已经基本没有的程度。最后只好不再给你将一些通用的功能添加到父类里，而在子类里特殊地实现，目的只是不再降低通用部分的可读性。他们对“代码即文档”这句话痴迷到近乎疯狂的地步，甚至不允许你多写注释。</p>

<p>那么，所谓的写逻辑，就只能是一些很简单的往框架里填的逻辑，比如某人到某地触发一些什么对白，触发什么战斗，战斗后有什么奖励，收集一些什么物品，或者将这些东西组合起来做成一个任务或者活动。尽管你可以将这些东西写得很面向对象，然而这只是脚本，你写得面向对象并不是因为可扩展性好，而是可读性好，让别人更能读懂你的代码，当然这减少了你的代码量，也是一件好事。底层引擎你是不可能去接触到的，对所有普通员工来说都是闭源的，所以你只要掌握了这个写一般脚本的能力，你可以很轻松，不需要再学什么新技术，也能在这里呆个10年左右，因为技术以及架构都几乎不可能再更新了。作为一门脚本，除了bug的修复，也不需要什么更新。当然，首先你要去读懂那些没有文档，也没有注释的只能祈祷他不再用拼音命名的“即文档”的代码。</p>

<p>尽管在公司里面认为在越能赚钱的项目做越牛掰，而且公司也会将提升的程序员调往更赚钱的项目，而将更有资历的程序员调往新项目，然而一个游戏能否赚钱，实际上跟他的技术甚至程序员没有绝对的联系。因为每个游戏的技术基本是一样的！从引擎到框架，也许只有战斗系统和技能系统有所不同，但是这并不是由程序猿决定的事情，而是策划。换而言之决定一个游戏赚不赚钱是由策划决定的，而你在这样一个最赚钱的项目组里做，你面对的挑战只是更多更多更多的策划需求，而不是运用更好的技术。</p>

<p>很多业内人士都觉得游戏行业不是IT行业，一开始我很鄙视这种说法，凭什么我们运用程序设计的技术来创造虚拟世界就不是IT了呢。然而，我终于体会到，网游这种东西只是刚好用到编程的营销而已，不但技术落后，而且不思进取。我当然可以选择在这里干上十年，到时我也能成为一个富裕的人吧，仅仅是金钱上的，没有业余爱好，没有技术，没有时间，没有妹纸。。。一旦这个行业被淘汰，我必将失业，因为我只会写一定逻辑范围内的脚本，而这种技能除了在本公司之外几乎没有用武之地。</p>

<p>然而实习期间，我也没啥怨念的，仅仅是用来长经验的，越来越多同期的实习生被往下调到其他项目、客户端、还有WEB。最后我成为了基本被组长认同的实习生之一。但是正式入职第二天我想到我的将来，提出了转职，转往网站部从事网站开发。这当然是个令组长甚至主管都震惊的决定，没有资格留下来的人被调往网站部，而一个及格个人却主动申请调往网站部。他们甚至因此而添加了一条入职未满一年的人禁止提出转职的规定。他们用来挽留我的理由除了钱、还是钱，但是我知道有很多东西是无法用钱来衡量的。我花了九牛二虎之力东拉西扯两天后终于让他们让我转职了。</p>

<p>衡量之后，我发现做网站是比较符合我的情况，而且可以直接接触到最新的技术。比起后端也是基本逻辑加数据操作，我还是觉得比较有设计感的前端更适合我这个游戏制作人，于是我选择了做前端JS。我觉得这个职位还是比较多元化的，虽然只写JS，但是涉及的方面也可以很广泛，从页面逻辑，到页面特效，从前端JS到后台也可以用JS（Node），从PC到移动端，从数据交换到数据渲染，从页面功能到用户体验，JS能做到的东西比我想象中要多很多。可惜JS程序员在公司的地位没有得到重视，专注于前端的程序员不多，也没有统一规范，不过好消息是公司将越来越重视这一方面，将前端JS从后台人员自己编写中分离出来，我转职后不久便要我起草一份Javascript编程规范，包括命名、语法、文档注释、面向对象、前端模板等的规范。所以我还是觉得能转到前端还是挺不错的。</p>

<p>最重要的一点是，我有了自己的时间，有了外网机！在服务端为了防止泄密，是没有外网机的，用一台内网机你甚至见不到机箱，所以除了工作之外，你在公司几乎干不了别的事情，技术不会更新，只要懂了基本语法，基本不需要到网上查资料，加班即使没事干，也只能玩自己的游戏项目。为了坚持我的同人创作，我觉得外网机是基本的条件。</p>

<p>以后可能会陆续发些关于前端的文章吧，虽然以前我也没发过什么技术文章，主要是技术太烂拿不出手，今后就以学习交流的态度来写些东西吧。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Sicily Android 小应用]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/01/17/android-moe-sicily/"/>
    <updated>2013-01-17T15:46:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/01/17/android-moe-sicily</id>
    <content type="html"><![CDATA[<p>蹬蹬，我是来报告<a href="http://www.sprabbit.com/sicily/">Sicily</a>的进展的，在密锣紧鼓的制作下，Sicily终于有幸在今年内推出了（PIA~到底要等到什么时候啊！</p>

<p>好吧，稍安勿躁，在游戏推出之前先让茜茜酱在手机里安抚一下大家的心灵吧。</p>

<p><img src="http://blog.sprabbit.com/images/android_sicily_widget.jpg" alt="Sicily Widget" /></p>

<p><img src="http://blog.sprabbit.com/images/android_sicily_main.jpg" alt="Sicily Main" /></p>

<!--more-->


<p>这是一个灰常简单的卖萌Android程序，基于Android2.1以上系统，主程序打开后点任何地方可以让茜茜酱换对白，按菜单键可以做一下简单的设置，包括换称呼等。程序包括一个桌面小部件，跟主程序有相同的卖萌功能。点击小部件中的卖萌按钮可以换对白，点击茜茜莉可以打开主程序。</p>

<p>注意要安装在手机上才能看到桌面小部件哦。目前只有简单的卖萌功能，说不定以后可以添加闹钟，定时提醒等功能呢，敬请期待吧。。</p>

<p>另外吐槽一下Google Play的开发者认证，好麻烦啊，又没钱，所以没放到上面，只能这样发布了。</p>

<p>程序：宗师</p>

<p>美术：林卯</p>

<p>立绘：Penslip</p>

<p>下载地址： <a href="http://pan.baidu.com/share/link?shareid=166768&amp;uk=872546290">百度网盘</a></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[关于SpeShow]]></title>
    <link href="http://blog.sprabbit.com/blog/2013/01/17/about-speshow/"/>
    <updated>2013-01-17T15:07:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2013/01/17/about-speshow</id>
    <content type="html"><![CDATA[<p><a href="http://www.sprabbit.com/spengine/speshow.html">SpeShow(SPENGINE)的链接</a>早就加在了<a href="http://www.sprabbit.com">SPRABBIT首页</a>的导航栏上，不过可能不是很起眼，所以没什么人知道。</p>

<p>虽然SpeShow发布已经有一段时间了，但是感觉还是在博客里记录一下比较好。SpeShow是主要由我编写的一个图文脚本演示程序，最初的目的是用来做Galgame，但是希望做的更通用点，所以就扩展为图文脚本演示，不过称之为Galgame引擎也不为过。相关的信息可以查看<a href="http://www.sprabbit.com/spengine/speshow.html">SpeShow(SPENGINE)的主页</a>，里面包括有介绍，教程，演示视频，程序下载等内容。</p>

<p>不过实际上这个引擎的完善度还有所欠缺，我又面临毕业就业，可能完善这个引擎将是一个很漫长的过程。但是此前我将会全力让他能制作出完整的Galgame，毕竟我就是为了制作新的Galgame才开发的这个引擎啊。首个SpeShow游戏将会是我们的下一作<a href="http://www.sprabbit.com/sicily/">Sicily-零与一的幻想</a>，目前正在紧密制作中呢，敬请期待啦。</p>

<p>无论如何，加油！</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[在新Windows系统中重新部署Octopress]]></title>
    <link href="http://blog.sprabbit.com/blog/2012/12/21/recover-octopress/"/>
    <updated>2012-12-21T19:10:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2012/12/21/recover-octopress</id>
    <content type="html"><![CDATA[<p>最近重装Win7 x64后直接在线升级到了Win8 x64，很多东西都要重新部署，包括octopress环境。这里记录一下关键的步骤，以便日后参考。</p>

<p>这个Memo将从安装git开始记录，前提是已经在别的电脑上往github部署好了Octopress。</p>

<!--more-->




<h2>第一步：部署Git</h2>


<p>参考过程：<a href="https://help.github.com/articles/set-up-git">Git hub官网</a></p>

<h4><a href="http://git-scm.com/downloads">下载并安装最新版Git</a></h4>


<p>（可能需要翻墙，也可以自行搜索下载）</p>

<h4>设置用户名</h4>




<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git config --global user.name "Your Name Here"</span></code></pre></td></tr></table></div></figure>




<h4>设置邮箱</h4>




<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git config --global user.email "your_email@youremail.com"</span></code></pre></td></tr></table></div></figure>




<h4>设置密码缓存（3600秒）</h4>




<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git config --global credential.helper 'cache --timeout=3600'</span></code></pre></td></tr></table></div></figure>




<h4>生成SSH key</h4>




<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>ssh-keygen -C 'your_email@youremail.com' -t rsa</span></code></pre></td></tr></table></div></figure>




<h4>拷贝Key</h4>


<p>到<code>C:/Users/用户名/ssh</code>打开并拷贝<code>id_rsa.pub</code>的内容。</p>

<h4>注册SSH Key</h4>


<p>到github页面点右上角的Account Setting，然后点左边的SSH Keys，再点右边的Add SSH key，然后把拷贝的内容粘贴到空白处点Add Key即可。</p>

<h2>第二步：部署Octopress执行环境</h2>


<p>参考过程：<a href="http://sinosmond.github.com/blog/2012/03/12/install-and-deploy-octopress-to-github-on-windows7-from-scratch/">Sinosmond的一篇文章</a></p>

<h4>安装Ruby</h4>


<p>到 <a href="http://rubyforge.org/frs/?group_id=167">RailsInstaller</a> 查找下载最新版本（当前为1.9.3）。安装完后将安装目录下的bin文件夹添加到系统变量<code>PATH</code>中</p>

<h4>安装DevKit</h4>


<p>下载<a href="https://github.com/downloads/oneclick/rubyinstaller/DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe">RubyInstaller DevKit</a>并解压。在解压目录中用命令行执行：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>ruby dk.rb init
</span><span class='line'>ruby dk.rb install</span></code></pre></td></tr></table></div></figure>




<h4>安装Python</h4>


<p>下载并安装<a href="http://www.activestate.com/activepython/downloads">ActivePython-2.7 的 x86版本</a>（即使是64位系统也尽量使用本版，其他版本兼容性未知）。
在命令行中执行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>easy_install pygments</span></code></pre></td></tr></table></div></figure>




<h4>设置语言环境变量</h4>


<p>设置 <code>LANG</code> 和 <code>LC_ALL</code> 两个环境变量，其值均设置为 <code>zh_CN.UTF-8</code></p>

<p>启动git bash，执行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>echo "export LANG LC_ALL" &gt; ~/.bash_profile
</span><span class='line'>echo "alias ll='ls -l --color=tty'" &gt;&gt; ~/.bash_profile
</span><span class='line'>echo "alias ls='ls --color=tty'" &gt;&gt; ~/.bash_profile</span></code></pre></td></tr></table></div></figure>




<h4>配置Ruby</h4>


<p>在git bash中执行一下命令配置更新源</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>gem sources --remove http://rubygems.org/
</span><span class='line'>gem sources -a http://ruby.taobao.org/</span></code></pre></td></tr></table></div></figure>


<p>在git bash中执行一下命令安装rdoc和bundler</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>gem install rdoc bundler</span></code></pre></td></tr></table></div></figure>




<h2>第三步：clone Octopress 分支</h2>




<h4>clone source 分支</h4>


<p>在git bash中进入到需要存放本地分支的目录，然后执行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone -b source username:username.github.com.git username.github.com</span></code></pre></td></tr></table></div></figure>


<p>以便将“source”分支clone到username.github.com文件夹下。其中以上所有“username”改为真正的用户名。</p>

<p>如果出现错误尝试使用</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone -b source git@github.com:username/username.github.com username.github.com</span></code></pre></td></tr></table></div></figure>




<h4>clone master 分支</h4>


<p>在git bash中继续执行</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>cd username.github.com #进入到source分支目录
</span><span class='line'>git clone -b master username:username.github.com.git _deploy</span></code></pre></td></tr></table></div></figure>


<p>以便将“master”分支clone到username.github.com文件夹下的_deploy文件夹。其中以上所有“username”改为真正的用户名。
如果出现错误尝试使用</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>git clone -b master git@github.com:username/username.github.com username.github.com</span></code></pre></td></tr></table></div></figure>




<h4>完成部署</h4>


<p>至此，Octopress重新部署完毕，可以继续写博客咯。太久没动过这个博客了，差点就忘了怎么写博客了，如果有哪里有问题忘提醒。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[《Sicily - 零与一的幻想》开坑]]></title>
    <link href="http://blog.sprabbit.com/blog/2012/04/07/sicily/"/>
    <updated>2012-04-07T18:49:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2012/04/07/sicily</id>
    <content type="html"><![CDATA[<p><img src="http://blog.sprabbit.com/images/sicily_bg.jpg" alt="西西里同人海报 零与一的幻想"/></p>

<p>企划首页：<a href="http://www.sprabbit.com/sicily/">http://www.sprabbit.com/sicily</a></p>

<p>预计公开日期：2012年夏</p>

<p>出品：SPRABBIT-超科学兔耳中队</p>

<p>主催：火雾宗师</p>

<p>剧本：Aksea</p>

<p>美术：Ken.J / 招募中&#8230;</p>

<p>音乐：COM. / Tetra Calyx / 招募中&#8230;</p>

<p>引擎：SPEngine（开发中）</p>

<p>编码：火雾宗师 / Black Sky / Zn.</p>

<p>CV？：蓉姨妈? / 招募中</p>

<!--more-->


<p>剧情简要：</p>

<blockquote>
<p>&#8220;沙沙沙&#8221;</p>

<p>安静的房间里，只剩下屏幕里发出电流的杂音。 我茫然的盯着屏幕不知道过了多久， 随着“砰”的一声，屏幕也随之关闭后，我才回过神来。 直到此刻，我才感到—— 她已经离去。</p>

<p>随之而来是让我揪心般疼痛的疑问： 为什么？</p>

<p>感谢你，能够陪伴我。 感谢你，能够找到我。 感谢你……</p>

<p>但正因为如此…… 请忘了我</p>

<p>这是哪个人离开前，最后的话语。 现在她已成为了过去，只存在我的记忆之中。 世上只有我见过她，与她说过话，与她…… 一起生活过。</p>

<p>虽然短暂 尽管已经成为了过去…… 一个属于我和她的故事。</p>
</blockquote>


<p></p>

<h3>关于本企划</h3>


<p>这个企划创意的灵感来源，要追溯到去年一个令人哀伤的消息。同人游戏界的大神XT3000，同时也是百度的技术人员，林海韬，永远地离开了我们。在校期间，XT3000发扬二次元精神，首创了OJ(Online Judge)拟人化，创造了西西里娘这一鼓动着无数同学努力学习的虚拟人物。今天你依然可以在<a href="http://soj.me/">Sicily Online Judge</a>上，找到西西里的身影。听到这不幸的消息时，我们制作组正准备开发新的游戏引擎，并且准备新作的开坑。我觉得非常感慨，虽然对XT3000并不是太过了解，但是我们上的是同一个学校，学的是类似的东西，走的都是同一条路，都有一颗二次元的心，因此产生了共鸣。于是决定做一个关于西西里娘的游戏，纪念故人，并展现我们这群苦逼码农的日常。如今游戏引擎开发进入最后阶段，终于可以开始制作游戏，虽然已经过去了很久，但是最终还是鼓起勇气把专题网站立了起来。希望可以得到大家的支持(゜д゜)！</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[关于《颤抖吧 废怯少女！》]]></title>
    <link href="http://blog.sprabbit.com/blog/2012/03/25/shake-magical-girls/"/>
    <updated>2012-03-25T00:00:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2012/03/25/shake-magical-girls</id>
    <content type="html"><![CDATA[<p><img src="http://blog.sprabbit.com/images/spg01_cover.jpg" alt="颤抖吧 废怯少女 封面"/></p>

<p>《颤抖吧 废怯少女！》是本社团的首部游戏作品。抱歉的是，由于缺乏经验，游戏实在做的不完善，而且后期没有进行详细的说明讲解，导致了很多玩家的疑惑。为了使本作不至于成为一个黑历史，所以在这里做一些补充的说明。</p>

<h2>游戏简介</h2>


<p>游戏名称：颤抖吧 废怯少女！</p>

<p>原作：    魔法少女小圆</p>

<p>游戏类型：SLG + STG （战棋 + 弹幕）</p>

<p>游戏平台：Windows .NET4.0</p>

<p>游戏语言：简体中文</p>

<p>发售日期：2011年08月06日</p>

<p>游戏出品：SPRabbit-超科学兔耳中队</p>

<p>编程人员：BlackSky / Zn. / 火雾宗师 / 六道惠子</p>

<p>立绘美工：Ken.J</p>

<p>游戏音乐：Ken.J</p>

<p>剧情简介：魔女们想侵占地球，正义的魔法少女们奋勇抗击，大战一触即发（大雾）</p>

<!--more-->




<h2>游戏说明</h2>




<h3>游戏安装</h3>


<p>在安装游戏前，请先安装配置游戏的运行环境。游戏安装程序中并未包含运行环境，因此需要另行下载安装。</p>

<p>所需要安装的运行环境有两个：</p>

<p>.NET Framework Client Profile 4.0：<a href="http://www.microsoft.com/download/en/details.aspx?displaylang=en&id=24872">微软官网</a> <a href="http://u.115.com/file/e6y5tehl#">115网盘</a> <a href="http://pan.baidu.com/share/link?shareid=143702&uk=872546290&third=0">百度网盘</a></p>

<p>XNA Framework Redistributable 4.0：<a href="http://www.microsoft.com/download/en/details.aspx?id=20914">微软官网</a> <a href="http://u.115.com/file/dn61mbgg#">115网盘</a> <a href="http://pan.baidu.com/share/link?shareid=143703&uk=872546290&third=0">百度网盘</a></p>

<p>安装完毕后，即可运行游戏安装文件进行安装。</p>

<p>若你拥有盒装的游戏，或者从网上购买了电子版的游戏，在安装后请安装下面提供的V1.10升级补丁。若你下载的是试玩版，请不要安装该补丁。</p>

<h3>游戏运行</h3>


<p>双击游戏快捷方式图标可快速进入游戏。若打开配置程序，可以先对游戏进行简单配置，再启动游戏。</p>

<h3>游戏控制</h3>


<p>本游戏仅支持键盘和XBOX手柄进行输入。</p>

<p>默认按键如下：</p>

<p>箭头键 移动光标</p>

<p>Z       确定/射击</p>

<p>X       取消/消弹</p>

<p>Shift(左) 加速/减速</p>

<h3>游戏模式</h3>


<p>本作采取SLG + STG的创新游戏模式，玩家在每一个关卡经过初始对白后将进入SLG界面。可控制角色为三位魔女。</p>

<p><img src="http://blog.sprabbit.com/images/spg01_01.png" alt="颤抖吧 废怯少女 Sample01"/></p>

<p>使用箭头键将光标移动到角色位置，按Z，打开行动菜单，可以选择移动或者攻击。</p>

<p><img src="http://blog.sprabbit.com/images/spg01_02.png" alt="颤抖吧 废怯少女 Sample02"/></p>

<p>若选择移动，可以将角色移动到移动范围内的任何可达位置，若选择攻击，则可选用武器对敌方单位进行攻击。注意武器分为近战和远程，远程武器射程和威力一般较高，但是不能在移动后使用。无法使用的武器，或者攻击范围内无敌方单位的武器会被标注为灰色。</p>

<p><img src="http://blog.sprabbit.com/images/spg01_03.png" alt="颤抖吧 废怯少女 Sample03"/></p>

<p>选择武器后可以选择攻击目标。在目标上按Z，进入战斗确认画面，这里可以看到敌我双方的战力数据，再次按Z进入战斗，按X可以取消战斗。</p>

<p><img src="http://blog.sprabbit.com/images/spg01_04.png" alt="颤抖吧 废怯少女 Sample04"/></p>

<p>进入战斗后，接口会变成弹幕射击游戏接口，此时玩家需要控制我方单位，躲避敌方子弹，并尽量使己方子弹击中敌方单位。按Z射击，按X释放消弹或护盾，进入无敌状态一定时间。结束战斗需要满足以下条件之一：</p>

<p>1.弹幕时间结束：左上角数字减为零。<br/>
2.敌方耐久度减为零：界面上方蓝条减至零。<br/>
3.敌方生命值减为零：界面上方红条减至零。<br/>
4.自机耐久度减为零：自机中弹三次。<br/>
5.自机生命值减为零：自机将永久阵亡。<br/></p>

<p>耐久度是该单位每次战斗的最高战损，通过攻击力防御力武器威力等因素确定。界面中间的绿条是擦弹条，若刚好躲开子弹会积蓄擦弹值，若擦弹值蓄满，可以在一段时间内获得攻击力加成。</p>

<p>结束战斗后会返回SLG接口，若无可行动单位，可以选择结束己方回合。将光标移动到地图空白处按Z调出主菜单，按“结束回合”以结束本回合。按任务目标可以查看胜利与失败的条件。</p>

<p>在敌方回合，敌人会采取行动对己方单位进行攻击。敌方攻击时也会进入战斗确认界面，但此时无法按X取消，按X会进入武器选择接口，选择合适的武器以应对敌方攻击。进入战斗后和主动攻击的控制是一致的。</p>

<p>后期出现多个己方单位后，会开启援助系统，若单位附近的黄色格子中，有己方单位存在的话，该单位会在战斗中对你进行支持射击。当然，敌方也有类似系统。</p>

<h2>游戏试玩下载</h2>


<p>《颤抖吧 废怯少女！》试玩版：<a href="http://u.115.com/file/aq7qbz82#">115网盘</a> <a href="http://pan.baidu.com/share/link?shareid=143700&uk=872546290&third=0">百度网盘</a></p>

<p>安装试玩版前，请确保已经安装上述运行环境。</p>

<p>本试玩版包含各种游戏难度下的前三关可供试玩。虽然我也想提供完整的版本，但是这对于已购买盒装游戏的玩家并不公平，所以若有兴趣继续游玩，可以到本社淘宝店购买电子版。</p>

<h2>游戏补丁</h2>


<p>策略射击游戏《颤抖吧 废怯少女！》V1.10 升级补丁： <a href="http://u.115.com/file/dnhnsp75#">115网盘</a> <a href="http://pan.baidu.com/share/link?shareid=143701&uk=872546290&third=0">百度网盘</a></p>

<p>使用方法：<br/>
请覆盖安装本补丁。仅对应盒装光盘版游戏。</p>

<p>更新内容：<br/>
1、修复1.0版本中的脚本错误<br/>
2、大幅调整脚本内容<br/>
3、新增难度选择，统一游戏难度<br/>
4、增加中断保存功能<br/>
5、增加Ending<br/>
6、增加两首BGM<br/>
7、改善各种细节<br/>
8、新增游戏窗口设置程序<br/></p>

<h2>FAQ</2>
<h4>Q:打开游戏后第一关是五只QB对吧，过了对话后该怎么具体操作？</h4>
A:不知道你安装了1.10补丁了没有，如果安装了是会有难度选择的。游戏操作方式为箭头键移动光标 Z确定（射击）X（取消）Shift SLG加速（STG减速） ，第一关可以控制角色为夏洛特，在地图的左下角，你可以把光标移到左下角</p>

<h4>Q:咦，我打不开= =？</h4>
<p>A:你有按这里说的安装运行环境吗？</p>

<h4>Q:移动之后它会让我选择攻击/物品/待机。，我按攻击之后就出现三个绝招。可是之后怎么办？我点Z都没一个有反应？</h4>
<p>A:因为敌机还没有进入攻击范围，所以武器是不可选的。你先移动到敌机附近，再进行攻击。</p>

<h4>Q:放入CD后问我“你要如何使用此光盘”，有类似于USB的闪存驱动器和带有CD/dvd播放器两种，问题这时候出的选项是“刻录”，为什么看不到里面的Setup档啊，是盘刻坏了还是对光驱有要求？</h4>
<p>A:请测试您的光驱能否读取其他光盘，或者使用其他机器来读取光盘。若问题依然存在请继续联系我们，我们会及时解决。</p>

<h4>Q:游戏名称没有试玩版3字，就是按不到开始游戏和退出游戏?</h4>
<p>A:按z确定，按x取消。请问你是装的试玩版吗，试玩版请不要使用我们的补丁，试玩版已经是v1.10版本的了</p>

<h4>Q:卧了个槽，NET Framework和XNA Framework都好好的装上、还重启了两次，重装了2次，Oh yeah，游戏依旧不能打开。</h4>
<p>A:不好意思，应该是你的集显配置太低无法运行我们的游戏，你的显卡并不支持游戏所需的DirectX9.0还有Shader Mode 1.1，你的机子也比较老了，考虑升级一下显卡吧，或者到别人计算机上面玩= =</p>

<h2>通贩地址</h2>
<p><a href="http://item.taobao.com/item.htm?id=12621175463">盒装版（剩量少）</a></p>
<p><a href="http://item.taobao.com/item.htm?id=12547238487">数字版</a></p>


<h2>写在最后</h2>
再次对各位玩家说声抱歉，因为游戏是在是太不完善了。而我们也没有打算在此纠缠下去，因为XNA4.0作为一个新兴的平台，其本身就带有许多缺陷。如果玩家计算机无法兼容XNA4.0，我实在是无能为力。虽然辛辛苦苦写了一个基于XNA4.0的游戏引擎，但是很遗憾，他的使命到此为止了。目前我们正在开发一款基于DirectX的游戏引擎，目的旨在提高游戏的兼容性，让大家都能体验到游戏的乐趣。目前我们的下一作已经在开发中，希望各位玩家继续给予支持，谢谢了！

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[关于在64位 Windows 7 中部署中文化的Octopress]]></title>
    <link href="http://blog.sprabbit.com/blog/2012/03/23/octopress/"/>
    <updated>2012-03-23T15:52:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2012/03/23/octopress</id>
    <content type="html"><![CDATA[<blockquote>
前言——可以在Linux环境下部署的话，还是尽可能在Linux下部署吧&#8230;
</blockquote>


<p>真的不是开玩笑的，除非你像我一样喜欢折腾。即使没有Linux系统，能够运行虚拟机的话，装个虚拟的Linux系统也比直接在Windows中部署要简单。</p>

<p>一般的安装步骤，在<a href="http://octopress.org/docs/">Octopress的文檔</a>中就有详细的说明。而在Windows 7中部署，则可参考<a href="http://sinosmond.github.com/blog/2012/03/12/install-and-deploy-octopress-to-github-on-windows7-from-scratch/">Sinosmond的一篇文章</a>。
具体的部署过程，我就不再重复了，只是在部署过程中有几点是需要注意的。</p>

<!--more-->




<h2>Ruby</h2>


<p>Octopress要求的Ruby的版本是1.9.2，最好使用该版本，因为不同版本间的函数库有可能有出入，导致某些插件无法运行。这里经过我的折腾，发现最新版1.9.3也是支持的，目前使用起来没有什么问题，但是需要将octopress根目录下的“.rvmrc”文件中的一行改成</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>rvm use 1.9.3</span></code></pre></td></tr></table></div></figure>




<h2>分支</h2>


<p>若要使用github的个人page，建立repo时设置的名字必须是<code>&lt;yourname&gt;.github.com</code>，这里<code>&lt;yourname&gt;</code>指的是你的github用户名。这样就可以让你的页面可以通过地址<code>http://&lt;yourname&gt;.github.com</code>，来访问，如果不是这样命名的话，你的github pages只能通过<code>github.com/&lt;reponame&gt;</code>访问。
使用<code>rake setup_github_pages</code>后，需要输入github pages的repo地址，格式是<code>git@github.com:&lt;yourname&gt;/&lt;yourname&gt;.github.com.git</code>。</p>

<p>使用<code>rake deploy</code>后，会将public活页夹下的所有文件拷贝到分支管理目录_deploy活页夹中，也即是<code>&lt;yourname&gt;.github.com</code>的master分支目录，然后上传到github。如需对源代码进行版本管理，需要另外建立source分支，并使用基本的git命令进行版本管理。</p>

<h2>中文化</h2>


<p>Octopress原本就是一个英文的框架，所以并没有考虑很多使用其他语言会导致的问题。在尝试中文化时，可能会遇到一些问题，还好这些问题都是能解决的。</p>

<h4>rake generate失败</h4>


<p>如果直接使用原框架书写中文博文，会在generate时失败，提示出现非法UTF-8字符。首先要确认是否已经按照<a href="http://sinosmond.github.com/blog/2012/03/12/install-and-deploy-octopress-to-github-on-windows7-from-scratch/">Sinosmond的文章</a>配置，并设置好<code>LANG</code>等环境变量。如果仍出现该提示是因为原本的文件和生成的文件都是ASCII编码的，如果直接输入中文当然不能被识别。正确的做法是，若要在文件中书写中文，首先将文件保存为<code>UTF-8 without BOM</code>编码格式，然后再进行书写。注意是<code>UTF-8 without BOM</code>而不是单纯的<code>UTF-8</code>编码，如果存成后者，在generate时不会出错，但是生成页面时会出现奇怪的现象。</p>

<h4>中文化文章分类</h4>


<p>如果直接使用中文的文章分类，在deploy后会发现，点击文章分类后出现404错误。这是因为在在generate时，<code>category_generator.rb</code>插件将根据分类名称生成分类页面活页夹，而生成的活页夹是中文的，这在URL中是不允许的，因此无法定位到该页面。这里有<a href="http://geron.heroku.com/blog/2012/octo-cate-cn-spo">Geron的一篇文章</a>，介绍如何为octopress提供中文分类支持。但是我使用该方法后，并没有成功应用。他提供的方法是直接将中文的文章分类转换为url中的编码(就是那种类似<code>%3d</code>这样代表文字的编码)。我使用后，确实令中文的活页夹变成了URL编码的活页夹，这样URL就跟目录相一致。我在本地也测试成功，但是上传github后依然出现404错误，并且考虑到这种方法会产生意义不明显的URL，所以只好采用别的方法。这里我想到了一个将分类名称跟索引分离的方法。即是在一个分类变量中，同时储存一个要显示的名称，还有一个要生成的路径名，这一串字符作为分类索引，并令显示与实现分离。</p>

<p><a href="https://github.com/denjones/denjones.github.com/commit/1d4f3b9433a4d77e31530c4d5f20611c9b9829e2#diff-1">这里是我对<code>category_generator.rb</code>的修改</a>。</p>

<p>修改后的分类格式变更为<code>&lt;分类显示名称&gt;{&lt;分类目录名称&gt;}</code>。比如说你想建立一个“随笔”分类，你想让分类页面保存在一个叫“essay”的目录中，你就要在文章markdown文件的头部加入这样的一行：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>categories:  随笔{essay}</span></code></pre></td></tr></table></div></figure>


<p>如果希望归类到多个分类，则需要这样写：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>categories: 
</span><span class='line'> - 随笔{essay}
</span><span class='line'> - Octopress{octopress}</span></code></pre></td></tr></table></div></figure>


<p>除此之外，还要对一些用于显示分类名称的页面做一些修改。把其中的<code>category</code>修改为<code>category[/[ ^ { ]*/]</code>，因为这里的<code>category</code>已经变成了<code>&lt;分类显示名称&gt;{&lt;分类目录名称&gt;}</code>的格式，需要使用正则表达式取出<code>&lt;分类显示名称&gt;</code>这一部份用于显示。</p>

<p>我的octopress框架已经对相关部份做了处理，是一个比较完善的中文版本的Octopress，如果不喜欢折腾的可以直接在Github <a href="https://github.com/denjones/denjones.github.com/tree/source">clone本博客的框架的开源代码</a>，然后再把其中的<code>_post</code>等目录中的多余文件去掉，修改为自己的框架进行使用。</p>

<h2>代码高亮</h2>


<p>其实这个问题才是在64位Windows 7中部署Octopress会遇到的难题。Octopress已经自带了代码高亮(Highlighting)的相关插件，使用的是<a href="http://pygments.org/">pygments</a>这款插件。但是这款插件是用Python语言写的，所以在本地运行时，需要有安装Python环境。因此进入<a href="http://www.activestate.com/activepython/downloads">Python的主页</a>下载安装包进行安装。好了，既然是64位的Windows7系统，那么首选当然是ActivePython的64-bit版本。兴高采烈的下载安装后，发现问题来了，如果设置了代码高亮的<code>lang</code>属性，generate时会出现错误<code>Liquid error: Could not open library ‘.dll’: The specified module could not be found.</code>。查看错误消息发现在执行<code>rubypython.rb</code>中的函数时，产生了错误。Google后得知rubypython对Windows支持不好，因此需要手动修改其中的一些代码。</p>

<p>对ruby目录下的<code>lib\ruby\gems\ruby 1.9.x>\gems\rubypython-0.5.x\lib\rubypython\pythonexec.rb</code><a href="https://github.com/bendoerr/rubypython/commit/1349aea1c6faa459c4be8474e4a7e878f08459c2">作此修改</a>。</p>

<p>一般来说这样就可以解决问题，但是在这里这个错误<code>Liquid error: Could not open library ‘.dll’: The specified module could not be found.</code>依然出现。考虑是不是64位的问题，于是进入<code>C:/windows/sysWOW64</code>下，并没有发现Python的相关dll，于是到<code>C:/windows/system32</code>下，将<code>python27.dll pythoncom27.dll pywintypes27.dll</code>拷贝到<code>C:/windows/sysWOW64</code>下。generate发现错误变成<code>Liquid error: Could not open library ‘C:/windows/system32/python27.dll’: The specified module could not be found.</code>。然后我就开始百思不得其解。最后没有办法，尝试安装了ActivePython的32-bit版本，问题迎刃而解。估计是rubypython对64位的python环境支持不好，无法打开64位Python的dll。所以在选择ActivePython版本时，请使用32-bit版本。</p>

<h2>结语</h2>


<p>至此，中文版的Octopress在64位windows7中部署成功。折腾了那么久，总算有所回报。但是想到要在别的Windows机器上写博客，也要经过如此复杂的环境配置，我就觉得蛋疼。还好中文框架源码已经使用了版本管理，并不需要对框架进行重复的修改。总的来说在Linux下部署Octopress要比在Windows中简单得多，若经不起折腾，还是不由选用Windows + Octopress这种组合。但是既然你选用了Octopress，证明你的折腾能力还是有的，因为Octopress是一款面向Hacker的博客框架，就在使用Octopress的过程中，享受折腾带来的乐趣吧。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[超科学兔耳中队的博客]]></title>
    <link href="http://blog.sprabbit.com/blog/2012/03/17/new-blog/"/>
    <updated>2012-03-17T13:22:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2012/03/17/new-blog</id>
    <content type="html"><![CDATA[<p>架设了N久，终于把博客架设上去了。作为SPRabbit的博客，除了有一般作品的发布，还有少部份将会是SPRabbit的技术文章。这将会和很多其他社团的网站架构有所区别，因为SPRabbit除了作为同人社团进行同人创作，还作为一个技术团队，进行技术上的研究与开发。</p>

<p>关于本Blog的更多信息，可以在“<a href="http://blog.sprabbit.com/about">关于&#8230;</a>”中获取。</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[小圆同人四格漫画《Predestined》]]></title>
    <link href="http://blog.sprabbit.com/blog/2011/07/26/predestined/"/>
    <updated>2011-07-26T13:22:00+08:00</updated>
    <id>http://blog.sprabbit.com/blog/2011/07/26/predestined</id>
    <content type="html"><![CDATA[<p><img src="http://blog.sprabbit.com/images/predestined_poster.jpg" alt="Prestined 宣传"/>
<img src="http://blog.sprabbit.com/images/predestined_set.jpg" alt="Prestined 套装"/></p>

<p>淘宝：
<a href="http://item.taobao.com/item.htm?id=12290433965">本子单买</a>
<a href="http://item.taobao.com/item.htm?id=12288922556">本子套装</a></p>
]]></content>
  </entry>
  
</feed>