很黑的历史

一、ezbuy 台湾地区外籍用户下单填写护照号信息

1. ？
2. 没有对用户传来的数据做处理
3. 写了一个不能复用的组件
4. 业务不熟练。感觉全前端只有婷姐知道 ezship，ezshop，byforme，二次提交，等兰亭专业用语。

ezbuy 业务详解

二、搜索列表页

有很多的筛选条件判断，我当时的写法如下：

rule1 && rule2 && rule3 && rule4 &&rule5 &&rule6 
<div>something~~~~<div>

后来搜索列表页有改版。

三、megatront-front 适配小屏幕

问题：megatront-front 打包以后，在多个平台运行，但是在手机上找不到 screenWith 所以就会出 bug，正确写法是在 css 文件里面使用媒体查询

四、dgadim form 表单的拆分 新泰站 x 元 y 件促销活动

问题一：组件拆分问题

一个 form 表单进行了不必要的拆分。

问题二：form 表单的布局
左右，可以使用 row 和 col。

问题三：canvas
画图圆角问题：圆角和线的宽度。采用不断的尝试，跟 UI 沟通确认。最后的版本。

不固定的长度：获取每个文字的长度，然后让整个 canvas 的长度等于多个变量的值。

XYTagCanvas = (x, y) => {
    let canvas: any = "";
    let txt1 = "";
    let txt2 = "";
    let txt3 = "";
    let txt4 = "";
    // const w = 0;
    canvas = document.getElementById("ENCanvas");
    txt1 = `฿${x}`;
    txt2 = `บาทเลือกได้`;
    txt3 = `${y}`;
    txt4 = `ชิ้น`;
    const ctx = canvas.getContext("2d");
    canvas.height = 62;
    let width =
        ctx.measureText(txt1).width +
        ctx.measureText(txt2).width +
        ctx.measureText(txt3).width +
        ctx.measureText(txt4).width +
        32;
    canvas.width = width * 8;
    ctx.font = "40px SF Pro Text Medium";
    ctx.fillStyle = "#B3002D";
    ctx.fillText(txt1, 8, 48);
    ctx.font = "40px Thonburi Bold";
    ctx.fillText(txt2, ctx.measureText(txt1).width + 16, 48);
    ctx.font = "40px SF Pro Text Medium";
    ctx.fillText(txt3, ctx.measureText(txt1).width + ctx.measureText(txt2).width + 32, 48);
    ctx.font = "40px Thonburi Bold";
    ctx.fillText(
        txt4,
        ctx.measureText(txt1).width +
            ctx.measureText(txt2).width +
            ctx.measureText(txt3).width +
            48,
        48
    );

    ctx.fillStyle = "#B3002D";
    let w =
        ctx.measureText(txt1).width +
        ctx.measureText(txt2).width +
        ctx.measureText(txt3).width +
        ctx.measureText(txt4).width +
        50;
    this.strokeRoundReacXY(ctx, 0, 0, w, 60, 15, 4, "#B3002D");
    const blob = canvas.toDataURL();
    return dataURLtoBlob(blob);
};

strokeRoundReacXY(ctx, x, y, width, height, r, lineWidth, strokeColor) {ctx.save();
    ctx.translate(x + 3, y + 1);
    ctx.beginPath(0);
    ctx.moveTo(x + r, y);
    ctx.arcTo(x + width, y, x + width, y + r, r);
    // draw right side and bottom right corner
    ctx.arcTo(x + width, y + height, x + width - r, y + height, r);
    // draw bottom and bottom left corner
    ctx.arcTo(x, y + height, x, y + height - r, r);
    // draw left and top left corner
    ctx.arcTo(x, y, x + r, y, r);
    ctx.closePath();
    ctx.lineWidth = lineWidth || 1;
    ctx.strokeStyle = strokeColor || "#000";
    ctx.stroke();
    ctx.restore();}

问题四：git commit 提交问题

 git commit --amend --no-edit
 
 git commit --amend -m "xxxx"
 
 git push -f

总结

1. 业务不熟练及时问产品，要不然真的会浪费很多时间
2. 模仿优秀的代码写法
3. 勤加练习

附业务详解：

http://note.youdao.com/notesh…