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


  1. 没有对用户传来的数据做处理
  2. 写了一个不能复用的组件
  3. 业务不熟练。感觉全前端只有婷姐知道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...