web开发常见问题集锦

你的名字 2022-07-24 07:22 296阅读 0赞

## 1.JS控制HTML元素的显示和隐藏 ##

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：

利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

方法二：

利用上述方法实现隐藏后，页面的位置不被占用。

## 2.document.documentElement是什么，和document.body的区别？ ##

document是HTML DOM中的文档对象，指代载入浏览器的 HTML文档。document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。   
注意：Document 对象是 BOM中Window 对象的一部分，可通过 window.document 属性对其进行访问。

documentElement 属性可返回文档的根节点。body是DOM中document对象里的body子节点，即 `<body>`标签；

documentElement 是整个节点树的根节点root，即`<html>`标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

## 3.为什么浮动元素可以撑开父级容器？ ##

为什么浮动元素可以撑开父级容器，浮动的元素不是已经脱离文档流，不占用父容器的空间了吗？

原来，如果对父容器同时进行浮动，那么浮动的元素就可以撑开浮动的父容器了。已经在IE9+（包含IE9）和Chrome中得到验证。

参考如下验证的代码：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><!doctype html>
 
 <html>
 <head></head>
 <body>
 <div id="box">
 <div id="box1">
 <p>jsadfasdjfsjdflfakfaslfasjflkajdsklajfhkda;lklj;s</p>
 </div>
 </div>
 </body>
 
 <style type="text/css">
 p{float:left;}
 #box1{float:left;}
 </style>
 
 </html></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

上面的\#box1高度是由子元素``的高度决定的，即浮动的``撑开了浮动的父级元素\#box1。

## 4.JS获取可视窗口、html文档、body的高度和宽度 ##

高度的获取：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><!doctype html>
 <html>
 <head></head>
 <body>
 </body>
 
 <style type="text/css">
 *{margin:0;padding:0;}
 html{border:1px solid red;height:1000px;}
 body{border:1px solid red;height:500px;}
 </style>
 
 <script>
 alert("window.innerHeight:"+window.innerHeight);
 alert("document.documentElement:"+document.documentElement.offsetHeight);
 alert("document.body.offsetHeight:"+document.body.offsetHeight);
 </script>
 </html></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

宽度的获取：

下面附上网友的总结，可以放到浏览器中试一下，加深理解。

[jQuery][]高度：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">alert($(window).height()); //浏览器当前窗口可视区域高度
 alert($(document).height()); //浏览器当前窗口文档的高度
 alert($(document.body).height()); //浏览器当前窗口文档body的高度
 alert($(document.body).outerHeight(true)); //浏览器当前窗口文档body的总高度 包括border padding margin
 alert($(window).width()); //浏览器当前窗口可视区域宽度
 alert($(document).width()); //浏览器当前窗口文档对象宽度
 alert($(document.body).width()); //浏览器当前窗口文档body的宽度
 alert($(document.body).outerWidth(true)); //浏览器当前窗口文档body的总宽度 包括border padding margin</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

[JavaScript][]的各种高度：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">网页可见区域宽[仅针对body]： document.body.clientWidth
 网页可见区域高[仅针对body]： document.body.clientHeight
 网页可见区域宽[仅针对body]： document.body.offsetWidth (包括滚动条和边框，若滚动条和边框为0，则和clientWidth相等)
 网页可见区域高[仅针对body]： document.body.offsetHeight (包括滚动条和边框，若滚动条和边框为0，则和clientHeight相等)
 可视窗口宽度(包括滚动轴宽度)：window.innerWidth; //IE9+、Chrome、Firefox、Opera 以及 Safari
 可视窗口高度，不包括浏览器顶部工具栏： window.innerHeight;//IE9+、Chrome、Firefox、Opera 以及 Safari
 网页正文全文宽(不包括滚动轴的宽度)： document.body.scrollWidth
 网页正文全文高：document.body.scrollHeight
 //假如网页中没有滚动轴，document.body.scrollWidth和window.innerWidth相等，document.body.scrollHeight和window.innerHeight相等。
 网页被卷去的高： document.body.scrollTop
 网页被卷去的左： document.body.scrollLeft
 网页正文部分上： window.screenTop
 网页正文部分左： window.screenLeft
 屏幕分辨率的高（整个屏幕的高度）： window.screen.height
 屏幕分辨率的宽（整个屏幕的宽度）： window.screen.width
 屏幕可用工作区高度： window.screen.availHeight
 屏幕可用工作区宽度： window.screen.availWidth
 整个浏览器可用工作区高度： window.outerHeight
 整个浏览器可用工作区宽度： window.outerWidth</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

## 5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在浏览器可视窗口中央？ ##

使用固定定位时，元素的定位的参考对象是浏览器可视窗口，不是body，请切记。此时，使用margin:0 auto;已经没有效果。

