Code Monkey home page Code Monkey logo

ef's Introduction

EF (Enterprise Framework)

EF是ERESUI整合而成的高效率业务系统开发框架。

关于名称

EF是 Enterprise Framework 的简称,表明其作为企业级开发框架的身份。

另外该项目负责人很喜欢一部叫EF的动画

ef's People

Contributors

dddbear avatar justineo avatar otakustay avatar srhb18 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ef's Issues

EF/UIView 在查找model值的时候有个隐含的bug

      function getProperty(target, path) {
            var value = target;
            for (var i = 0; i < path.length; i++) {
                value = value[path[i]];
            }

            return value;
        }

ef/UIView这块代码有点隐藏的bug

   getProperty({}, ['a', 'b']); //会报错,因为obj.a === undefined

因为模板中怎么写程序是没法预知的,所以,这里的查找放到try里面更好些

增强ActionPanel中子Action与父Action的事件交互

现在ef/ActionPanel中的子Action无法与父Action进行事件交互。原因是父Action根本不知道子Action的存在。子Action是包裹在esui控件中的;

目前,唯一的方法是通过全局的er/events来完成,个人感觉有点tricky;

大概有个思路是将子Action的事件代理到Panel控件实例上,例如:

panel.action.on('*', function (e) {
    panel.fire('action-' + e.type, e);
});

然后,在ef/View中就可以使用uiEvents来配置事件侦听

ParentView.prototype.uiEvents = {
    actionPanel: {
        'action-submit': function (e) {
              // 释放一个子Action自定义的事件
              this.fire('child-action-submit', e.data);
        },
        'action-cancel': function () {
              // 善后之类的啥啥啥
        }
    }
};

提供项目模板

配合 ecomfe/edp#34 ,希望有如下形式的模板:

  • edp code-gen view SomeView生成基本的View代码
  • edp code-gen action SomeActoin生成基本的Action代码
  • edp code-gen model SomeModel生成基本的Model代码
  • edp code-gen ef-module Some生成上面3个

ActionDialog计算位置的问题

这个不知道是不是我使用的姿势有问题。或者我们的ListAction应该尽快支持部分刷新了 @Justineo

image

如那天所见的,我的ActionDialog里边是一个列表,一个ListAction。现在稳定版本中的ListAction翻页等筛选操作会刷新整个childAction。然后childActionenteraction的时候,ActionPanel会触发actionattachActionDialog就会去resize()。这个时候其实页面还没加载好,所以计算的时候Dialog只有头部,位置就往下移了。

image

然后我就必须触发Dialog.show()来重新计算位置,所以就有一个比较刺激的上下跳动的视觉效果。
最后我只好自己用DialogActionPanel去避开actionattach事件

所以问题应该就是,如果ActionDialog里边的childAction刷新了,这个上下跳动的效果应该不是我们想要的吧。。

ChildView中控件的Validate不会在提交时触发

现象:ChildView中的InputControl控件在表单提交时,不会触发控件自身的验证逻辑;

原因:Form在触发各控件的验证逻辑前,会先进行一次对InputControl控件的查找,只有满足一定逻辑的控件才会添加进触发验证的数组,其中一个条件为control.viewContext === form.viewContext,但显然ChildView中的控件和Form并不在同一个viewContext中,因此ChildView中的控件就不会加入到触发验证的控件数组中去。

解决方案:

  1. 修改Form判断是否InputControl的逻辑,单独处理ChildView的情况,但是这种方案会使Form控件和ChildView间产生耦合;
  2. 让ChildView中的控件的viewContext在Form看起来和Form自己的一样,具体方案还没想出来;
  3. 单独触发ChildView中InputControl的validate,但因为触发验证的过程在getData中,因此要么将getData和触发验证的逻辑分开,要么就是分为两步验证,即如果正常的控件无法通过验证并报错,ChildView中的控件不会触发验证;

actionpanel用esui的方法监听不到事件

/**
         * 代理子Action的事件
         *
         * @param {mini-event.Event} e 事件对象
         */
        function delegateActionEvent(e) {
            var event = require('mini-event').fromEvent(e, { preserveData: true, syncState: true });
            event.type = 'action@' + e.type;
            this.fire(event);
        }

上面的这个方法在普获到actionpanel里面的事件的时候会fire出来,但是在view中通的actionpanel的ID去绑定fire的事件却不能正常捕获,发现直接在上面函数中fire(event.type)是可以成功的,但是本身却不能正常捕获到事件。

问题探讨关于ActionPanel.action

有没有可能继承ER的promise风格,actionPanel在render之后有一个actionPromise属性,方便用户可以用promise风格去把异步过程串联下去。毕竟用callback的方式还是很不方便的。
现在actionPanel在render之后,action type取决于action初始化时机,开始是一个Promise,之后又变成了Action.

// 现在只能这么写
var actionPanel = ui.create('ActionPanel', options);
actionPanel.render();
var actionPromise = actionPanel.action;
actionPanel.on('actionloaded', function(){
    var actualAction  = actionPanel.action;
    // do something else...
});

// 期待这种风格
actionPanel.action.then(function(actualAction){
    // do something else...
})

一个子视图的控件

现在有ActionPanel,对应可以加载一个子Action,但是往往我们将一个页面切成多块时,其中一小块并不需要ActionModel的逻辑,只是对一个视图片断的封装,比如控件的联动效果之类

因此创建一个控件ChildView,使用方法类似:

<esui-child-view data-ui-view-type="foo/BarView" data-ui-model="@self"></esui>

这个控件会负责加载对应的View,然后使用给的Model去渲染,并代理View的所有事件(通过view@xxx事件)

