एक कोणीय डेवलपर के लिए 22 युक्तियाँ। भाग 1

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


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

1. TrackBy के बारे में

टेम्प्लेटों में ngFor लिए ngFor का उपयोग करते हुए, trackBy फ़ंक्शन के साथ इस निर्माण का उपयोग करें, जो प्रत्येक तत्व के लिए एक विशिष्ट पहचानकर्ता देता है।

Ations स्पष्टीकरण

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

▍Do

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

▍Posle

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

2. कीवर्ड कांस्टेबल और चलो

यदि आप एक वैरिएबल घोषित करने जा रहे हैं जिसका मूल्य आप बदलने की योजना नहीं बना रहे हैं, तो const कीवर्ड का उपयोग करें।

Ations स्पष्टीकरण

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

▍Do

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

▍Posle

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

3. कन्वेयर ऑपरेटरों

RxJS के साथ काम करते समय, पाइपलाइन किए गए ऑपरेटरों का उपयोग करें।

Ations स्पष्टीकरण

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

कृपया ध्यान दें कि यह सिफारिश कोणीय संस्करण 5.5 और उच्चतर के लिए प्रासंगिक है।

▍Do

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

▍Posle

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

4. एपीआई फिक्स का अलगाव

सभी API पूरी तरह से स्थिर और त्रुटि मुक्त नहीं हैं। इसलिए, कभी-कभी एपीआई समस्याओं को ठीक करने के उद्देश्य से कोड में कुछ तर्क पेश करना आवश्यक होता है। इस तर्क को उन घटकों में रखने के बजाय जहां पैच एपीआई का उपयोग किया जाता है, बेहतर होगा कि इसे कहीं अलग किया जाए, उदाहरण के लिए, किसी सेवा में, और घटक से समस्याग्रस्त एपीआई के बजाय संबंधित सेवा को देखें।

Ations स्पष्टीकरण

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

इसके अलावा, आप अपने खुद के टैग बना सकते हैं, जैसे API_FIX (जो TODO टैग से मिलता-जुलता है), और उनके लिए ध्वज सुधार। इससे इस तरह के फ़िक्स को ढूंढना आसान हो जाता है।

5. टेम्पलेट में सदस्यता

घटकों से वेधशालाओं की सदस्यता लेने से बचें। इसके बजाय, उन्हें टेम्प्लेट में सदस्यता लें।

Ations स्पष्टीकरण

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

इसके अलावा, इस दृष्टिकोण का अनुप्रयोग इस तथ्य की ओर जाता है कि घटक स्टेटफुल घटक होने के लिए बंद हो जाते हैं, जिससे सदस्यता के बाहर डेटा बदलने पर त्रुटियां हो सकती हैं।

▍Do

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

▍Posle

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

6. सब्सक्रिप्शन हटाना

मॉनिटर किए गए ऑब्जेक्ट्स की सदस्यता लेते समय, हमेशा सुनिश्चित करें कि उन्हें take ऑपरेटरों, takeUntil और इसी तरह का उपयोग करके सब्सक्रिप्शन को सही ढंग से हटा दिया जाता है।

Ations स्पष्टीकरण

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

इससे भी बेहतर होगा कि किसी मान्य सदस्यता के साथ देखी गई वस्तुओं का पता लगाने के लिए एक लिंटर नियम बनाएं।

▍Do

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

▍Posle

यदि आप किसी वस्तु के परिवर्तन का निरीक्षण करना चाहते हैं तो जब तक कोई अन्य वस्तु एक निश्चित मान उत्पन्न नहीं कर takeUntil , takeUntil उपयोग करें।

 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 तरह से कुछ का उपयोग करना एक घटक में कई मनाया वस्तुओं के लिए सदस्यता को हटाने को नियंत्रित करने के लिए उपयोग किया जाता है।

उपयोग करें यदि आपको केवल ऑब्जेक्टिव ऑब्जेक्ट द्वारा लौटाया गया पहला मान चाहिए:

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

