JavaScript コードを最適化する 8 つの方法-見出し-php.cn

同じエフェクトを JS コードで記述する方法は数多くありますが、結果は同じでも手順が異なる例は数多くあります。ただし、エフェクトを記述したにもかかわらず、ページのパフォーマンスが大幅に低下します。現在の開発では、スクリプトのパフォーマンスがますます重要になってきています。この記事では主に JavaScript コードの最適化に関する 8 つのポイントについて説明します。お役に立てれば幸いです。

この記事では、JS プログラミングスタイルのいくつかの重要なポイントを詳しく紹介します

疎結合

他のコンポーネントを変更せずに 1 つのコンポーネントを変更すると、疎結合が達成されます

1. JS を CSS から分離する: CSS を使用しないでください。式

//不好的做法 .box{width: expression(document.body.offsetWidth + 'px')}

ログイン後にコピー

2. CSS を JS から分離する: JS を通じて CSS スタイルを変更する場合は、スタイルスタイルを 1 つずつ変更するのではなく、className または classList を使用します

//不好的做法一 ele.style.color = 'red'; ele.style.left= '10px'; //不好的做法二 ele.style.cssText ='color:red;left:10px;';

ログイン後にコピー

.reveal{color:red;left:10px;} //好的做法一 ele.className += 'reveal'; //好的做法二 ele.classList.add('reveal');

ログイン後にコピー

3. JS を抽出します。 HTML から: JS ファイルを外部ファイルに置きます

4. JS から HTML を抽出: DOM 構造を innerHTML に結合せず、ハンドルバーなどの文字列テンプレートを使用します

グローバル変数

グローバル変数の作成は悪いものとみなされます特にチーム開発の文脈では、特に問題が生じます。コードの量が増えると、グローバル変数によって非常に重要な保守性の問題が発生します。グローバル変数が増えると、エラーが発生する可能性が高くなります。一般的に、次の 3 つの解決策があります。 1. グローバル変数をゼロにする

。即時呼び出し関数 IIFE を使用し、すべてのスクリプトをその中に配置することです

(function(){ var doc = win.document; })(window);

ログイン後にコピー

このモードでは、コードが他のコードに依存する必要があるか、継続的に実行する必要がある限り、使用シナリオが制限されています拡張または変更された場合、このメソッドは使用できません

2. 単一のグローバル変数と名前空間

できるだけ少ないグローバル変数に依存します。つまり、グローバル変数を 1 つだけ作成し、YUI や jQuery などの単一変数モードを使用します

単一のグローバル変数、つまり作成される一意のグローバルオブジェクト名は一意であり、すべての機能コードはこのグローバルオブジェクトにマウントされます。したがって、考えられるすべてのグローバル変数は一意のグローバル変数の属性になるため、複数のグローバル変数は作成されません。ネームスペースは、グローバルオブジェクトの単一の属性によって表される単なる機能グループです。たとえば、Y.DOM の下のすべてのメソッドは DOM 操作に関連し、Y.Event の下のすべてのメソッドはイベントに関連します。一般的な規則では、各ファイルは新しいグローバルオブジェクトを通じて独自の名前空間を宣言します

3. モジュールを使用します

モジュールは、新しいグローバル変数や名前空間を作成しない一般的な関数フラグメントです。代わりに、このコードはすべて、タスクを実行するかインターフェイスを公開する単一の関数に格納されます。このモジュールを表す名前を使用でき、このモジュールは他のモジュールに依存することもできます

イベント処理

イベント処理関連のコードとイベント環境を結合するため、保守性が低下します

1 アプリケーションロジックを分離します

。アプリケーションロジックとイベント処理コードを分割するのがベストプラクティスです

//不好的做法 function handleClick(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; popup.className = 'reveal'; } addListener(element,'click',handleClick); //好的做法 var MyApplication = { handleClick: function(event){ this.showPopup(event); }, showPopup: function(event){ var popup = document.getElementById('popup'); popup.style.left = event.clientX + 'px'; popup.style.top = event.clientY + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); });

ログイン後にコピー

2. イベントオブジェクトを配布しないでください

アプリケーションロジックは、関数を正しく完了するためにイベントオブジェクトに依存すべきではありません。、メソッドインターフェイスはどのようなデータが必要かを示す必要があります。コードが不明確だとバグが発生する可能性があります。最善の方法は、イベントハンドラーにイベントオブジェクトを使用してイベントを処理させ、必要なデータをすべて取得してアプリケーションロジックに渡すことです

//改进的做法 var MyApplication = { handleClick: function(event){ this.showPopup(event.clientX,event.clientY); }, showPopup: function(x,y){ var popup = document.getElementById('popup'); popup.style.left = x + 'px'; popup.style.top = y + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); });

ログイン後にコピー

イベントを処理するときは、イベントプログラムがイベントオブジェクトに公開される唯一の機能です。イベントハンドラーは、アプリケーションロジックに入る前にイベントオブジェクトに対して必要な操作を実行する必要があります (イベントバブリングの防止など)。これはイベントハンドラーに直接含める必要があります

//改进的做法 var MyApplication = { handleClick: function(event){ event.preventDefault(); event.stopPropagation(); this.showPopup(event.clientX,event.clientY); }, showPopup: function(x,y){ var popup = document.getElementById('popup'); popup.style.left = x + 'px'; popup.style.top = y + 'px'; popup.className = 'reveal'; } }; addListener(element,'click',function(event){ MyApplication.handleClick(event); });

ログイン後にコピー

設定データ

コードは定義するだけですいくつかの命令コンピュータが実行するための実行可能ファイルのコレクション。私たちは多くの場合、データをコンピューターに渡し、指示に従ってデータを操作し、最終的に結果を出します。データを変更する必要がある場合、不必要なリスクが生じる可能性があります。キーデータはコードから抽出する必要があります

構成データはアプリケーションでハードコーディングされた値であり、次の内容を含めて将来変更される可能性があります

1、URL 2、需要展现给用户的字符串 3、重复的值 4、配置项 5、任何可能发生变更的值

ログイン後にコピー

未処理の構成を処理する方法は次のとおりですdata

//不好的做法 function validate(value){ if(!value){ alert('Invalid value'); location.href="/errors/invalid.php" rel="external nofollow" ; } } function toggleSelected(element){ if(hasClass(element,'selected')){ removeClass(element,'selected'); }else{ addClass(element,'selected'); } }

ログイン後にコピー

次のコードは、config オブジェクトに構成データを保存します。config オブジェクトの各属性には、データの種類を示すプレフィックスが付いています (MSG は、指定された情報を表示することを意味します)。ユーザー、URL はネットワークアドレス、CSS はクラス名を表します)。もちろん、構成オブジェクト全体を別のファイルに配置することもできます。これにより、構成データへの変更を、このデータを使用するコードから完全に分離できます

//好的做法 var config = { MSG_INVALID_VALUE: 'Invalid value', URL_INVALID:'/errors/invalid.php', CSS_SELECTED:'selected' } function validate(value){ if(!value){ alert(config.MSG_INVALID_VALUE); location.href=config.URL_INVALID; } } function toggleSelected(element){ if(hasClass(element,config.CSS_SELECTED)){ removeClass(element,config.CSS_SELECTED); }else{ addClass(element,config.CSS_SELECTED); } }

ログイン後にコピー

セレクターの最適化

要素へのセレクターを選択しますオブジェクトの静的属性が 1 か所で集中管理されるため

initializeElements: function() { var eles = app.Eles; for (var name in eles) { if (eles.hasOwnProperty(name)) { this[name] = $(eles[name]); } } }

ログイン後にコピー

一例をご紹介します

//好的做法app.Eles = { widgetp: ".left-widget p", inputResize: '.input-resize', hr: '.hr', txt: '.input-group-btn button', cus: '#paper-type-cus', hid: '#hidden', mainCon: '#mainCon', rulerX: '.ruler-x', rulerY: '.ruler-y', };

ログイン後にコピー

関数の最適化

【洗練された機能】

在javascript开发中，大部分时间都在与函数打交道，所以希望这些函数有着良好的命名，函数体内包含的逻辑清晰明了。如果一个函数过长，不得不加上若干注释才能让这个函数显得易读一些，那这些函数就很有必要进行重构

如果在函数中有一段代码可以被独立出来，那最好把这些代码放进另外一个独立的函数中。这是一种很常见的优化工作，这样做的好处主要有以下几点

1、避免出现超大函数

2、独立出来的函数有助于代码复用

3、独立出来的函数更容易被覆写

4、独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用

比如在一个负责取得用户信息的函数里面，还需要打印跟用户信息有关的log，那么打印log的语句就可以被封装在一个独立的函数里：

