views 框架 简单示例

/********************* views 应用 js************************/

var pageview, Page = null;
//1.初始化view
pageview = views.views({nodeid: "content"});
//2.添加页面
pageview.add({id: "home",init: initHome});
//3.设置hash路由  
pageview.setHashTable(function(_hashValue) {
    //页面控制器  
    Page = this.cont;
    var _hashValue = _hashValue.split("_");     
    switch (_hashValue[0]) {
        case "#home": //首页
            Page.home.init(); 
            break;
        default:   //统一中转页  
            transit();
    }
});
//4.控制器开始
pageview.init();

//函数功能实现
function initHome(){
    var that = this;
    that.end();
}
/********************* views 应用 html ************************/


<!--#include virtual="/sinclude/promote/spa.html"-->

<div id="content"></div>

<script type="text/html" id="home">
    <div></div>
</script>

/********************* views 应用 源码 ************************/


define("wg.views",function(require,exports,modules){

    var pageStatusKey = "wg.views_"+location.pathname;
    var pageStatusData = JSON.parse(sessionStorage.getItem(pageStatusKey))||{};
    var statusRecoder = null;
    function views(opt){
        if(typeof opt != "object") opt = {};
        this._firstIn = true;
        this._option = {
            nodeid:"",
            initFunc:empty(),
            eventFunc:empty(),
            freshFunc:empty(),
            eventCore:empty(),
            changeEffect:function(tohide,toshow,callback){
                tohide.css("opacity",0.4);
                toshow.css("opacity",0);
                setTimeout(function(){
                    tohide.hide().css("opacity",1);
                    toshow.show().css("opacity",1);
                    callback && callback();
                },200);
            }
        }

        for(var i in this._option){
            this._option[i] = opt[i] ? opt[i] : this._option[i];
        }
        this.hashTable = function(hashvalue){
            switch(hashvalue){
                default:
            }
        }
        this.cont = {};
        if(typeof this._option.nodeid == "string"){
            this._option.nodeid = $("#"+this._option.nodeid);
        }else{
            this._option.nodeid = $(this._option.nodeid);
        }
    }

    function empty(){
        return function(){};
    }

    views.prototype.add = function(opt){
        var _that = this;
        this.cont[opt.id] = new ceilView(opt.init,opt.bindEvent,opt.id,function(tpl){
            _that._startLoading(tpl);
        },function(callback,ownchangeEffect){
            _that._finishLoading(this,callback,ownchangeEffect);
        });
    }

    views.prototype.setHashTable = function(hashtable){
        if(hashtable){
            this.hashTable = hashtable;
        }
    }

    views.prototype.init = function(){
        var _that = this;
        this._option.initFunc();
        window.onhashchange = function(){
            _that._hash(location.hash ?location.hash:("#"+getQuery("hash")));
        }
        _that._hash(location.hash ?location.hash:("#"+getQuery("hash")));
        this._option.eventFunc();
    }

    function getQuery(name, url) {
        var u = arguments[1] || window.location.search,
            reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"),
            r = u.substr(u.indexOf("\?") + 1).match(reg);
        return r != null ? r[2] : "";
    }

    function ceilView(initFunc,eventFunc,templateid,startLoadFunc,endLoadFunc){
        this._initFunc = initFunc ? initFunc : empty();
        this._eventFunc = eventFunc ? eventFunc :empty();
        this._templateid = templateid;
        this._endLoadFunc = endLoadFunc;
        this._startLoadFunc = startLoadFunc;
    }

    views.prototype._hash = function(_hashvalue){
        if(!this._firstIn){
            $("#t_loading").show();
        }
        this.hashTable(_hashvalue);
    }

    views.prototype.rehash = function(_hashValue){
        this._hash(_hashValue ? _hashValue:(location.hash?location.hash:("#"+getQuery("hash"))));
    }


    ceilView.prototype.init = function(){
        var that = this;
        this._startLoadFunc(this._templateid);
        this.p = $("#"+this._templateid+"_panel");
        var a = arguments;
        this._initFunc(a[0],a[1],a[2],a[3],a[4],a[5],a[6],a[7],a[8],a[9],a[10])
    }
    ceilView.prototype.end = function(callback,ownchangeEffect){
        var that = this;
        this._endLoadFunc(callback,ownchangeEffect);
        this._eventFunc();
    }

    views.prototype._startLoading = function(_panelid){
        this._option.freshFunc();
        this._intoContent(_panelid);
    }

    views.prototype._intoContent = function(_panelid){

        var _str = '<div class="wg_view" tag="views" id="'+_panelid+'_panel">'+($("#"+_panelid).length >0 ? $("#"+_panelid).html(): $('[pageid = '+_panelid+']').html())+'</div>';
        if(!this._firstIn){
            $("#t_loading").show();
        }
        if($("#"+_panelid+"_panel").length == 0){
            this._option.nodeid.find("[tag=views]").attr("isusing","no");
            this._option.nodeid.append($(_str).attr("isusing","yes").hide());
        }else{
            $("#"+_panelid+"_panel").attr("isusing","yes").siblings().attr("isusing","no");
        }
    }
    views.prototype._finishLoading = function(that,callback,ownchangeEffect){
        this._option.eventCore.call(that);
        $("#t_loading").hide();
        loadedPercent && loadedPercent(100);
        this._changeViews(callback,ownchangeEffect);
    }
    views.prototype._changeViews = function(callback,ownchangeEffect){
        var that = this;
        var nowPanel = this._option.nodeid.find("[isusing=yes]").attr("id").replace("_panel","");
        if(!this._firstIn){
            var that = this;
            var _noweffect = ownchangeEffect ? ownchangeEffect : this._option.changeEffect;
            _noweffect(this._option.nodeid.find("[isusing=no]").filter(function(){return $(this).css("display") != "none";}),this._option.nodeid.find("[isusing=yes]"),function(){
                if(pageStatusData["top_" + nowPanel]){
                    window.scrollTo(0,pageStatusData["top_" + nowPanel]);
                }
                callback && callback();
            });
        }else{
            this._firstIn = false;
            this._option.nodeid.find("[isusing=yes]").show();
            setTimeout(function(){
                if(pageStatusData["top_" + nowPanel]){
                    setTimeout(function(){
                        window.scrollTo(0,pageStatusData["top_" + nowPanel]);
                    },that._option.delayScroll);
                }
                callback && callback();
            },0);
        }
    }

    function scrollWatch(panel){
        var scrolltop = window.scrollY || document.body.scrollTop;
        pageStatusData["top"+panel] = scrolltop;
        savePageStatus(true);
    }

    function savePageStatus(need1secend){
        if(need1secend){
            if(statusRecorder == null){
                statusRecorder = setTimeout(function(){
                    sessionStorage.setItem(pageStatusKey,JSON.stringify(pageStatusData));
                    clearTimeout(statusRecorder);
                    statusRecorder = null;
                },100);
            }
        }else{
            sessionStorage.setItem(pageStatusKey,JSON.stringify(pageStatusData));
        }
    }

    exports.views = function viewControl(opt){
        return new views(opt);
    }

});

/************************* end ******************************/