zoukankan      html  css  js  c++  java
  • 构建一个前端库架构分析

      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模型基本建立。

  • 相关阅读:
    Android学习笔记(四十):Preference的使用
    怎样在小方框上打对号 小方框内打对勾 word 方框打对勾
    PreTranslateMessage作用和用法
    MyBatis与Spring设置callSettersOnNulls
    EJB3.0开发环境的搭建
    经常使用虚拟现实仿真软件总汇(zz)
    slf自己主动绑定实现类过程推断
    DLNA介绍(包含UPnP,2011/6/20 更新)
    从技术到管理的问题
    NOI第一天感想&小结
  • 原文地址:https://www.cnblogs.com/bugluo/p/2825347.html
Copyright © 2011-2022 走看看