UI框架有很多，比如微信官方为公众号开发提供的WeUI、适合后端程序员使用的Layui等。UI框架一般只是给前端狗写静态页面提供方便。
这类框架一般提供css和js文件，使用时引入css和js文件，然后html页面里使用框架规定的类名，或者说html页面里复制框架的html即可渲染出完整的html页面。不用再手工去表单、列表、样式等等，而且一般UI框架的兼容性、美观度都会比我们手写好很多。
初学时我还好奇过UI框架和JS框架的区别，JS框架比如JQuery/Vue/React等是不牵扯到html/css等样式问题的。他们本质是让我们不需要直接使用原生JS而是用他们封装后的库去更便利的开发JS。比如，JQuery使我们操作DOM，使用异步请求更方便，vue等使我们可以不再关注DOM操作，将精力更多的放在数据处理、代码优化上去。
下面分享下几个用过的UI框架：
一：Vant
Vant 是一个轻量、可靠的移动端组件库，提供了 Vue 2 版本、Vue 3 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本。相比于AUI/weUI，Vant组件更多，基本覆盖移动端网页所有功能需求。Vant相对于weui使用起来更加方便，从html到js动态效果已经封装完毕，直接调用组件、配置即可。功能异常强大，是我们工作学习中的好帮手。
二：ElementUI
这个UI组件库，专门配合VUE使用。功能强大到可怕，借助它可快速开发管理后台。特点是
文档清晰，每个组件的每个点都有详细的实例。 组件异常完善，只有你想不到，没有人家做不到的。 组件设计简洁易用，很快上手。 用这个UI框架，就感觉自己是个工具人，对不起自己所领的薪水，人家啥都给搞定了。我们把组件拿过来拼起来就行，是我们开发速度超快。
前两年为了学习vue、ElementUI等新知识，我自己写了一个博客：孙权的博客。这个博客的管理端就用的ElementUI，没有设置账号密码，分享给大家：sunq’s blog admin
我博客的管理端用的就是ElementUI，他帮我以极快的速度就搞定了博客的管理后台。推荐大家使用这个强大的UI框架。
Element不太适用移动端，比如table、侧边导航菜单等组件也只有在管理端才会用到。但是花点心思适配也能基本达到预期，具体可以看下我的博客管理后台。
三：WeUI
WeUI与LayUI类似，但相比之下WeUI提供的内容少一些。WeUI只是提供css文件、js文件，你复制它的html代码即可渲染出一个纯静态的列表页出来。数据动态化这块，前端狗需要自己用ajax等请求数据，用模板引擎来修改纯静态页面并渲染列表页。
WeUI是一套同微信原生视觉体验一致的基础样式库,适合开发微信小程序、企业号等应用，即在微信上使用的网页。设计风格跟微信一样简洁大方。
四：AUI
aui 是一套基于原生javascript开发的移动端UI组件库，包含常用js方法、字符校验、dialog提示弹窗、数字键盘、侧滑菜单、时间选择器、多级联动、聊天UI、项目常用模板。特点是：
标准化，产品化 更多复用，更快效率 多人协作，更加统一 维护方便 易于使用 减少UI设计时间 AUI相对于weui来说更进一步，不光提供样式，使用它的方法可以直接渲染出组件了。开发移动端应用是可以参考使用，常用组件也都基本覆盖到位了。
五：LayUI
1.Layui比一般UI框架更加方便，不光为我们提供好静态页面，连数据交互这块也帮前端狗写好了。下面以Layui渲染列表为例，
1.html中引入特定css和js文件后，写一个列表最外层的div，如
2.写js代码，按LayUI提供的语法规则，新建一个table实例对象，在实例对象中将表头信息、接口地址等信息写好，打开页面即可渲染出特定样式的列表出来
LayUI官网还提供一些其用户基于LayUI写好的开源的完整系统，比如一个具有所有功能的管理后台，让一些没有设计师或者快速开发的公司，直接拿来修改使用。
但是这个框架的开发者闲心已经不再维护升级，官网已经关闭。用闲心自己的话，他让我们去拥抱变化拥抱MVVM的开发方式。他造福了中国一大堆当时从事后端但想要快速开发的人们，layui用在了无数网站上，这里向他致敬！
2. 自定义模块使用
LayUI自定义模块：
第一步：新建一个JS文件，命名为NewModule.js，代码如下
layui.define('layer',function (exports) {
layer = layui.layer; //调用已存在模板
console.log("");
var render = {
index:function () {
console.log("测试调用接口");
layer.msg("好冷");
}
};
exports('NewModule',render); //抛出接口,加载模块时可以调用render里面的方法
});
使用自定义模块
layui.config({
base: '../src/' //自定义模块放在的位置
,version: '1.0.0-beta5'
}).use('NewModule',function () {
var NewModule = layui.NewModule;
NewModule.index();
});
3.Table绑定Toolbar
html中：
Js中：
table.render({
elem:'#ATable', //此处的ATable为table的id值
clos:[[
{title:'操作',toolbar:'#Tpl'} //此处实例化table时，绑定toolbar模板文件
]]
});
table.on('tool(ATable)',function(obj){ //此处的ATable为table的lay-filter值
if(obj.evenet === 'play'){ //此处监听toolbar的点击事件
... ...
}
});
4.跳过的坑
1.当ajax请求时只有请求头没有响应头，且提交后会刷新页面，实在找不到原因时，可能是form表单用错了。
正确的写法：
错误的写法：
PS：原生JS
我用原生JS写了一个小游戏：贪吃蛇
欢迎大家指正我的代码哈，贪吃蛇源码
参考链接
您阅读本篇文章共花了：
发表评论