jsの中の設計の原則とプログラミングの技巧

8998 ワード
1設計の原則
1.1単一職責原則(SRP)
意味:各対象/方法は一つの役割しかしない.
例:ワンケースモードでdivを作成する方法:取得例と作成divを分離して実現する.
var getSingle = function(fn:Function) {
  var result:any
  return function () {
    return result || (result = fn.apply(this,arguments))
  }
}

var createDiv = function () {
  var div = document.createElement('div')
  div.innerHTML = '          div'
  document.body.appendChild(div)
  return div
}

var createSingleDiv = getSingle(createDiv)
var div1 = createSingleDiv()
var div2 = createSingleDiv()
div1 === div2 //true
利点:
  • は、単一の方法／オブジェクトの複雑性を低減する
    • .
  • は、コードの多重化およびユニット試験
    • を容易にする.
  • 一つの職責が変化した場合、他の職責に影響を与えない.
    • 職責分離の原則:
  • 職責間の独立は相互に影響しない.
  • 二つの職責がいつも同時に変化するなら、分離する必要がない.
  • 一緒にいるいくつかの職責が何の変化もないなら、分離する必要がない.
    デメリット:
  • コードの複雑さを増加させる
  • は、オブジェクト間の相互接続の難しさを増大させる.
    1.2最小知識原則(LKP)
    意味:1つのソフトウェアエンティティは、できるだけ他のエンティティと相互作用しなければならない.ソフトウェアエンティティは、オブジェクト、クラス、モジュール、システム、変数、関数などを含む.
    例:仲介者モード、ショッピングモールで携帯電話を購入し、携帯電話の色、購入数量、携帯電話のメモリを選択できます.在庫が十分ある場合、購入ボタンをクリックしてもいいです.在庫が足りない場合、ボタンをクリックしてはいけません.在庫不足の情報方法を表示します.次の行動を仲介者に実行させる.実現:index.html
    
      : 
        : 
          : 
    
          : 

    
          : 

    
          :
    main.js
    
var goods = { //     
  "red|32G": 3,
  "red|16G": 0,
  "blue|32G": 1,
  "blue|16G": 6
};

Function.prototype.after = function (fn) {
  var self = this;
  return function () {
    var ret = self.apply(this, arguments);
    if (ret === 'nextSuccessor') {
      return fn.apply(this, arguments);
    }
    return ret;
  }
};

var colorCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === colorSelect) { //              
    colorInfo.innerHTML = color;
  }
  if(!color) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '       ';
  } else {
    return 'nextSuccessor'
  }
}

var memoryCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === memorySelect) {
    memoryInfo.innerHTML = memory;
  }
  if(!memory) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '       ';
  } else {
    return 'nextSuccessor'
  }
}

var numCheck = function (obj,color,memory,number,stock,nextBtn) {
  if (obj === numberInput) {
    numberInfo.innerHTML = number;
  }
  if(!Number.isInteger(number - 0) || number <= 0) {
    nextBtn.disabled = true;
    nextBtn.innerHTML = '          ';
  } else if(number > stock){
    nextBtn.disabled = true;
    nextBtn.innerHTML = '    ';
  } else {
    nextBtn.disabled = false;
    nextBtn.innerHTML = '     ';
  }
}

var checkBtn = colorCheck.after(memoryCheck).after(numCheck)

var mediator = (function () {
  var colorSelect = document.getElementById('colorSelect'),
    memorySelect = document.getElementById('memorySelect'),
    numberInput = document.getElementById('numberInput'),
    colorInfo = document.getElementById('colorInfo'),
    memoryInfo = document.getElementById('memoryInfo'),
    numberInfo = document.getElementById('numberInfo'),
    nextBtn = document.getElementById('nextBtn');
  return {
    changed: function (obj) {
      var color = colorSelect.value, //   
        memory = memorySelect.value, //   
        number = numberInput.value, //   
        stock = goods[color + '|' + memory]; //               
      checkBtn(color,memory,number,stock,nextBtn)
     
    }
  }
})();