कृपया ध्यान दें कि यहाँ हम takeUntil साथ take takeUntil उपयोग करते take । यह इस तथ्य के कारण स्मृति लीक से बचने के लिए किया जाता है कि सदस्यता तब तक मूल्य प्राप्त करने के लिए नेतृत्व नहीं करती थी जब तक कि घटक नष्ट नहीं हो जाता। यदि takeUntil फ़ंक्शन का उपयोग takeUntil नहीं किया takeUntil , तो सदस्यता तब तक मौजूद रहेगी जब तक कि पहला मूल्य प्राप्त नहीं हो जाता है, लेकिन चूंकि घटक पहले ही नष्ट हो चुका होगा, इसलिए यह मान कभी प्राप्त नहीं होगा, जिससे मेमोरी रिसाव हो सकता है।

7. उपयुक्त ऑपरेटरों का उपयोग करना

अवलोकन करने योग्य वस्तुओं के साथ चौरसाई ऑपरेटरों का उपयोग करना, उन लोगों को लागू करना जो समस्या के समाधान की सुविधाओं के अनुरूप हैं।

• जब आप किसी नई क्रिया के आने पर पिछली शेड्यूल की गई कार्रवाई को अनदेखा करने की आवश्यकता हो, तो switchMap उपयोग करें।
• यदि आप समानांतर में सभी प्रेषण किए गए कार्यों को संसाधित करने की आवश्यकता है, तो mergeMap का उपयोग करें।
• जब वे प्राप्त होते हैं, तो कार्रवाई को एक के बाद एक संसाधित करने की आवश्यकता concatMap तो concatMap उपयोग करें।
• exhaustMap स्थितियों में exhaustMap का उपयोग करें, जहां पहले प्राप्त की गई कार्रवाई की प्रक्रिया में, आपको नए लोगों को अनदेखा करने की आवश्यकता है।

इसके बारे में विवरण यहां पाया जा सकता है ।

Ations स्पष्टीकरण

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

8. आलसी लोडिंग

फिर, जब भी संभव हो, कोणीय-अनुप्रयोग के मॉड्यूल के आलसी लोडिंग को व्यवस्थित करने का प्रयास करें। यह तकनीक इस तथ्य के लिए नीचे आती है कि कुछ का उपयोग होने पर ही लोड होता है। उदाहरण के लिए, एक घटक केवल तभी लोड किया जाता है जब उसे प्रदर्शित करने की आवश्यकता होती है।

Ations स्पष्टीकरण

आलसी लोडिंग उपयोगकर्ता द्वारा डाउनलोड की जाने वाली एप्लिकेशन सामग्रियों के आकार को कम कर देता है। यह इस तथ्य के कारण एप्लिकेशन की डाउनलोड गति में सुधार कर सकता है कि अप्रयुक्त मॉड्यूल सर्वर से क्लाइंट में स्थानांतरित नहीं होते हैं।

▍Do

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

▍Posle

 // 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 {} 

9. अन्य सदस्यता के भीतर सदस्यता के बारे में

कभी-कभी, कुछ क्रिया करने के लिए, आपको कई अवलोकनीय वस्तुओं के डेटा की आवश्यकता हो सकती है। ऐसी स्थिति में, अन्य अवलोकनीय वस्तुओं के subscribe ब्लॉक के अंदर ऐसी वस्तुओं के लिए सदस्यता बनाने से बचें। इसके बजाय, चेन ऑपरेटर्स के लिए उपयुक्त ऑपरेटरों का उपयोग करें। ऐसे ऑपरेटरों के बीच, कोई भी withLatestFrom और combineLatest को नोट कर सकता है। उदाहरणों पर विचार करें, और फिर उन पर टिप्पणी करें।

▍Do

 firstObservable$.pipe(  take(1) ) .subscribe(firstValue => {   secondObservable$.pipe(       take(1)   )   .subscribe(secondValue => {       console.log(`Combined values are: ${firstValue} & ${secondValue}`);   }); }); 

