TechAlpine – All About Technology

Агляд: У гэтым дакуменце мы будзем казаць аб розных шаблонаў праектавання, якія выкарыстоўваюцца ў JavaScript. Большасць распрацоўшчыкаў цікава высветліць дакладнае або ідэальны шаблон дызайну для выкарыстання ў сваёй праграме. калі шчыра, няма канкрэтнага адказу на гэтае пытанне ці няма якіх-небудзь формулы, якія б даведацца правільны шаблон дызайну, якія будуць выкарыстоўвацца ў дадзенай сітуацыі. Так што пры такіх абставінах, мы павінны мець цьвёрдую удушша шаблонаў праектавання і спецыфічныя праблемы, яны маюць справу з, мы павінны быць у лепшым становішчы, каб прыняць рашэнне, на якім шаблон дызайну, які будзе выкарыстоўвацца, у якім стане.

Увядзенне:
Дызайн шаблон з'яўляецца шматразовым рашэнне, якое можа быць ўжыта для агульных паўторна адбываюцца праблем у праектаванні і распрацоўцы праграмнага забеспячэння. Дызайн мадэлі таксама можна назваць як шаблоны выкарыстоўваюцца для вырашэння агульных праблем. Дызайн мадэлі маюць тры асноўныя перавагі:

• Яны правераныя рашэнні: Дызайн мадэлі забяспечваюць трывалую падыход у распрацоўцы праграмнага забеспячэння і выкарыстоўвае правераныя метады.
• Можа быць лёгка паўторна: Дызайн мадэлі з'яўляюцца канцэптуальнымі і забяспечваюць з раствора скрынкі, якая падыходзіць для нашых патрэб. Гэтая асаблівасць робіць дызайн мадэлі больш надзейнымі і яны могуць быць паўторна выкарыстаны ў аналагічных умовах.
• шаблоны выразныя: Кожны шаблон дызайну ўяўляе сабой наканаваны набор структуру і слоўнікавы запас, які можа быць выкарыстаны для забеспячэння вырашэння праблем вялікіх.

Дызайн мадэлі ніколі не дае дакладнае рашэнне задачы. Важна адзначыць, што роля мадэляў заключаецца ў стварэнні схемы рашэння.

Тыпы шаблонаў праектавання
Дызайн мадэлі можна падзяліць на наступныя тры катэгорыі:

• Тварэння Design Pattern : У гэтай катэгорыі наступныя шаблоны праектавання падаюць :
  • адзіночка
  • Будаўнік
  • завод
  • абстрактны
  • прататып
  • будаўнік
• Структурны Design Pattern : У гэтай катэгорыі наступныя шаблоны праектавання падаюць :
  • дэкаратар
  • фасад
  • Лёгкі вага
  • адаптар
  • давераная асоба
• Паводніцкія Design Pattern : У гэтай катэгорыі наступны шаблон праектавання падзення :
  • Итератор
  • наведвальнік
  • медыятар
  • назіральнік

Шаблоны ў JavaScript:
Наступныя ўзоры звычайна выкарыстоўваюцца ў JavaScript:

• канструктар Pattern
• модуль Pattern
• Singleton Pattern
• назіральнік Pattern
• пасярэднік Pattern
• прататып Pattern
• каманда
• фасад шаблон
• завод шаблон
• дэкаратар
• прыстасаванец

канструктар Pattern:
Згодна з класічнай канцэпцыі аб'ектна-арыентаванага праграмавання, канструктар ўяўляе сабой асаблівы тып метаду, які выкарыстоўваецца для стварэння асобніка аб'екта ў памяці. У JavaScript стварэнне аб'екта ажыццяўляецца з выкарыстаннем любой з наступных трох падыходаў:

Listing 1: Тры падыходы, якія выкарыстоўваюцца ў JavaScript для стварэння аб'ектаў

[Code]

// падыход 1

быў newObject = {};

//падыход 2

пераменная newObject = Object.create(нулявы);

//падыход 3

пераменная newObject = новы аб'ект();

[/Code]

У трэцім падыходзе, Аб'ект ствараецца з дапамогай канструктара аб'екта, дзе не перадаецца значэнне або набор. Ёсць некалькі спосабаў, каб усталяваць значэння для зноў створанага аб'екта. These are:

Listing 2: Шляху, каб усталяваць значэння ў канструктар

[Code]

//падыход 1

newObject.someKey = "Hello World"

//падыход 2

newObject[someKey] = "Hello World"

//падыход 3