var getUserInfo = function(){ ajax( 'http:// xxx.com/userInfo', function( data ){ console.log( 'userId: ' + data.userId ); console.log( 'userName: ' + data.userName ); console.log( 'nickName: ' + data.nickName ); }); }; //改成： var getUserInfo = function(){ ajax( 'http:// xxx.com/userInfo', function( data ){ printDetails( data ); }); }; var printDetails = function( data ){ console.log( 'userId: ' + data.userId ); console.log( 'userName: ' + data.userName ); console.log( 'nickName: ' + data.nickName ); };

ログイン後にコピー

【尽量减少参数数量】

如果调用一个函数时需要传入多个参数，那这个函数是让人望而生畏的，必须搞清楚这些参数代表的含义，必须小心翼翼地把它们按照顺序传入该函数。在实际开发中，向函数传递参数不可避免，但应该尽量减少函数接收的参数数量。下面举个非常简单的示例。有一个画图函数draw，它现在只能绘制正方形，接收了3个参数，分别是图形的width、heigth以及square：

var draw = function(width,height,square){};

ログイン後にコピー

但实际上正方形的面积是可以通过width和height计算出来的，于是我们可以把参数square从draw函数中去掉：

var draw = function( width, height ){ var square = width * height; };

ログイン後にコピー

假设以后这个draw函数开始支持绘制圆形，需要把参数width和height换成半径radius，但图形的面积square始终不应该由客户传入，而是应该在draw函数内部，由传入的参数加上一定的规则计算得来。此时，可以使用策略模式，让draw函数成为一个支持绘制多种图形的函数

【传递对象参数代替过长的参数列表】

有时候一个函数有可能接收多个参数，而参数的数量越多，函数就越难理解和使用。使用该函数的人首先得搞明白全部参数的含义，在使用的时候，还要小心翼翼，以免少传了某个参数或者把两个参数搞反了位置。如果想在第3个参数和第4个参数之中增加一个新的参数，就会涉及许多代码的修改，代码如下：

var setUserInfo = function( id, name, address, sex, mobile, qq ){ console.log( 'id= ' + id ); console.log( 'name= ' +name ); console.log( 'address= ' + address ); console.log( 'sex= ' + sex ); console.log( 'mobile= ' + mobile ); console.log( 'qq= ' + qq ); }; setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 );

ログイン後にコピー

这时可以把参数都放入一个对象内，然后把该对象传入setUserInfo函数，setUserInfo函数需要的数据可以自行从该对象里获取。现在不用再关心参数的数量和顺序，只要保证参数对应的key值不变就可以了：

var setUserInfo = function( obj ){ console.log( 'id= ' + obj.id ); console.log( 'name= ' + obj.name ); console.log( 'address= ' + obj.address ); console.log( 'sex= ' + obj.sex ); console.log( 'mobile= ' + obj.mobile ); console.log( 'qq= ' + obj.qq ); }; setUserInfo({ id: 1314, name: 'xiaohuochai', address: 'beijing', sex: 'male', mobile: '150********', qq: 121631835 });

ログイン後にコピー

条件优化

【合并条件片段】

如果一个函数体内有一些条件分支语句，而这些条件分支语句内部散布了一些重复的代码，那么就有必要进行合并去重工作。假如有一个分页函数paging，该函数接收一个参数currPage，currPage表示即将跳转的页码。在跳转之前，为防止currPage传入过小或者过大的数字，要手动对它的值进行修正，详见如下伪代码：

