Site updated: 2017-09-19 23:56:17

Author: elevenbeans

2016/06/03/DomReady/index.html

@@ -165,7 +165,7 @@ <h1 class="post-title">
 <p>今天抽空梳理一下。</p>
 <h4 id="若干年前踩过的小坑"><a href="#若干年前踩过的小坑" class="headerlink" title="若干年前踩过的小坑"></a>若干年前踩过的小坑</h4><p>不失一般性，在我开始接触前端的时候，学会的第一个框架或者类库 ——Jquery。每次用 JQ 时候用 <code>$(document).ready()</code> 对于逻辑代码进行包裹几乎也是标配。很长一段时间都没有深究过，只想当然的认为加上这个代码块包裹就是等文档准备完成在执行内部逻辑。和原生的<code>window.onload</code> 差不多，甚至猜测其就是对于原生<code>onload</code> 方法的封装。</p>
 <p>然而。。。<br><a id="more"></a><br>上代码：</p>
-<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span class="attr">name</span>=<span class="string">"viewport"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>test3<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span> = <span class="string">"http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>= <span class="string">"http://img5.imgtn.bdimg.com/it/u=950694448,746521765&amp;fm=21&amp;gp=0.jpg"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="undefined"></span></div><div class="line">$(document).ready(function()&#123; //文档树加载完</div><div class="line">  //console.log('ready');</div><div class="line">  var height = $('body').height();</div><div class="line">  console.log('height:::',height); // -&gt; ???</div><div class="line">&#125;)</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
+<figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div></pre></td><td class="code"><pre><div class="line"><span class="meta">&lt;!DOCTYPE html&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">html</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">meta</span> <span class="attr">content</span>=<span class="string">"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"</span> <span class="attr">name</span>=<span class="string">"viewport"</span> /&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">title</span>&gt;</span>test3<span class="tag">&lt;/<span class="name">title</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span> = <span class="string">"http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">head</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span></div><div class="line">  <span class="tag">&lt;<span class="name">img</span> <span class="attr">src</span>= <span class="string">"http://img5.imgtn.bdimg.com/it/u=950694448,746521765&amp;fm=21&amp;gp=0.jpg"</span>/&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div><div class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span><span class="javascript"></span></div><div class="line">$(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123; <span class="comment">//文档树加载完</span></div><div class="line">  <span class="comment">//console.log('ready');</span></div><div class="line">  <span class="keyword">var</span> height = $(<span class="string">'body'</span>).height();</div><div class="line">  <span class="built_in">console</span>.log(<span class="string">'height:::'</span>,height); <span class="comment">// -&gt; ???</span></div><div class="line">&#125;)</div><div class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></div><div class="line"><span class="tag">&lt;/<span class="name">html</span>&gt;</span></div></pre></td></tr></table></figure>
 <p>你会发现在 Chrome 的控制台打出的不是一个确定的值（时而是222，时而是16）。</p>
 <p>宝宝当时就蒙了。。。</p>
 <h4 id="document-ready何时触发？"><a href="#document-ready何时触发？" class="headerlink" title="$(document).ready何时触发？"></a><code>$(document).ready</code>何时触发？</h4><p>Copy 了 Jquery 源码 <a href="https://github.com/jquery/jquery/blob/master/src/core/ready.js" target="_blank" rel="external">https://github.com/jquery/jquery/blob/master/src/core/ready.js</a> 中的代码片段如下：</p>

2017/07/07/floating-point-issue/index.html

@@ -17,7 +17,7 @@
 
 
 
-  <meta name="keywords" content="Float point,JS," />
+  <meta name="keywords" content="JS,Float point," />
 
 
 
@@ -274,10 +274,10 @@ <h4 id="Q-amp-A"><a href="#Q-amp-A" class="headerlink" title="Q&amp;A"></a><stro
       <footer class="post-footer">
         <div class="post-tags">
 
-            <a href="/tags/Float-point/">Float point</a>
-          
             <a href="/tags/JS/">JS</a>
 
+            <a href="/tags/Float-point/">Float point</a>
+          
 
         </div>
 

2017/08/29/Explaining-React-s-license/index.html

@@ -225,6 +225,12 @@ <h2 id="At-last"><a href="#At-last" class="headerlink" title="At last"></a>At la
 
   <nav class="post-nav">
 
+      <a class="prev" href="/2017/09/19/pull-to-refresh/">
+        <i class="iconfont icon-left"></i>
+        <span class="prev-text nav-default">60 行 JS 代码搞定一个下拉刷新组件</span>
+        <span class="prev-text nav-mobile">Prev</span>
+      </a>
+    
 
       <a class="next" href="/2017/08/28/Rocker-Jaber-0/">
         <span class="next-text nav-default">Rocker && Jabber</span>