保守性
ほとんどの開発者は他の人のコードの保守に多くの時間を費やしているため、保守可能なコードを書くことは重要です。新しいコードをゼロから開発するのは難しく、多くの場合、他の人の作品に基づいています。他の開発者がこれに基づいてより適切に作業できるように、独自のコードの保守性を確保します。
保守可能なコードとは何ですか?
理解性: 他の人がコードを引き継ぎ、元の開発者からの完全な説明を必要とせずに、その意図と一般的なアプローチを理解できる
直観性: 操作がどのように実行されるかに関係なく、コード内の内容が一目で理解できる複雑な
適応性: データの変更が完全な書き換えを必要としない方法でコードが記述されている
拡張性: コードはコア機能の将来の拡張を可能にするように設計されている
デバッグ可能性: 何か問題が発生した場合、コードは問題をできるだけ直接的に特定するのに十分な情報が得られます
コーディング規約
コード規約は、JavaScript コードの一連の記述規約を形成することによって、コードを保守しやすくする簡単な方法です。
可読性: コードを保守しやすくするには、まず可読性が必要です。読みやすさの多くはコードのインデントに関係しており、もう 1 つの側面はコメントです。次の側面を含めます:
関数とメソッド: 各関数またはメソッドには、その目的とタスクを完了するために使用されるアルゴリズムを説明するコメントが含まれている必要があります。パラメーターが何を表すか、関数に戻り値があるかどうかなど、前提条件を事前に記述することも非常に重要です
長いコード: 特定のタスクを完了するために使用される複数行のコードの前に、タスクを説明するコメントを付ける必要があります
複雑なアルゴリズム: 問題を解決するために独自の方法を使用する場合は、コメントでその方法を説明してください。これは、他の人がコードを見るのに役立つだけでなく、次に自分でコードを見るときにコードを理解するのにも役立ちます。
ハック: ブラウザーの違いにより、js コードには通常、いくつかのハックが含まれています。特定のブラウザが通常の方法をサポートしていないため、別の方法を使用する必要がある場合は、コメントに記入してください。
変数名と関数名
命名規則は次のとおりです:
変数名は車や人などの名詞である必要があります
関数名はgetName()などの動詞で始まる必要があります。 isEnable() など、is で始まるブール値を返す関数
変数名と関数は論理名を使用する必要があり、長さを気にする必要はありません。長さは後処理と圧縮によって軽減できます
変数の型の透過性
変数のデータ型を示すには 3 つの方法があります:
初期化: 変数が定義されるとき、変数は次の値に初期化される必要があります。その未来を暗示します。
例: var found = false;
特定のデータ型に初期化すると、変数の型を示すことができます。ただし、関数宣言のパラメータには使用できないという欠点があります。
変数の型を指定するにはハンガリー語表記を使用します
「o」はオブジェクトを表し、「s」は文字列を表し、「i」は整数を表し、「f」は浮動小数点数を表し、「b」はブール値を表します
例: var bFound;/ /Boolean
ハンガリー語表記の利点は、関数パラメータも使用できることです。ただし、欠点は、コードがやや読みにくくなり、これがないとコードの直感的で文章のような性質が損なわれることです。
型アノテーションを使用する
var found/*:Booldan*/=false;1
ログイン後にコピー
型アノテーションの欠点は、型アノテーションも複数行のコメントであり、この 2 つが競合するため、複数行のコメントを使用して大きなコード ブロックに一度にアノテーションを付けることができないことです。
松散耦合
只要应用的某个部分过分依赖于另一部分，代码就是耦合过紧、难于维护。典型的问题如：对象直接引用另一个对象，并且当修改其中一个的同时需要修改另外一个。紧密耦合的软件难于维护并且需要经常重写。
解耦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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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:js;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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
