js符号化の詳細

JavaScriptの正しい動作は、CSSが欠けている場合でも正しく動作することに依存すべきではないと考えています.両者の間に相互作用がある可能性がありますが.

一、松結合のいくつかの提案

他のコンポーネントを変更する必要がなく、コンポーネントを変更できるようになると、緩やかな結合ができます.
1、JavaScriptをCSSから抽出する(現在は基本的に以下のような書き方はしない).box{width: expression(document.body.offsetWidth + "px")} //
2、CSSをJavaScriptから引き離し、classクラス名を増減してスタイルを制御するelement.style.color = "red"; //
3、JavaScriptをHTMLから引き離す

Click me

上記の書き方は2つのUI層の深い結合で,ユーザがクリックしたときに関数が存在しない場合がある.あるいは、doSomethingを修正した後、JavaScriptとHTMLのコードを同時に修正する必要がある場合があります.DOM 2レベルイベントバインディングを利用する場合は、より良い処理方法です.
すべてのJavaScriptコードを外部ファイルに入れて、HTMLコードに内蔵されたJavaScriptコードがないことを確認したほうがいいです.
4、HTMLをJavaScriptから抽出する通常コードには、次のような書き方があります.

//     
var div = document.getElementById("my-div");
div.innerHTML = "
Error
invalid e-mail address
";

解決方法:

ajaxを介してサーバから

をロード

クライアントテンプレート

を利用する.

二、変数に関するいくつかの提案

グローバル変数がもたらす問題:

ネーミング競合

任意の関数は、グローバル変数を不用意に変更し、コードエラー

を発生させる.

テストが困難

グローバル変数のいくつかの解決tipについて:

すべての変数はvarで定義され、jsが誤ってグローバル変数

を生成することを防止する.

予期せぬグローバル変数を回避し、jsLintを使用してアラームを鳴らす.推奨エディタBracket

厳格モードを用いて

を検査する.

単一グローバル変数方式(単一モード)

を用いる

三、イベント処理の松結合処理

1、アプリケーション層のロジックを隔離する

//     
function handleClick(event){
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
} 

addEventListener(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";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});

コードを何行も書いているように見えますが、メンテナンスが容易です.
2、イベントオブジェクトeを配布しない
上記のコードで定義されたメソッドshowPopupは、呼び出すたびにeventオブジェクトに転送する必要がありますが、eventの2つの属性を使用しているだけで、実際には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";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});

上記のコードには、デフォルトのイベントをブロックするか、イベントのバブルをブロックするか、イベントハンドラに直接含まれるべきかなど、イベントハンドラがアプリケーションロジックに入る前にeventオブジェクトに対して必要な操作を実行する点があります.次のようになります.

var MyApplication = {
    
    handleClick:function(event){
    
        //      DOM level2
        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";
    }
}

addEventListener(element, "click", function(){
    MyApplication.handleClick(event);
});

四、判断文の中で空の比較を避けるように注意する

知識を復習して、各種の値の操作を検査します
1、検出元値(文字列、数字、ブール値、undefined):typeof、検出null:===または!==で判断（typeof null = "object"） 3、検出参照値:instanceof演算子

//    
if(value instanceof Date){
    console.log('1')
}

4、検出関数:console.log(typeof myFunc === "function") 5、検出配列:

鴨式弁型(具体的な解釈はサイの本を参照)

function isArray(value){
    return typeof value.sort === "function"
}

Kangax解決方法

function isArray(value){
    return Object.prototype.toString.call(value) === '[object Array]';
}

ES 5方法:Array.isArray

6、検査属性を書いたことがある

//    
if(a[b]){...}

// null   
if(a[b] != null){...}

// undefined   
if(a[b] != undefined){...}

ただし、上記の書き方は明確ではなく、与えられた名前で属性の値をチェックするため、属性値が0，false，null，undefinedであるとエラーが発生します.in演算子+hasOwnProperty

五、配置データの分離

≪データの構成｜Configure Data｜ldap≫:アプリケーションに書き込まれた値

URL

ユーザーに表示する文字列

繰り返し値

設定(各ページの構成項目など)

変化する可能性のある値

処理方式:1、構成データを抜き出して、単独の変数で保存して、便利に2を修正して、構成データを保存する:試してみる価値があって、構成データを非JavaScriptファイルの中で保存する

JSON

JSONP

純JavaScript

六、誤って投げ出す方法

1、ミスを投げ出す方法:throw new Error('Something has happened')、ミスを投げ出す経験則:

デバッグが困難なエラーが修正されると、2つのカスタムエラーを追加してみます.これにより、エラーが再び発生すると、問題をより容易に解決することができる

.

コードを作成している場合は、「コードに何らかのエラーを投げ出したくない」と考えてみましょう.このとき、「何らかのエラーが発生する」と、エラー

が投げ出される.

作成中のコードが他の人も使用する場合は、彼らの使用方法を考えて、特定の状況でエラー

を投げ出す.
3、try・・catch文4、具体的なエラータイプを扱う

try {
    //         
} catch (ex) {
    if(ex instanceof TypeError) {
        //  TypeError  
    } else if(ex instanceof ReferenceError){
        //  Reference  
    } else {
        //    
    }
}

七、対象に対する処理

1、オブジェクトベースの継承

var person = {
    name:'a',
    sayName:function(){
        alert(this.name);
    }
}

var myPerson = Object.create(person);
myPerson.sayName(); //  a

sayNameメソッドを再定義すると、personが自動的に切断されます.sayName()の方法

myPerson.sayName = function(){
    alert("b");
}
myPerson.sayName();//  b
person.sayName();//  a

Object.create()メソッドでは、2番目のパラメータを指定できます.このパラメータオブジェクトのプロパティとメソッドが新しいオブジェクトに追加されます.

var myPerson = Object.create(person,{
    name:{
        value:'Ge'
    }
});

myPerson.sayName();//  Ge
person.sayName();//  a

3、タイプベースの継承(2ステップ)

プロトタイプ継承

コンストラクタ継承

function Person(name){
    this.name;//  name     Person   
}

function Author(name){
    //     
    Person.call(this,name);//  Person          。Person     this    ，this    Author  ，     name     Author    
}

Author.prototype = new Person();

八、ブラウザ嗅ぎ

1、user-Agent検出

//             
if(navigator.userAgent.indexOf("MSIE") > -1) {
    // Internet Explorer
} else {
    //  Internet Explorer
}

ブラウザの発展は文字列検出のユーザー体験をますます悪化させ、最良の方法は古いブラウザ、例えばIE 8と以前のバージョンだけを検出し、IE 9とより高いバージョンを検出しようとしないことである.

if( isInternetExplorer8OrEalier ){
    //  IE8      
} else {
    //       
}

参考資料:『メンテナンス可能なJavaScriptの作成』