浅谈基于jquery的dwz框架

DWZ框架基于jquery。

布局

它主要偏重ui布局，提供很多控件，比如日历啊，表格啊，菜单啊等等，使得我们可以构建单页面应用。这个单页面类似3行式布局：

很清晰，一目了然。header和footer部分，没有什么可说的，都是一般性的。主要说说sidebar和content的内容。sidebar是一个树形菜单，它的菜单项的url所指向的页面最后都被加载到content里，这里纯ajax的应用，避免表单提交式的全页刷新。主页代码大致如下：

<div id="layout">   <div id="header"></div>   <div id="leftside"></div>   <div id="container"></div>   <div id="footer"></div></div>

初始化及扩展
当首次进入主页，dwz会进行初始化。除了常规的页面布局，就是菜单和content。tree控件会将已加载来的菜单项初始化为真正的树形菜单，而首次加载的content是默认的当前系统相关信息。

树形菜单的ul下有li，li里有a，一般菜单都是这种模式。a除了href很重要，还有target，dwz采取约定的方式，其值为navTab，那么a指向的页面会被加载进content。这里的target就是将请求的资源放在哪里，若是非菜单项还可取别的值dialog等。dwz会在菜单项点击事件中，采用ajax的方式往后台抓取页面然后处理一下，使用html()方法放进content。而没抓取加载一次，都要对刚刚抓来并加载的页面进行initUI操作，这样这个页面上的一些布局及和dwz有关的内容就被初始化了，然后就可以用了。

dwz根据默认的约定来初始化。比如想使用它的时间控件，则定义为“<input class="date" />”，class必须指定为date，然后initUi就会为该元素绑定时间插件。接下来就可以使用了。如果想扩展使用自己的控件，可以在initUi里加上自己的代码，也同样使用事先约定的方式，每次加载新页面就会执行该方法为页面元素初始化。

小结

类似ext天蓝色的主题，看着适合做内部系统比较好。注重ui方面的快速搭建，同时可以随意增加自己的插件，灵活性很高。最近，流行扁平化单页及响应式设计，比如bootstrap等，不知道dwz未来是否会考虑这些呢？