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文件，引入方式如下：

<link>

LayUI導航欄的使用

注意點:假如引入layui.js而不是layui.all.js時需要在標籤中引入

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

var element = layui.element();

});

代碼，類似於加載layui模塊的元素才能正常使用導航欄。

1.在標籤中定義導航欄的結構如下：

var checkManageTree = [

{

name: "產品",

alias:"產品",

href:"",

state:{

selected:isCurrent("產品",false)

}

},

{

name: "供方",

alias:"供方",

href:"",

state:{

selected:isCurrent("供方",false)

}

}];

2.定義添加導航的導航欄的div如下：

3.通過id獲取div標籤初始化導航欄視圖，getHtml()方法負責根據代碼動態生成導航欄視圖

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

4.getHtml()方法的實現，通過動態創建導航欄可以減少重複代碼，只需要定義json的格式的導航欄即可

/**

* 獲取html字符串

* @param {Object} data

*/

function getHtml(data) {

var ulHtml = '

';

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

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

ulHtml += '

• ';

  } else {

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

  ulHtml += '

• ';

  }else{

  ulHtml += '

• ';

  }

  }

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

  ulHtml += '

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

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

  ulHtml += '';

  } else {

  ulHtml += '' + data[i].icon + '';

  }

  }

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

  /* ulHtml +='' */

  ulHtml += '';

  ulHtml += '

  '

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

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

  ulHtml += '

  ';

  }else{

  ulHtml += '

  ';

  }

  /* ulHtml += '

  ulHtml += '

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

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

  ulHtml += '';

  } else {

  ulHtml += '' + data[i].children[j].icon + '';

  }

  }

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

  ulHtml += '';

  ulHtml += '

  ';

  }

  ulHtml += '

  ';

  } else {

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

  ulHtml += '

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

  ulHtml += '

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

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

  ulHtml += '';

  } else {

  ulHtml += '

  ' + data[i].icon + '';

  }

  }

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

  ulHtml += '';

  }

  ulHtml += '

';

}

ulHtml += '