一、ezbuy台湾地区外籍用户下单填写护照号信息
- ?
- 没有对用户传来的数据做处理
- 写了一个不能复用的组件
- 业务不熟练。感觉全前端只有婷姐知道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
总结
- 业务不熟练及时问产品,要不然真的会浪费很多时间
- 模仿优秀的代码写法
- 勤加练习
附业务详解:
http://note.youdao.com/notesh...