语法高亮,滚动条美化,设置页面调整

This commit is contained in:
fofolee
2019-04-19 02:41:09 +08:00
parent 1e8f76c000
commit 359d29ee0b
1590 changed files with 12328 additions and 11441 deletions

View File

@@ -9,7 +9,7 @@
[<em>statements</em>]
}
</pre>
</code></pre>
<dl>
<dt><code>name</code></dt>
<dd>函数名</dd>
@@ -30,7 +30,7 @@
<h3 id="有条件的创建函数" style="line-height: 24px; font-size: 1.71428571428571rem;">有条件的创建函数</h3>
<p>函数可以被有条件来声明,这意味着,函数声明可能出现在一个 if 语句里,但是,这种声明方式在不同的浏览器里可能有不同的效果。因此,不应该在生成环境代码中使用这种声明方式,应该使用函数表达式来代替。</p>
<p> </p>
<pre class="brush: js"><code>var hoisted = "foo" in this;
<pre><code class="language-javascript"><code>var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (false) {
function foo(){ return 1; }
@@ -46,10 +46,10 @@ if (false) {
// 'foo' 变量名未被提升. 而且 typeof foo 为 undefined
//
// 在Safari里:
// 'foo' 变量名被提升. 而且 typeof foo 为 function</code></pre>
// 'foo' 变量名被提升. 而且 typeof foo 为 function</code></code></pre>
<p>注意,即使把上面代码中的 if(false) 改为 if(true),结果也是一样的</p>
<p> </p>
<pre class="brush: js"><code>var hoisted = "foo" in this;
<pre><code class="language-javascript"><code>var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (true) {
function foo(){ return 1; }
@@ -66,12 +66,12 @@ if (true) {
//
// 在Safari里:
// 'foo' 变量名被提升. 而且 typeof foo 为 function</code>
</pre>
</code></pre>
<p> </p>
<p> </p>
<h3 id="函数声明提升">函数声明提升</h3>
<p>JavaScript 中的<strong>函数声明</strong>被提升到了<strong>函数定义</strong>。你可以在函数声明之前使用该函数:</p>
<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // "foo"
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // "foo"
</span><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">hoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
  console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"foo"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
@@ -90,24 +90,24 @@ var </span><span class="function token" style="color: #dd4a68;">hoisted</span><s
</code>
</pre>
</code></pre>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 38px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 57px; background: 0px 0px;"> </div>
<div class="line-number" style="margin-top: 1em; position: absolute; left: 0px; right: 0px; line-height: inherit; top: 76px; background: 0px 0px;"> </div>
<div class="note">
<p>注意 :<strong>函数表达式</strong><a href="Reference/Operators/function" title="function 关键字可以用来在一个表达式中定义一个函数。"><code>function expressions</code></a> 不会被提升:</p>
</div>
<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">notHoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // TypeError: notHoisted is not a function
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="function token" style="color: #dd4a68;">notHoisted<span class="punctuation token" style="color: #999999;">(</span></span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span><span class="comment token" style="color: #708090;"> // TypeError: notHoisted is not a function
</span>
<span class="keyword token" style="color: #0077aa;">var</span> notHoisted <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">=</span> <span class="keyword token" style="color: #0077aa;">function</span><span class="punctuation token" style="color: #999999;">(</span><span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
console<span class="punctuation token" style="color: #999999;">.</span><span class="function token" style="color: #dd4a68;">log<span class="punctuation token" style="color: #999999;">(</span></span><span class="string token" style="color: #669900;">"bar"</span><span class="punctuation token" style="color: #999999;">)</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span></code></pre>
<span class="punctuation token" style="color: #999999;">}</span><span class="punctuation token" style="color: #999999;">;</span></code></code></pre>
<h2 id="Examples" name="Examples">示例</h2>
<h3 id="Example:_Using_function" name="Example:_Using_function">使用函数</h3>
<p>下面的代码声明了一个函数,该函数返回了销售的总金额, 参数是产品a,b,c分别的销售的数量.</p>
<pre class="brush: js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">calc_sales<span class="punctuation token" style="color: #999999;">(</span></span>units_a<span class="punctuation token" style="color: #999999;">,</span> units_b<span class="punctuation token" style="color: #999999;">,</span> units_c<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
<pre><code class="language-js language-js" style="padding: 1em 0px 1em 30px; font-size: 14px; white-space: normal; color: rgb(77, 78, 83);"><code class="language-js" style="direction: ltr; white-space: pre;"><span class="keyword token" style="color: #0077aa;">function</span> <span class="function token" style="color: #dd4a68;">calc_sales<span class="punctuation token" style="color: #999999;">(</span></span>units_a<span class="punctuation token" style="color: #999999;">,</span> units_b<span class="punctuation token" style="color: #999999;">,</span> units_c<span class="punctuation token" style="color: #999999;">)</span> <span class="punctuation token" style="color: #999999;">{</span>
<span class="keyword token" style="color: #0077aa;">return</span> units_a<span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span><span class="number token" style="color: #990055;">79</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> units_b <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">129</span> <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">+</span> units_c <span class="operator token" style="background: rgba(255, 255, 255, 0.498039); color: #a67f59;">*</span> <span class="number token" style="color: #990055;">699</span><span class="punctuation token" style="color: #999999;">;</span>
<span class="punctuation token" style="color: #999999;">}</span></code></pre>
<span class="punctuation token" style="color: #999999;">}</span></code></code></pre>
<h2 id="规范" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">规范</h2>
<table class="standard-table">
<tbody>