<body>
<h3>设计模式知识连载（48）---MVC模式:</h3>
<div>
<p>
模型（model）-视图（view）-控制器（controller），用一种将业务逻辑、数据、视图分离的方式组织架构代码
</p>
</div>
<hr>
<script type="text/javascript">
/**
* 案例一：，方式一：初始
*/
/* 为简化页面操作逻辑，这里引用链模式中实现的A框架，具体方法参考附录A */
// 页面加载后创建MVC对象
$(function() {
// 初始化MVC对象
var MVC = MVC || {} ;
// 初始化MVC数据模型层
MVC.model = (function() {
// 内部数据对象
var M = {} ;
// 服务器端获取的数据，通常通过ajax获取并存储，后面的案例为简化实现，直接作为同步数据
// 写在页面中，减少服务器端异步请求操作
M.data = {
/* 模拟数据 */
// 左侧侧边栏导航服务器端请求得到的响应数据
slideBar : [
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
},
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
},
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
},
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
},
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
},
{
text : '萌萌哒',
icon : 'left_meng.png',
title : '猫耳朵萝莉千本樱',
content : '萝莉有三好',
img : 'left_meng_img.png',
href : 'https://www.baidu.com'
}
]
} ;
// 配置数据，页面加载时即提供
M.conf = {
/* 模拟数据 */
// 侧边导航动画配置数据
slideBarCloseAnimate : false
} ;
// 返回数据模型层对象操作方法
return {
// 获取服务器端数据
getData : function(m) {
// 根据数据字段获取数据
return M.data[m] ;
},
// 获取配置数据
getConf : function(c) {
// 根据配置数据字段获取配置数据
return M.conf[c] ;
},
// 设置服务器端数据（通常将服务器端异步获取到的数据，更新该数据）
setData : function(m, v) {
// 设置数据字段m对应的数据v
M.data[m] = v ;
return this ;
},
// 设置配置数据（通常在页面中执行某些操作，为做记录而更新配置数据）
setConf : function(c, v) {
M.conf[c] = v ;
return this ;
}
}
})() ;
// 初始化MVC视图层
MVC.view = (function() {
// 模型数据层对象操作方法引用
var M = MVC.model ;
// 内部视图创建方法对象
var V = {
/* 模拟数据 */
// 创建侧边导航模块视图
createSlideBar : function() {
// 导航图标内容
var html = '' ;
// 视图渲染数据
var data = M.getData('slideBar') ;
// 屏蔽无效数据
if(!data || !data.length) {
return ;
}
// 创建视图容器（参考附录A中，A框架中创建元素方法create）
var dom = $.create('div', {
'id' : 'slideBar',
'class' : 'slideBar'
}) ;
// 视图容器模板
var tpl = {
container : [
'<div class="slidebar-inner"><ul>{#content#}</ul></div>',
''
].join('') ;
// 导航图标模块模板
item : [
'<li>',
'<a class="icon" href="{#href#}">',
'<img src="common/img/{#icon#}">',
'<span>{#text#}</span>',
'</a>',
'<div class="box">',
'<div>',
'<a class="title" href="{#href#}">{#title#}</a>',
'<a href="{#href#}">{#content#}</a>',
'</div>',
'<a class="image" href="{#href#}"><img src="common/img/{#img#}"></a>',
'</div>',
'</li>'
].join('') ;
// 渲染全部导航图片模块
for(var i = 0; i < data.length; i++) {
html += $.formateString(tpl.item, data[i]) ;
}
// 在页面中创建侧边导航视图
dom
// 向侧边导航模块容器中插入侧边导航视图
.html(
// 渲染导航视图（content为导航图片内容）
$.formateString(tpl.container, {content : html}) ;
)
// 将侧边导航模块容器插入页面中
.appendTo('body') ;
}
}
} ;
// 获取视图接口方法
return function(v) {
// 根据视图名称返回视图（由于获取的是一个方法，这里需要将该方法执行以便以获取相应视图）
V[v]() ;
}
})() ;
// 初始化MVC控制器层
MVC.ctrl = (function() {
// 模型数据层对象操作方法引用
var M = MVC.model ;
// 视图数据层对象操作方法引用
var V = MVC.view ;
// 控制器创建方法对象
var C = {
// 侧边导航栏模块
initSlideBar : function() {
// 渲染导航栏模块视图
V('createSlideBar') ;
// 为每一个导航图标添加鼠标光标滑过与鼠标光标离开交互事件（具体方法参考附录A中的A框架）
$('li', 'slidebar')
// 鼠标移入导航icon（图标）显示导航浮层
.on('mouseover', function(e) {
$(this).addClass('show') ;
})
// 鼠标移出导航icon（图标）隐藏导航浮层
.on('mouseout', function(e) {
$(this).removeClass('show') ;
}) ;
// 箭头icon（图标）动画交互
$('.slidebar-close', 'slidebar')
// 点击箭头icon时
.on('click', function(e) {
// 如果正在执行动画
if(M.getConf('slideBarCloseAnimate')) {
// 终止动画
return false ;
}
// 设置侧边导航模块动画配置数据开关为打开状态
M.setConf('slideBarCloseAnimate', true) ;
// 获取当前元素（箭头icon）
var $this = $(this) ;
// 如果箭头icon是关闭状态（含有is-close类）
if($this.hasClass('is-close')) {
// 为侧边导航模块添加显示动画
$('.slidebar-inner', 'slidebar')
.animate({
// 动画时间
duration : 800,
// 动画类型
type : 'easeOutQuart',
// 动画主函数
main : function(dom) {
// 每一帧改变导航模块容器left值
dom.css('left', -50 + this.tween * 50 + 'px') ;
},
// 动画结束时回调函数
end : function() {
// 设置箭头icon为打开状态（删除is-close）类
$this.removeClass('is-close') ;
// 设置侧边导航模块动画配置数据开关为关闭状态（此时可继续进行模块显隐动画交互）
M.setConf('slideBarCloseAnimate', false) ;
}
}) ;
// 如果箭头icon是打开状态（不含is-close类）
}else {
// 为侧边导航模块添加显示动画
$('.slidebar-inner', 'slidebar')
.animate({
// 动画时间
duration : 800,
// 动画类型
type : 'easeOutQuart',
// 动画主函数
main : function(dom) {
// 每一帧改变导航模块容器left值
dom.css('left', this.tween * -50 + 'px') ;
},
// 动画结束时回调函数
end : function() {
// 设置箭头icon为打开状态（删除is-close）类
$this.addClass('is-close') ;
// 设置侧边导航模块动画配置数据开关为关闭状态（此时可继续进行模块显示动画交互）
M.setConf('slideBarCloseAnimate', false) ;
}
}) ;
}
}) ;
}
} ;
// 为侧边导航模块添加交互与动画特效
C.initSlideBar() ; // 也可把函数写成自执行函数
})() ;
}) ;
</script>
</body>
10-13
1547
1547
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
