JS が code_javascript を完成させる前にやるべき 5 つのこと_javascript のヒント

前に書きます

私たちは、多くのプログラマーが JS コードを計画していないという事実に直面しなければなりません。私たちはコードを書いて実行し、すぐに送信することがよくあります。しかし、開発を続けて変数や関数に遭遇し、それらが何を表しているのかを確認するためにもう一度振り返る必要がある場合、問題はここから始まります。同様に、他のプログラマからスクリプトを取得するときにも同様のエラーが発生します。したがって、「これが完了したので、次に進みます」という場合は、スクリプトで次の 5 つのことを実行するのが最善です。

問題の説明

ここで、各 DIV 内にハイパーリンク A を追加し、DIV を表示および非表示にするために、クラス属性を折りたたみます。

以下はモジュール関数を使用して記述された実装コードです:

コードをコピー コードは次のとおりです。

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0;iif(secs[i].className.indexOf('collapsible' )!= =-1){
var p = document.createElement('p');
var a = document.createElement('a');
a.setAttribute('href',' #') ;
a.onclick = function(){
var sec = this.parentNode.nextSibling;
if(sec.style.display === 'none'){
秒。 style.display = 'block';
this.firstChild.nodeValue = 'collapse'
} else {
sec.style.display = 'none';
this.firstChild.nodeValue = 'expand '
}
return false;
};
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
secs[i] .style.display = 'none';
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
})();

上記のコードは、私たちが望む結果を正確に達成しました。ただし、上記のコードをさらにリファクタリングできます。

ステップ 1: スタイル (CSS) と動作 (JavaScript) を分離する

CSS クラス セレクターを追加して、JS で設定されたスタイルを削除できます。この現象は初心者の間でよく発生します。

コードをコピー コードは次のとおりです。

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0;iif(secs[i].className.indexOf('collapsible' )!= =-1){
secs[i].className = ' 'collapsed';
var p = document.createElement('p');
var a = document.createElement(' a') ;
a.setAttribute('href','#');
a.onclick = function(){
var sec = this.parentNode.nextSibling;
if(sec. className.indexOf ('collapsed')!==-1){
sec.className = sec.className.replace('collapsed','');
this.firstChild.nodeValue = 'collapse'
} else {
sec.className = ' 'collapsed';
this.firstChild.nodeValue = 'expand'
}
return false;
}
a.appendChild( document.createTextNode ('expand'));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
}) ();

ステップ 2: コードのさらなるパフォーマンスの最適化

ここでは 2 つのことを行うことができます: 1. ループ ステートメント内の秒の長さ属性を変数に保存できます。 2. イベント ハンドラー用の再利用可能な関数を作成します。利点は、イベント ハンドラーの数が減り、メモリ使用量が削減されることです。

コードをコピー コードは次のとおりです。

var Collapser = (function(){
var secs = document.getElementsByTagName('div');
for(var i=0,j=secs.length;iif(secs[i].className.indexOf ('collapsible ')!==-1){
secs[i].className = ' ' 'collapsed';
var p = document.createElement('p');
var a = document .createElement( 'a');
a.setAttribute('href','#');
a.onclick = toggle;
a.appendChild(document.createTextNode('expand'));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
function toggle(){
var sec = this .parentNode.nextSibling;
if(sec.className.indexOf('collapsed')!==-1){
sec.className = sec.className.replace('collapsed','') ;
this.firstChild.nodeValue = 'collapse'
} else {
sec.className = ' ' 'collapsed';
this.firstChild.nodeValue = 'expand'
}
false を返します ;
}
})();

ステップ 3: 構成オブジェクトを追加する

設定オブジェクトを使用して、使用されるテキスト ラベルやカスタム属性名などのハードコーディングをコードに保存します。その後のメンテナンスに役立ちます。

コードをコピー コードは次のとおりです:

var Collapser = (function(){
var config = {
indicatorClass : 'collapsesible',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : 'expand'
}
var secs = document.getElementsByTagName('div');
for(var i=0,j=secs.length;iif(secs[i].className.indexOf(config.indicatorClass)!==-1){
secs[i].className = ' ' config.collapsedClass;
var p = document.createElement(' p');
var a = document.createElement('a');
a.setAttribute('href','#');
a.onclick = toggle;
a.appendChild (document.createTextNode(config.expandLabel));
p.appendChild(a);
secs[i].parentNode.insertBefore(p,secs[i]);
}
}
function toggle(){
var sec = this.parentNode.nextSibling;
if(sec.className.indexOf(config.collapsedClass)!==-1){
sec.className = sec. className.replace(' ' config.collapsedClass,'');
this.firstChild.nodeValue = config.collapseLabel
} else {
sec.className = ' ' config.collapsedClass;
this. firstChild.nodeValue = config.expandLabel
}
return false;
}
})();

第四步：变量と関数数に含まれる名前

复制代代码如下:

var Collapser = (function(){
var config = {
indicatorClass : 'collapsed',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : 'expand'
}
var セクション = ドキュメント。 getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf(config.indicatorClass) != = -1){
セクション[i].className = ' ' config.collapsedClass;
var 段落 = document.createElement('p');
var トリガー = document.createElement('a') ;
trigger.setAttribute('href','#');
trigger.onclick = toggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendChild( trigger);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
function toggleSection(){
varセクション = this.parentNode.nextSibling ;
if(section.className.indexOf(config.collapsedClass) !== -1){
section.className = Section.className.replace(' ' config.collapsedClass,'');
this .firstChild.nodeValue = config.collapseLabel
} else {
section.className = ' ' config.collapsedClass;
this.firstChild.nodeValue = config.expandLabel
}
return false;
}
})();

第五步：追加必要注释

复制代代码如下:

/ / 特定のクラスを含むページのセクションを折りたたんで展開します
// Christian Heilmann、07/01/08 によって作成
var Collapser = (function(){
// 設定、CSS クラス名を変更し、ラベルはここにあります
var config = {
indicatorClass : 'collapsesible',
collapsedClass : 'collapsed',
collapseLabel : 'collapse',
expandLabel : 'expand'
}
varsections = document.getElementsByTagName('div');
for(var i=0,j=sections.length;iif(sections[i].className.indexOf( config.indicatorClass) !== -1){
sections[i].className = ' ' config.collapsedClass;
var 段落 = document.createElement('p');
var トリガー = ドキュメント。 createElement('a');
trigger.setAttribute('href','#');
trigger.onclick = toggleSection;
trigger.appendChild(document.createTextNode(config.expandLabel));
paragraph.appendChild(trigger);
sections[i].parentNode.insertBefore(paragraph,sections[i]);
}
}
function toggleSection(){
var セクション= this.parentNode.nextSibling;
if(section.className.indexOf(config.collapsedClass) !== -1){
section.className = Section.className.replace(' ' config.collapsedClass,'' );
this.firstChild.nodeValue = config.collapseLabel
} else {
section.className = ' ' config.collapsedClass;
this.firstChild.nodeValue = config.expandLabel
}
return false;
}
})();