▍Posle

 firstObservable$.pipe(   withLatestFrom(secondObservable$),   first() ) .subscribe(([firstValue, secondValue]) => {   console.log(`Combined values are: ${firstValue} & ${secondValue}`); }); 

Ations स्पष्टीकरण

यदि हम पठनीयता के बारे में, कोड की जटिलता के बारे में, या बुरे कोड के संकेतों के बारे में बात करते हैं, तो जब प्रोग्राम RxJS सुविधाओं का पूर्ण उपयोग नहीं करता है, तो यह इंगित करता है कि डेवलपर RxJS API से अच्छी तरह से परिचित नहीं है। यदि हम प्रदर्शन के विषय पर संपर्क करते हैं, तो यह पता चलता है कि यदि अवलोकन योग्य वस्तु को आरम्भ करने के लिए कुछ समय firstObservable , तो वह पहले firstObservable को सब्सक्राइब कर firstObservable , फिर सिस्टम ऑपरेशन के पूरा होने की प्रतीक्षा करेगा, और उसके बाद ही दूसरी अवलोकनीय वस्तु के साथ काम शुरू होगा। यदि ये ऑब्जेक्ट नेटवर्क अनुरोध हैं, तो यह अनुरोधों के समकालिक निष्पादन की तरह दिखेगा।

10. टाइपिंग के बारे में

हमेशा वैरिएबल या कॉन्स्टेंट को any अन्य प्रकार के साथ घोषित करने का प्रयास करें।

Ations स्पष्टीकरण

