上品な書き出しタイプ

前言
今はES 6の時代ですが、ES 5はどのように書かれていますか?本文はJavaScriptが対象に向かってプログラミングする中の類の書き方を詳述して、そして段階に分けてどのように優雅な種類を書き出しますかを述べます.
一、例
例としては、軽く提示されたコンポーネントToastが挙げられる.実現が必要な機能:

onメソッドには、ヒント

が表示されます.

off方法、隠しヒント

init方法、初期化提示語

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}

Toast.prototype = {
  //    
  constructor: Toast,
  //      
  init: function(option){
    this.prompt = option.prompt || '';
    this.render();
    this.bindEvent();
  },
  //   
  show: function(){
    this.changeStyle(this.elem, 'display', 'block');
  },
  //   
  hide: function(){
    this.changeStyle(this.elem, 'display', 'none');
  },
  //   dom
  render: function(){
    var html = '';
    this.elem = document.createElement('div');
    this.changeStyle(this.elem, 'display', 'none');

    html += 'x'
    html += '
'+ this.prompt +'
';

    this.elem.innerHTML = html;

    return document.body.appendChild(this.elem);
  },
  //     
  bindEvent: function(){
    var self = this;

    this.addEvent(this.elem, 'click', function(e){
      if(e.target.className.indexOf('J-close') != -1){
        console.log('close Toast!');
        self.hide();
      }
    });
  },
  //       
  addEvent: function(node, name, fn){
    var self = this;

    node.addEventListener(name, function(){
      fn.apply(self, Array.prototype.slice.call(arguments));
    }, false);
  },
  //     
  changeStyle: function(node, key, value){
      node.style[key] = value;
  }
};

var T = new Toast({prompt:'I\'m Toast!'});
T.show();

二、類の構成
JavaScriptのクラスは で実現されます.クラスの例示的な形式は以下の通りである.

var T = new Toast();

その中のポイントはFunctionの編纂です.
クラスは2つの部分に分けられます.constructor+prototype.つまり + です.
2.1コンストラクタ
コンストラクタは直感的に理解すると、関数の内部に書かれたコードです.Toastの例から見て、コンストラクタは以下の部分です.

function Toast(option){
  this.prompt = '';
  this.elem = null;
  this.init(option);
}

ここのthisは、例示的なクラスを指す.new Toast()によって実装される度に、コンストラクタは一回実行されます.
2.2原型
プロトタイプ上の方法および変数の宣言は、いずれもToast.prototype.*を介して行われる.原型上の普通の書き方は以下の通りです.

Toast.prototype.hide = function(){/*code*/}
Toast.prototype.myValue = 1;

しかし、この書き方が悪いところは、毎回前半のToast.prorotypeを書いてしまうので、ちょっと面倒です.コード圧縮最適化の面でも友好的ではなく、最適な圧縮ができません.改善の方法は以下の通りです.

Toast.prorotype = {
  constructor: Toast,
  hide: function(){/*code*/},
  myValue: 1 
}

ここでの最適化は、プロトタイプを新しい空のオブジェクト{}に向けることである.メリットとしては、{key:value}でプロトタイプ上の方法と変数を書くことができます.しかし、このような方法はプロトタイプ上のコンストラクタprototype.constructorの指向を変える.再明示的なステートメントconstructorの指向がない場合、Toast.constructor.prototype.constructorの暗黙的な形はObjectに向けられている.正しい方向はToastであるべきです.newによって実装されていますが、クラス継承においてconstructorの指向異常は、正しくない継承判断結果をもたらします.これは私たちが見たくないものです.したがって、constructorを修正する必要があります.
2.3コンストラクタと原型の違い
プロトタイプ上の方法と変数は、このクラスのすべてのインスタンスオブジェクトが共有されます.つまり、一つだけです.コンストラクタ内のコードブロックは、各インスタンスオブジェクトが単独で占有されます.this.**方式を使っても、プライベート変数の方式を使っても、すべて独占的です.したがって、クラスを書くときは、その属性が共有されているか、それとも独占されているかを考慮する必要があります.これをもって、コンストラクタまたは原型について声明することにします.
三、コード規範

類の命名規範には、業界では成文しない規定があり、頭文字が大文字である.

プロトタイプ上のプライベートメソッドは、デフォルトではアンダースコアで開始されます.このようなのはチームの協力の面でreviewコードのメリットがあるだけで、実際には暴露される方法です.

四、実用化はnewと関係がない
クラスの実装は、newオペレータを使用する必要があります強制的に要求されます.newオペレータを使用しないと、コンストラクタ内のthisが、現在の実用化対象ではないことになります.最適化の方式は、instanceofを使って保護を行うことです.

function Toast(option){
  if(!(this instanceof Toast)){
    return new Toast(option);
  }

  this.prompt = '';
  this.elem = null;
  this.init(option);
}

上记のコードから、この技术を使うと、チームの一部のプリクラエビの使用ミスを防止できます.この忍者の技术はかっこいいですが、一方では、利用者が正しい方法で実用化してほしいです.ですから、次のような防護方法に変えます.

function Toast(option){
  if(!(this instanceof Toast)){
    throw new Error('Toast instantiation error');
  }

  this.prompt = '';
  this.elem = null;
  this.init(option);
}

このように鍋を投げ返すのがもっといいでしょう.