स्वच्छ और तेज कोणीय अनुप्रयोगों को बनाने में अनुभव का सबसे अच्छा

इस लेख के लेखन को स्टावरोपोल में अपनी कंपनी में जावास्क्रिप्ट फ्रंट-एंड डेवलपर्स की खोज से प्रेरित किया गया था। क्योंकि लंबे समय तक एक बुद्धिमान प्रोग्रामर को ढूंढना संभव नहीं था, और फिर हमने एंगुलर एंड जेएस पर बहुत सारी प्रशिक्षण सामग्री के साथ एक इंटर्नशिप कार्यक्रम शुरू करने का फैसला किया।

यह एक वम्सी वेम्पती लेख का अनुवाद है, जो कि मुझे कोणीय में लिखे गए ट्रेड मी के लिए एक बड़े पैमाने के आवेदन के साथ उनके अनुभव के बारे में है।



आज तक, मैंने पहले ही ट्रेड मी में बड़े पैमाने पर कोणीय अनुप्रयोग पर कुछ वर्षों तक काम किया है। पिछले कुछ वर्षों में, हमारी टीम ने कोड लेखन मानकों और प्रदर्शन को सर्वोत्तम स्थिति में लाने के लिए हमारे आवेदन को परिष्कृत किया है।

लेख उन तरीकों को रेखांकित करता है जो हम अपनी परियोजना में उपयोग करते हैं। पाठ ज्यादातर कोणीय, टाइपस्क्रिप्ट, RxJs और @ ngrx / store से जुड़ा है।

इसके अलावा, कोड लिखने के लिए कुछ सामान्य दिशानिर्देश जो एप्लिकेशन को अधिक "स्वच्छ" बनाने में मदद करेंगे और पठनीय पर विचार किया जाएगा।

1) trackBy

टेम्प्लेट में ngFor को लूप करने के लिए ngFor का उपयोग करते ngFor , trackBy फ़ंक्शन को देखें, जो प्रत्येक तत्व के लिए एक विशिष्ट पहचानकर्ता लौटाएगा।

क्यों?

जब सरणी बदल जाती है, तो कोणीय पूरी तरह से DOM ट्री को फिर से खोल देता है। लेकिन अगर आप trackBy फ़ंक्शन का उपयोग करते हैं, तो कोणीय समझ जाएगा कि कौन सा तत्व बदल गया है, और फिर केवल इस विशेष तत्व के लिए DOM में परिवर्तन करेगा।

नोट: नथानेल बजल द्वारा लेख में अधिक विस्तृत विवरण पाया जा सकता है। [इंग्लैंड]

को

 <li *ngFor="let item of items;">{{ item }}</li> 

के बाद

 //   <li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li> //   trackByFn(index, item) { return item.id; // unique id corresponding to the item } 

2) कास्ट या चलो?

वैरिएबल की घोषणा करते समय, const उपयोग करें यदि वे पुन: असाइन नहीं किए जाएंगे।

क्यों?

लेट और कास्ट का उपयोग जहां उपयुक्त है, चर को अधिक समझने योग्य घोषित करने का कारण बनता है। यह उन समस्याओं की पहचान करने में भी मदद कर सकता है जब एक संकलन-समय की त्रुटि के कारण किसी मूल्य को यादृच्छिक रूप से पुन: असाइन किया जाता है। यह कोड की पठनीयता में भी सुधार करता है।

को

 let car = 'ludicrous car'; let myCar = `My ${car}`; let yourCar = `Your ${car}`; if (iHaveMoreThanOneCar) { myCar = `${myCar}s`; } if (youHaveMoreThanOneCar) { yourCar = `${youCar}s`; } 

के बाद

 //  car  ,      (const) const car = 'ludicrous car'; let myCar = `My ${car}`; let yourCar = `Your ${car}`; if (iHaveMoreThanOneCar) { myCar = `${myCar}s`; } if (youHaveMoreThanOneCar) { yourCar = `${youCar}s`; } 

3) पाइप की तरह ऑपरेटरों

RxJs साथ काम करते समय पाइप जैसी कथनों का उपयोग करें।
पाइप-जैसे ऑपरेटरों में केवल वही कोड शामिल होता है जिसे आयात करते समय निष्पादित किया जाना चाहिए।

यह फाइलों में अप्रयुक्त बयानों को खोजने के लिए भी आसान बनाता है।

नोट: कोणीय 5.5 और ऊपर की जरूरत है।

को

 import 'rxjs/add/operator/map'; import 'rxjs/add/operator/take'; iAmAnObservable .map(value => value.item) .take(1); 

के बाद

 import { map, take } from 'rxjs/operators'; iAmAnObservable .pipe( map(value => value.item), take(1) ); 