此时，只能使用CSS的top和left属性进行定位。这里需要一点计算。计算公式如下：

## 6.html中如何键入两个汉字空格？ ##

空格的替代符号有以下几种：

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">名称 编号 描述 
   &#160; 半角空格（1个ASCII码字符宽度）
   &#8194; 半角空格（当前字体的大写字母“N”的宽度）
   &#8195; 全角空格（当前字体的大写字母“M”的宽，相当于一个汉字宽度）
   &#8201; 窄空白（小于1个ASCII码字符宽度） </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

所以，要想键入一个汉字宽的空格使用` `字符实体，段落开头的缩进也是采用em作为长度单位。缩进的方式是设置CSS属性”text-indent:2em;”。

关于长度单位em的描述见：[CSS中常见的长度单位][CSS]。

## 7.js在函数中申明变量可以不用var吗？ ##

（1）在函数内部申明变量   
是可以不用var来申明变量，但是有很大的区别。有var和没var声明的变量是不一样的。有var声明的是局部变量，没var的，声明的全局变量，所以可以借此向外暴露接口东东。 参考如下代码：

（2）在全局作用域内申明变量   
有var和没var声明的变量看一起是一样，但是也是不一样的。我们知道，声明的全局变量，就是window的属性，究竟是否一样，我们通过ECMAScrpit5提供的属性的特性查询方法，来发现之间的区别。

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> var fff = 2; 
 window.ffa = 3; 
 ffb = 4; 
 this.ffc = 4; 
 var ffftx = Object.getOwnPropertyDescriptor(window, 'fff'); //configurable:false,enumerable:true,value:2,writable:true 
 var ffatx = Object.getOwnPropertyDescriptor(window, 'ffa'); //configurable:true,enumerable:true,value:2,writable:true 
 var ffbtx = Object.getOwnPropertyDescriptor(window, 'ffb'); //configurable:true,enumerable:true,value:2,writable:true 
 var ffctx = Object.getOwnPropertyDescriptor(window, 'ffc'); //configurable:true,enumerable:true,value:2,writable:true</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

我们可以分别通过alert(ffftx.configurable);等来查看上面的属性值。通过上面，我们发现原来还是有差别的，我们再用delete删除属性来验证下，配置性为false的属性无法删除。也就是通过变量var声明全局对象的属性无法删除，我们还会发现和函数声明创建的全局对象属性也无法删除。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">delete fff; // 无法删除 
 delete ffa; // 可删除 
 delete ffb; // 可删除 
 delete ffc; // 可删除</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

（3）JS可以重复申明变量吗？JS申明和定义变量的区别？   
使用var语句重复声明语句是合法且无害的。如果重复声明且带有赋值，那么就和一般的赋值语句没差别。如果尝试读取没有声明过的变量，JS会报错。参考如下代码：

<code class="hljs delphi has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> function test(){
 lvlv=1;
 }
 test(); //需要执行函数来申明全部变量lvlv
 var lvlv; //再申明
 alert(lvlv); //输出1
 var lvlv=6; //再申明</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

了解到这些，我真的不得不感叹js这个脚本语言真的是太强大了！语法太灵活了，以至于让我感到有点松散。如果让学Web前端跨到CC++的话，我觉得会很痛苦。在CC++中，变量的申明和定义是有着本质的区别，而在JS中，申明并没有什么作用，如果使用变量时没有定义，那么依然会输出undefined。比如下面的代码：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> var lvlv; //申明(申明在JS中是没用的东西,因为这行没有任何作用)
 alert(lvlv); //输出undefined
 var lvlv=6; //再申明（按我的理解是定义）
 var lvlv=7; //再申明（按我的理解是定义,CC++中不能再次定义）</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

但是，出去最后一行，上面的代码结构在CC++中是完全合法的。变量可以在使用时先申明，后定义。之所以会有这样的差异，因为CC++是编译型语言，在编译时如果发现变量只申明，而没有定义在会编译时报错。因为JS是解释性脚本语言，不存在编译时报错，解释运行时就会输出undefined。

那为什么我在下面已经定义了变量lvlv，而且可以重复定义哦，JS强大吧，在CC++中绝对不会允许这么做的。JS又有点弱智了，竟然不去检查我在下面定义的变量，这是为什么呢？请看我第8小节——JS代码的执行流程是怎样的？

说了这么多，这里给JS中变量的申明和定义下一个定义，以免大家听的糊涂。JS中变量的申明和变量定义有什么区别呢？

JS变量的申明：使用var关键字只申明，不初始化；   
JS变量的定义：使用var关键字或不使用var申明时并初始化。

JS中变量的使用规范：使用时先定义。

在学习CC++的时候，我比较讨厌将申明和定义弄混淆，在学习JS时也是。所以，严格的来说JS变量的申明必须用var，不然的话，那叫做变量的定义。因为我们不能按照如下方式申明变量：

定义时却可以：

JS真是各种随意啊。

## 8.JS代码的执行流程是怎样的？ ##

这里要说明一个概念——JS的代码块。JS的代码块是由`<script>`标签包围的JS代码，即标记对`<script>`和`</script>`之间的代码。下面就是两个JS代码块。

JS的加载顺序：页面上的JavaScript代码是HTML文档的一部分，所以JavaScript在页面装载的顺序就是其引入标记`<script/>`标签的出现顺序。

JS的执行流程： JS在加载之后，解析时分为两个阶段，一个是预处理阶段，一个是执行阶段。一个HTML页面中的JS总的执行顺序是和JS的加载顺序一致。只不过JS执行的基本单元是JS代码块。当JS的一个代码块加载完之后，便对它进行预处理，预处理的内容有：语法分析等。当预处理结束之后就开始执行该代码块。

解析完当前的代码块，就是下一个JS代码块的解析了。当然，HTML文档内容的加载（包括JS的加载）和JS解析是同时进行且同步的。即JS一边解析的时候，其他的JS代码可以同时加载，但JS解析时，要保证一个完整的JS代码块已经加载完成。

考察下面的代码，来加深对JS代码的边加载边解析的过程理解。

为什么运行上面的代码浏览器会报错呢？声明函数不是会在预处理期就会被处理了吗，怎么还会找不到Fn()函数呢？其实这是一个理解误点，我们上面说了JS引擎是按照代码块来顺序解析的，其实完整的说应该是按照代码块来进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边加载边解析的核心所在。

小结： JS并不是等待所有的JS代码加载完成之后才开始解析的，而是加载完一个JS代码块之后便对该代码块进行解析。

根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的`<script>`代码块中,比如放在`<head>`标签内。而需要在页面元素加载完后的js放在后面，比如放在`<body>`标签后面。此外，body标签的onload事件是在最后执行的。

这里还是有个疑问，为什么在同一个JS代码块中在后面定义的函数可以调用，而在后面定义的变量却报not undefined的错误呢？考察如下代码：

有知道的网友请告知，谢谢。

注：上面对JS代码的执行流程的讲解是参考这篇文章：[javascript运行机制之执行顺序详解   
][javascript_]。由于其没有权威的参考资料，所以我们要保持怀疑的态度接受它。

在理解JS代码的执行流程我们可能会想到以下几个问题：  
（1）JS代码的加载顺序。  
答：按照`<script>`标签在HTML文件中的出现的顺序由上到下顺序加载。

（2）JS代码是等到HTML文档加载完之后，或者是等到所有的JS代码加载完之后才开始解析的吗？   
答：不是，JS代码是等到一个JS代码块加载完成之后便开始预处理，预处理完之后开始解析。如果预处理出错，则该代码块不会被执行。出错的代码块不会影响其他JS代码块的解析。

（3）JS解析时，HTML文档或者说JS代码可以同时加载吗？   
答：可以同时加载，一个是JS引擎在工作，一个是http超文本传输协议在工作，二者可以同时进行。但是JS引擎在解析JS代码时，需要等待一个完整的JS代码块加载完成。

（4）JS代码块加载完成之后JS引擎才开始预处理吗，可以加载完一句JS代码就预处理一句呢？   
答：这个目前还没有查阅到可信的资料，在这里我们姑且简单的认为是JS代码块加载完成之后JS引擎才开始预处理与执行。我上面也是按照这个观点讲解的。如果有知道的网友请留言告知，万分感谢。

--------------------

# 参考文献 #

\[1\][http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html][http_www.cnblogs.com_ckmouse_archive_2012_01_30_2332070.html]   
\[2\][HTML DOM Document 对象][HTML DOM Document]   
\[3\][jquery和JavaScript获取网页相关元素的高度和宽度][jquery_JavaScript]   
\[4\][如何在HTML文档中显示空格][HTML]   
\[5\]JavaScript中变量声明有var和没var的区别示例介绍：[http://www.jb51.net/article/55200.htm][http_www.jb51.net_article_55200.htm]

[jQuery]: http://lib.csdn.net/base/22
[JavaScript]: http://lib.csdn.net/base/18
[CSS]: http://blog.csdn.net/k346k346/article/details/49122151
[javascript_]: http://www.2cto.com/kf/201401/273825.html
[http_www.cnblogs.com_ckmouse_archive_2012_01_30_2332070.html]: http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html
[HTML DOM Document]: http://www.w3school.com.cn/jsref/dom_obj_document.asp
[jquery_JavaScript]: http://www.haorooms.com/post/js_jquery_height
[HTML]: http://www.hidoger.com/Show/index/cid/7/id/2.html
[http_www.jb51.net_article_55200.htm]: http://www.jb51.net/article/55200.htm