当下微服务逐渐兴起，后端更专注数据处理，开发模式也变过度到前后端分离，这种开发模式下，前端的工作也不仅仅是把页面效果写出来，还需要处理前后端数据交互，但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项目主页
251
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
