Day4：前端工程化初探

CSS效果和动画

css效果CSS里非常出彩的一部分，灵活应用box-shadow，运用无限投影，甚至可以画机器猫之类的不可思议的图形。

CSS中实现动画的方式：transition,keyframes

过渡动画和关键帧动画的区别：

• 过渡动画需要有状态变化（延迟改变，eaesing方式）
• 关键帧动画不需要状态变化
• 关键帧动画能控制更精细

CSS动画的性能：

• 性能不坏
• 部分情况下优于JS
• 但JS可以做到更好
• 部分高危属性 box-shadow等

JS开发环境

git使用经验：

git checkout xxx 撤销修改

git checkout -b dev 切换分支到dev

git branch 查看当前分支

git diff

git commit origin dev 把dev分支提交到远程服务器

git checkout master 切换到已有分支

git pull origin master 检查远程库的修改

git merge dev 把dev的修改合并到mater分支

git push origin master 最后提交到master分支上

模块化

AMD 异步模块规范

• require.js
• 全局define函数
• 全局require函数
• 依赖JS会自动、异步加载

CommonJS规范

nodejs模块化规范，现在被大量用做前端，原因：

• 前端开发以来的插件和库，都可以从npm中获取
• 构建工具的高度自动化，使得使用npm的成本非常低
• CommonJS不会异步加载JS，而是同步一次性加载出来

image.png

AMD和CommonJS的使用场景

• 需要异步加载JS，使用AMD
• 使用了npm之后建议使用CommonJS

浏览器渲染页面的过程

• 根据HTML结构生成DOM Tree
• 根据CSS生成CSSOM
• 将DOM和CSSOM整合形成RenderTree
• 根据RenderTree开始渲染和展示
• 遇到<script>时，会执行并阻塞渲染

css放在head中，让浏览器事先知道渲染规则。否则用户体验差，出现卡动的情况。

js放在body的最后，因为要先把html基本结构渲染出来，js放在后面能拿到所有标签

window.onload要等全部资源加载完才能执行，包括图片视频等
DOMContentLoaded只需要Dom渲染完即可执行，此时图片视频还没有加载完，尽量使用这种。

性能优化

原则：

• 多使用内存、缓存或者其他方法
• 减少CPU计算、减少网络

两个方面：

• 加载页面和静态资源

  • 静态资源的压缩合并
  • 静态资源缓存
  • 使用CDN让资源加载更快
  • 使用SSR后端渲染，数据直接输出到HTML中（server side render）

• 页面渲染

  • CSS放前面，JS放后面
  • 懒加载（图片懒加载、下拉加载更多）
  • 减少DOM查询，对DOM查询做缓存
  • 减少DOM操作，多个操作尽量合并在一起执行
  • 事件节流
  • 尽早执行操作（如DOMContentLoaded）

一个事件节流的例子：

var textarea = document.getElementById('text')
var timeoutId
textarea.addEventListener('keyup', function () {
  if (timeoutId) {
    clearTimeout(timoutId)
  }
  timeoutId = setTimeout (function(){
    // 触发change事件
  }, 100)
})

安全性

XSS

如何预防：前端替换关键字，例如替换< 为&lt；>为&gt；后端替换

XSRF

如何预防：增加验证流程，如输入指纹、密码、短信验证码

面试相关

简历

• 简洁明了，重点突出项目经历和解决方案
• 把个人博客放在简历中，并且定期维护更新博客
• 把个人的开源项目放在简历中，并维护开源项目
• 简历千万不能造假，要保持能力和经历上的真实性

面试过程中

• 如何看待加班？加班就像借钱，救急不救穷
• 千万不可挑战面试官，不要反考面试官
• 学会给面试官惊喜，但不要太多
• 遇到不会回答的问题，说出你知道的也可以
• 谈一谈你的缺点——说一下你最近正在学什么就可以了

CSS预处理器

• 基于CSS的另一种语言
• 通过工具编译成CSS
• 添加了很多CSS不具备的特性
• 能提升CSS文件的组织

两种预处理器：
less、sass

提供的功能

• 嵌套 反映层级和约束
• 变量和计算 减少重复代码
• Extend和Mixin代码片段
• 循环 适用于复杂有规律的样式
• import css文件模块化

预处理器的作用

• 帮助更好地组织CSS代码
• 提高代码复用率
• 提升可维护性

bootstrap

bootstrap4是有sass编写

bootstrap提供的样式非常适合于我们的管理后台，没有太多视觉要求的情况下，当然也可以做一些定制。

bootstrap组件

• 基于data-*属性
• 基于JS API

响应式布局

image.png

定制方法：

• 使用CSS同名类覆盖（操作简单，但是不能使用它们的计算关系，另外需要非常全面的去重写class，工作量大，非常容易产生问题）
• 修改源码重新构建（修改less,sass源文件，重新编译）
• 引用scss源文件，修改变量

CSS工程化

PostCSS

webpack

• JS是整个应用的核心入口
• 一切资源均由JS管理以来
• 一切资源均由webpack打包

webpack和CSS

• css-loader将CSS变成JS
• style-loader将JS样式插入head
• ExtractTextPlugin 将CSS从JS中提取出来
• css modules解决CSS命名冲突的问题
• less-loader sass-loader各类预处理器
• postcss-loader PostCSS处理

CSS面试

• 像素级还原页面是基本要求
• 理解设计思路，选择合适的方案
• 用户体验意识
• 关注体验意识
• 关注性能和工程成本
• 学会与设计师合理沟通

面试关注重点

• 简历真实性
• CSS基础知识
  • 移动端应用经验
  • 动画能力（加分项）
• 项目经历
• 工程化能力

今日份小结

webpack水很深
前端之路漫漫
19年注定是个不平凡的年份