Object.defineProperty( newObject, “someKey”, { значэнне : "Прывітанне Сусвет" немагчыма запісаць : праўда перечислимый : праўда канфігуруемы : праўда ); [/Code]

Singleton Pattern:
Мы ўсе ведаем, што одноэлементный шаблон абмяжоўвае стварэнне аб'екта ў адным экзэмпляры. Сінглтан патэрн рэалізуецца шляхам стварэння класа з дапамогай метаду, які стварае новы асобнік аб'екта толькі тады, калі не існуе іншых прыкладаў. У JavaScript Сінглтан служыць у якасці агульнага прасторы імёнаў рэсурсаў, які ізалюе рэалізацыю з глабальнага прасторы імёнаў. У JavaScript, синглетон рэалізуецца наступным чынам:

Listing 3: Рэалізацыя Singleton у JavaScript

[Code]

быў mySingleton = (функцыя () {

// Instance захоўвае спасылку на Singleton

асобнік вар;

функцыя ініцыялізацыі() {

// адзіночка

// Прыватныя метады і зменныя

функцыя privateMethod(){

console.log( “Я прыватны” );

}

была закрытая пераменная = “Ім таксама прыватны”;

пераменная privateRandomNumber = Math.random();

return {

// Агульнадаступныя метады і зменныя

publicMethod: функцыя () {

console.log( “Грамадскасць можа ўбачыць мяне!” );

},

publicProperty: “Я таксама грамадскасці”,

getRandomNumber: функцыя() {

вярнуць privateRandomNumber;

}

};

};

return {

// Атрымаць асобнік Singleton, калі такі існуе

// або стварыць новы, калі ён не

деЫпзЬапсе: функцыя () {

калі ( !прыклад ) {

асобнік = ініцыялізацыі();

}

вярнуць экземпляр;

}

};

})();

быў myBadSingleton = (функцыя () {

// Instance захоўвае спасылку на Singleton

асобнік вар;

функцыя ініцыялізацыі() {

// адзіночка

пераменная privateRandomNumber = Math.random();

return {

getRandomNumber: функцыя() {

вярнуць privateRandomNumber;

}

};

};

return {

// Заўсёды ствараць новы асобнік класа Singleton

деЫпзЬапсе: функцыя () {

асобнік = ініцыялізацыі();

вярнуць экземпляр;

}

};

})();

// Usage:

быў single1 = mySingleton.getInstance();

быў single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // праўда

пераменная badSingle1 = myBadSingleton.getInstance();

пераменная badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // праўда

[/Code]

згодна GoF, синглетон выкарыстоўваецца і ў дачыненні ў наступных сітуацыях:

• Там павінны існаваць менавіта на асобнік аб'екта.
• Адзіны асобнік павінен быць пашыраемым сублимитами прылічаць яго.

назіральнік Pattern:
У структуры назіральнікаў, аб'ект (званы таксама ў якасці суб'екта) падтрымлівае спіс аб'ектаў у залежнасці ад яго згадваецца ў якасці назіральнікаў. Аб'ект аўтаматычна паведамляе назіральнікам якіх-небудзь змяненняў, што адбылося, выкарыстоўваючы механізм широковещания. Рэалізацыя шаблону назіральніка паказана ніжэй.

Listing 4: Спіс залежных назіральнікаў суб'ект можа мець

[Code]

функцыя ObserverList(){ this.observerList = [];} ObserverList.prototype.Add = function( OBJ ){ return this.observerList.push( OBJ );}; ObserverList.prototype.Empty = function(){ this.observerList = [];}; ObserverList.prototype.Count = function(){ return this.observerList.length;}; ObserverList.prototype.Get = function( index ){ калі( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( OBJ, index ){ var pointer = -1; калі( індэкс === 0 ){ this.observerList.unshift( OBJ ); pointer = index; }інакш калі( Індэкс === this.observerList.length ){ this.observerList.push( OBJ ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( OBJ, StartIndex ){ var i = startIndex, паказальнік = -1; у той час як( я < this.observerList.length ){ калі( this.observerList[я] === OBJ ){ pointer = i; } я ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ калі( індэкс === 0 ){ this.observerList.shift(); }інакш калі( Індэкс === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, OBJ ){ для ( ключ вар ў пашырэнні ){ OBJ[key] = пашырэнне[key]; }}

[/Code]

Listing 5: прадмет

[Code]

функцыя Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( назіральнік ){ this.observers.Add( назіральнік );}; Subject.prototype.RemoveObserver = function( назіральнік ){ this.observers.RemoveAt( this.observers.IndexOf( назіральнік, 0 ) );}; Subject.prototype.Notify = function( кантэкст ){ var observerCount = this.observers.Count(); для(var i=0; я < observerCount; я ){ this.observers.Get(я).абнаўленне( кантэкст ); }};

[/Code]

У прыведзеным вышэй прыкладзе, з выкарыстаннем кампанентаў Observer, мы вызначым:

• Кнопка для дадання новых назіраных сцяжкоў на старонку
• Кантрольную сцяжок, які будзе выступаць у якасці суб'екта, апавяшчэння іншых сцяжкоў яны павінны быць правераны
• Кантэйнер для новых сцяжкоў дадаецца

HTML-код, як пад

Listing 5: HTML код

[Code]

<Кнопка ID =”addNewObserver”>Дадаць сцяжок New Observer</кнопка><ўвод ID =”mainCheckbox” тып =”сцяжок”/><DIV ID =”observersContainer”></дзіў>

[/Code]

Summary: Так што ў гэтым артыкуле я абмяркоўваў падрабязнасці пра мадэлі дызайну JavaScript. Шаблоны праектавання дастасавальныя да ўсіх тыпаў моў, як аб'ектна-арыентаванага мовы Java, а таксама мова сцэнарыяў JavaScript, як. Але ёсць і адрозненні, і мы бачылі гэта ў прыведзеных вышэй прыкладах. Такім чынам, каб завяршыць абмеркаванне, мы можам сказаць, што патэрны праектавання выкарыстоўваюцца для забеспячэння рашэнні для часта сустракаемыя праблемы. І, калі ласка, майце на ўвазе, што шаблоны праектавання

• Правераныя на практыцы рашэнні
• Можа быць лёгка выкарыстана
• экспрэсіўныя

Спадзяюся, вы зразумелі канцэпцыі і гэта дапаможа вам рэалізаваць яго ў сваім уласным праекце. прыемнага чытання.

Больш цікавыя артыкулы пра JS — Вы павінны прачытаць

Ўвядзенне ў AngularJS

Фонд для Службаў па Zurb

Як усталяваць ўласцівасці CSS3 ад Java Script?