【MUI】跨webview多頁面 觸發事件

前言

很久沒寫文章了，這段時間太忙了

乾貨

直接上代碼吧，語言組織的不行，沒時間想好怎麼寫，先去休息。

app.js

var App = (function($, undefined) {
    var app = {};
    //經過參數個數的不一樣實現重載
    app.addMethod = function(name, fn) {
        var ofn = app[name];
        app[name] = function() {
            if(fn.length === arguments.length) {
                return fn.apply(this, arguments);
            } else if(typeof ofn === 'function') {
                return ofn.apply(this, arguments);
            }
        };
    };
    return app;
}(mui));

//本地存儲
(function(app) {
    var keyName = 'store', //方法名稱
        store = window.localStorage,
        nkey = function(k) {
            return '_news_' + k + '_ning_';
        },
        storeFn = function(fn) {
            app.addMethod(keyName, fn);
        };
    //獲取
    storeFn(function(key) {
        var str = store.getItem(nkey(key)) || '{}';
        return JSON.parse(str);
    });
    //所有覆蓋
    storeFn(function(key, val) {
        var str = JSON.stringify(val) || '{}';
        store.setItem(nkey(key), str);
        
    });
    //追加並覆蓋key
    storeFn(function(key, val, isAppend) {
        var oval = storeFn(key);
        for(var i in val) {
            oval[i] = val[i];
        }
        storeFn(key, oval);
    });
    
}(App));

//多頁面 監聽事件
(function(app, $) {
    var storeKeyName = '_NEWSNING_EVENTS_LISTENER_';
    var eList = function(){
        arguments[0] = storeKeyName + arguments[0];
        return app.store.apply(this,arguments);
    },
    
    
    

        eMethod = function(key, fn, isMore) {
            var arg = arguments,
                keyArr = eList(key);
            if($.isEmptyObject(keyArr)) {
                keyArr = [];
            }
            if(fn) { //若是是增添事件 
                $.plusReady(function() {
                    //獲取當前webview的id
                    var wid = plus.webview.currentWebview().id;
                    if(keyArr.length > 0 && keyArr.indexOf(wid) >= 0){
                        console.log('頁面：'+ wid +'已存在事件：'+key); 
                        //若是已經監聽 則不作任何 
                        return;
                    }
                    //添加事件
                    window.addEventListener(key, function _newsning_event_(e) {
                        fn.apply(fn, arguments);
                        //是否能夠屢次觸發
                        isMore || (window.removeEventListener(key, _newsning_event_));
                    });
                    console.log('頁面：'+ wid +'添加事件：' + key);
                    //增添至事件數組
                    keyArr.push({
                        id:wid,
                        once:!isMore
                    });
                    //保存至本地
                    eList(key, keyArr);
                });
            } else { //觸發事件
                var i = 0,
                    l = keyArr.length,
                    tempW,temp,nArr=[];
                $.plusReady(function() {
                    for(; i < l; i++) {
                        temp = keyArr[i];
                        //獲取須要觸發事件的webview
                        tempW = plus.webview.getWebviewById(temp.id);
                        $.fire(tempW, key, isMore);
                        temp.once || nArr.push(temp); 
                    }
                    //覆蓋
                    eList(key,nArr);
                });
            }
        };


    app.events = {
        //添加事件 once ：是否只監聽一次  默認監聽一次
        add: function(kname, fn, more) {
            eMethod(kname, fn, more);
        },
        //觸發事件
        fire: function(kname, data) {
            eMethod(kname, null, data);
        },
        remove: function(kname) {
            eList(kname, []);
        }
    }

}(App, mui));

index.html

mui.init();
            
            App.events.remove('demolistener'); 
            //監聽
            App.events.add('demolistener', function(e) {
                var data = e.detail.data;
                console.log(JSON.stringify(data));
            }, true); //false 時 爲只被觸發一次
            
            mui.ready(function() {
                document.getElementById("open").addEventListener('tap', function() {
                    mui.openWindow('index2.html');
                });
            });

index2.html

mui.init();
        mui.ready(function(){
            document.getElementById("fireBtn").addEventListener('tap',function(){
                App.events.fire('demolistener',{
                    'message': 'i\'m coming back !'
                });        
            });
        });

各位看官本身試試，還有些地方沒來得及優化