कोणीय में डेटा के साथ काम करना

सभी को नमस्कार, मेरा नाम सर्गेई है और मैं एक वेब डेवलपर हूं। उधार दिए गए परिचय के लिए मुझे दिमित्री कार्लोवस्की को माफ कर दो, लेकिन यह उनका प्रकाशन था जिसने मुझे यह लेख लिखने के लिए प्रेरित किया।

आज मैं विशेष रूप से सामान्य और डोमेन मॉडल में कोणीय अनुप्रयोगों में डेटा के साथ काम करने के बारे में बात करना चाहूंगा।

मान लीजिए कि हमारे पास उपयोगकर्ताओं की एक सूची है जो हमें फॉर्म में सर्वर से प्राप्त होती है

[ { "id": 1, "first_name": "James", "last_name": "Hetfield", "position": "Web developer" }, { "id": 2, "first_name": "Elvis", "last_name": "", "position": "Project manager" }, { "id": 3, "first_name": "Steve", "last_name": "Vai", "position": "QA engineer" } ] 

और आपको इसे चित्र के रूप में प्रदर्शित करने की आवश्यकता है

यह आसान लग रहा है - चलो कोशिश करते हैं। बेशक, इस सूची को प्राप्त करने के लिए, हमारे पास निम्नलिखित के UserService सेवा होगी। कृपया ध्यान दें कि उपयोगकर्ता के अवतार का लिंक तुरंत प्रतिक्रिया में नहीं आता है, लेकिन उपयोगकर्ता id आधार पर बनता है।

 // UserService import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; import {UserServerResponse} from './user-server-response.interface'; @Injectable() export class UserService { constructor(private http: HttpClient) { } getUsers(): Observable<UserServerResponse[]> { return this.http.get<UserServerResponse[]>('/users'); } getUserAvatar(userId: number): string { return `/users/${userId}/avatar`; } } 

उपयोगकर्ताओं की सूची प्रदर्शित करने के लिए UserListComponent घटक जिम्मेदार होगा।

 // UserListComponent import {Component} from '@angular/core'; import {UserService} from '../services/user.service'; @Component({ selector: 'app-user-list', template: ` <div *ngFor="let user of users | async"> <img [src]="userService.getUserAvatar(user.id)"> <p><b>{{user.first_name}} {{user.last_name}}</b>, {{user.position}}</p> </div> ` }) export class UserListComponent { users = this.userService.getUsers(); constructor(public userService: UserService) { } } 

और यहाँ हम पहले से ही एक निश्चित समस्या थी । सर्वर की प्रतिक्रिया पर ध्यान दें। last_name फ़ील्ड खाली हो सकता है और यदि हम घटक को इस रूप में छोड़ देते हैं, तो हम अल्पविराम से पहले अवांछित स्थान प्राप्त करेंगे। समाधान विकल्प क्या हैं?

1. आप डिस्प्ले टेम्प्लेट को थोड़ा सही कर सकते हैं

   
   

    <p> <b>{{[user.first_name, user.last_name].filter(el => !!el).join(' ')}}</b>, {{user.position}} </p> 

   
   

   लेकिन इस तरह, हम तर्क के साथ टेम्पलेट को ओवरलोड करते हैं, और यह इस तरह के एक सरल कार्य के लिए खराब रूप से पठनीय हो जाता है। लेकिन अभी भी आवेदन और बढ़ने के लिए है ...

   
   

2. एक प्रकार विधि जोड़कर एक घटक वर्ग में एक टेम्पलेट से कोड खींचो

   
   

    getUserFullName(user: UserServerResponse): string { return [user.first_name, user.last_name].filter(el => !!el).join(' '); } 

   
   

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

   
   

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

उपयोगकर्ता वर्ग बनाकर शुरू करते हैं

 // User export class User { readonly id; readonly firstName; readonly lastName; readonly position; constructor(userData: UserServerResponse) { this.id = userData.id; this.firstName = userData.first_name; this.lastName = userData.last_name; this.position = userData.position; } fullName(): string { return [this.firstName, this.lastName].filter(el => !!el).join(' '); } avatar(): string { return `/users/${this.id}/avatar`; } } 

क्लास कंस्ट्रक्टर एक सर्वर रिस्पांस डेज़राइज़र है। पूर्ण उपयोगकर्ता नाम का निर्धारण करने का तर्क स्वाभाविक रूप से User वर्ग के एक ऑब्जेक्ट की विधि में बदल जाता है, साथ ही एक अवतार प्राप्त करने के लिए तर्क। अब हम UserService का रीमेक UserService ताकि यह सर्वर प्रतिक्रिया के प्रसंस्करण के परिणामस्वरूप User वर्ग की वस्तुओं को लौटाए

 // UserService import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {map} from 'rxjs/operators'; import {UserServerResponse} from './user-server-response.interface'; import {User} from './user.model'; @Injectable() export class UserService { constructor(private http: HttpClient) { } getUsers(): Observable<User[]> { return this.http.get<UserServerResponse[]>('/users') .pipe(map(listOfUsers => listOfUsers.map(singleUser => new User(singleUser)))); } } 

