12月第三周

[VaJoy]

2015/12/20 22:00-23:00 VaJoy - 《高性能js》第八章剖析

2015/12/17 21:30-23:00 大熊 - h5的online/offline

[coxo]

1. 建立需求

• 用户在线时显示用户xxx在线
• 不在线时对应显示相关信息

2. 经过分析后得到技术解决方案

• 使用h5提供的navigator对象的onLine属性解决

3. 建立思想由于状态必须保持实时监测，所以分析得知用window.setInterval进行实时监测

4. 如何组织我们的代码

由于对技术做好选型使用两个api解决这个需求

首先建立检测程序

    window.setInterval(function(){
        // do something
    },1000);

    var navigator = window.navigator ;

我们可以把这两个底层提供的基础功能进行组织

    window.setInterval(function(){
        // do something
        var navigator = window.navigator ;
        if(navigator.onLine){
            // online
        }
        else{
            // offline
        }
    },1000);

以上基础组织已经完工，但只算个半成品功能

再次组织代码

    (function(win,$){
        var NSApi= win.NSApi = function(elem,delay){
            this.elem = elem ; // root element
            this.delay = delay || 3000 ; // time delay
            this.start() ; // start init
        } ;
        function getStatusValue(){

        } ;
        NSApi.prototype.start = function(){
            window.setInterval(function(){
                var self = this ;
                var navigator = window.navigator ;
                var boolOnLine = navigator.onLine ;
                if(boolOnLine){
                    self.elem.trigger("ns.online",boolOnLine) ;
                }
                else{
                    self.elem.trigger("ns.offline",boolOnLine) ;
                }
            },1000) ;
        } ;
        NSApi.prototype.pubsub = function(){
            return this.elem ;
        } ;
    })(window,jQuery);

建立客户端代码

    $(function(){
        var nsMain = $("#nsMain") ;
        new NSApi(nsMain,1000).pubsub().on("ns.online",function(isOnline){
            nsMain.text("用户在线") ;
            console.log((isOnline)) ;
        }).on("ns.offline",function(isOnline){
            nsMain.text("用户离线") ;
            console.log((isOnline)) ;
        }) ;
    });

html片段

    <div id="nsMain"></div>

5,最后总结建语音讨论相关注意事项

6，课后题目

实现一个简单的选项卡功能理解pubsub机制

[coxo]

课堂记录 ：

有关封装
封装是封装变化的部分
变化才是最稳定的
变化才是最稳定的