1、說一下EasyUI的認識?
EasyUI是一種基于jQuery的用戶界面插件集合。easyui為創(chuàng)建現(xiàn)代化,互動,JavaScript應(yīng)用程序,提供必要的功能。使用easyui你不需要寫很多代碼,你只需要通過編寫一些簡單HTML標記,就可以定義用戶界面。優(yōu)勢:開源免費,頁面也還說的過去。接下來看easyUI入門:
頁面引入必要的js和css樣式文件,文件引入順序為:
<!-- 引入 JQuery -->
<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.min.js"></script>
<!-- 引入 EasyUI -->
<script type="text/javascript" src="../jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
<!-- 引入 EasyUI 的中文國際化 js,讓 EasyUI 支持中文 -->
<script type="text/javascript" src="../jquery-easyui-1.4.1/locale/easyui-lang- zh_CN.js"></script>
<!-- 引入 EasyUI 的樣式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/default/easyui.css" type="text/css"/>
<!-- 引入 EasyUI 的圖標樣式文件-->
<link rel="stylesheet" href="../jquery-easyui-1.4.1/themes/icon.css" type="text/css"/>
然后在頁面寫 easyUI 代碼就行,easyUI 提供了很多樣式:
示例如下:
實現(xiàn)代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Dialog - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Dialog</h2>
<p>Click below button to open or close dialog.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a>
</div>
<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save'"
style="width:400px;height:200px;padding:10px">
The dialog content.
</div>
</body>
</html>
2、說一下MiniUI的認識?
基于jquery的框架,開發(fā)的界面功能都很豐富。jQueryMiniUI-快速開發(fā)WebUI。它能縮短開發(fā)時間,減少代碼量,使開發(fā)者更專注于業(yè)務(wù)和服務(wù)端,輕松實現(xiàn)界面開發(fā),帶來絕佳的用戶體驗。使用MiniUI,開發(fā)者可以快速創(chuàng)建Ajax無刷新、B/S快速錄入數(shù)據(jù)、CRUD、Master-Detail、菜單工具欄、彈出面板、布局導航、數(shù)據(jù)驗證、分頁表格、樹、樹形表格等典型WEB應(yīng)用系統(tǒng)界面。缺點:收費,沒有源碼,基于這個開發(fā)如果想對功能做擴展就需要找他們的團隊進行升級!
● 提供以下幾大類控件:
表格控件樹形控件。
布局控件:標題面板、彈出面板、折疊分割器、布局器、表單布局器等導航控件:分頁導航器、導航菜單、選項卡、菜單、工具欄等。
表單控件:多選輸入框、彈出選擇框、文本輸入框、數(shù)字輸入框、日期選擇框、下拉選擇框、下拉樹形選擇框、下拉表格選擇框、文件上傳控件、多選框、列表框、多選框組、單選框組、按鈕等富文本編輯器。
圖表控件:柱狀圖、餅圖、線形圖、雙軸圖等。
● 技術(shù)亮點:
快速開發(fā):使用Html配置界面,減少80%界面代碼量。易學易用:簡單的API設(shè)計,可以獨立、組合使用控件。
性能優(yōu)化:內(nèi)置數(shù)據(jù)懶加載、低內(nèi)存開銷、快速界面布局等機制。豐富控件:包含表格、樹、數(shù)據(jù)驗證、布局導航等超過50個控件。
超強表格:提供鎖定列、多表頭、分頁排序、行過濾、數(shù)據(jù)匯總、單元格編輯、詳細行、Excel導出等功能。
第三方兼容:與ExtJS、jQuery、YUI、Dojo等任意第三方控件無縫集成。瀏覽器兼容:支持IE6+、FireFox、Chrome等。
跨平臺支持:支持Java、.NET、PHP等。
● 示例如下:
實現(xiàn)代碼如下:
<ul id="tree1" class="mini-tree" url="../data/tree.txt" style="width:200px;padding:5px;"
showTreeIcon="true" textField="text" idField="id"
allowDrag="true" allowDrop="true">
</ul>
3、說一下jQueryUI的認識?
jQueryUI是一套jQuery的頁面UI插件,包含很多種常用的頁面空間,例如Tabs(如本站首頁右上角部分)、拉簾效果(本站首頁左上角)、對話框、拖放效果、日期選擇、顏色選擇、數(shù)據(jù)排序、窗體大小調(diào)整等等非常多的內(nèi)容。
● 技術(shù)亮點:
簡單易用:繼承jQuery簡易使用特性,提供高度抽象接口,短期改善網(wǎng)站易用性。
開源免費:采用MIT&GPL雙協(xié)議授權(quán),輕松滿足自由產(chǎn)品至企業(yè)產(chǎn)品各種授權(quán)需求。
廣泛兼容:兼容各主流桌面瀏覽器。包括IE6+、Firefox2+、Safari3+、Opera9+、Chrome1+。
輕便快捷:組件間相對獨立,可按需加載,避免浪費帶寬拖慢網(wǎng)頁打開速度。
標準先進:支持WAI-ARIA,通過標準XHTML代碼提供漸進增強,保證低端環(huán)境可訪問性。
美觀多變:提供近20種預(yù)設(shè)主題,并可自定義多達60項可配置樣式規(guī)則,提供24種背景紋理選擇。
Vue.js(讀音/vju?/,類似于view)是一套構(gòu)建用戶界面的漸進式框架。與其他重量級框架不同的是,Vue采用自底向上增量開發(fā)的設(shè)計。Vue的核心庫只關(guān)注視圖層,它不僅易于上手,還便于與第三方庫或既有項目整合。另一方面,當與單文件組件和Vue生態(tài)系統(tǒng)支持的庫結(jié)合使用時,Vue也完全能夠為復(fù)雜的單頁應(yīng)用程序提供驅(qū)動。Vue.js起步:
引入相應(yīng)文件:
<script src="https://unpkg.com/vue"></script>
聲明式渲染:Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數(shù)據(jù)渲染進 DOM 的系統(tǒng):
<!-- html 文件中 -->
<div id="app">
{{ message }}
</div>
<!-- js 文件中 -->
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
通過瀏覽器查看效果圖為:
創(chuàng)建 vue 實例:每個 Vue 應(yīng)用都是通過 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的,當創(chuàng)建一個 Vue 實例時,你可以傳入一個選項對象??梢允褂眠@些選項來創(chuàng)建你想要的行為。
<!-- js 文件中 -->
var vm = new Vue({
// 選項
})
據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù),給予用戶機會在一些特定的場景下添加他們自己的代碼。比如 created 鉤子可以用來在一個實例被創(chuàng)建之后執(zhí)行代碼:
<!-- js 文件中 -->
new Vue({
data: {
a: 1
},
created: function () {
console.log('a is: ' + this.a)
}
})
5、說一下AngularJS的認識?
AngularJS是google開發(fā)者設(shè)計的一個前端開發(fā)框架,它是由是由JavaScript編寫的一個JS框架。通常它是用來在靜態(tài)網(wǎng)頁構(gòu)建動態(tài)應(yīng)用不足而設(shè)計的。
● AngularJS特點如下:
數(shù)據(jù)綁定:AngularJS是數(shù)據(jù)雙向綁定。
MVVM(Model-View-ViewModel)模式:Model簡單數(shù)據(jù)對象,View視圖(如HTML,JSP等)
ViewModel是用來提供數(shù)據(jù)和方法,和View進行交互。這種設(shè)計模式使得代碼解耦合。
依賴注入:AngularJS支持注入方式把需要的對象,方法等注入到指定的對象中。
指令:AngularJS內(nèi)部自帶各種常用指令,同時也支持開發(fā)者自定義指令。
HTML模板和擴展HTML:AngularJS可以定義與HTML兼容的自定義模板。
● AngularJS的Api:
AngularJS提供了很多功能豐富的組件,處理核心的ng組件外,還擴展了很多常用的功能組件,如ngRoute(路由),ngAnimate(動畫),ngTouch(移動端操作)等,只需要引入相應(yīng)的頭文件,并依賴注入你的工作模塊,則可使用。ng(coremodule):AngularJS的默認模塊,包含AngularJS的所有核心組件。