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 ******************************/