EDP 扩展 edpx-zhixin

程序员必上的开发者服务平台 —— DevStore

edpx-zhixin 是 edp 的一个扩展，提供给百度的FE开发搜索结果页模板的工具

启动edpx-zhixin

通过下面的命令，将根据默认的配置文件edpx-zhixin-config.js，启动edpx-zhixin，edpx-zhixin会在当前目录查找配置文件，如果没找到，会一直向上级目录查找，找到为止。在默认情况下，edpx-zhixin会使用8848作为默认端口，并且将当前目录作为 documentRoot

$ edp zhixin start10:45:21 [INFO] monitor -> /Users/sekiyika/Documents/work/src10:45:21 all plugins have been loaded.edp INFO EDP WebServer start, http://192.168.1.106:8848edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

指定配置文件

通过--config参数，可以指定edpx-zhixin的配置文件

$ edp zhixin start --config=src/edpx-zhixin-config.js10:52:26 [INFO] monitor -> /Users/sekiyika/Documents/work/src10:52:26 all plugins have been loaded.edp INFO EDP WebServer start, http://192.168.1.106:8848edp INFO root = [/Users/sekiyika/Documents/work/src/], listen = [8848]

目录结构

edpx-zhixin要求开发者遵循目录规范，如下：

edpx-zhixin-config.jssrc    page        ecl_ec_weigou            config.js            _page.tpl            page.tpl            page.html            data.json            ...

配置edpx-zhixin

运行edp zhixin start时，需要edpx-zhixin-config.js文件，下面是构成edpx-zhixin-config.js的默认配置

/** * @file edpx-zhixin-config.js *//** * edpx-zhixin的配置 */exports.server = {    documentRoot: './', // documentRoot以配置文件所在的目录来计算绝对路径，默认为process.cwd()    port: 8848 // edpx-zhixin的启动端口，默认为8848};/** * 用来配置开发环境依赖的结果页机器地址，可以配置线下机器 * 默认hostname是www.baidu.com，port为80 */exports.proxy = {    hostname: 'www.baidu.com',    port: 80};/** * 如果网页中有同名模板，默认干掉同名模板 */exports.removeSameTpl = true;/** * wise相关的host *///exports.proxy = {//    hostname: 'm.baidu.com',//    port: 80//};/** * 指定php可执行的路径 * @type {string} */exports.php = 'php'; // 指定渲染模板使用的php路径，如果path中有，写php即可/** * 指定依赖的base文件，默认会使用edpx-zhixin中自带的c_base.tpl和c_right_base.tpl文件 */exports.base = {    left: 'c_base.tpl',    right: 'c_right_base.tpl'};/** * wise相关的base文件 */// exports.base = 'wise';

开发模板

从新建模板到release，都提供了相应的命令和工具

edp zhixin init

在行业目录下运行edp zhixin init ecl_fn_demo，如下：

$ edp zhixin init ecl_fn_demo>> Do you really want to init `ecl_fn_demo` project in `/Users/sekiyika/Documents/work/src/finance` ?(y/n)y>> There is a exist project, cover it ?(y/n)yedp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo` create success....edp INFO >> `/Users/sekiyika/Documents/work/src/finance/page/ecl_fn_demo/config.js` create success.

这样就构建好了一个模板开发所需的基本文件

edp zhixin initwise

创建wise相关的模板命令:

edp zhixin initwise [--root|-r] [--platform|-p] [--data|-d]

目前支持的wise平台为 iphone,utouch,big，在访问的时候url后缀添加

&tn=iphone、&tn=utouch、&tn=big， 切换到相应的平台

例如：

http://m.baidu.com/s?word=%E7%94%B7%E7%A7%91%E5%8C%BB%E9%99%A2&sa=tb&st=111041&tn=utouch

会调用utouch版本的模板

使用 utpl 支持模板编写

集成utpl的模板功能，在_page.tpl中引入后，自动编译成相关的函数使用， utpl语法同underscore.js的模板语法类似，请参考underscore 获取更多信息

例如：

_page.tpl 内容：

{%*include file="./ajax-list.utpl"*%}

注：形如：ajax-list.utpl会被编译成ajaxListRender函数，可以在js中直接调用

ajax-list.utpl 内容：

/*utpl:innerFn=false,trim=false*/<!--列表项目--><ul>    {%each(tplData.list, function(item, index){%}        <li><a href="{%=item.link%}">{%-item.title%}</a></li>    {%});%}</ul><!--记录数-->{%len = tplData.list.length%}{%if (len!==0) {%}    {%=len%}条记录{%}%}

其中

/*utpl:innerFn=false,strip=false*/

为编译选项：

1. innerFn=false，表示each,escape等函数不会在模板中内置，需要外部提供

2. strip=false，表示不会自动去除空格、注释

config.js

config.js是每个模板目录下都需要的一个配置文件，主要包含和该模板相关的配置

exports.config = {    tpl: 'ecl_fn_demo', // 模板名    querys: [        'iphone',  // 命中该模板时的query，不指定data会默认使用data.json文件作为数据文件        {            query: '游戏',            data: 'data.json' // 指定渲染所需要使用的数据文件        }    ],    side: 'left', // 模渲染的位置，有left和right的取值    platform: ['ipad', 'pc'], // 该模板适用于ipad或者pc，根据url中的dsp参数来区分，可以为platform: 'pc'    //platform: ['iphone', 'utouch', 'big'], //wise相关的platform，根据url中的tn参数来区分，tn=utouch，会切换到简版模板    ajaxs: [ // 代理请求的数据，常用于代理/ecomui的请求        {            url: /a.js/,            file: 'a_1.js', // file和handler是互斥的关系，handler优先级更高            handler: function(request) {                return fs.readFileSync('data.json')            }        }    ],    //build: 'release', // 缺省相当于 edp zhixin build，加上相当于 edp zhixin release （下文提及）    watch: { // 监控源文件的变化并编译产出page.tpl文件        filters: [            '_page.tpl',            '*.less'        ],        events: [            'addedFiles',            'modifiedFiles'        ]    }};

edp zhixin start

edpx-zhixin启动时，会查找documentRoot目录下的所有config.js文件，然后根据config.js文件建立query到模板之间的索引

启动之后，可以通过http://127.0.0.1:8848访问

注意：在这里推荐配一个host，搜索结果页大部分静态文件都做了referrer过滤，非百度域可能会遇到403 forbidden，导致文件加载失败

edp zhixin build

build可以让用户手动编译生成page.tpl文件，代码不压缩

edp zhixin release

开发完成模板之后，需要发布压缩后的代码，release比build多做了一步就是编译压缩