//     ：
colorSelect.onchange = function () {
  mediator.changed(this);
};
memorySelect.onchange = function () {
  mediator.changed(this);
};
numberInput.oninput = function () {
  mediator.changed(this);
};
    :
  • は、オブジェクト の を らす
    • .
    :
  • は、オブジェクト の を な り らすことができ、2つのオブジェクト の が でない 、2つのオブジェクト の
    • を うために 3のオブジェクトを することができる.
  • オブジェクトが のオブジェクトを しなければならない 、オブジェクトを なインターフェースだけに させ、オブジェクト の を ( )
    • に させる.
    デメリット:
  • は、 が な
    • までの なオブジェクトを させる がある.
    1.3 (OCP)
    :ソフトウェアエンティティは であるはずだが、 できない.ソフトウェアエンティティは、オブジェクト、クラス、モジュール、システム、 、 などを む.プログラムの を するか、またはこのプログラムに しい を する がある は、コードを する ではなく、コードを する を することができます.
    :1つの を の にマッピングします.マッピングのステップは です.マッピングの は です.マッピングの はコールバック に れて します.
    var arrMap = function(arr,callback) {
  var i = 0,
    length = arr.length,
    value,
    ret = []
  for(;i
    :
  • ソースコードの による を ける
    • .
  • ソースコードのコストを する
  • は、システムの した と しやすい を して、 された を で き えるのに である.
    :
  • を して、プログラムが するところを し して、これらの をカプセル します.
  • が けられない 、できるだけ しやすいところを してください.
    2プログラミング
    2.1インターフェース けプログラミング
    :インターフェースプログラミングとは、 なプログラミングに けて、オブジェクトのタイプからオブジェクトに を てる であり、オブジェクトに する タイプの な をプログラミングすることである.
    インターフェースは、オブジェクト の のセットを すだけでなく、Javaのinterfaceなど、いくつかの が するキーワードをも し、クラスとクラスの の を に する.
    2.1.1
  • お を れてもコーヒーを れても、 を に し む がある 、お を れることとコーヒーを れることを み に えることができます.
  • み を れるクラスに、 を に し むという な を いておきながら、 み から け いだお を れる とコーヒーを れるサブカテゴリーを き えて、 を に し む
    • を いています.
    abstract class Beverage {
  abstract operation():void
}


class Tea extends Beverage{
  operation() {
    console.log('       ')
  }
}

class Coffee  extends Beverage {
  operation() {
    console.log('       ')
  }
}
    2.1.2インターフェース
    2.2の は、 を つのインターフェースとして することもできる.
    interface Beverage {
  operation: Function
}

class Tea implements Beverage{
  operation() {
    console.log('       ')
  }
}

class Coffee implements Beverage {
  operation() {
    console.log('       ')
  }
}
    2.2コード
    2.2.1
    に きなコードがあれば、 してこのコードを の した に れるのが いいです.
    :ページの み みが したら、 を したり、ページの を したりします. を することと を して します.
    window.onload = function () {
  createCircle()
  log()
}

function createCircle() {
  var canvas = document.getElementById('canvas')

  if(canvas.getContext) {
    var ctx = canvas.getContext('2d')

    ctx.fillStyle='red';
    ctx.arc(20,20,20,0,2*Math.PI)
    ctx.fill()
  }
}

function log() {
  console.log('    ')
}
    2.2.2 セグメントの
    if else で じセグメントのコードを すれば、このコードを の に き むことができます. から き して、 の の を きます.ページにジャンプして、 のページが の でない は、 のページにジャンプします. のページが ページ より きい 、 のページに します.その の 、 のジャンプ :ジャンプページを き、 の に くと、
    function paging(currPage,totalPage) {
  if(currPage <= 0) {
    currPage = 1
  } else if (currPage >= totalPage) {
    currPage = totalPage
  }
  jump(currPage)
}
    2.2.3 を に する
    が すぎると、この を つの の に き すことができます. のアクティビティが され、ユーザがすでに し んでいるか、または のアクティビティが した 、ユーザは のアクティビティの の で を ることができます. を に します.
    function canPhoto (activityState,userState) {
  return (activityState === '   ' && userState === '   ') || activityState === '   '
}

function photoActivity(activityState,userState) {
  if(canPhoto(activityState,userState)) {
    doSomething()
  }
}
    2.2.4 なサイクル
    いくつかのステートメントが した をする 、 を つの に れて、 を うことができます.XHRオブジェクト(IE 9 のブラウザ)の : のパラメータを に れて に します.
    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();
    2.2.5ネスト の わりに でキャンセルします.
    が すぎる 、これらの をできるだけ の に き して、いくつかの に ると、 を ちに させることができます.
    2.2.6 パラメータが すぎるパラメータリストに わる
    パラメータリストが すぎると、パラメータを つのオブジェクトに れることが えられます.パラメータの や は にしなくてもいいです.
    えば、ファイルをフィルタする 、ファイルの 、 、タイプ、 、キーワード、ダウンロード などの を してフィルタリングして、これらのパラメータを つのファイルの に くことができます.
    2.2.7パラメータ をできるだけ らす
    によって られるパラメータがある は、これらのパラメータをできるだけ らす わりに、 で によって します.
    えば、 を く 、 ってきたパラメータは 、 さ、 がありますが、 は と さで できますので、 ってきたパラメータの から というパラメータを り くことができます.
    2.2.8 を なく う
    つの は、コードの と を しますが、 されたコード は されます.
    a === b ? a : b === doc ? b : doc === 'text' ? doc : null
    2.2.9チェーンを に して び す
    チェーンの び しはデバッグの に です.チェーンが っていたら、このチェーンを してデバッグガーといくつかのconsolieを えて、 った に します.
    チェーンコールはjqueryを できます.
    2.2.10
    きいクラスの の をより かい のオブジェクトに します.
    2.2.11マルチループをリセットする
    マルチループを する がある は、メソッド を し、 に する またはコードをリセットします.
    : 15の2つの10 の のやり を つける:ダブルサイクル :
    for(var i = 0; i < 10; i ++ ) {
  for(var j = 0; j < 10; j ++) {
    if( i + j === 15) {
      return console.log(i,j)
    }
  }
}
    jsのeval関数はいったい何のために使いますか?