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    收获成功后的喜悦