Pelajari corak reka bentuk JavaScript (mod huruf tunggal)_kemahiran javascript

Definisi corak tunggal: Pastikan kelas hanya mempunyai satu tika dan menyediakan pusat akses global untuk mengaksesnya.

Mod tunggal ialah mod yang biasa digunakan. Terdapat beberapa objek yang selalunya kita perlukan satu sahaja, seperti kumpulan benang, cache global dan objek tetingkap penyemak imbas. Dalam pembangunan js, corak tunggal juga digunakan secara meluas. Bayangkan, apabila kita mengklik butang log masuk, kotak log masuk akan muncul di halaman, dan tetingkap terapung ini adalah unik Tidak kira berapa kali kita mengklik butang log masuk, tetingkap terapung ini hanya akan dibuat sekali. Oleh itu, tetingkap terapung log masuk ini sesuai untuk mod tunggal.

1. Senario penggunaan mod tunggal

Sebelum menggunakan mod, lebih baik kita mengetahui senario penggunaan mod ini. Saya telah menggunakan corak tunggal untuk sekian lama dan saya belum mengetahuinya lagi! Apakah faedah khusus menggunakannya?

1). Anda boleh menggunakannya untuk membahagikan ruang nama (ini selalu digunakan)

2). Gunakan teknologi percabangan untuk merangkum perbezaan antara penyemak imbas (saya tidak pernah menggunakan ini sebelum ini, ia agak baru)

3). Dengan bantuan mod tunggal, kod boleh disusun dengan lebih konsisten, menjadikannya lebih mudah untuk dibaca dan diselenggara (ini juga telah digunakan)

2. Corak tunggal yang paling asas

Singleton yang paling mudah sebenarnya ialah objek literal. Ia menganjurkan sekumpulan kaedah dan sifat yang berkaitan bersama-sama.

var Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法1');
  },
  method2 : function(){
    alert('我是方法2');
  }
};

Objek ini boleh diubah suai. Anda boleh menambah sifat dan kaedah. Anda juga boleh memadam ahli sedia ada menggunakan pengendali padam. Ini sebenarnya melanggar prinsip reka bentuk berorientasikan objek: kelas boleh dilanjutkan, tetapi mereka tidak boleh diubah suai. Jika sesetengah pembolehubah perlu dilindungi, ia boleh ditakrifkan dalam penutupan.

Tersurat objek hanyalah salah satu cara untuk mencipta singleton. Tidak semua literal objek adalah singleton yang hanya digunakan untuk meniru tatasusunan bersekutu atau menyimpan data jelas bukan singleton.

3. Gunakan penutupan untuk mencipta singleton

Tujuan utama penutupan adalah untuk melindungi data

// 命名空间
var BHX = {} ;
BHX.Singleton = (function(){
  // 添加自己的私有成员
  var a1 = true ;
  var a2 = 10 ;
  var f1 = function(){
    alert('f1');
  }
  var f2 = function(){
    alert('f2');
  }        
  // 把块级作用域里的执行结果赋值给我的单例对象
  return {
      attr1: a1 , 
      attr2: a2 ,
      method1 : function(){
        return f1();
      },
      method2 : function(){
        return f2();
      }            
  } ;
})();

alert(BHX.Singleton.attr1);
BHX.Singleton.method1();

Mod tunggal ini juga dipanggil mod modul, yang bermaksud bahawa ia boleh menyusun sekumpulan kaedah dan atribut yang berkaitan ke dalam modul dan memainkan peranan membahagikan ruang nama.

4. Mod Singleton digunakan untuk membahagikan ruang nama

1), menghalang pengubahsuaian pengisytiharan global

/*using a namespace*/

var BHX = {};
BHX.Singleton = {
  attr1: true , 
  attr2: 10 ,
  method1 : function(){
    alert('我是方法1');
  },
  method2 : function(){
    alert('我是方法2');
  }        
};
BHX.Singleton.attr1;
var attr1 = false;

Dengan cara ini, walaupun kita mengisytiharkan pembolehubah yang sama di luar, kita boleh menghalang attr1 daripada diubah suai pada tahap tertentu.

2), menghalang pengubahsuaian kod sumber lain

Kini, kod JavaScript pada halaman web sering menggunakan lebih daripada satu sumber, seperti kod perpustakaan, kod pengiklanan dan kod lencana. Untuk mengelakkan konflik dengan kod anda sendiri, anda boleh menentukan objek yang mengandungi semua kod anda sendiri.

var XGP = {};
XGP.Common = {
  //A singleton with common methods used by all objects and modules
}
XGP.ErrorCodes = {
  //An object literal used to store data
}
XGP.PageHandler = {
  //A singleton with page specific methods and attributes.
}

3), digunakan sebagai pembungkusan kod khas

Dalam tapak web dengan banyak halaman web, beberapa kod digunakan oleh semua halaman web, dan ia biasanya disimpan dalam fail berasingan manakala beberapa kod khusus untuk halaman web tertentu dan tidak akan digunakan di tempat lain. Adalah lebih baik untuk membungkus kedua-dua jenis kod dalam objek tunggal mereka sendiri.

Kami sering menggunakan Javascript untuk menambah kefungsian pada borang. Demi kemerosotan yang lancar, adalah perkara biasa untuk mula-mula membuat halaman HTML tulen yang tidak bergantung pada Javascript dan menggunakan mekanisme penyerahan biasa untuk menyelesaikan tugas.

XGP.RegPage = {
  FORM_ID: 'reg-form',
  OUTPUT_ID: 'reg-result',

  handleSubmit: function(e){
    e.preventDefault(); //stop the normal form submission

    var data = {};
    var inputs = XGP.RegPage.formEl.getElementByTagName('input');

    for(var i=0, len=inputs.length; i<len; i++){
      data[inputs[i].name] = inputs[i].value;
    }

    XGP.RegPage.sendRegistration(data);
  },
  sendRegistration: function(data){
    //make an xhr request and call displayResult() when response is recieved
    ...
  },
  displayResult: function(response){
    XGP.RegPage.outputEl.innerHTML = response;
  },
  init: function(){
    XGP.RegPage.formEl =$(XGP.RegPage.Form_ID);
    XGP.RegPage.outputEl = $(XGP.RegPage.OUTPUT_ID);
    //hijack the form submission
    addEvent(XGP.RegPage.formEl, 'submit', XGP.RegPage.handleSubmit);
  }
}
//invoke initialization method after the page load
addLoadEvent(XGP.RegPage.init);

5. Bujang malas

Corak tunggal yang dinyatakan sebelum ini mempunyai satu lagi persamaan: objek tunggal dicipta apabila skrip dimuatkan. Untuk singleton yang intensif sumber atau mahal untuk dikonfigurasikan, adalah lebih munasabah untuk menangguhkan instantiasi sehingga anda perlu menggunakannya.

Teknik ini adalah malas memuatkan.

Langkah pelaksanaan adalah seperti berikut:

1). Alihkan semua kod ke dalam kaedah pembina

2). Kawalan penuh ke atas masa panggilan (apa yang dilakukan oleh getInstance)

XGP.lazyLoading = (function(){
  var uniqInstance;

  function constructor(){
    var attr = false;
    function method(){

    }

    return {
      attrp: true,
      methodp: function(){

      }
    }
  }

  return {
    getInstance: function(){
      if(!uniqInstance){
        uniqInstance = constructor();
      }
      return uniqInstance;
    }
  }
})();

6. Teknologi cawangan

Cawangan ialah teknik yang digunakan untuk merangkum perbezaan antara penyemak imbas dalam kaedah dinamik yang ditetapkan pada masa jalan.

// 分支单例 （判断程序的分支 <浏览器差异的检测>）
var Ext = {} ;
var def = false ;
Ext.More = (function(){
  var objA = {    // 火狐浏览器 内部的一些配置
      attr1:'FF属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2
  } ;
  var objB = {    // IE浏览器 内部的一些配置
      attr1:'IE属性1'
      // 属性1 
      // 属性2 
      // 方法1 
      // 方法2             
  } ;
  return (def) &#63;objA:objB;
})();
alert(Ext.More.attr1);

Sebagai contoh, jika xhr digunakan dengan kerap dalam tapak web, kod menghidu penyemak imbas mesti dijalankan semula setiap kali ia dipanggil, yang akan menjadi tidak cekap. Ia lebih cekap untuk mengenal pasti kod khusus penyemak imbas sekali apabila skrip dimuatkan. Inilah yang dilakukan oleh teknologi percabangan. Sudah tentu, teknologi percabangan tidak selalunya merupakan pilihan yang lebih cekap Hanya satu cawangan antara dua atau lebih cawangan digunakan, dan cawangan lain menduduki memori.

Apabila mempertimbangkan sama ada untuk menggunakan teknologi percabangan, anda mesti mempertimbangkan kebaikan dan keburukan memendekkan masa dan menggunakan lebih banyak memori.

Yang berikut menggunakan teknologi percabangan untuk melaksanakan XHR:

var XHR = (function(){
  var standard = {
    createXhrObj: function(){
      return new XMLHttpRequest();
    }
  };
  var activeXNew = {
    createXhrObj: function(){
      return new ActiveXObject('Msxml2.XMLHTTP');
    }
  };
  var activeXOld = {
    createXhrObj: function(){
      return new ActiveXObject('Microsoft.XMLHTTP');
    }
  };

  var testObj;
  try{
    testObj = standard.createXhrObj();
    return testObj;
  }catch(e){
    try{
      testObj = activeXNew.createXhrObj();
      return testObj;
    }catch(e){
      try{
        testObj = activeXOld.createXhrObj();
        return testObj;
      }catch(e){
        throw new Error('No XHR object found in this environment.');
      }
    }
  }
})();

7. Kelemahan model singleton

Sekarang kita tahu banyak tentang bujang, mari kita lihat kelemahannya.

Memandangkan corak tunggal menyediakan satu titik akses, ia mungkin membawa kepada gandingan yang kuat antara modul. Oleh itu, ia tidak kondusif untuk ujian unit.

Ringkasnya, singleton masih dikhaskan untuk menentukan ruang nama dan melaksanakan kaedah percabangan.

Melalui pengenalan corak tunggal dari tujuh aspek berbeza, adakah anda telah mendapat pemahaman yang lebih mendalam tentang corak tunggal saya harap artikel ini dapat membantu anda?