訂閱(Subscribe)
寫過js的都知道，subscribe在很多地方都能看到它的身影，并且起到了很重要的作用。偵聽http請求的返回，頁面間傳遞參數(shù)… …說起訂閱，就不能不提Observable，說起Observable就不能不提Subscribable… …等等，扯太遠了?；氐秸}，subscribe是Observable類下的一個函數(shù)。從Observable的中文名:”可觀察的”就能看出，Observable的作用是可以起到類似監(jiān)聽的作用，但它的監(jiān)聽往往都是在跨頁面中，舉個栗子：
// 父頁面export class SupComponent { id: string; // 父組件構(gòu)造器 constructor(private router: Router) { // 設(shè)置id this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP'; } // 進入詳情頁 detail(id: string) { // 攜帶id跳轉(zhuǎn)至詳細頁 this.router.navigate(['sub', id]); }}// 子頁面export class SubComponent implements OnInit{ // 子組件構(gòu)造器 constructor(private activated: ActivatedRoute) { } // 子組件初始化鉤子 ngOnInit(): void { // 訂閱活動路由 this.activated.params.subscribe(params => { console.info(params['id']); }); }}以上描述了一個簡單業(yè)務(wù)的代碼：在列表頁中點擊一個元素項，然后跳轉(zhuǎn)進入該元素的詳細頁，并在詳細頁中取到該元素的id。這時候，我們可以看到，訂閱事件派上用場了。
取消訂閱(Unsubscribe)
這時候我在想，JAVA里面為了內(nèi)存溢出，建議我們讀寫文件的流要關(guān)閉，對象要置空，那訂閱是否要取消呢？在官方文檔上，我們看到一句話：
那就是說，組件的鉤子會幫我們?nèi)∠嗛啠恍枰覀內(nèi)∠：冒?，你說啥就是啥。這天(當然就是我寫博客的今天)，我遇到了一個簡單的需求：用戶在‘用戶信息'頁面點擊‘修改資料'按鈕跳轉(zhuǎn)到修改資料的表單頁。當然表單的初始信息就是用戶未更改信息前的，這個沒問題。然后呢，為了盡量少發(fā)無用的請求(沒改動資料也允許用戶提交)，我就在DoCheck鉤子里面判斷，如果資料前后不相同就讓按鈕可以點擊，上代碼：
// 修改資料頁面export class ModifyUerInfo implements OnInit, DoCheck { // 用戶實體 user: User; // 表單組 form: FormGroup; // 聲明訂閱對象 subscript: Subscription; // 修改資料頁構(gòu)造器 constructor(private builder: FormBuilder) { // 實例化用戶實體 this.user = new User(); // 實例化訂閱對象 this.subscript = new Subscription(); } // 修改資料頁初始化鉤子 ngOnInit(): void { // 調(diào)用初始化表單函數(shù) this.initForm(); } // 修改資料檢測變動鉤子 ngDoCheck(): void { this.subscript = this.form.valueChanges.subscribe(data => { // 若表單無改動，data為null if (data == null) { // 這里要協(xié)同html進行不可點擊操作，比較簡單，就不貼代碼了 return; } // 讓提交按鈕可以點擊 console.info(data); }) } // 初始化表單方法 initForm() { // 初始化表單 this.form = this.builder.group({ // 聲明昵稱填寫項(假裝這里有值) nickname: [this.user.username, Validators.required], // 聲明年齡填寫項(假裝這里有值) age: [this.user.age, Validators.required] }) }}好了，保存代碼后，當我歡喜的去看控制臺結(jié)果的時候：
每條紅線，代表我改變了一次表單，請看圖找規(guī)律~找你妹！
可以發(fā)現(xiàn)，更改n次表單時，會產(chǎn)生n+1條log，并且是n+1條更改后的表單信息。雖然官方說不需要取消訂閱，但是如果在移動端快速產(chǎn)生那么多訂閱對象，難免保證一定不會沒有問題出現(xiàn)，并且作為有理想有追求的程序狗，是無法忍受這種不完美的情況出現(xiàn)的。
于是乎在回調(diào)函數(shù)中，加上了：
// 取消訂閱this.subscript.unsubscribe();
這時候，恢復(fù)理想狀態(tài)，搞定收工！
說真的，規(guī)范的代碼不僅僅可以讓代碼的可讀性提高，讓邏輯變得更清楚，讓女神傾慕，讓老板漲工資… …最重要的是可以讓程序避免出可避免的錯誤，很多注意點還是要注意的。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
