• jquery easyUI分析报告


    jquery easyUI分析报告

    设计目的

    使得开发web网站更容易.

    • easyui收集了许多基于jquery的用户界面插件.
    • 开发者可以编写更少的javascript代码,而只需要编写一些html标志定义好用户界面.
    • easyui非常简单但是非常强大.

    相关资源

    (如果你注意到域名中有wiki,那么你肯定是个搞IT的.哈..) wiki至少说明了一点:

    1. 它是有活力的,任何人都可以参与编写,定制和扩展.

    优点

    • 相比extjs组件级的开发,easyui更接近于html.不仅适合通用网站开发,也可以用来开发企业级的网站.
    • 如果说extjs是航空母舰,那么easyui就是瑞士军刀.
    • 效率要比extjs要好.

    缺点

    • 在ie6下会有一些兼容性的问题.
    • 它不是开源的,发布的代码混淆并压缩过.一旦出了问题,会让人抓狂的.看这里
    • 它的文档太少,论坛也比较冷清.支撑easyUI的人就那么官方的几个.
    • 它的走向不确定,以后可能会商业收费
    • 它的布局组件也比较少,如果让开发人员自己来布局,那么很考开发人员的前端基本功哦.

    开源问题的说明: 通过搜索引擎还是能找到的.在这里. 问题在于为什么被遮盖起来呢?所有的地方都没有任何关于源代码的说明。这个地址也是被关上了。要不是有搜索引擎,你根本找不到。我估计如果不是无法彻底关闭非登录用户,我估计你就是看到了也进不去。

    数据模型与技术分析

     
        数据模型是多样的,所有的控件统一支持json格式的数据.如果使用这个框架,那么后台的代码基本不用动.
    开发人员定义好html标志后,再编写少量的js代码.easyui会根据html标志,调用相关的组件生成程序.绑定相关的样式和事件.
    下面是一个easyui官方提供的可编辑列表的示例.
    

    可编辑列表示例

    列表的数据结构是这样的:

    {"total":28,"rows":[
    	{"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},
    	{"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},
    	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":28.50,"attr1":"Venomless","itemid":"EST-11"},
    	{"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},
    	{"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},
    	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},
    	{"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},
    	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":63.50,"attr1":"Adult Female","itemid":"EST-16"},
    	{"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},
    	{"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}
    ]}

    代码如下所示:

    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<title>jQuery EasyUI</title>
    	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
    	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
    	<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
    	<script>
    		var products = [
    		    {productid:'FI-SW-01',name:'Koi'},
    		    {productid:'K9-DL-01',name:'Dalmation'},
    		    {productid:'RP-SN-01',name:'Rattlesnake'},
    		    {productid:'RP-LI-02',name:'Iguana'},
    		    {productid:'FL-DSH-01',name:'Manx'},
    		    {productid:'FL-DLH-02',name:'Persian'},
    		    {productid:'AV-CB-01',name:'Amazon Parrot'}
    		];
    		function productFormatter(value){
    			for(var i=0; i<products.length; i++){
    				if (products[i].productid == value) return products[i].name;
    			}
    			return value;
    		}
    		$(function(){
    			var lastIndex;
    			$('#tt').datagrid({
    				toolbar:[{
    					text:'append',
    					iconCls:'icon-add',
    					handler:function(){
    					$('#tt').datagrid('endEdit', lastIndex);
    						$('#tt').datagrid('appendRow',{
    							itemid:'',
    							productid:'',
    							listprice:'',
    							unitprice:'',
    							attr1:'',
    							status:'P'
    						});
    						var lastIndex = $('#tt').datagrid('getRows').length-1;
    						$('#tt').datagrid('beginEdit', lastIndex);
    					}
    				},'-',{
    					text:'delete',
    					iconCls:'icon-remove',
    					handler:function(){
    						var row = $('#tt').datagrid('getSelected');
    						if (row){
    							var index = $('#tt').datagrid('getRowIndex', row);
    							$('#tt').datagrid('deleteRow', index);
    						}
    					}
    				},'-',{
    					text:'accept',
    					iconCls:'icon-save',
    					handler:function(){
    						$('#tt').datagrid('acceptChanges');
    					}
    				},'-',{
    					text:'reject',
    					iconCls:'icon-undo',
    					handler:function(){
    						$('#tt').datagrid('rejectChanges');
    					}
    				},'-',{
    					text:'getChanges',
    					iconCls:'icon-search',
    					handler:function(){
    						var rows = $('#tt').datagrid('getChanges');
    						alert('changed rows: ' + rows.length + ' lines');
    					}
    				}],
    				onBeforeLoad:function(){
    					$(this).datagrid('rejectChanges');
    				},
    				onClickRow:function(rowIndex){
    					if (lastIndex != rowIndex){
    						$('#tt').datagrid('endEdit', lastIndex);
    						$('#tt').datagrid('beginEdit', rowIndex);
    					}
    					lastIndex = rowIndex;
    				}
    			});
    		});
    	</script>
    </head>
    <body>
    	<h1>Editable DataGrid</h1>
    	<table id="tt" style="650px;height:auto"
    			title="Editable DataGrid" iconCls="icon-edit" singleSelect="true"
    			idField="itemid" url="datagrid_data2.json">
    		<thead>
    			<tr>
    				<th field="itemid" width="80">Item ID</th>
    				<th field="productid" width="100" formatter="productFormatter" editor="{type:'combobox',options:{valueField:'productid',textField:'name',data:products,required:true}}">Product</th>
    				<th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>
    				<th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th>
    				<th field="attr1" width="150" editor="text">Attribute</th>
    				<th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>
    			</tr>
    		</thead>
    	</table>
    </body>
    </html>
    

    简要说明一下:

    • 上例子定义了一个标志为table的dom元素,调用js代码 $('#tt').datagrid() 会生成一个grid列表,它还可以传递一个object级的对象充当配置元素.

    如上例中配置的就是一个工具栏.

    初步结论

    easyui适用于开发简单的通用网站,对于企业级的项目开发存在比较大的风险.它不是开源的,它发布的源码经过混淆和压缩,一旦出了问题,将会很难调试. 另外,easyui是基于jquery的,jquery是比较容易上手,但要精通它很困难的,因为它的源码很有点天马行空的风格.所以我认为,easyui是有一定的学习门槛的, 尤其是在它不开源的情况下.这个风险要慎重评估.

    一个可行的方案

    一个可行的方案是有条件地选择它收集的jquery-ui插件,在开发过程中通过easyloader动态加载用户控件脚本. 目前这些源码还可以通过svn签出来.地址在这里, 但它的学习门槛也比较高.因为开发人员需要自己去扩展它去适应多变的业务需求.
  • 相关阅读:
    BAT脚本打印空行的使用方法
    Shell脚本关于屏幕输出的字符进行颜色控制的问题
    shell脚本中切换用户执行相应的命令或者shell脚本的方法
    Linux下执行的java命令重定向到文件中的方法
    解决Firefox浏览器每次打开都弹出导入向导的问题
    解决Ruby在IE11中报Unable to get browser (Selenium::WebDriver::Error::NoSuchWindowError)的错误
    6月28日 Django form组件 和 modelform组件
    6月27日 ajax
    6月25日 Django 分页 cookie、session
    6月26日 Django 中间件
  • 原文地址:https://www.cnblogs.com/ms_config/p/1957208.html
Copyright © 2020-2023  润新知