构建一个前端库-做一个富客户端的基类

基类，我们需要一个基类。

数据库访问我们通常有一个基类，用于操作的统一性。

那么，我们现在需要一个富客户端的前端基类。

为什么我们需要它。

 

1.我们需要一个dom元素与javascript之间的桥梁。

2.我们需要一个可伸缩布局的方案。

3.它是可拖动的。

4.它是可改变大小的。

5.它是可参数化配置的。

6.它是可绑定数据源的。

7.它是可隐藏也可延迟加载的。

 

我们需要这么一个基类，避免我们重复写很多相似的代码、

我们一个一个来说它们的实现。

1.构建桥梁

通常我们都用document.getElementById来用javascript获取一个dom元素。

但这里，我们富客户端的方案是用javascript生成dom对象，并且用jQuery辅助我们的元素获取。

所以首先我们来动态构建html

    if (v.modal == 1) {
        //允许多个模态对象并存
        if (_modal_layer) _modal_layer += 5;
        else _modal_layer = radf.MODAL_LAYER;

        v.parent = _root;
        v.zIndex = _modal_layer + 1;

    } else if (v.modal == 2) {
        //只允许同时存在一个非模态对象，后面的非模态对象会替代前面的非模态对象
        if (_modeless) {
            _modeless._param.modal = 0;
            if (_modeless._loaded) _modeless.sendToTop();
            else _modeless._param.zIndex = 1;
        }
        
        v.parent = _root;
        v.zIndex = radf.MODELESS_LAYER;
        _modeless = this;
    }

    //html定义
    if (v.id) this._html= v.tagName + " id=" + v.id + " class='" + v.className + "' _objIndex=" + this._objIndex + " _loadMode=" + v.loadMode;
    else this._html= v.tagName + " class=" + v.className + " _objIndex=" + this._objIndex + " _loadMode=" + v.loadMode;

    if (v.tip) this._html += " title='" + v.tip + "' ";

    //样式属性
    this._style = " style='position:absolute;overflow:" + v.scrollBar;

    if (this._padding.text) this._style+= ";padding:" + this._padding.text;                //留白
    if (this._borderWidth.text) this._style+= ";border-width:" + this._borderWidth.text;//边框宽度
    if (v.borderStyle) this._style+= ";border-style:" + v.borderStyle;                    //边框样式
    if (v.borderColor) this._style+= ";border-color:" + v.borderColor;                    //边框颜色
    if (v.background) this._style+= ";background:" + v.background;                        //背景
    if (v.style) this._style += ";" + v.style;                                            //样式

    if (v.minWidth == 0 ) v.minWidth = this._borderWidth.left + this._borderWidth.right + this._padding.left + this._padding.right;
    if (v.minHeight == 0 ) v.minHeight = this._borderWidth.top + this._borderWidth.bottom + this._padding.top + this._padding.bottom;

    //位置属性
    this._top = v.top;
    this._left = v.left;

    this._y0 = this._padding.top + this._borderWidth.top;
    this._x0 = this._padding.left + this._borderWidth.left;
    this._oldY0 = this._y0
    this._oldX0 = this._x0;

 

然后，我们把这个html用jQuery包装起来。

 

Control.prototype.$ = $(this._html);

 

最后，我们用一个全局的数组来保存所有产生的javascript对象。

var radf._objIndex = [];
this._objIndex = radf._obj.length;
radf._obj[this._objIndex] = this;

这样，我们在这个对象内部就拥有了它自己的jQuery对象，在全局上也拥有了一个可控的Javascript对象。

我们可以轻易的在全局使用这个javascript也可以方便的在原型中使用jQuery对象。

2.可伸缩布局的方案

浮动和清除浮动是前端永恒的话题。但是我们的方案中，用了一个神奇的东西。

position：absolute

好吧，我们都知道它是一个禁果。

它非常轻易的可以实现元素的随意摆放，但也非常损耗性能。

使用它，我们要注意几件事

1.margin,padding不再可使用。

2.需要一个可承受的性能损耗。

3.z-index变得十分重要。

4.可控的元素嵌套。

5.可实现的算法。

所以我们写了三种情况下的算法。

    //1. 重画大小不依赖于父组件的子组件
    this._redrawFirst();

    //2. 确定自适应方式下的组件大小
    this._redrawSecond();

    //3. 重画大小依赖于父组件的子组件
    this._redrawThird();

    //4. 布局子组件
    if (this._layout) this._layout();

由于我们在布局的时候，ajax操作会异步执行，

所以经过测试，在数据到来的零点几秒之内，

dom元素的布局是完成了，所以算法的时间消耗是可以接受的。

 

3.可拖动及可以改变大小

绝对定位的原因，可拖动变得十分简单。

改变大小的问题，在于改变大小后，调用上面的方法，重算父窗口就ok了。

4.可配置的参数

Control.prototype.create = function(v) {
    //设置缺省参数
    //for (var i in this._defaultParam) if (v[i]==null) v[i] = this._defaultParam[i];
    radf.Utility.copy(this._defaultParam,v);

    //保存初始化参数
    this._param = v;

    //设置父对象
    if (v.parent == null || v.modal > 0 ) {
        if (_root) v.parent = _root;
        else v.parent = root();
    }

    v.parent._addChild(this);

    //建立对象索引
    this._objIndex = radf._obj.length;
    radf._obj[this._objIndex] = this;

    //初始化参数
    this._iniParam(v);
}

我们看一下一个类实例化的时候会做些什么， 将默认参数存起来，将填写的参数加入到实例中，

将父对象保存起来，建立对象的索引号。

 

5.可绑定数据

我之前提到的MVVM模式的优势在于，数据先到的话，就会将数据存起来，

dom先加载了，就会将外框的div先加载，而里面的数据，例如table中的td，在数据到来的时候再加载。

并且，在dom元素操作的时候，也会通过基类写好的方法，将数据重新绑到数据对象。

或者在操作数据对象，例如重新从数据库取出数据后，就会重新生成dom元素。

这样，一个可绑定的组件基类就ok了。

 

7.它是可隐藏并且可以延迟加载

我们知道，当一个dom对象需要隐藏，将它的display设成none，就会让这个元素不占位的隐藏。

如果用visible的话，就会占位隐藏。由于富客户端的作法，我们基本上没有外链，所有操作都在一个页面上，

空间非常的局限。所以一个可以伸缩的页面是非常必要的。

那么我们使用display将单个组件变得可以隐藏起来，以用来显示全全部内容。

 

那么延迟加载就很好理解了，如果元素被设为visible:false，那我们就不做这个元素的数据绑定，也不会这个对象的宽高，

只有一个空的div在那里。当这个元素被要求显示，例如一个折叠框打开时候，我们再去load它。