溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
訂閱(Subscribe)
寫過js的都知道，subscribe在很多地方都能看到它的身影，并且起到了很重要的作用。偵聽http請求的返回，頁面間傳遞參數… …說起訂閱，就不能不提Observable，說起Observable就不能不提Subscribable… …等等，扯太遠了。回到正題，subscribe是Observable類下的一個函數。從Observable的中文名:”可觀察的”就能看出，Observable的作用是可以起到類似監聽的作用，但它的監聽往往都是在跨頁面中，舉個栗子：
// 父頁面
export class SupComponent {
id: string;
// 父組件構造器
constructor(private router: Router) {
// 設置id
this.id = 'JvsBRBQHU2BthZQNYrBkVl0Z22zQQIkP';
}
// 進入詳情頁
detail(id: string) {
// 攜帶id跳轉至詳細頁
this.router.navigate(['sub', id]);
}
}
// 子頁面
export class SubComponent implements OnInit{
// 子組件構造器
constructor(private activated: ActivatedRoute) { }
// 子組件初始化鉤子
ngOnInit(): void {
// 訂閱活動路由
this.activated.params.subscribe(params => {
console.info(params['id']);
});
}
}
以上描述了一個簡單業務的代碼：在列表頁中點擊一個元素項，然后跳轉進入該元素的詳細頁，并在詳細頁中取到該元素的id。這時候，我們可以看到，訂閱事件派上用場了。
取消訂閱(Unsubscribe)
這時候我在想，JAVA里面為了內存溢出，建議我們讀寫文件的流要關閉，對象要置空，那訂閱是否要取消呢？在官方文檔上，我們看到一句話：
那就是說，組件的鉤子會幫我們取消訂閱，不需要我們取消。好吧，你說啥就是啥。這天(當然就是我寫博客的今天)，我遇到了一個簡單的需求：用戶在‘用戶信息'頁面點擊‘修改資料'按鈕跳轉到修改資料的表單頁。當然表單的初始信息就是用戶未更改信息前的，這個沒問題。然后呢，為了盡量少發無用的請求(沒改動資料也允許用戶提交)，我就在DoCheck鉤子里面判斷，如果資料前后不相同就讓按鈕可以點擊，上代碼：
// 修改資料頁面
export class ModifyUerInfo implements OnInit, DoCheck {
// 用戶實體
user: User;
// 表單組
form: FormGroup;
// 聲明訂閱對象
subscript: Subscription;
// 修改資料頁構造器
constructor(private builder: FormBuilder) {
// 實例化用戶實體
this.user = new User();
// 實例化訂閱對象
this.subscript = new Subscription();
}
// 修改資料頁初始化鉤子
ngOnInit(): void {
// 調用初始化表單函數
this.initForm();
}
// 修改資料檢測變動鉤子
ngDoCheck(): void {
this.subscript = this.form.valueChanges.subscribe(data => {
// 若表單無改動，data為null
if (data == null) {
// 這里要協同html進行不可點擊操作，比較簡單，就不貼代碼了
return;
}
// 讓提交按鈕可以點擊
console.info(data);
})
}
// 初始化表單方法
initForm() {
// 初始化表單
this.form = this.builder.group({
// 聲明昵稱填寫項(假裝這里有值)
nickname: [this.user.username, Validators.required],
// 聲明年齡填寫項(假裝這里有值)
age: [this.user.age, Validators.required]
})
}
}
好了，保存代碼后，當我歡喜的去看控制臺結果的時候：
每條紅線，代表我改變了一次表單，請看圖找規律~找你妹！
可以發現，更改n次表單時，會產生n+1條log，并且是n+1條更改后的表單信息。雖然官方說不需要取消訂閱，但是如果在移動端快速產生那么多訂閱對象，難免保證一定不會沒有問題出現，并且作為有理想有追求的程序狗，是無法忍受這種不完美的情況出現的。
于是乎在回調函數中，加上了：
// 取消訂閱 this.subscript.unsubscribe();
這時候，恢復理想狀態，搞定收工！
說真的，規范的代碼不僅僅可以讓代碼的可讀性提高，讓邏輯變得更清楚，讓女神傾慕，讓老板漲工資… …最重要的是可以讓程序避免出可避免的錯誤，很多注意點還是要注意的。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
