h5框架之layui和uikit你会选哪个?

随着前端的流行，前端也跟后端一样出现了很多的框架，比较流行的可能就是layui和uikit了。那今天对这两款的框架进行全面的对比：

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML-CSS-JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。UIKit提供了全面的HTML、CSS及JS组件，它们使用简单，容易定制和扩展。

它基于LESS开发，代码结构清晰简单，易于扩展和维护，并且具有体积小、反应灵敏的响应式组件，你可以根据 UIKit 基本的风格样式，轻松地自定义创建出自己喜欢的主题样式。

LayUI优点

由于开发项目必须要在IE8上支持，选择LayUI前端UI框架，Layui兼容除IE6以外的全部浏览器，并且多数结构支持响应式。

LayUI使用

需要引入layui的js和css文件，引入方式如下：

<!-- layoutui -->

<link rel="stylesheet" href="<%=realPath%>/layui/css/layui.css" media="all">

<script src="<%=realPath%>/layui/layui.js"></script>

LayUI导航栏的使用

注意点:假如引入layui.js而不是layui.all.js时需要在<script></script>标签中引入

layui.use('element', function(){

var element = layui.element();

});

代码，类似于加载layui模块的元素才能正常使用导航栏。

1.在<script></script>标签中定义导航栏的结构如下：

var checkManageTree = [

{

name: "产品",

alias:"产品",

href:"",

state:{

selected:isCurrent("产品",false)

}

},

{

name: "供方",

alias:"供方",

href:"",

state:{

selected:isCurrent("供方",false)

}

}];

2.定义添加导航的导航栏的div如下：

<!-- 左侧导航 -->

<div id="left" class="site-text" lay-filter="left-div">

</div>

3.通过id获取div标签初始化导航栏视图，getHtml()方法负责根据代码动态生成导航栏视图

$('#left').html(getHtml(checkManageTree));

4.getHtml()方法的实现，通过动态创建导航栏可以减少重复代码，只需要定义json的格式的导航栏即可

/**

* 获取html字符串

* @param {Object} data

*/

function getHtml(data) {

var ulHtml = '<ul class="layui-nav layui-nav-tree" id="leftMenuUl">';

for (var i = 0; i < data.length; i++) {

if (data[i].spread !== undefined &&data[i].spread) {

ulHtml += '<li class="layui-nav-item layui-nav-itemed">';

} else {

if(data[i].state.selected !== undefined && data[i].state.selected){

ulHtml += '<li class="layui-nav-item layui-this">';

}else{

ulHtml += '<li class="layui-nav-item">';

}

}

if (data[i].children !== undefined && data[i].children !== null && data[i].children.length > 0) {

ulHtml += '<a href="javascript:;">';

if (data[i].icon !== undefined && data[i].icon !== '') {

if (data[i].icon.indexOf('fa-') !== -1) {

ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

} else {

ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

}

}

ulHtml += '<cite>' + data[i].name + '</cite>'

/* ulHtml +='<span class="layui-nav-more"></span>' */

ulHtml += '</a>';

ulHtml += '<dl class="layui-nav-child">'

for (var j = 0; j < data[i].children.length; j++) {

if(data[i].children[j].state.selected){

ulHtml += '<dd title="' + data[i].children[j].name +'"'+'class="layui-this"' +'>';

}else{

ulHtml += '<dd title="' + data[i].children[j].name + '">';

}

/* ulHtml += '<a href="javascript:;" data-url="' + data[i].children[j].href + '">'; */

ulHtml += '<a href="'+data[i].children[j].href+'">';

if (data[i].children[j].icon !== undefined && data[i].children[j].icon !== '') {

if (data[i].children[j].icon.indexOf('fa-') !== -1) {

ulHtml += '<i class="fa ' + data[i].children[j].icon + '" data-icon="' + data[i].children[j].icon + '" aria-hidden="true"></i>';

} else {

ulHtml += '<i class="layui-icon" data-icon="' + data[i].children[j].icon + '">' + data[i].children[j].icon + '</i>';

}

}

ulHtml += '<cite>' + data[i].children[j].name + '</cite>';

ulHtml += '</a>';

ulHtml += '</dd>';

}

ulHtml += '</dl>';

} else {

/* var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? 'data-url="' + data[i].href + '"' : '';

ulHtml += '<a href="javascript:;" ' + dataUrl + '>'; */

var dataUrl = (data[i].href !== undefined && data[i].href !== '') ? data[i].href : '';

ulHtml += '<a href="'+dataUrl+'">';

if (data[i].icon !== undefined && data[i].icon !== '') {

if (data[i].icon.indexOf('fa-') !== -1) {

ulHtml += '<i class="fa ' + data[i].icon + '" aria-hidden="true" data-icon="' + data[i].icon + '"></i>';

} else {

ulHtml += '<i class="layui-icon" data-icon="' + data[i].icon + '">' + data[i].icon + '</i>';

}

}

ulHtml += '<cite>' + data[i].name + '</cite>'

ulHtml += '</a>';

}

ulHtml += '</li>';

}

ulHtml += '</ul>';

return ulHtml;

}

上面我们讲到了核心的组件就是一个js，一个css，所以我们在应用的时候只要把这两个引用上就可以解决大部分的问题了。（注意UIkit是需要jqurey支持的，而且需要2.0以上的版本，也正是如此，它不支持IE8以下的浏览器，这也是不受欢迎的原因之一）。

如下所示，我们需要先引用这些东西在我们的html页面中：

[html] view plain copy

1. <link rel="stylesheet" type="text/css" href="css/uikit.css">
2. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
3. <script type="text/javascript" src="js/uikit.min.js"></script>

值得注意的是，我们需要把jquery引用在uikit.js之前，如果相反的话，uikit就会出现uikit need jquery的错误，影响页面的显示。

然后我们就可以根据教程中核心组件中的教程来写控件了，下面是个例子：

[html] view plain copy

1. <body>
2. <div class="uk-container uk-container-center uk-margin-top">
3. <div class="uk-panel uk-panel-box uk-text-center">
4. <h1>Hello Universe</h1>
5. <p>Lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?</p>
6. <a href="" class="uk-button uk-button-primary uk-button-large">Buy the Universe Now</a>
7. </div>
8. </div>
9. </body>

这个里面用到了一个框和一个按钮加标题字体的显示设置，整个页面的代码如下：

[html] view plain copy

1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <title>UIkit-Demo2</title>
5. <meta charset="UTF-8">
6. <link rel="stylesheet" type="text/css" href="css/uikit.gradient.min.css">
7. <link rel="stylesheet" type="text/css" href="css/uikit.css">
8. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
9. <script type="text/javascript" src="js/uikit.min.js"></script>
10. </head>
11. <body>
12. <div class="uk-container uk-container-center uk-margin-top">
13. <div class="uk-panel uk-panel-box uk-text-center">
14. <h1>Hello Universe</h1>
15. <p>Lorgen ipsum dolor sit amet,consecletur elit,in antus libero debitis?</p>
16. <a href="" class="uk-button uk-button-primary uk-button-large">Buy the Universe Now</a>
17. </div>
18. </div>
19. </body>
20. </html>

仅供参考，另外如果想使用附加组件中的功能的话，需要注意里面所引用的高级样式和JS文件，才可以应用。