var paging = function( currPage ){ if ( currPage <= 0 ){ currPage = 0; jump( currPage ); // 跳转 }else if ( currPage >= totalPage ){ currPage = totalPage; jump( currPage ); // 跳转 }else{ jump( currPage ); // 跳转 } };

ログイン後にコピー

可以看到，负责跳转的代码jump(currPage)在每个条件分支内都出现了，所以完全可以把这句代码独立出来：

var paging = function( currPage ){ if ( currPage <= 0 ){ currPage = 0; }else if ( currPage >= totalPage ){ currPage = totalPage; } jump( currPage ); // 把jump 函数独立出来 };

ログイン後にコピー

【把条件分支语句提炼成函数】

在程序设计中，复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数。假设现在有一个需求是编写一个计算商品价格的getPrice函数，商品的计算只有一个规则：如果当前正处于夏季，那么全部商品将以8折出售。代码如下：

var getPrice = function( price ){ var date = new Date(); if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天 return price * 0.8; } return price; };

ログイン後にコピー

观察这句代码：

date.getMonth()>=6&&date.getMonth()<=9

ログイン後にコピー

这句代码要表达的意思很简单，就是判断当前是否正处于夏天（7~10月）。尽管这句代码很短小，但代码表达的意图和代码自身还存在一些距离，阅读代码的人必须要多花一些精力才能明白它传达的意图。其实可以把这句代码提炼成一个单独的函数，既能更准确地表达代码的意思，函数名本身又能起到注释的作用。代码如下：

var isSummer = function(){ var date = new Date(); return date.getMonth() >= 6 && date.getMonth() <= 9; }; var getPrice = function( price ){ if ( isSummer() ){ // 夏天 return price * 0.8; } return price; };

ログイン後にコピー

【提前让函数退出代替嵌套条件分支】

许多程序员都有这样一种观念：“每个函数只能有一个入口和一个出口。”现代编程语言都会限制函数只有一个入口。但关于“函数只有一个出口”，往往会有一些不同的看法。下面这段伪代码是遵守“函数只有一个出口的”的典型代码：

var del = function( obj ){ var ret; if ( !obj.isReadOnly ){ // 不为只读的才能被删除 if ( obj.isFolder ){ // 如果是文件夹 ret = deleteFolder( obj ); }else if ( obj.isFile ){ // 如果是文件 ret = deleteFile( obj ); } } return ret; };

ログイン後にコピー

嵌套的条件分支语句绝对是代码维护者的噩梦，对于阅读代码的人来说，嵌套的if、else语句相比平铺的if、else，在阅读和理解上更加困难。嵌套的条件分支往往是由一些深信“每个函数只能有一个出口的”程序员写出的。但实际上，如果对函数的剩余部分不感兴趣，那就应该立即退出。引导阅读者去看一些没有用的else片段，只会妨碍他们对程序的理解

于是可以挑选一些条件分支，在进入这些条件分支之后，就立即让这个函数退出。要做到这一点，有一个常见的技巧，即在面对一个嵌套的if分支时，可以把外层if表达式进行反转。重构后的del函数如下：

var del = function( obj ){ if ( obj.isReadOnly ){ // 反转if 表达式 return; } if ( obj.isFolder ){ return deleteFolder( obj ); } if ( obj.isFile ){ return deleteFile( obj ); } };

ログイン後にコピー

循环优化

【合理使用循环】

在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少。下面有一段创建XHR对象的代码，为了简化示例，只考虑版本9以下的IE浏览器，代码如下：

var createXHR = function(){ var xhr; try{ xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' ); }catch(e){ try{ xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' ); }catch(e){ xhr = new ActiveXObject( 'MSXML2.XMLHttp' ); } } return xhr; }; var xhr = createXHR();

ログイン後にコピー

下面灵活地运用循环，可以得到跟上面代码一样的效果：

//下面我们灵活地运用循环，可以得到跟上面代码一样的效果： var createXHR = function(){ var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ]; for ( var i = 0, version; version = versions[ i++ ]; ){ try{ return new ActiveXObject( version ); }catch(e){ } } }; var xhr = createXHR();

ログイン後にコピー

【用return退出多重循环】

假设在函数体内有一个两重循环语句，需要在内层循环中判断，当达到某个临界条件时退出外层的循环。大多数时候会引入一个控制标记变量：

var func = function(){ var flag = false; for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ flag = true; break; } } if ( flag === true ){ break; } } };

ログイン後にコピー

第二种做法是设置循环标记：

var func = function(){ outerloop: for ( var i = 0; i < 10; i++ ){ innerloop: for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ break outerloop; } } } };

ログイン後にコピー

这两种做法无疑都让人头晕目眩，更简单的做法是在需要中止循环的时候直接退出整个方法：

var func = function(){ for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ return; } } } };

ログイン後にコピー

当然用return直接退出方法会带来一个问题，如果在循环之后还有一些将被执行的代码呢？如果提前退出了整个方法，这些代码就得不到被执行的机会：

var func = function(){ for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ return; } } } console.log( i ); // 这句代码没有机会被执行 };

ログイン後にコピー

为了解决这个问题，可以把循环后面的代码放到return后面，如果代码比较多，就应该把它们提炼成一个单独的函数：

var print = function( i ){ console.log( i ); }; var func = function(){ for ( var i = 0; i < 10; i++ ){ for ( var j = 0; j < 10; j++ ){ if ( i * j >30 ){ return print( i ); } } } };func();

ログイン後にコピー