4) टेम्पलेट में साइन इन करें

घटकों से मॉनिटर की गई वस्तुओं की सदस्यता लेने से बचें - इसके बजाय, उन्हें टेम्पलेट से सदस्यता लें।

क्यों?

async फ़ीड स्वचालित रूप से सदस्यता समाप्त कर दिए गए हैं, कोड को सरल बनाने और मैन्युअल सदस्यता प्रबंधन की आवश्यकता को समाप्त कर रहे हैं। एक घटक में आकस्मिक सदस्यता समाप्त होने का जोखिम भी कम हो जाता है, जिसके परिणामस्वरूप मेमोरी रिसाव हो सकता है। यह अहस्ताक्षरित मनाया वस्तुओं का पता लगाने के लिए एक प्रकार का वृक्ष नियम का उपयोग करके तय करने योग्य है।

इसके अलावा, यह घटकों को स्थिर रहने की अनुमति नहीं देता है और जब सदस्यता के बाहर डेटा बदलता है तो त्रुटियों को जोड़ता है।

को

 //  <p>{{ textToDisplay }}</p> //  iAmAnObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.textToDisplay = item); 

के बाद

 //  <p>{{ textToDisplay$ | async }}</p> //  this.textToDisplay$ = iAmAnObservable .pipe( map(value => value.item) ); 

5) स्पष्ट सदस्यता

मॉनिटर की गई वस्तुओं की सदस्यता लेते समय, हमेशा सुनिश्चित करें कि आप तब ऑपरेटरों से उचित रूप से अनसब्सक्राइब करें जैसे कि take , takeUntil , आदि।

क्यों?

अवलोकन की गई वस्तुओं से अनसब्सक्राइब करने से होने वाली त्रुटियां अवांछनीय मेमोरी लीकेज की ओर ले जाएंगी, क्योंकि ऑब्जर्व्ड स्ट्रीम खुली रहती है, शायद तब भी जब घटक हटा दिया जाता है या जब उपयोगकर्ता किसी अन्य पेज पर जाता है।

इसके अलावा, अवलोकनीय वस्तुओं का पता लगाने के लिए एक lint नियम बनाएं जिसमें से कोई भी सदस्यता नहीं है।

को

 iAmAnObservable .pipe( map(value => value.item) ) .subscribe(item => this.textToDisplay = item); 

के बाद

 private _destroyed$ = new Subject(); public ngOnInit (): void { iAmAnObservable .pipe( map(value => value.item) //     iAmAnObservable   ,     / takeUntil(this._destroyed$) ) .subscribe(item => this.textToDisplay = item); } public ngOnDestroy (): void { this._destroyed$.next(); this._destroyed$.complete(); } 

जब तक किसी अन्य देखी गई वस्तु का मूल्य वापस नहीं आता, तब तक परिवर्तनों को सुनने के लिए takeUntil का उपयोग करना:

 iAmAnObservable .pipe( map(value => value.item), take(1), takeUntil(this._destroyed$) ) .subscribe(item => this.textToDisplay = item); 

ऊपर दिए गए उदाहरण में takeUntil के साथ नोट का उपयोग करें। यह इस तथ्य के कारण स्मृति लीक से बचा जाता है कि घटक को हटाए जाने से पहले सदस्यता को कोई मूल्य नहीं दिया गया था।

takeUntil बिना takeUntil सदस्यता तब भी निलंबित स्थिति में रहेगी, जब तक कि उसे अपना पहला मूल्य प्राप्त नहीं हो जाता है, लेकिन चूंकि घटक पहले ही हटा दिया गया है, इसलिए इसे कभी भी मूल्य नहीं मिलेगा, और इससे मेमोरी लीक हो जाएगी।

6) आलसी लोड हो रहा है

जब भी संभव हो, मॉड्यूल में लोड करने का प्रयास केवल तब करें जब वे उपयोग में हों।

क्यों?

यह डाउनलोड किए गए एप्लिकेशन के आकार को कम करेगा और इसके लोडिंग समय को छोटा करेगा।

को

 // app.routing.ts { path: 'not-lazy-loaded', component: NotLazyLoadedComponent } 

के बाद

 // app.routing.ts { path: 'lazy-load', loadChildren: 'lazy-load.module#LazyLoadModule' } // lazy-load.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { LazyLoadComponent } from './lazy-load.component'; @NgModule({ imports: [ CommonModule, RouterModule.forChild([ { path: '', component: LazyLoadComponent } ]) ], declarations: [ LazyLoadComponent ] }) export class LazyModule {} 

अगले लेख में निरंतर अनुवाद। अगर किसी को इंतजार नहीं करना है, तो यहां मूल लेख की एक कड़ी है।