नतीजतन, हमारे घटक का कोड बहुत अधिक क्लीनर और अधिक पठनीय हो जाता है। हर चीज जिसे व्यावसायिक तर्क कहा जा सकता है, वह मॉडल में कूटबद्ध है और पूरी तरह से पुन: प्रयोज्य है।

 import {Component} from '@angular/core'; import {UserService} from '../services/user.service'; @Component({ selector: 'app-user-list', template: ` <div *ngFor="let user of users | async"> <img [src]="user.avatar()"> <p><b>{{user.fullName()}}</b>, {{user.position}}</p> </div> ` }) export class UserListComponent { users = this.userService.getUsers(); constructor(private userService: UserService) { } } 

आइए अब हमारे मॉडल की क्षमताओं का विस्तार करें। सिद्धांत रूप में (इस संदर्भ में, मुझे ActiveRecord पैटर्न के साथ सादृश्य पसंद है), उपयोगकर्ता मॉडल ऑब्जेक्ट न केवल अपने बारे में डेटा प्राप्त करने के लिए, बल्कि उन्हें बदलने के लिए भी जिम्मेदार होना चाहिए। उदाहरण के लिए, हम उपयोगकर्ता के प्रोफ़ाइल चित्र को बदलने में सक्षम हो सकते हैं। ऐसी कार्यक्षमता के साथ विस्तारित उपयोगकर्ता मॉडल कैसा दिखेगा?

 // User export class User { // ... constructor(userData: UserServerResponse, private http: HttpClient, private storage: StorageService, private auth: AuthService) { // ... } // ... updateAvatar(file: Blob) { const data = new FormData(); data.append('avatar', file); return this.http.put(`/users/${this.id}/avatar`, data); } } 

यह अच्छा लग रहा है, लेकिन User मॉडल अब HttpClient सेवा का उपयोग करता है और आम तौर पर बोल रहा है, यह विभिन्न अन्य सेवाओं को अच्छी तरह से कनेक्ट और उपयोग कर सकता है - इस मामले में, AuthService और AuthService (वे उपयोग नहीं किए जाते हैं, लेकिन सिर्फ उदाहरण के लिए जोड़े जाते हैं)। यह पता चला है कि अगर हम किसी अन्य सेवा या घटक में User मॉडल का उपयोग करना चाहते हैं, तो हमें इस मॉडल की वस्तुओं को बनाने के लिए इससे जुड़ी सभी सेवाओं को जोड़ना होगा। यह बहुत असुविधाजनक लग रहा है ... आप Injector सेवा का उपयोग कर सकते हैं (बेशक, इसे भी लागू करना होगा, लेकिन यह केवल एक होने की गारंटी होगी) या यहां तक ​​कि एक बाहरी इंजेक्टर इकाई भी बनाएं जिसे आपको लागू नहीं करना है, लेकिन मैं उसी तरह से UserService सेवा के लिए User वर्ग ऑब्जेक्ट बनाने का अधिक सही तरीका देखता हूं। वह उपयोगकर्ताओं की सूची प्राप्त करने के लिए जिम्मेदार है।

 // UserService import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {UserServerResponse} from './user-server-response.interface'; import {User} from './user.model'; @Injectable() export class UserService { constructor(private http: HttpClient, private storage: StorageService, private auth: AuthService) { } createUser(userData: UserServerResponse) { return new User(userData, this.http, this.storage, this.auth); } getUsers(): Observable<User[]> { return this.http.get<UserServerResponse[]>('/users') .pipe(map(listOfUsers => listOfUsers.map(singleUser => this.createUser(singleUser)))); } } 

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

अंत में, आइए विधियों के नामों से दोहराव को हटा दें और इंजेक्शन पर निर्भरता के नामों के लिए सम्मेलनों को शुरू करें। मेरी दृष्टि में सेवा का अंतिम संस्करण इस तरह दिखना चाहिए।

 import {Injectable} from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {UserServerResponse} from './user-server-response.interface'; import {User} from './user.model'; @Injectable() export class UserFactory { constructor(private http: HttpClient, private storage: StorageService, private auth: AuthService) { } create(userData: UserServerResponse) { return new User(userData, this.http, this.storage, this.auth); } list(): Observable<User[]> { return this.http.get<UserServerResponse[]>('/users') .pipe(map(listOfUsers => listOfUsers.map(singleUser => this.create(singleUser)))); } } 

और User नाम के तहत UserFactory को लागू करने का प्रस्ताव है

 import { Component } from '@angular/core'; import {HttpClient} from '@angular/common/http'; import {UserFactory} from './services/user.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app'; users = this.User.list(); constructor(private User: UserFactory) { } } 

इस मामले में, UserFactory वर्ग की एक वस्तु User सूची प्राप्त करने के लिए स्थिर तरीकों के साथ एक User वर्ग की तरह दिखती है और नई संस्थाओं को बनाने के लिए एक विशेष विधि है, और इसकी वस्तुओं में एक विशेष इकाई से जुड़े सभी आवश्यक व्यावसायिक तर्क विधियां शामिल हैं।

इस पर, मैंने वह सब कुछ बताया जो मैं चाहता था। मैं टिप्पणियों में चर्चा करने के लिए उत्सुक हूं।

अद्यतन

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