当下微服务逐渐兴起,后端更专注数据处理,开发模式也变过度到前后端分离,这种开发模式下,前端的工作也不仅仅是把页面效果写出来,还需要处理前后端数据交互,但javascript这类弱类型语言有一个缺点,不严格的语法难以形成体系,衍生出数以万计的插件,有时候做完一个后台,你会发现各个页面用着不同的插件,可能样式还不一样,颜色不协调等问题。这个时候有人意识到了,我们需要一套完整的后台ui,包含我们需要有的插件,比如日历选择插件,编辑器,弹框层,而且样式统一,而且还方便前后台数据交互。
像bootstrap,layui这些都意识到这个问题,出来一整套的ui,layui的后台模板和bootstrap比起来显得更为精致,像一些checkbox元素,layui改的已经完全不像原生的checkbox了,查看他的源码不难发现,其实layui已经把原生的checkbox隐藏了,用div替换上去了,弄得看起来像把checkbox样式改了一样,如果项目经理让你改checkbox样式,你可以"骗"项目经理能改的,但这样做的代价就是改变了原生的开发模式,老程序员可能不会接受,因为在新的开发模式下这个框架不知道会出现什么问题,如果对这个框架不了解,就有可能要加入其它框架解决这些问题。我也不是针对layui,有些框架的出现必定是为了解决问题,layui可能会在其它的一些业务场景下表现的非常出色
这里还是说下xView,xView并不是前段框架,但是用前段语言写的,一句话概括xView:致力于前段数据转化,xView认为数据有两种状态,一种是运算数据,一种是视图数据。就好比数据库里员工,员工id是运算数据,员工名字就是视图数据,页面上展示的就是员工名字,看不到id,但是需要对员工进行调离,就需要用到id,xView就是为了解决这类数据转化问题
这个在很多人看来是由一个input和一个botton组成,在xView看来,这是一个单独的组件,它满足一个包含一个视图数据和运算数据,这个时候就可以把这个组件纳入到xView来了
自定义组件实现getData和setView,setView的参数分别是e:组件dom,val:要赋予的运算数据,fmt:组件上的data-view属性,一般是自定义转换规则
//自定义mySelect组件
xView.widget.mySelect = {
setView: function(e, val, fmt) {
$(e).find(".view-input").val(val.name);
$(e).find(".view-input").attr("data-id",val.id);
},
getData: function(e) {
return $(e).find("view-input").attr("data-id");
}
}
<script type="text/javascript">
//自定义组件
//询问框
function selectMan(){
layer.confirm('<ul> <li>张三</li>'
+' <li>李四</li>'
+'<li>王五</li></ul>', {
btn: ['确定','取消'] //按钮
}, function(i){
layer.close(i)
//模拟获取到的员工数据
var item = {name:"张三",id:"1"}
alert("选中了:"+tiem.name);
xView.val($("#mySelect"),item);
},function(){});
}
</script>
</head>
<body>
<div>自定义组件</div>
<div id="model">
<div id="mySelect" x-view="mySelect" x-name="time" data-view="">
<input class = "view-input" type="text">
<input type="button" value="选择员工" onclick="selectMan()">
</div>
</div>
</body>
</html>
这里通过自定义组件就可以为组件赋值和取值,同样对于form表单也可以直接操作赋值和取值
$(function(){
//设置form值
xView.setForm($("#form"),
{a:{b:34234325450}
,city:1
,c1:[1,2]//喜欢的食物
,r1:1//配送方式
,select:2
,textarea:"我是一个文本域"});
//取出form的值
$("#formData").html(JSON.stringify(xView.getForm($("#form"))));
})
</script>
</head>
<body>
<div>form操作</div>
<form id="form" action="">
<span>你想去的城市:</span>
<input type="text" name="city" data-view="{data:'enum',view:{1:'南昌',2:'北京'}}">
<br>
<span>喜欢的食物:</span>
<input type="checkbox" name="c1" value="1" >肉
<input type="checkbox" name="c1" value="2" >水果
<input type="checkbox" name="c1" value="3" >鱼
<br>
<span>选择配送方式:</span>
<input type="radio" name="r1" value="1" >韵达
<input type="radio" name="r1" value="2" >圆通
<input type="radio" name="r1" value="3" >顺丰
<br>
<span>喜欢的课程:</span>
<select name="select">
<option value="1"> 英语</option>
<option value="2"> 数学</option>
<option value="3"> 语文</option>
</select>
<br>
<textarea name="textarea" rows="" cols=""></textarea>
</form>
<div>取出form的值:</div>
<div id="formData"></div>
</body>
这里xView表现的更像是一个工具,它的用法比较宽泛,针对前面layui的伪checkbox,利用xView其实可以替换form的功能,设计一套form组件,用xView做数据交互,具体用法可以看项目主页
xView项目主页