一 先說說，這兩個概念是什么意思
全局可觀察變量？沒聽說過，只聽過全局變量，那你out了，因為我要充分發揮綁定技術來控制頁面部局，組件的隱藏與顯示，文字內容，樣式改變。看我博文大家知道，我想用綁定技術貫穿整個web開發，目的是為了少寫代碼或不寫代碼，控制起來更靈活。一會用實例說說全局可觀察變量的前世今生。
登陸狀態全局控制？登陸狀態，大家知道，無非就是登陸與退出。全局控制呢？就是說登陸后能進入哪些頁面，操作哪些組件，擁有對哪些界面的操作權限。
那問題來了，如何用代碼實現根據登陸狀態來控制頁面及組件呢？
舉個實例：
未登陸前
登陸后,把圖片和登陸按鈕去掉，並顯示用戶id,如下圖：
二 設計思路：
再沒看我此文之前是，我們先想想，實現方法都有哪些?\
1 .根所登陸狀態的字段，仍然用綁定技術來控制界面。
可以。
前提是：
1 登陸狀態提交到數據庫
2 把ID用傳參方法傳給相應頁面
3 根據用戶ID過濾出當前行
4 根據當前行的loginState登陸狀態字段來實現。
每1 步和第3步，容易實現，那第二行的ID呢？
常規方法是傳參，登陸成功后將id傳到main頁面。讓main頁面接收，再將id分配到不同的子頁面，或者再深入的傳至二、三、四甚至幾十個頁面。
我的天哪，也就是用到了平行與縱向頁面數量過多或層級過多的話，每個頁面的首要任務是接收參數，並過濾出每一條數據。真是天文數字。修改一次或出錯了，真是越走越遠，死的心都有了。
再回過頭來看參數接收，坑也不少。不是所有頁面都具有參數接收能力。
比如下面這個界面：
詭異的問題，login后傳到main頁面的參數不能接收參數。居然要加一個windowReceiver組件來接收參數。
接收之后呢？？
再用windowContainer的傳參方法，往相應的頁面傳參。
.........................
先不說設計的復雜度了，我只要一個用戶 ID而已，至於在眾多頁面里傳來傳去嗎？？也夠太費勁了。小白估計沒幾個進行下去的。
2 全局變量
web開發中，聽說過，能用到的全局變量很多，一一分析。
1 session 不多說，大家都在用，跟頁面生命周期相關，幾十個頁面，一一來操作，費勁。
2 localStorage 本地存儲，問題是關了程序，必須清除localStorage相關鍵值。不是我想要的效果
3 justep.Shell.XXXXX這個方法很好，可惜頁面跳轉會失效，justep.Shell.show(""),不行了。不是真正的全局啊。
4 window.XXXX,這才是我的個神啊，只要是web打開狀態，怎么樣頁面都可以全局。那么，window.XXXX作為今天的主角，登場了。
三 全局可觀察變量的使用與坑
1 創建方法：
在首頁如圖位置，創建userUUID和userState，並賦於可觀察屬性。
window.userUUID = justep.Bind.observable(); //
window.userState = justep.Bind.observable(); //
2 main主頁裝載
重要的事情只說一遍:
main頁面必須有，在里面放windowCantainer ,裝一個首頁即可。這里的首頁只是為了展示界面。真正的頁面切換與跳轉，我們不用contents頁面容器。因為在window裝裝機制中，home頁面只能取到window.xxxxx值，卻得不到可觀察屬性.
3 .頁面切換與跳轉
實測表明，用justep.Shell.showPage("home")方法跳轉到home頁面，home頁面居然可以得到window.XXXX的可觀察屬性了。神奇。
代碼如下：
登陸后，全局變量userState狀態為1，那么，不是1的時候，歡迎圖片與登陸按鈕顯示，登陸扣則隱藏。
有幾什個組件幾十個頁面，用這句話來控制，超簡單。與之前大家寫過的css，js方法比比，0代碼編程，綁定技術功不可沒。
4. 分頁模式模擬單頁模式：
其實是對頁面進行重構。
單頁模式是在contents 頁面集合容器里放了多個頁面，用button的target來關聯頁面，那么，我現在全是showPage,成了html5的單頁模式，怎么辦呢？
方法很簡單，底部放一組相同的按鈕即可，看起來，還是在單頁模式里操作。
新的問題來了，組件高亮顯示與頁面不對應啊？
這也簡單，強制改一下按鈕里span的顏色，哪個頁面，你改哪個span的顏色，其它三個一樣，不就行了嗎？
我這里mine頁里，span改成黃色，其它是藍色。
四 總結：
看似簡單，其實我進行了三天的反復測試，在遇到問題的時候，心里一定要有信心能把想法實現，沒有解決是因為還沒分析出問題的本質。
1 有信心
2 不怕浪費時間
3 不怕反復的測試麻煩
4 收獲成功后的喜悅
相關視頻制作完成，上傳優酷。教學app制作中。我是邯鄲戲曲開發，tel：15175073123,qq:1017945251
掃描二維碼，看高清教學視頻。