在JS開發中最實用的問題解答-js教程-PHP中文網

首頁

web前端

js教程

在JS開發中最實用的問題解答

亚连

May 17, 2018 am 11:26 AM

javascript 用的問題解答

可維護性

編寫可維護的程式碼很重要，因為大部分開發人員都花費大量時間維護他人程式碼。很難從頭開始開發新程式碼的，而且很多情況下是以他人成果為基礎的。確保自己程式碼的可維護性，以便其他開發人員在此基礎上更好的開展工作。

什麼是可維護的程式碼？

可理解性：其他人可以接手程式碼並理解它的意圖和一般途徑，而無需原始開發人員的完整解釋

直觀性：程式碼中的東西一看就能明白，不管其操作過程多麼複雜

可適應性：程式碼以一種資料上的變化不要求完全重寫的方法撰寫

可擴展性：在程式碼架構上已考慮到在未來允許對核心功能進行擴展

可調試性：當有地方出錯時，程式碼可以給你足夠的資訊來盡可能直接地確定問題所在

程式碼約定

程式碼約定是一種讓程式碼變得可維護的簡單方法是形成一套JavaScript程式碼的書寫約定。
可讀性：要讓程式碼具有可維護性，首先他必須可讀。可讀性的大部分內容都是和程式碼縮排相關的，還有一方面是註解。包括以下幾個方面：

函數和方法:每個函數或方法都應該包含一個註釋，描述其目的和用於完成任務所可能使用的演算法。陳述事先的假設也非常重要，例如參數代表什麼，函數是否有回傳值

大段程式碼：用於完成某個任務的多行程式碼應該在前面放一個描述任務的註解

複雜的演算法：如果你使用了一種獨特的方式來解決某個問題，則要在註解中註解你是如何做的。這不僅可以幫助其他瀏覽你程式碼的人，也能在下次自己查閱程式碼的時候幫忙理解。

Hack：因為瀏覽器差異問題，js程式碼一般會包含一些hack。如果因為某種瀏覽器無法使用普通的方法，所以你需要用一些不同的方法，請放入註解中。

變數與函數名稱

命名規則如下：

變數名稱應為名詞如car或person

函數名稱應以動詞開始，如getName ()。傳回布林值的函數以is開頭，如isEnable()

變數名稱和函數都應使用合乎邏輯的名字，不要擔心長度。長度可以透過後處理和壓縮來緩解

變數類型透明

有三種方式表明變數資料類型的方式：

初始化：當定義一個變數後，它應該被初始為一個值，來暗示它將來如何應用。
例如：var found = false;
初始化為特定的資料型別可以很好的指明變數的型別。但缺點是它無法用於函數宣告中的參數。

使用匈牙利標記法來指定變數類型
“o”代表對象，”s”代表字串,”i”代表整數,”f”代表浮點數,”b”代表布林型
例如：var bFound;//布林型
匈牙利標記法的好處是函數參數一樣可以使用。但是缺點是讓程式碼某種程度上難以閱讀，阻礙了沒有用它時代碼的直覺性和句子式的特質。

使用類型註解

var found/*:Booldan*/=false;1

登入後複製

類型註解的缺點是你不能使用多行註解一次性註解大塊的程式碼，因為類型註解也是多行註釋，兩者會衝突。

松散耦合

只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧、难于维护。典型的问题如：对象直接引用另一个对象，并且当修改其中一个的同时需要修改另外一个。紧密耦合的软件难于维护并且需要经常重写。

解耦html/javascript

html和javascript各自代表了解决方案中的不同层次：html是数据，javascript是行为。因为他们天生就需要交互，所以有多种不同的方法将这两个技术关联起来。

