工程之美 · kejun

工程之美
Kejun (@kejunz)

"简单"背后

自然产生的工程问题

总结: 工程"支柱"问题

  1. 静态文件管理
  2. 代码应用架构
  3. 通用组件设计
  4. 前端组件复用(包管理)
  5. 代码review
  6. 代码测试
  7. 性能问题
  8. 安全问题
  9. 工具链
  10. 模块化模板系统
  11. 开发流程
  12. 协作模式

工程开发经验:解决工程问题的经验

例子: 在全站导航上加一个消息提醒

技术问题:提示框UI和交互的实现

工程问题:

  1. 导航是跨产品线
  2. 各产品可能是在不同的代码仓库中
  3. 它是临时的一周后撤下
  4. 只有首次注册的新用户才能看到
  5. 它有多个版本测试使用效果
  6. 它不能影响页面的性能

前端开发80%是工程问题,20%是技术问题

技术问题是什么

技术的演进

眼望趋势,脚踏实地。 10年前的"事实标准"如今快要消失。00后的前端工程师将会幻想"ie6时代"是一段怎样"激情燃烧"的岁月

IE6IE7IE8
子选择器ul>liNNY
链式选择器.class1.class2NYY
属性选择器img[data-origin]NYY
同级选择器p+p, p~pNYY
非A伪类和伪元素选择器 input:focus, li:first-child:hoverNNY
产生内容 div:after { content:"new"; }NNY
绝对定位同时指定4个位置值 .class1 { position:absolute;top:0;bottom:0;left:0;right:0; }NYY
最小/大宽高 .class1 { max-width:80%; }NYY
透明边框 .class1 { border-color:transparent; }NYY
固定定位 .class1 { position:fixed; }NYY
outline .class1 { outline: solid 1px red; }NNY
显示属性 display:inline-block/inline-table/run-in/table/table-cell/table-row...NNY
空格处理 .class1 { white-space:pre-line; }NNY
累加器 p { counter-increment:item; } p:before { content: counter(item) + '.'; }NNY
PNG alpha通道NYY
JSON解析NNY
Hashchange事件NNY
DataURINNY
more ...

技术更新快,但工程开发经验相对持久。眼望趋势,脚踏实地!

人生思考题: 积累代码还是积累经验

技术问题和工程问题的关系

场下的训练水平,差距不大

场上的比赛经验,关键时刻的发挥,是巨星跟普通球员的差别

一些经验...

项目分析: 图片上传

演示:注意下面这些"梗"

  1. 模块的独立性
  2. 无配置的静态文件打包
  3. 业务模块组合
  4. 前后端共用模板
  5. CSS预处理 - SCSS/支持source mapping
  6. 向前兼容
  7. JS通用组件复用及如何隔离业务逻辑

Q & A

Sorry! 暂不支持你的浏览器,请用Chrome打开...