如何用xdemo开发一个复杂的线上原型应用

想法

攻城掠池之余

作为最接近线上用户的web前端工程师，能够应接各种前端需求，切页面、p图、写js、懂标签语义、整兼容性。。。别太高兴，这仅为及格而已；追求优秀，除却十八般技能，你需求严谨追求细节，善于思考和总结，会利用先天的技术优势发现线上产品的优缺点，具有时常保持改善线上产品用户体验的意识和觉悟；追求牛逼，你还得学会将想法切实落地，最终将它转变成线上可体验的，有正向数据支撑的产品迭代！

然而在术业有专攻的年代，码农就是码农，有好的产品思维顶多说明你是个进化的码农，想法从拍板到落地的不是我们自己说了算的，和食物链类似，具有先决影响力的角色是我们的上游–产品经理。所以，如何向产品经理有力地传达我们独到的想法，引起他们的共鸣，最后达到联手改善产品体验的共同目标？这才是我们码农攻城师攻城掠池之余应该关注考量的问题。

XDEMO

道听途说，不如亲眼所见

它是一个chrome插件，它是前面问题答案的一部分，它能给指定线上页面注入远程的js和css，它随时让你的产品体验优化想法做成线上可以体验的原型，而不再是空洞的文档，也不再是没有真实数据、操作体验的静态页面！

XDEMO应用 – Helloword

下面演示如何向易迅网注入一段简单的测试脚本。

1.下载和安装xdemo chrome插件

下载地址：xdemo-latest

安装办法：

A. 在chrome浏览器地址栏输入chrome://extensions，按回车打开插件扩展面板，勾上开发者模式（Developer mode）
B. 将xdemo插件拖到A打开的面板，完成安装

2.新建demo

在chrome://extensions面板中找到XDEMO,点击选项(Options)，打开XDEMO的配置界面如下：

XDEMO Options

3.录入demo的配置文件

一个demo对应一个配置文件，用来告诉XDEMO当前demo的相关信息，配置文件各字段解释如下：

{
    /* demo名称 */
    "name": "XDEMO-Helloword",
    /* demo英文编号 */
    "ename": "ecd.yixun.xdemohello",
    /* demo描述 */
    "descrition": "XDEMO测试演示脚本",
    /* demo版本 */
    "version": "1.0.0",
    /* demo演示的页面（正则表达式） */
    "matches": ["http://*.yixun.com/*"],
    /* 注入到页面的css*/
    "css": ["http://oxox.io/demos/xdemo-hello/style.css"],
    /* 注入到页面的js */
    "js": ["http://oxox.io/demos/xdemo-hello/app.js"],
    /* demo作者 */
    "author": "levinhuang"
}

4.随意编写demo

第三步点击读取成功后，打开上面matches匹配的任意网页，F12看下源码，bingo，app.js和style.css成功注入进去。
接下来你要做的就是在app.js和style.css里面随意编写你的demo了。

我们XDEMO-hello这个示例非常的简单哦，取页面所有的图片并集中显示出来，打开app.js看看

$(function(){
    var $imgs = $('img'),
        $body = $('body'),
        heredoc = function(fn){return (fn.toString().split('\n').slice(1,-1).join('\n') + '\n');},
        tpl = heredoc(function(){/*
            <div id="xdemoHello" class="xdemo-hello">
                <div class="xdemo-hello-bg"></div>
                <div class="xdemo-hello-bd">
                    <div class="xdemo-hello-hd"><h3>Hello from XDEMO!</h3></div>
                    <div id="xdemoHelloInner" class="xdemo-hello-inner"></div>
                </div>
            </div>
        */}),
        imgHtml = [];

    $imgs.each(function(i,o){
        var src = o.getAttribute('src')||o.getAttribute('_src');
        if(!src) return;
        imgHtml.push('<img src="$"/>'.replace('$',src));
    });

    $body.append(tpl);
    $('#xdemoHelloInner').html(imgHtml.join(''));
});

XDEMO的更多信息，请移步XDEMO官网。

关于本地调试

Don't repeat yourself!

在上面的XDEMO例子中你会发现，所有的资源文件都在远程服务器上，XDEMO仅仅是负责将它们注入到页面而已。
这里涉及一个问题：如何将远程文件映射到本地磁盘的文件，方便频繁的开发调试？总不能”改一下，上传到服务器，刷新页面看效果”无休止符的循环吧，至少我是无法忍受。

映射远程文件至本地一般都用fiddler，你可以使用willow插件，我个人则喜欢用它自带的AutoResponder，利用正则表达式进行目录映射。

举个例子，将http://oxox.io/demos/下的文件映射到E:\Camp\Documents\GitHub\oxox\demos\，可以这样写：

If request matches…	then respond with…
regex:http:\/\/oxox.io\/demos\/(.*)	E:\Camp\Documents\GitHub\oxox\demos\$1

很酷吧^^

关于代码的组织和模块化

要是所有的业务逻辑都像hello word那般简单该多好...

当原型的业务逻辑足够复杂，要往页面注入一大坨的html代码和css代码的时候，如果不想在持续的迭代中痛苦地穿越在乱糟糟密麻麻的代码中，甚至迷失方向，我们就得学会合理的组织代码，划分功能模块。

例如，从app.js中拆分功能模块：

app.js
  |
  |-----app.foo.js
  |-----app.bar.js

代码进行模块拆分之后，维护起来确实会方便很多，但同时也会附带一些新的问题：

1.代码引用和加载变得复杂

原来只需要引用一个app.js，现在得引用多个文件(app.foo.js、app.bar.js)