ecomfe工具链杂记

目录:ecomfe工具链杂记

  1. edp

1. edp

  1. edp是npm的一层封装,指定了http://edp-registry.baidu.com/这个registry。
  2. 关于edp源码上:edp入口项目edp,在edp/package.json中有属性extensions来指定edpbuild-in-command,在edp-core代码里通过fs.existsSync(path)检查node_modules/edp-xxx是否存在来判断一个extension是否安装,若没有则安装。(如edp-package是用来包管理的extension)。
  3. 关于配置:在个人项目package.json中有edp这个选项,用来设置edp包管理器的配置。

    // package.json
    {
        // others
        "edp": {
            "wwwroot": "/",
            "depDir": "dep",
            "srcDir": "src",
            "loaderAutoConfig": "js,htm,html,tpl,vm,phtml",
            "loaderUrl": "http://s1.bdstatic.com/r/www/cache/ecom/esl/1-8-2/esl.js",
            "dependencies": {
                "eoo": "^0.1.4",
                "etpl": "^3.1.1",
                "mini-event": "^1.0.2"
            },
            "layout": "v2"
        },
        "dependencies": {
            // npm dependency
        }
    }
    
  1. 关于配置:在个人项目下有module.conf,用于设置AMD的config。据说是每次变动会自动更新所有html里面的require.config。

2. esl

  1. esl的factory是延后执行的,只有当该模块被依赖才被执行。这样就产生一个问题。https://phabricator.babeljs.io/T7382。如下例,babel转码之后,在esl的加载下,foo的factory并没有执行。

    // es module
    import 'foo';
    // babel转码之后
    define(['foo'], function () {});
    
  2. esl的factory只执行一次,cache exports,以后的require全都返回exports

3. etpl:模板

  1. etpl就是Engine的实例,维护实例自己的targets,commandTypes。etpl本身多了Engine的引用和util方法组,使用var engine = new etpl.Engine()和noconfict类似
  2. 一个Command类就是一个指令的类型,如target、block、import、if、else、for等,Command可以自己定义,扩展etpl的语法
  3. etpl支持丰富的语法,如模板继承block、模板引用import
  4. etpl常用的两个方法:

    let tpl = '<!-- target: test--> <div>${test}</div>'
    let render = etpl.compile(tpl); // 一定要注意<!-- targe -->前面一定要没有空格,compile默认返回首个target,etpl会把空格当成一个target进行编译返回
    let text = render({test: 111});
    let text2 = etpl.render('test'); // 参数是target的name
    

4. er

  1. er是一个前端的mvc框架,完成从hash-url变化,controller触发,model加载,view渲染的过程。
  2. er中,locator监听hash事件,当hash变化时,会触发router的变化,从而会引起controller.loadAction;在controller里面维护的有actionPathMapping,会有path到action的映射,loadAction回去加载远程的Action,加载完成之后会触发Action的生命周期。
  3. controller.loadAction -> action.enter -> model.load -> view.render,这里loadAction的可以指定container,将action装载到对应的dom上;mode.load可以通过datasource来加载远程的数据,最终所有的数据都会放到model.store里面;view.render调用的是etpl.render(template, action.model);