[UIModel]formatters可否将执行scope指向当前model

需求是想根据Model中的其他的数据,再来决定这个数据的格式。如果把formatter的执行Scope设定为当前Model,就可以类似这么干:

SomeModel.prototype.formatters = {
  someProperty: function (value) {
     return this.get('xxx') === 'xxx' ? null : new Date(value)
  }
};

这样就可以动态的格式化我的某个属性值了。或者有别的更好的解决办法,求指导。

problem

ef对于ie7的支持情况??

FormView未处理view name问题

现有的FormView虽然有自己独立的ViewContext,但是这个ViewContext没有name属性,会导致生成的DOM id不可预测,在自动化测试等场景下出现问题

需要在ChildView中创建View之后,根据自己的idname,以及自己所在的ViewContextname,拼出一个新的来给创建的View用,如:

  1. 当前是slot/create
  2. 对应的View.name就是slot-form
  3. 里面有一个idnamesizeChildView
  4. 则这个ChildView里的Viewname属性应该为slot-form-size
  5. size这个View里面有width控件
  6. 因此控件的DOM id是slot-form-size-width

@srhb18 你来解决这问题如何?

[UIView]replaceValue接口支持调用UIView的方法

考虑到@只能单一获取数据的方式,希望能支持更加#支持调用UIView的方法。例如,这样

SomeView.prototype.uiProperties = {
  name: {
     value: '#getComplicatedValue'
  }
};

SomeView.prototype.getComplicatedValue = function () {
  if (this.model.get('some-variable') == 'some-value') {
    return 100;
  }
  else {
    return 200;
  }
};

这样做的好处在于可以将业务逻辑层数据与表现层数据相剥离;例如,在model中的某一业务逻辑参数取值不同,在View有N个参数需要相应变化。以往有两种方式可以完成这个逻辑:

  1. Model中预先完成这部分参数的处理,但实际上这些参数只与表现相关,与业务逻辑无关,不应当在Model中完成。
  2. View.enterDocument()中处理:取Model的参数,调用相应的表现逻辑函数处理,比较笨拙。

建议添加一个新的语法糖#,指定一个View的接口,在参数替换过程中直接调用。

/**
 * 替换元素属性中的特殊值
 *
 * @param {string} value 需要处理的值
 * @return {*} 处理完的值
 * @public
 */
 exports.replaceValue = function (value) {
        if (typeof value !== 'string') {
            return value;
        }

        if (value === '@@' || value === '**') {
              return this.model;
        }

        var prefix = value.charAt(0);
        var actualValue = value.substring(1);

        if (prefix === '@' || prefix === '*') {
                var path = actualValue.split('.');
                var value = this.model.get(path[0]);
                return path.length > 1
                    ? getProperty(value, path.slice(1))
                    : value;
        }
        else if (prefix === '#') {
           return this[actualValue]();
        else {
           return value;
        }
};

alert的confirm对话框的ViewContext管理问题

如果在UIView中,用Dialog.alert打开一个对话框,他的viewContext是默认的那个。但是每个UIView有一个自己的ViewContext环境,这会导致UIView销毁时,这个对话框不会一起销毁。

Dialog已经支持在alertconfirm的时候传递一个viewContext参数,所以代码要这么写:

Dialog.alert({
    title: ...,
    content: ...,
    viewContext: this.viewContext
});

这个太麻烦,所以是不是需要由UIView提供alertconfirm这两个接口?

ActionPanel,UIView viewContext不一致的问题

UIView上渲染了一些控件,现在在ActionPanel里只能通过actionPanel.action.view.get(controlId)去拿,
想用这种写法actionPanel.viewContext.get(controlId),但是两者的viewContext不是一个。前一种写法嵌套层级一深,写法会比较痛苦。
有办法能让两者的viewContext是一个吗?我看UIView有一个this.name, 但是不知道怎么设上这个name,希望大神指点。

异步的View#render

渲染异步化

ER的View#render方法是同步的,但在现实中往往有一些异步的情况存在:

  1. ActionPanelViewPanel等涉及到加载某些AMD模块
  2. 在渲染过程中需要通过ActionModel获取一些数据

由于render方法同步的特性,导致在enterDocument中处理逻辑需要对异步进行等待的操作,进一步让代码复杂度提高

我们希望render可以是一个异步的过程,这一修改大致如下:

er.View进行修改,增加一个wait({Promise} promise)方法,渲染过程只有在所有promise均完成后,才会进入enterDocument

自动异步等待

我们希望ActionPanelViewPanel之类的一定会有异步行为的控件可以自动被wait,因此我们需要一些进一步的修改,以下是几种方案:

方案一

  1. 修改esui.main.init方法,在每个控件render()时提供一个controlrender事件,通过这一事件可以获取控件实例,供ef.UIView来判断
  2. 修改ef.UIView,注册controlrender事件,将所有有异步的控件添加到wait

这个方案的缺点是esui.main是单例的,注册和注销事件如果有所遗漏会造成不可预期的全局影响。

方案二

基于方案一,将esui.main做成class的形式,每一个UIView会单独有一个实例,以解决单例对象上事件管理的问题

这个方案的缺点是修改代价很高

方案三

esui.ViewContext上实现getAllControls或者queryByType方法,能够获取到需要的控件

这个方案的缺点是可能会破坏一些ViewContext希望提供的封装性

方案四

ef实现一个ViewContext子类,重写add方法,当需要的控件被添加时会自动wait

这个方案的缺点是看上去很别扭,包括ViewContextUIView会相互关联,以及对一个普通容器类的继承和重写


从当前的环境来看,我推荐方案四@Justineo @errorrik@Exodia 等各位有没有什么想法

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.