Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ER的两点疑问 #160

Open
Phinome opened this issue Apr 28, 2015 · 11 comments
Open

ER的两点疑问 #160

Phinome opened this issue Apr 28, 2015 · 11 comments

Comments

@Phinome
Copy link

Phinome commented Apr 28, 2015

我按照 ER DEMO 中的 book-store 例子,写了一个类似的例子,有一些疑问,

第一个是关于ER中Action,Model,View 实例创建方式的疑问:例如:

// 在 ER 中声明一个 Action
...
var Action = require('er/Action');
function indexAction() {
    Action.apply(this, arguments);
}
indexAction.prototype.modeType = require('index/indexModel');
indexAction.prototype.viewType   = require('index/indexView');
.............
require('er/util').inherits(indexAction, Action);

用上面的代码创建 Action 时,有两点:

  1. modeType , viewType 能否默认为 indexModel, indexView ?这一点,想请教一下你们的考虑;
  2. 是否有这样一种方式生成 Action:
define([
    'er'
], function(er) {
    var indexAction = er.Action.extend({
        modeType:  require('index/indexModel'),
        viewType :  require('index/indexView'),
        initBehavior: function() {
            console.log(this);
        }
    ....
    });

    return indexAction;
});

第二,想问问 ER 与 ESUI 结合使用的例子,我看之前的 errorrik 写的 ER 中有一个 ui.js 中写了个 ui adapter ,将 ER 与 ESUI 结合了起来,那么,新版的 ER 可否采用相同的方式或者你们在实践中又是怎样处理的呢?

以上两个问题,感谢!

@Justineo
Copy link
Member

  1. 你可以看一下 ecomfe/eoo 这个库,继承的方式比较像你说的;
  2. 你可以看一下 ecomfe/ef 这个库,推荐用它把 ER 和 ESUI 整合到一起。

@Phinome
Copy link
Author

Phinome commented Apr 29, 2015

谢谢顾轶灵@Justineo ,第二个问题,我暂时没有疑问,先研究研究;回到第一个问题,我举了例子是想说明我的疑问:你们那样的设计是否有一些特别的考虑?
因为,写了代码有两点感受:

  1. 是否可以再封装一点。可以将 function Constructor(){Action.apply(this,arguments);} 封装起来,让真正开发业务的人,无需过多关心这个,只需要提供一个函数,如我上面所写那样,似乎比较好;
  2. 相似代码冗余。无论 Action 、 Model 、View 都少不了,
var Action | Model | View = require('[Action | Model | View]');
function [ XxxAction | XxxModel | XxxView] () {
   [ Action | Model | view ].apply( this, arguments );
}
......

require('er/util').inherits( [ XxxAction | XxxModel | XxxView ], [ Action | Model | View] );

这样一些语句。

不知我是否表达清楚?

感谢~

@Justineo
Copy link
Member

你的问题主要在于 JS 没有原生的继承,这里的重复代码主要就是解决继承的问题。灰大 @otakustay 那边正在实验在项目中引入 ES6,通过 Babel 转译为浏览器可用的 JS,有了这个这些重复代码也许就可以简单地用 ES6 的继承来减少:

class MyAction extends Action {
    // override as needed
}

@Justineo
Copy link
Member

补充一下,我们自己的项目里有脚手架来生成 Action/Model/View 的基本代码,所以其实开发业务的工程师也不需要关心这些。

@otakustay
Copy link
Member

modeType , viewType 能否默认为 indexModel, indexView ?这一点,想请教一下你们的考虑

简单地玩法下,不行。原因是如果你的代码中没有require('xxx')这样的语句,AMD loader无法处理依赖关系。

复杂的玩法下,行,使用ActionFactory的概念:

function createMyActionFactory(baseName) {
    return {
        createRuntimeAction: window.require(
            [baseName + 'Action', baseName + 'Model', baseName + 'View'],
            function (Action, Model, View) {
                var action = new Action;
                action.model = new Model();
                action.view = new View();
                return action;
            }
        )
    };
}

// 配置
var action = {
    path: '/index',
    type: createMyActionFactory('index')
};
require('er/controller').registerAction(action);

或者可以使用我们的uioc作依赖的管理,制作一个更通用的ActionFactory,这也是我们现在的做法。

是否有这样一种方式生成 Action

er不会再提供这样的方式。er将定位玩MVC框架,语言相关的特性由eoo处理。

各个库/框架非常有针对性地完成自己的职责,使用不同的库/框架组合作为系统的基石,这是在npm等包管理系统盛行的今日Web应有的一个状态。

@Phinome
Copy link
Author

Phinome commented Apr 29, 2015

感谢@otakustay ,我明白你的意思了,我先研究研究,有问题再请教。

@Phinome
Copy link
Author

Phinome commented Apr 30, 2015

灰大 @otakustay ,我用了你说的 ActionFactory :

function createMyActionFactory(baseName) {
    return {
        createRuntimeAction: window.require(
            [baseName + 'Action', baseName + 'Model', baseName + 'View'],
            function (Action, Model, View) {
                var action = new Action;
                action.model = new Model();
                action.view = new View();
                return action;
            }
        )
    };
}

// 配置
var action = {
    path: '/index',
    type: createMyActionFactory('index')
};
require('er/controller').registerAction(action);

结果:console.log(" Error: TypeError: action.enter is not a function");
我单步跟踪后发现,在 Throw Error 前,createRuntimeAction.type: undefined,但后续

window.require(
            [baseName + 'Action', baseName + 'Model', baseName + 'View'],
            function (Action, Model, View) {
                var action = new Action;
                action.model = new Model();
                action.view = new View();
                return action;
            }
        )

这个会执行返回 action ,但此时已经抛出错误了。
晕了,求帮助,如有时间请解答,感谢~

@Justineo
Copy link
Member

灰大你这个例子里 window.require 不要用 Promise 包一层么?我看代码 createRuntimeAction 好像只能是普通对象或者返回 Promise 的函数。

@Phinome
Copy link
Author

Phinome commented Apr 30, 2015

@Justineo 顾轶灵,你的意思是:new Promise(window.require(...)) ?

@otakustay
Copy link
Member

没错,我的代码是错的…需要返回promise,promise被resolve时参数是action实例

在 2015年4月30日,下午3:51,Phinome notifications@github.com 写道:

@Justineo 顾轶灵,你的意思是:new Promise(window.require(...)) ?


Reply to this email directly or view it on GitHub.

@Phinome
Copy link
Author

Phinome commented Apr 30, 2015

灰大 @otakustay ,恕我愚钝,不懂怎么加,能明示一下么?

已找到答案,删除,哈哈~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants