构建一个前端库-架构分析

　　radf是此库命名，意为快速应用开发框架。

　　radf按类的功能分为Data、布局、数据组件、工具。

　　Data类：用于绑定从服务器端传来的数据。

　　布局：有Pannel、StackPannel、GridPannel、Splitter、TabForm，用于页面元素风格构建。

　　数据组件：MsgBox、Input、Radio、CheckBox、Select、Image、gridData、Portlet、RollerMenu、Calendar、DateInput、MoveWindow、Marque、FusionCharts后面五个是我做的，嘿嘿

　　工具： clone、copy、dataUnbind、formatNumber、getHelp、serializeObject、setHelp、toDate、toBorder、releaseDate、getNameFromList、getValueFromList

　　此应用框架意义在于，封装解决因浏览器兼容性造成的差异、减少开发工作量，使开发人员只用关注业务及简单的处理页面摆放。

　　radfBase文件是此类库入口：

　　类库中大量使用以下方法

　　(function(){})() 　　立即加载此函数，在jQuery源码中也是如此。

　　//设置应用程序加载入口
　　window.onload = _iniApp;
　　function _iniApp() {
　　　　if (radf.main) radf.main(radf);
　　}

　  将入口函数绑定到onload下，页面准备完成时调用，此时应用页面为以下形式:

　　__radf.main = function (radf) {

　　radf.Root().load();
　　}

　　此时应用会自动加载所有被实例化的Radf对象，完成加载。

 

　　类库中有两大基类、1、Date　　2、Control

如果使用过MVVM模式便会知道，xaml文件中界面View绑定对应的ViewModel后，改变View上面的数据，与之对应的ViewModel便会产生相应的变化。

并且，ViewModel可以被多个View绑定，与之产生的效果就是，绑定同一个ViewModel的View改变其中一个的界面数据，另外的View也会产生相应的变化。

那么这个方法的实现是什么呢？

new Control({DataSource:data});
当这样一个Control绑定了data之后，
Control.data.controlArray.push(this);
将这个Control放入data的controlArray，
当我们的界面元素操作后发现数据变动时，
触发this.DataSouce.handleControl方法。
此方法用于重新加载所有被绑定对象的数据。
for(i in this.DataSource.control)
　　this.DataSource.control[i].value = _value;

到此，mvvm模型基本建立。