vue组件化设计思想

技术选型(为什么这样做,解决了什么问题):

  1. gulp(流式),grunt 任务管理,分发工作
  2. webpack 编译,打包

为什么用构建工具

  • 资源压缩
  • 静态资源
  • 模块化处理
  • 编译工具

mvvm框架选型:

  • 生态->插件体系文档(避免出现问题),了解原理

模块化:

  • eg: common.js,layout.js,整体,部分…

代码维护及复用性设计的思考

  • 需求变更
  • bug定位
  • 产品迭代
  • 新功能开发

项目设计与原理分析(如何实现)

css模块化设计
  1. 设计原则
    • 可复用,能继承,要完整
    • 周期性迭代(优秀的代码是模仿出来的,优秀的代码是设计出来的,优秀的代码是重构出来的)
  2. 设计方法
    • 先整体,后部分,再颗粒化(布局-页面-功能-业务)
    • 先抽象,再具体
js组件化设计
  1. 设计原则:
    • 与css相似
    • 高内聚低耦合 (一个组件之内不要依赖任何其他组件 )
  2. 设计方法:
    • 先整体,在颗粒化
    • 尽可能的抽象
自适应
  1. 基本概念

    • css像素,设备像素,逻辑像素,设备像素比link
    • viewport
      • 分三类:layout-viewport页面窗口,visual viewport被裁减的,ideal viewport宽高组合的尺寸
    • rem
  2. 工作原理

    • 利用viewport和设备像素比调整基准像素
    • 利用px2rem自动转换css单位
      spa设计
  3. 设计意义
    • 前后端分离
    • 减轻服务器压力
    • 增强用户体验
    • prorender预渲染优化SEO
  4. 工作原理
    • history api(前进,后退,控制 onpopstate,pushstate )
    • hash(前进,后退,控制 location,hashchange)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//history api
<a class="api a">a.html</a>
<a class="api b">b.html</a>
// 注册路由
document.querySelectorAll('api').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault()
let link = item.textContent
window.history.pushState({ name: 'api' }, link, link)
}, false)
})

// 监听路由
window.addEventListener('popstate', e => {
console.log({
location: location.href,
state: e.state
})
}, false)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// hash
<a class="hash a">a.html</a>
<a class="hash b">b.html</a>
document.querySelectorAll('.hash').forEach(item => {
item.addEventListener('click', e => {
e.preventDefault()
let link = item.textContent
location.hash = link
})
}, false)

window.addEventListener('hashchange', e => {
console.log({
location: location.href,
hash: location.hash
})
})
构建设计(工具)
  1. babel:
    • 配置
    • 安装
    • loader
  2. webpack:
    • 配置
    • 安装
    • plugin
  3. dev-server:
    • 配置
    • 安装
      上线
  4. 生产构建:
    • 合并(style,javascript),
    • 抽取(样式要从js中抽取出来),
    • 压缩(js,css都要压缩),
    • 调试(开启sourceMap)
  5. 提交:使用git提交代码,管理线上版本
  6. 部署:php,java等从git仓库拉取代码,通过小流量,跨机房,全能部署。
  7. 开启gzip压缩:
  8. 更新cdn