بومی سازی در برنامههای Angular
@{ var token = await HttpContext.GetTokenAsync("access_token"); } <component type="typeof(App)" render-mode="ServerPrerendered" param-AccessToken="token" />
<CascadingValue Name="AccessToken" Value="AccessToken"> <CascadingAuthenticationState> <Router AppAssembly="@typeof(Program).Assembly"> <Found Context="routeData"> <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" /> </Found> <NotFound> <LayoutView Layout="@typeof(MainLayout)"> <p>Sorry, there's nothing at this address.</p> </LayoutView> </NotFound> </Router> </CascadingAuthenticationState> </CascadingValue> @code{ [Parameter] public string AccessToken { get; set; } }
@page "/showtoken" <p>This is part of the access token @(AccessToken != null ? AccessToken.Substring(0,30) : "(null)")</p> @code { [CascadingParameter(Name = "AccessToken")] public string AccessToken { get; set; } }
var userName = await HttpContext.User.Identity.Name;
var khasCookie = HttpContext.Request.Cookies["khas"];
Class Coupling and Cohesion
تعدادی از قواعد شهودی هم، با Coupling و Cohesion به ترتیب مابین و درون کلاسها، سروکار دارند. تلاش ما در راستای افزایش Cohesion درون کلاسها و سست کردن و کاهش Coupling مابین کلاسها میباشد. این قواعد شهودی همین اهداف را در پارادایم action-oriented، در ارتباط با توابع دارند. هدف از Tight Cohesion (انسجام و چسبندگی قوی) در توابع، انسجام بالا و ارتباط نزدیک مابین کدهای موجود در تابع، میباشد. هدفی که Loose Coupling (اتصال سست و ضعیف، وابستگی ضعیف) در بین توابع دنبال میکند، اشاره دارد به اینکه اگر تابعی قصد استفاده از تابع دیگری را داشته باشد، باید وارد شدن و خروج از آن، از یک نقطه صورت گیرد. این مباحث منجربه مطرح شدن قواعد شهودی از جمله: «یک تابع باید طوری سازماندهی شود که تنها یک دستور return داشته باشد»، در پارادایم action-oriented میشود.
ما در پارادایم شیء گرا، اهداف خود از Loose Coupling و Tight Cohesion را در سطح کلاس مطرح میکنیم. 5 شکل اصلی Coupling مابین کلاسها به شرح زیر میباشد:
- Ni Coupling
- Export Coupling
- Overt Coupling
- Covert Coupling
- Surreptitious Coupling
بهترین حالتی که دو کلاس به طور مطلق هیچ وابستگی به یکدیگر ندارند. در این صورت میتوان یکی کلاسها را حذف کرد، بدون اینکه تأثیری بر روی سایر آنها داشته باشد. البته وجود برنامهای کاربردی با این نوع اتصال ممکن نخواهد بود. بهترین چیزی که میشود با این نوع اتصال ایجاد کرد، Class Libraryای میباشد که شامل مجموعه ای از کلاسهای مستقل بوده، به طوری که هیچ تأثیری بر روی یکدیگر ندارند.
در این شکل از اتصال، یک کلاس به واسط عمومی کلاس دیگر وابسته میباشد؛ به این معنی که از عملیاتی که کلاس مورد نظر در واسط عمومی خود قرار داده است، استفاده میکند.
این نوع اتصال زمانی رخ میدهد که یک کلاس از جزئیات پیاده سازی کلاس دیگر با داشتن اجازه دسترسی از جانب آن، استفاده کند. به عنوان مثال، مکانیزم کلاسهای friend در زبان سی پلاس پلاس، که امکان این را میدهد کلاس X اجازه دوستی به کلاس Y را اعطا کند و در این صورت کلاس Y میتواند به جزئیات پیاده سازی خصوصی کلاس X دسترسی داشته باشد.
این نوع اتصال هم به مانند Overt میباشد؛ با این تفاوت که هیچ اجازه دسترسی به کلاس Y داده نشده است. اگر زبانی داشته باشیم که به کلاس Y اجازه دهد خود را به عنوان دوست کلاس X معرفی کند، در این صورت نوع اتصال بین دو کلاس X و Y از نوع Covert میباشد. به عنوان مثال واقعی، میتوان به استفاده از Reflection در دات نت اشاره کرد.
آخرین نوع اتصال که بدترین حالت هم محسوب میشود، مربوط است به زمانیکه کلاس X به هر طریقی که شده از جزئیات داخلی کلاس Y آگاه باشد و از اعضای عمومی دادهای (public data member) آن کلاس استفاده کند. منظور این است که با تغییر این دادههای کلاس متوجه میشود که بر روی عملیات b از کلاس چه تأثیری میگذارد و با اتکاء به این دستاورد، جزئیات داخلی خود را پیاده سازی میکند و یک اتصال پنهان را با کلاس Y ایجاد کرده است. در این حالت یک وابستگی قوی به صورت پنهان مابین رفتاری از کلاس Y و پیاده سازی کلاس X ایجاد شده است.
اتصال و پیوستگی مابین کلاسها باید از نوع Nil یا Export باشد؛ به این معنی که یک کلاس فقط از واسط عمومی کلاس دیگر استفاده کند یا کاری با آن نداشته باشد. (Classes should only exhibit nil or export coupling with other classes, that is, a class should only use operations in the public interface of another class or have nothing to do with that class.)بجز این دو نوع اتصال، بقیه شکلهای اتصال به طریقی اجازه دسترسی به جزئیات پیاده سازی کلاسها را اعطا میکنند. در نتیجه باعث ایجاد وابستگی مابین پیاده سازی دو کلاس میشوند. این وابستگی ما بین پیاده سازیها به محض نیاز به تغییر پیاده سازی یکی از کلاسها ، باعث به وجود آمدن مشکلات نگهداری خواهند شد.
Cohesion درون کلاسها سعی بر این دارد که مطمئن شود تمام اجزای یک کلاس به شدت باهم مرتبط هستند. تعدادی از قواعد شهودی نیز در ادامه بر این خصوصیت دلالت دارند.
قاعده شهودی 2.8
یک کلاس باید یک و تنها یک Key Abstraction را تسخیر نماید. (A class should capture one and only one key abstraction)یک Key Abstraction به عنوان یک Entity در Domain Model تعریف میشود و اغلب در غالب اسم در اسناد و مشخصات نیازمندیها ظاهر میشوند. هر کدام از آنها باید فقط به یک کلاس نگاشت پیدا کنند. اگر این نگاشت به بیش از یک کلاس انجام گیرد، در نتیجه احتمالا طراح هر تابع را به عنوان یک کلاس تسخیر کرده است. اگر بیش از یک Key Abstraction به یک کلاس نگاشت پیدا کرده باشد، پس احتمالا طراح یک سیستم متمرکز را طراحی کرده است. این کلاسها Vague Classes نامیده میشوند و باید آنها در دو کلاس یا بیشتر، تسخیر شوند.
قاعده شهودی 2.9
داده و رفتار مرتبط را در یک جا (کلاس) نگه دارید. (Keep related data and behavior in one place)در واقع هدفی که این قاعده به دنبال آن میباشد این است که هر دو جزء تشکیل دهنده یک Key Abstraction ، یعنی همان داده و رفتار، باید توسط فقط یک کلاس تسخیر شوند. با نقض این قاعده، توسعه دهنده باید با قرار داد (Convention) خاصی برنامه نویسی کند.
طراح باید کلاسهایی را که مرتبا دادههای مورد نیاز خود را با متدهای get از سایر کلاسها دریافت میکنند، شناسایی کند. زیرا این نوع کلاسها این قاعده شهودی را نقض کردهاند.
مثال واقعی
یا برعکس آن ضد الگوی Anemic Domain Model که ناقض این قاعده میباشد.
در قسمت اول اشاره کردیم این قواعد را به راحتی میتوان در صورت نیاز نقض کرد. بعضی از مواقع نیاز به طراحی فیزیکی است که باعث تغییر در طراحی منطقی شده و چه بسا میتواند باعث نقض هر کدام از این قواعد شهودی نیز شود. اگر به بخش پروژههای سایت رجوع کنید این نقض کاملا مشهود (DomainClasses و ServiceLayer موجود در طراحی فیزیکی آنها) میباشد (بیشتر از Anemic Domain Model استفاده شده است)؛ ولی نمیتوان گفت که این کار اشتباه است.
قاعده شهودی 2.10
اطلاعات نامرتبط به هم را در کلاسهای جدا از هم قرار دهید. ((Spin off nonrelated information into another class (i.e., noncommunicating behavior)
هدف از این قاعده این است که اگر کلاسی داریم که یکسری از متدهایش با بخشی از داده و یکسری دیگر با بخش دیگر دادهها کار میکنند، در واقع شما دو Key Abstraction را به یک کلاس نگاشت کرده اید (Vague Class) و باید آنها را به کلاسهای جدا نگاشت کنید.
به کلاس Dictionary در تصویر زیر توجه کنید.
برای تعداد کمی داده، بهترین پیاده سازی با استفاده از List و در مقابل برای تعداد داده زیاد بهترین پیاده سازی، استفاده از HashTable میباشد. هر یک از این پیاده سازیها، به متدهایی برای add و find کلمات نیاز دارند. طراحی سمت چپ تصویر نشان از نقض این قاعده شهودی دارد.
در طرح سمت چپ، استفاده کننده باید بداند که چقدر داده وارد کند. از طرفی نمایش جزئیات پیاده سازی در نام کلاس هم ایده خوبی نیست (طرح سمت چپ). بهترین راه حل که در مقالات آینده به آنها خواهیم رسید، بحث استفاده از ارث بری میباشد. به این ترتیب، با استفاده از یک کلاس Dictionary که نمایش جزئیات داخلی خود را مخفی کرده و در شرایط لازم نمایش جزئیات داخلی خود را تغییر دهد. منظور این است که استفاده کننده درگیر جزئیات داخلی آن نشود و این جزئیات که کدام نوع PDict یا HDict استفاده خواهد شد، از دید او مخفی باشد.
کامپوننت در داخل کامپوننت app میباشد.
import { Router } from '@angular/router'; ..... @Component({ selector: 'app-menu', moduleId: module.id, templateUrl: 'menu.component.html', styleUrls: ['menu.component.css'] }) ... constructor(private _menuService: MenuService, public elementRef: ElementRef, public _router: Router) { } onClick(event: any) { console.log('menu click'); debugger; //----در این قسمت متغیر مقدار //undefined //دارد this._router.navigate(['Subsystem']); }
کلاس main.ts هم به شکل زیر میباشد
import { bootstrap } from '@angular/platform-browser-dynamic'; import { HTTP_PROVIDERS } from '@angular/http'; import { Router} from '@angular/router'; import { MenuService } from './menu/menu.service'; import { AppComponent } from './app.component'; import { MenuComponent } from './menu/menu.component'; import { appRouterProviders } from './app.routes'; bootstrap(AppComponent, [MenuService, HTTP_PROVIDERS, appRouterProviders]);
import { Component } from '@angular/core'; import { HTTP_PROVIDERS } from '@angular/http'; import { MenuComponent } from './menu/menu.component'; import { SubSystemComponent } from './subsystem/subsystem.component'; import { MenuService } from './menu/menu.service'; import { SubSystemService } from './subsystem/subsystem.service'; import { ROUTER_DIRECTIVES, RouterLink, RouterOutlet} from '@angular/router'; // Add the RxJS Observable operators we need in this app. import './rxjs-operators'; @Component({ selector: 'my-app', templateUrl: 'app/app.component.html', directives: [MenuComponent, SubSystemComponent, ROUTER_DIRECTIVES, RouterOutlet, RouterLink], providers: [MenuService, SubSystemService, HTTP_PROVIDERS] }) export class AppComponent { currentSubsSystemId: number=1; }
ng generate component [name] یا ng g c [name]
<template> <v-app> <v-toolbar app> <v-toolbar-title> <span>Vuetify</span> <span>MATERIAL DESIGN</span> </v-toolbar-title> <v-spacer></v-spacer> <v-btn flat href="https://github.com/vuetifyjs/vuetify/releases/latest" target="_blank" > <span>Latest Release</span> </v-btn> </v-toolbar> <v-content> <HelloWorld/> </v-content> </v-app> </template> <script> export default { name: 'App', components: { }, data () { return { // } } } </script>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in wholeResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { data () { return { wholeResponse: [], loading: true } }, mounted () { movieApi.fetchMovieCollection('indiana') .then(response => { this.wholeResponse = response.Search this.loading = false }) .catch(error => { console.log(error) }) }, methods: { singleMovie (id) { this.$router.push('/movie/' + id) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else> <v-layout wrap> <v-flex xs12 mr-1 ml-1> <v-card> <v-img :src="singleMovie.Poster" aspect-ratio="2" ></v-img> <v-card-title primary-title> <div> <h2>{{singleMovie.Title}}-{{singleMovie.Year}}</h2> <p>{{ singleMovie.Plot}} </p> <h3>Actors:</h3>{{singleMovie.Actors}} <h4>Awards:</h4> {{singleMovie.Awards}} <p>Genre: {{singleMovie.Genre}}</p> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="back">back</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> <v-layout row wrap> <v-flex xs12> <div> <v-dialog v-model="dialog" width="500"> <v-btn slot="activator" color="green" dark> View Ratings </v-btn> <v-card> <v-card-title primary-title > Ratings </v-card-title> <v-card-text> <table style="width:100%" border="1" > <tr> <th>Source</th> <th>Ratings</th> </tr> <tr v-for="(rating,index) in this.ratings" :key="index"> <td align="center">{{ratings[index].Source}}</td> <td align="center"><v-rating :half-increments="true" :value="ratings[index].Value"></v-rating></td> </tr> </table> </v-card-text> <v-divider></v-divider> <v-card-actions> <v-spacer></v-spacer> <v-btn color="primary" flat @click="dialog = false" > OK </v-btn> </v-card-actions> </v-card> </v-dialog> </div> </v-flex> </v-layout> </v-container> </template> <script> import movieApi from '@/services/MovieApi' export default { props: ['id'], data () { return { singleMovie: '', dialog: false, loading: true, ratings: '' } }, mounted () { movieApi.fetchSingleMovie(this.id) .then(response => { this.singleMovie = response this.ratings = this.singleMovie.Ratings this.ratings.forEach(function (element) { element.Value = parseFloat(element.Value.split(/\/|%/)[0]) element.Value = element.Value <= 10 ? element.Value / 2 : element.Value / 20 } ) this.loading = false }) .catch(error => { console.log(error) }) }, methods: { back () { this.$router.push('/') } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
<template> <v-container v-if="loading"> <div> <v-progress-circular indeterminate :size="150" :width="8" color="green"> </v-progress-circular> </div> </v-container> <v-container v-else-if="noData"> <div> <h2>No Movie in API with {{this.name}}</h2> </div> </v-container> <v-container v-else grid-list-xl> <v-layout wrap> <v-flex xs4 v-for="(item, index) in movieResponse" :key="index" mb-2> <v-card> <v-img :src="item.Poster" aspect-ratio="1" ></v-img> <v-card-title primary-title> <div> <h2>{{item.Title}}</h2> <div>Year: {{item.Year}}</div> <div>Type: {{item.Type}}</div> <div>IMDB-id: {{item.imdbID}}</div> </div> </v-card-title> <v-card-actions> <v-btn flat color="green" @click="singleMovie(item.imdbID)" >View</v-btn> </v-card-actions> </v-card> </v-flex> </v-layout> </v-container> </template> <script> // در همه کامپوننتها جهت واکشی اطلاعات ایمپورت میشود import movieApi from '@/services/MovieApi' export default { // route پارامتر مورد استفاده در props: ['name'], data () { return { // آرایه ای برای دریافت فیلمها movieResponse: [], // جهت نمایش لودینگ در زمان بارگذاری اطلاعات loading: true, // مشخص کردن آیا اطللاعاتی با سرچ انجام شده پیدا شده یا خیر noData: false } }, // تعریف متدهایی که در برنامه استفاده میکنیم methods: { // این تابع باعث میشود که // route // تعریف شده با نام // Movie // فراخوانی شود و آدرس بار هم تغییر میکنید به آدرسی شبیه زیر // my-site/movie/tt4715356 singleMovie (id) this.$router.push('/movie/' + id) }, fetchResult (value) { movieApi.fetchMovieCollection(value) .then(response => { if (response.Response === 'True') { this.movieResponse = response.Search this.loading = false this.noData = false } else { this.noData = true this.loading = false } }) .catch(error => { console.log(error) }) } }, // جز توابع // life cycle // vue.js // میباشد و زمانی که تمپلیت رندر شد اجرا میشود // همچنین با هر بار تغییر در // virtual dom // این تابع اجرا میشود mounted () { this.fetchResult(this.name) }, // watchها // کار ردیابی تغییرات را انجام میدهند و به محض تغییر مقدار پراپرتی // name // کد مورد نظر در بلاک زیر انجام میشود watch: { name (value) { this.fetchResult(value) } } } </script> <style scoped> .v-progress-circular margin: 1rem </style>
import axios from 'axios'
import axios from 'axios' export default { fetchMovieCollection (name) { return axios.get('&s=' + name) .then(response => { return response.data }) }, fetchSingleMovie (id) { return axios.get('&i=' + id) .then(response => { return response.data }) } }
axios.defaults.baseURL = 'http://www.omdbapi.com/?apikey=b76b385c&page=1&type=movie&Content-Type=application/json'
import Vue from 'vue' import VueRouter from 'vue-router' // برای رجیستر کردن کامپوننتها در بخش روتر، آنها را ایمپورت میکنیم import LatestMovie from '@/components/LatestMovie' import Movie from '@/components/Movie' import SearchMovie from '@/components/SearchMovie' Vue.use(VueRouter) export default new VueRouter({ routes: [ { // مسیری هست که برای این کامپوننت در نظر گرفته شده(صفحه اصلی)بدون پارامتر path: '/', // نام روت name: 'LatestMovie', // نام کامپوننت مورد نظر component: LatestMovie }, { // پارامتری هست که به این کامپوننت ارسال میشه id // برای دستیابی به این کامپوننت نیاز هست با آدرسی شبیه زیر اقدام کرد // my-site/movie/tt4715356 path: '/movie/:id', name: 'Movie', // در کامپوننت جاری یک پراپرتی وجود دارد //id که میتوان با نام // به آن دسترسی پیدا کرد props: true, component: Movie }, { path: '/search/:name', name: 'SearchMovie', props: true, component: SearchMovie } ], // achieve URL navigation without a page reload // When using history mode, the URL will look "normal," e.g. http://oursite.com/user/id. Beautiful! // در آدرس # قرار نمیگیرد mode: 'history' })
npm install