यदि किसी प्रकार को निर्दिष्ट किए बिना टाइपस्क्रिप्ट में एक चर या स्थिरांक घोषित किया जाता है, तो इस प्रकार का मान उसे सौंपे गए मूल्य के आधार पर अनुमान लगाया जाएगा। इससे समस्याएं हो सकती हैं। एक समान स्थिति में सिस्टम व्यवहार के एक क्लासिक उदाहरण पर विचार करें:

 const x = 1; const y = 'a'; const z = x + y; console.log(`Value of z is: ${z}` //  Value of z is 1a 

यह माना जाता है कि y यहां एक संख्या है, लेकिन हमारे कार्यक्रम को इसके बारे में नहीं पता है, इसलिए यह कुछ ऐसा दिखाता है जो गलत दिखता है, लेकिन कोई त्रुटि संदेश नहीं देता है। चर और स्थिरांक को उचित प्रकार बताकर इसी तरह की समस्याओं से बचा जा सकता है।

हम उपरोक्त उदाहरण को फिर से लिखते हैं:

 const x: number = 1; const y: number = 'a'; const z: number = x + y; //    : Type '"a"' is not assignable to type 'number'. const y:number 

यह डेटा प्रकार की त्रुटियों से बचने में मदद करता है।

टाइपिंग के लिए एक व्यवस्थित दृष्टिकोण का एक और लाभ यह है कि यह रीफैक्टरिंग को सरल बनाता है और इस प्रक्रिया के दौरान त्रुटियों की संभावना को कम करता है।

एक उदाहरण पर विचार करें:

 public ngOnInit (): void {   let myFlashObject = {       name: 'My cool name',       age: 'My cool age',       loc: 'My cool location'   }   this.processObject(myFlashObject); } public processObject(myObject: any): void {   console.log(`Name: ${myObject.name}`);   console.log(`Age: ${myObject.age}`);   console.log(`Location: ${myObject.loc}`); } //  Name: My cool name Age: My cool age Location: My cool location 

मान लें कि हम बदलना चाहते थे, myFlashObject , myFlashObject लिए myFlashObject नाम और कोड myFlashObject एडिट myFlashObject गलती myFlashObject :

 public ngOnInit (): void {   let myFlashObject = {       name: 'My cool name',       age: 'My cool age',       location: 'My cool location'   }   this.processObject(myFlashObject); } public processObject(myObject: any): void {   console.log(`Name: ${myObject.name}`);   console.log(`Age: ${myObject.age}`);   console.log(`Location: ${myObject.loc}`); } //  Name: My cool name Age: My cool age Location: undefined 

यदि myFlashObject ऑब्जेक्ट बनाते समय टाइपिंग का उपयोग नहीं किया जाता है, तो हमारे मामले में सिस्टम मानता है कि myFlashObject ऑब्जेक्ट की loc संपत्ति undefined । वह यह नहीं सोचती है कि loc एक अवैध संपत्ति का नाम हो सकता है।

यदि myFlashObject ऑब्जेक्ट का वर्णन करते समय टाइपिंग का उपयोग किया जाता है, तो एक समान स्थिति में हम कोड को संकलित करते समय देखेंगे, एक अद्भुत त्रुटि संदेश:

 type FlashObject = {   name: string,   age: string,   location: string } public ngOnInit (): void {   let myFlashObject: FlashObject = {       name: 'My cool name',       age: 'My cool age',       //         Type '{ name: string; age: string; loc: string; }' is not assignable to type 'FlashObjectType'.       Object literal may only specify known properties, and 'loc' does not exist in type 'FlashObjectType'.       loc: 'My cool location'   }   this.processObject(myFlashObject); } public processObject(myObject: FlashObject): void {   console.log(`Name: ${myObject.name}`);   console.log(`Age: ${myObject.age}`)   //     Property 'loc' does not exist on type 'FlashObjectType'.   console.log(`Location: ${myObject.loc}`); } 

यदि आप एक नई परियोजना पर काम शुरू कर रहे हैं, तो यह tsconfig.json फ़ाइल में, strict:true विकल्प को सेट करने के लिए उपयोगी होगा ताकि सख्त प्रकार की जाँच को सक्षम किया जा सके।

11. लिंटर के उपयोग के बारे में

Tslint में नो- नो , नो-मैजिक-नंबर , नो-कंसोल जैसे विभिन्न मानक नियम हैं। कुछ नियमों के अनुसार कोड सत्यापन को व्यवस्थित करने के लिए tslint.json फ़ाइल को संपादित करके tslint.json अनुकूलित किया जा सकता है।

Ations स्पष्टीकरण

कोड की जांच करने के लिए एक लाइनर का उपयोग करने का मतलब है कि यदि कोड में कुछ दिखाई देता है जो नियमों द्वारा निषिद्ध है, तो आपको एक त्रुटि संदेश प्राप्त होगा। यह परियोजना कोड की एकरूपता में योगदान देता है, इसकी पठनीयता में सुधार करता है। अन्य tllint नियम यहाँ देखें।

यह ध्यान दिया जाना चाहिए कि कुछ नियमों में उनके अनुसार जो अनुचित माना जाता है उसे ठीक करने के साधन शामिल हैं। यदि आवश्यक हो, तो आप अपने स्वयं के नियम बना सकते हैं। यदि आप रुचि रखते हैं, तो इस सामग्री पर एक नज़र डालें, जो TSQuery का उपयोग करके लाइनर के लिए कस्टम नियमों के निर्माण पर चर्चा करता है।

▍Do

 public ngOnInit (): void {   console.log('I am a naughty console log message');   console.warn('I am a naughty console warning message');   console.error('I am a naughty console error message'); } // .    ,    : I am a naughty console message I am a naughty console warning message I am a naughty console error message 

▍Posle

 // tslint.json {   "rules": {       .......       "no-console": [            true,            "log", //  console.log             "warn" //  console.warn        ]  } } // ..component.ts public ngOnInit (): void {   console.log('I am a naughty console log message');   console.warn('I am a naughty console warning message');   console.error('I am a naughty console error message'); } // .      console.log and console.warn        console.error,         Calls to 'console.log' are not allowed. Calls to 'console.warn' are not allowed. 

परिणाम

आज हमने 11 सिफारिशों की समीक्षा की है जो हमें उम्मीद है कि कोणीय डेवलपर्स के लिए उपयोगी होगी। अगली बार, 11 और युक्तियों की प्रतीक्षा करें।

प्रिय पाठकों! क्या आप वेब परियोजनाओं के विकास के लिए कोणीय ढांचे का उपयोग करते हैं?