浅谈easyui的使用和实现机制

浅谈easyui的使用和实现机制

• 引言

最近在学习easyui这套框架,打算用这个做一个后台管理系统.在此之前由于没有真正做过什么完整的项目.所以之前的前端页面不管是动画效果也好,交互也好,都是用原生JS或者jQuery实现,虽然这样做看起来很酷,但是显然,其实现效率是比较低下的,因此开始接触起了框架.
在网上看到很多easyui的文档大多都是告诉你怎么去使用它,而很少有提及整个框架的设计的思想和实现机制.我在学习的时候,初期花了很长的时间去理解它整个的实现机制.虽然easyui的页面效果不是非常优美,对于移动端的适配也并不是很友好,但是不得不承认,开发这套框架的人思想确实有点独特.
以下是我对easyui的一些理解,如果有不正确的地方而你刚好发现了,请及时告诉我.

一. 引入easyui

 通常引入easyui需要引入5个文件

//导入easyui的主题css文件
<link rel="stylesheet" type="text/css" href="vender/jquery-easyui/themes/default/easyui.css">

//导入easyui的图标css文件
<link rel="stylesheet" type="text/css" href="vender/jquery-easyui/themes/icon.css">

//引用jQuery的js文件
<script type="text/javascript" src="vender/jquery-easyui/jquery.min.js"></script>

//引用easyui的js文件
<script type="text/javascript" src="vender/jquery-easyui/jquery.easyui.min.js"></script>

//引用easyui的国际化文件 以下为让它显示中文
<script src="vender/jquery-easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
//注:    
//1.主题css文件引入时根据themes文件夹里有那些文件夹可以导入不同主题的css文件
//2.script的导入请放在body的最后面,切勿放在head中,否则会影响页面的渲染.

二.使用easyui完成创建控件的两种方式

 1 .  使用html创建

<div id="p" class="easyui-panel" title="My Panel"
    style="width:500px;height:150px;padding:10px;background:#fafafa;"
    data-options="iconCls:'icon-save'">

    <p>panel content.</p>
    <p>panel content.</p>
</div>
<!--注:此代码源于官方文档-->
<!--注:这段html代码跟easyui有关的其实就两个地方
        1. class="easyui-panel"用于生成easyui的样式
        2. data-options="iconCls:'icon-save'" data-options是一个可选值,在html5中生效,用于设置eayui控件的属性或者事件,具体哪些控件可以设置哪些属性请参考eayui的官方文档.-->

2 . 使用js创建

首先,在html上你要有一个元素是用来设置成easyui的

<div id="panel" style="padding:10px;">
    <p>panel content.</p>
    <p>panel content.</p>
</div>
<!--注:此代码源于官方文档-->

然后使用jquery选择器找到这个元素并创建成需要的控件

$('#p').panel({
    width:500,
    height:150,
    title:'My Panel',
    tools:[{
    iconCls:'icon-add',
    handler:function(){alert('new')}
    },{
    iconCls:'icon-save',
    handler:function(){alert('save')}
    }]
}); 
//注:此代码源于官方文档
//注:创建的时候要将其创建成哪个控件就使用$("元素").控件名({参数列表})这样的形式,并在参数列表中设置控件的参数.

---

三.eayui的核心机制

• 总结

其实以上的两点已经表述了easyui的最基本的使用方法.但是,整个的eayui的设计思想到底是怎样的呢,组件的抽象是怎样实现的呢,使用的时候又做了些什么呢?由于eayui并没有开源,在我看了它的部分开源的代码研究了一段时间之后,得出了以下的一些结论.

1. 在使用js创建控件的时候,eayui偷偷地完成了很多的事情
   首先,它将选择器中那个元素进行了隐藏,display:none
   之后,在那个元素的位置根据设置的属性创建一堆html标签,并根据你设置的参数列表的属性值去对创建的这些元素的一些属性进行设置.这时候如果原先的元素中是有内容的,easyui会将这些内容和创建出来的元素进行合并.最后显示在页面上.
   最后,如果在设置组件的参数列表中绑定了事件,那么easyui就会帮你完成对这些控件的事件绑定.

2. easyui在封装组件的时候,是以对象的思想封装,以函数调用的方式实现.
   这句话该怎么理解呢,我们可以看到,在用js去使用组件的时候,都是在选择器之后调用了一个方法名为这个组件名的一个方法,并通过参数对这个组件进行设置.
   在这里,参数成为了这个组件以对象思想封装的实现关键
   easyui做了这么一件事:对参数列表的第一个参数进行了判断
   如果第一个参数的类型是string,那么它认为这是进行方法调用,方法名就是这个字符串名,然后参数列表的第二个参数请使用对象,而对象中的属性和属性值,就是这个方法的形参和实参
   如果第一个参数是对象,那么它理解成创建控件或者是属性设置.那么这里这个对象的属性和属性值有两种情况.第一种,你可以设置这个控件的属性.第二种,你可以绑定这个控件的事件函数.
   这样一来,easyui就通过函数来完成了所有组件的封装.

3. easyui的组件大量使用了继承
   这一点或许不需要做过多的解释,其实就是很多组件是由一些基本组件进行继承扩展出来的,这在我们找文档的时候可能比较需要注意的地方,如果在我们需要的这个组件中找不到我们需要的属性或者方法时,可以去找这个组件的基类组件.

---

以上,是我目前学习easyui的所有理解,如有错误,请及时告诉我.如需引用和转载,请标明出处.