情况一：直接写在html中的javascript,使用包含内联代码的<script>元素或者使用Html属性来分配<a href="http://www.php.cn/code/5688.html" target="_blank">事件处理</a>程序，都是过于紧密的耦合。 <br/>比如： <br/>从技术上说都是正确的，但是在实践中，它们将表示数据的html和定义行为的JavaScript紧密耦合在了一起。**理想情况是：**html和JavaScript应该完全分离，并通过外部文件和使用DOM附件行为来包含JavaScript。 <br/>当两者耦合在一起时，出现javascript错误时就要先判断错误出现在Html部分还是javascript文件中。还会引入和代码是否可用的相关问题。 <br/>情况二： <br/>html和javascript的机密耦合也可以在相反的关系上成立：javascript包含了Html.这通常会出现在使用innerHtml来插入一段Html。 <br/>将html和JavaScript解耦可以在调试过程中节省实践，更加容易确定错误的来源，也减轻维护的难度，更改行为只需要在JavaScript文件中进行，而更改标记则只要在渲染文件中。</p><p style="text-align: left;">解耦css/javascript</p><p style="text-align: left;">另外一个web层则是css,它主要负责页面的显示。 <br/>最常见的紧密耦合例子是<a href="http://www.php.cn/code/7565.html" target="_blank">使用javascript</a>来更改某些样式，如下所示：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>//css对javascript的紧密耦合 element.style.color = "red"; element.style.backgroundColor = "blue"; 123</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">由于CSS负责页面的显示，当显示出现问题时应该只是查看CSS文件来解决。然而，当使用了JavaScript来更改某些样式的时候，如上面代码所示，就出现了第二个可能已更改的和必须检查的地方。结果是JavaScript也在某种程度上负责了页面的显示，并与CSS紧密耦合了。如果将来需要修改样式，CSS和JavaScript文件可能都需要修改，这会给维护人员带来噩梦。 <br/>解耦合的原则： <br/>虽然不可能完全将css和javascript解耦，但是还是能让耦合更松散的，这是通过动态改变样式类而非特定样式来实现的，如下所示：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>//css对javascript的松散耦合 element.className = "edit"; 12</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">通过只修改某个元素的css类，就可以让大部分样式信息严格保留在css中。JavaScript可以改变样式类，但并不会直接影响到元素的样式，只要使用了正确的类，那么任何显示问题都可以直接追溯到css而非JavaScript。</p><p style="text-align: left;">第二类紧密耦合仅会在IE中出现（标准模式下的IE8不会出现），它可以在css中通过表达式嵌入javascript,例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>/*javascript对css的紧密耦合*/ div{ width:expression(document.body.offsetwidth-10+"px"); }1234</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">通常要避免使用表达式，因为他们不能跨浏览器兼容，还因为它们所引入的JavaScript和css之间的紧密耦合。 <br/>好的层次划分是非常重要的。显示问题的唯一来源应该是css,行为问题的唯一来源应该是javascipt.在这些层次之间保持松散耦合可以让你的整个应用更加易于维护。</p><p style="text-align: left;">解耦应用逻辑/事件处理程序</p><p style="text-align: left;">很少有能仔细得将应用逻辑从事件处理程序中分离的。例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>fuction handleKeyPress(event){ if(event.keyCode == 13）{ var target = eventUtil.getTarget(event); //应用逻辑部分 var value = 5 * parseInt(target.value); if(value >10){ document.getElementById("error-msg").style.display = "block"; } } }12345678910</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">这段代码除了包含应用逻辑，还进行了事件的处理。 <br/>这种方式的问题有其双重性：首先，除了通过事件之外就再没有方法执行应用逻辑，让调试变得困难。如果没有发生预想的结果怎么办？是不是表示事件处理程序没有被调用还会死指应用逻辑失败？其次，如果一个后续的事件引发同样的应用逻辑，那就必须复制功能代码或将代码抽取到一个单独的函数中。无论如何，都要做比实际所需更多的改动。</p><p style="text-align: left;">较好的方法是将应用逻辑和时间处理程序分离，这两者分别处理各自的东西。一个事件处理程序应该从事件对象中提取相关信息，并将这些信息传送到处理应用逻辑的某个方法中。例如前面的代码重写为：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>//处理应用逻辑function validateValue(value){ var value = 5 * parseInt(value); if(value >10){ document.getElementById("error-msg").style.display = "block"; } } //事件处理函数 fuction handleKeyPress(event){ if(event.keyCode==13）{ var target = EventUtil.getTarget(event); validateValue(target.value); } } 1234567891011121314</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">好处：从事件处理程序中分离应用逻辑有几个好处。首先，可以让你更容易更改触发特定过程的事件。如果最开始由鼠标点击事件触发过程，但现在按键也要进行同样处理，这种更改就很容易。其次，可以在不附加到事件的情况下测试代码，使其更容易创建<a href="http://www.php.cn/php/php-tp-unittesting.html" target="_blank">单元测试</a>或者是自动化应用流程。 <br/>以下是要牢记的应用和业务逻辑之间松散耦合的几条原则：</p><p style="text-align: left;">勿将event对象传递给其他方法；只传来自event对象中所需的数据</p><p style="text-align: left;">任何可以在应用层面的动作都应该可以在不执行任何事件处理程序的情况下进行；</p><p style="text-align: left;">任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑。</p><p style="text-align: left;">牢记着几条可以在任何代码中都获得极大的可维护性的改进，并且为进一步的测试和开发制造了很多可能。</p><p style="text-align: left;">js性能</p><p style="text-align: left;">优化DOM交互</p><p style="text-align: left;">在js中，DOM毫无疑问是最慢的一部分。DOM操作与交互要消耗大量时间，因为它们往往需要重新渲染整个页面或者一部分。理解如何优化与DOM的交互可以极大提高脚本完成的速度。</p><p style="text-align: left;">最小化现场更新</p><p style="text-align: left;">一旦你需要访问的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新，因为需要立即对页面对用户的显示进行更新。 <br/>每一个更改，不管是插入单个字符，还是移除整个片段，都有一个性能惩罚，因为浏览器要重新计算无数尺寸以进行更新。现场更新进行得越多，代码完成执行所花的时间就越长，完成一个操作所需的现场更新越少，代码就越快。 <br/>demo1:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body><ul id="list"></ul><script type="text/javascript">var oList = document.getElementById("list"); console.time("计时器1");for(var i=0;i<1000;i++){ var item = document.createElement("li"); list.appendChild(item); item.appendChild(document.createTextNode("item"+i)); } console.timeEnd("计时器1");</script></body>12345678910111213</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">上面这段代码为列表添加了1000个项目，添加每个项目时，都需要2个现场更新：一个添加<li>元素，另一个给它添加文本节点。这样添加1000个项目，这个操作总共要完成2000个现场更新。 <br/>修正这个瓶颈(需要减少现场更新的数量)有两种方法： <br/>1.将列表从页面上移除，最后进行更新，最后再讲列表插回到同样的位置。这个方法的问题在于：每次页面更新的时候都会出现不必要的闪烁。 <br/>2.使用文档碎片来构建DOM结构，接着将其添加到List元素中。这种方式避免了现场更新和页面闪烁的问题。（请看Demo2） <br/>Demo2:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body><ul id="list"></ul><script type="text/javascript">var oList = document.getElementById("list");var fragment = document.createDocumentFragment(); console.time("计时器2");for(var i=0;i<1000;i++){ var item = document.createElement("li"); fragment.appendChild(item); item.appendChild(document.createTextNode("item"+i)); }//记住，当给appendChild()传入文档碎片时，只有碎片中的子节点被添加到目标，碎片本身不会被添加的list.appendChild(fragment); console.timeEnd("计时器2");</script></body>12345678910111213141516</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">在这个例子中只有一次现场更新，它发生在所有项目都创建好之后。文档碎片用作一个临时的占位符，放置新创建的项目，然后使用appendChild()将所有项目添加到列表中。 <br/>一旦需要更新DOM，考虑使用文档碎片来构建DOM结构，然后再将其添加到现在的文档中。 <br/>两个Demo的执行时间比较： </p><p style="text-align: left;">使用innerHTML</p><p style="text-align: left;">在页面上创建DOM节点的方法： <br/>1.使用诸如createElement()和appendChild()之类的DOM方法 <br/>2.使用innerHTML <br/>对于小的DOM更改而言，两种方法效率都差不多，然而，对于大的DOM更改，使用innerHTML要比使用标准DOM方法创建同样的DOM结构快得多。 <br/>原因：当把innerHTML设置为某个值时，后台会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的，所以执行快得多。 <br/>Demo:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body><ul id="list"></ul><script type="text/javascript">var oList = document.getElementById("list"), html = "", i;for(i=0;i<2000;i++){ html += "<li>item " + i +"</li>"; } oList.innerHTML = html;//这里构建好一个字符串然后一次性调用innerHTML，这样也只发生一次现场更新</script></body>12345678910111213</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">使用事件代理</p><p style="text-align: left;">页面上的事件处理程序的数量和页面响应用户交互的速度之间是负相关。为了减少这种惩罚，最好使用事件代理。 <br/>事件代理：用到了事件冒泡。任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理。利用这一点，就可以将事件处理程序附加到更高层的地方负责多个目标的事件处理。如果在文档级别附加事件处理程序，这样可以处理整个页面的事件。 <br/>Demo:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>事件委托</title></head><body><ul id="list1"> <li><a href="#">正在监听1</a></li> <li><a href="#">正在监听1</a></li> <li><a href="#">正在监听1</a></li> <li><a href="#">正在监听1</a></li></ul><ul id="list2"> <li><a href="#">正在监听2</a></li> <li><a href="#">正在监听2</a></li> <li><a href="#">正在监听2</a></li> <li><a href="#">正在监听2</a></li></ul><a href="#" id="add-items">添加更多节点</a><script type="text/javascript">var oList1 = document.querySelector("#list1");var aList = oList1.querySelectorAll("li");var oList2 = document.querySelector("#list2");var oBtn = document.querySelector("#add-items");for(var i=0,len=aList.length;i<len;i++){ aList[i].onclick = function(){ alert("正在监听1"); } } oList2.onclick = function(){ alert("正在监听2"); } var html = "<li><a href=&#39;#&#39;&#39;>我是动态新增节点</a></li>"; oBtn.onclick = function(){ oList1.innerHTML += html; oList2.innerHTML += html; }</script></body></html>123456789101112131415161718192021222324252627282930313233343536373839404142</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">事件委托好处： <br/>1.能够有效减少页面上事件处理程序的数量 <br/>2.对于动态增加的子节点，依旧能够实现事件的绑定</p><p style="text-align: left;">最小化访问HTMLCollection的次数</p><p style="text-align: left;">最小化访问HTMLCollection的次数可以极大地改进脚本的性能</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body><script type="text/javascript">//这里关键在于长度length存入了len变量，而不是每次都去访问HTMLCollection的length属性var images = document. getElementsByTagName ("img"), image, i,len;for(i=0,len=images.length;i<len;i++){ image = images[i]; //其他处理}</script></body>123456789101112</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">注意作用域</p><p style="text-align: left;">避免全局查找</p><p style="text-align: left;">可能优化脚本性能最重要的就是注意全局查找。使用全局变量和函数肯定要比局部的开销更大，因为要涉及作用域链上的查找。 <br/>下面的代码包含了3个对于全局document对象的引用。如果在页面上有多个图片，那么for循环中的document引用就会被执行多次甚至上百次，每次都会进行作用域链查找。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript">/* 通过创建一个指向document对象的局部变量，就可以通过限制一次全局查找来提升这个函数的性能。 */function updateUI(){ var imgs = document.getElementsByTagName("img"); for(var i=0,len=imgs.length;i<len;i++){ imgs[i].title = document.title + "image" +i; } var msg = document.getElementById("msg"); msg.innerHTML = "Update complete"; }function updateUI(){ //缓存全局变量，减少全局变量的查找。这样就减少了话费在作用域上查找的时间，就能提升脚本的性能。改进后的函数只有一次全局查找。 var doc = document; var imgs = doc.getElementsByTagName("img"); for(var i=0,len=imgs.length;i<len;i++){ imgs[i].title = doc.title + "image" +i; } var msg = doc.getElementById("msg"); msg.innerHTML = "Update complete"; }</script>123456789101112131415161718192021222324</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">下面的例子中通过创建一个指向document对象的局部变量，就可以通过限制一次全局查找来提升这个函数的性能。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript">function updateUI(){ //缓存全局变量，减少全局变量的查找。这样就减少了话费在作用域上查找的时间，就能提升脚本的性能。改进后的函数只有一次全局查找。 var doc = document; var imgs = doc.getElementsByTagName("img"); for(var i=0,len=imgs.length;i<len;i++){ imgs[i].title = doc.title + "image" +i; } var msg = doc.getElementById("msg"); msg.innerHTML = "Update complete"; }</script>123456789101112</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">避免with语句</p><p style="text-align: left;">with语句会创建自己的作用域，因此会增加其中执行的代码的作用域链的长苏。由于额外的作用域链查找，在with语句中执行的代码肯定会比外面执行的代码要慢。 <br/>看下面这个例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript">/* 大多数情况下，可以使用局部变量完成相同的事情而不必引入新的作用域 */function updateBody(){ with(document.body){ console.log(tagName);//这里将代码的作用域设置到document.body对象中 innerHTML = "Hello world"; } }function updateBody(){ var body = document.body; console.log(body.tagName);//这里将代码的作用域设置到document.body对象中 body.innerHTML = "Hello world"; }</script>123456789101112131415161718</pre><div class="contentsignin">登入後複製</div></div><p style="text-align: left;">大多数情况下，可以使用局部变量完成相同的事情而不必引入新的作用域</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><script type="text/javascript">function updateBody(){ var body = document.body; console.log(body.tagName);//这里将代码的作用域设置到document.body对象中 body.innerHTML = "Hello world"; }</script></pre><div class="contentsignin">登入後複製</div></div><p>上面是我整理给大家的JS开发中最实用的问题解答，希望今后会对大家有帮助。</p> <p>相关文章：</p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-396516.html" target="_blank">重点解答js的几种提交方式</a><br></p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-396514.html" target="_blank">详细讲解JS中Windows对象课程</a><br></p> <p style="text-align: left;"><a href="http://www.php.cn/js-tutorial-396504.html" target="_blank">如何在<script></script>标签中一样可以使用el表达式

以上是在JS開發中最實用的問題解答的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn