首页
JavaScript进阶
15：JavaScript之MVVM模式#1简单进度条

15：JavaScript之MVVM模式#1简单进度条

作者：田大才子2016-10-17 22:36分类： JavaScript进阶

本文所有文字解释都在代码中以注释的方式存在。

请复制代码到自己喜欢的文本编辑器中观看。

温馨提示如有转载或引用以上内容之必要，敬请将本文链接作为出处标注，谢谢合作！

以下为全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JavaScript之MVVM模式#简单进度条</title>
</head>
<style type="text/css">
	
</style>
<body>
	
	<div data-bind="type:'progressbar',data:demo1" style="background:blue;height:100px"></div>

	<script>
		~(function(){

			//闭包中获取全局变量
			//(0,eval)('this')这句话的意思和 eval('this')一致
			//只不过是使为了兼容严格模式下取不出全局变量的问题
			var window = this || (0,eval)('this');

			//设置页面字体大小
			var FONTSIZE = 14;

			//视图模型对象
			var VM = function(){
				//创建不同类型的进度条方法
				var Method = {
					progressbar : function(dom,data){
						//创建一个进度条容器
						var progress = document.createElement("div");
						var parma = data.data;
						//设置容器宽度
						progress.style.width = (parma.position || 100) + "%";
						progress.style.height = "100px";
						progress.style.background = "red";

						//设置UI样式
						dom.className += ' ui-progresssbar';
						//加入容器中
						dom.appendChild(progress);
					},
					slider : function(){

					}
				}

				//得到邦定的数据
				function getBindData(dom){
					var data = dom.getAttribute('data-bind');
					return !!data && (new Function("return ({" + data + "})"))();
				}

				//返回实例化组建
				return function(){
					//获取所有的Dom节点遍历
					//性能应该不好，可以根据具体情况调整
					var doms = document.body.getElementsByTagName("*");
					var ctx;

					for(var i = 0,max = doms.length; i < max; i++){
						//获取元素数据
						ctx = getBindData(doms[i]);
						//如果是UI组件，则渲染组建
						ctx.type && Method[ctx.type] && Method[ctx.type](doms[i],ctx)
					}

				}
			}();

			window.VM = VM;

		})();

		var demo1 = {
			position :60,
			totle : 200
		}

		VM();


	</script>

</body>
</html>

Plugins by ewCEO.com

« 16：JavaScript之MVVM模式#2带划块的进度条 | 14：JavaScript之订阅者模式#2键盘游戏 »

已有 0/3022 人参与

发表评论：

15：JavaScript之MVVM模式#1简单进度条

已有 0/3022 人参与

搜索

日历

最新文章

热门文章

随机文章

15：JavaScript之MVVM模式#1简单进度条

相关文章

已有 0/3022 人参与

搜索

日历

最新文章

热门文章

随机文章