wex5 教程 之 图文讲解 全局可观察变量与登陆状态全局控制
一 先说说，这两个概念是什么意思
全局可观察变量？没听说过，只听过全局变量，那你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 收获成功后的喜悦
最新文章
- 【转载】8天学通MongoDB——第八天 驱动实践
- 【转】备份Kylin的元数据
- java.net.SocketException: No buffer space available
- 怎么向Xcode6 IOS8之后向项目中添加预编译文件
- PHP高级架构技术年度大盘点
- Codeforces Round #372 (Div. 2) B
- Logical Databases逻辑数据库
- ListView真的蛮好用
- Mybatis-Generator 详解 http://www.cnblogs.com/jtzfeng/p/5254798.html
- 转;VC++中Format函数详解
- CRC循环校验码
- Robotium双client測试框架
- 关于MongoDB数据库中文件唯一性的问题
- ActiveMQ 的安装与使用（单节点）
- Java下载文件的几种方式
- 从零搭建Vue开发环境
- 在Linux下，如何分析一个程序达到性能瓶颈的原因
- Qt连接数据库的两种方法
- jQuery 获取Select选择的Text和 Value
- 警告: The web application [ROOT] appears to have started a thread named [Thread-48] but has failed to stop it. This is very likely to create a memory leak. Stack trace of thread: