京东金融项目实战

Posted on | Edited on | In

京东金融项目实战

1.业务开发流程

1.1技术选型

  • 构建工具

    • 任务管理 gulp: 流式 grant:IO效率低
    • 编译打包 webpack rollup
    • fis:baidu prepack:facebook

    为什么要构建工具？

    资源压缩 静态资源替换 模块化处理 编译处理es6

    我们用哪个构建工具?

    webpack、npm scripts任务管理

  • MVVM框架选择

    • Vue.js
    • React.js
    • Angular.js

    作者对文档的维护程度

    对原理的理解

  • 模块化设计

    CSS模块化设计

    JS模块化设计

    common.js layout.js public.js util.js page1.js page2.js

  • 自适应方案设计

    移动端 设计师只出一份设计稿 一份JS+CSS方案在各个机型适配

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

    需求变更 横向 解耦 产品迭代：A A+ Bug定位 新功能开发：单纯一个页面新增或者减少

1.2 业务开发
1.3测试验证
1.4 发布上线

2.项目设计与原理分析

2.1 CSS模块化设计

  • 设计原则

    • 可复用 能继承 要完整

    • 周期性迭代

      优秀的代码是模仿/设计/重构出来的

  • 设计方法

    • 先整体后部分再颗粒化

      布局 页面 功能 业务

    • 先抽象再具体 隐藏 变量设置

reset layout element global scope:模块的复用 继承 私有化

2.2 JS组件设计
  • 设计原则
    • 高内聚低耦合
    • 周期性迭代 代码不可能一步到位
  • 设计方法
    • 先整体后部分再颗粒化
    • 尽可能抽象
2.3 自适应

  • 基本概念

    • CSS像素（逻辑像素）、设备像素（物理像素）、设备像素比

    • viewport

      解析：

      ​ 把当前viewport宽度设置为ideal viewport的宽度。

      ​ width=device-width，所有浏览器都能把当前的viewport宽度变成ideal viewport的宽度，但要注意的是，在iphone和ipad上，无论是竖屏还是横屏，宽度都是竖屏时ideal viewport的宽度。

      ​ initial-scale=1 也能把当前的viewport宽度变成 ideal viewport 的宽度，但在IE上 无论是竖屏还是横屏都把宽度设为竖屏时ideal viewport的宽度。

      ​ 因此，最完美的写法应该是，两者都写上去，这样就 initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病。

      -width: 设置layout viewport 的宽度，可以指定一个具体的值，如600；或者特殊的值，如device-width为设备的宽度（单位为缩放100%时的CSS的像素）

      -height:和 width 相对应，指定高度

      -initial-scale:初始缩放比例，缩放是相对于ideal viewport来缩放的，当前缩放值 = ideal viewport宽度 / visual viewport宽度

      -maximum-scale:允许用户缩放到的最大比例

      -minimum-scale:允许用户缩放到的最小比例

      -user-scalable:用户是否可以手动缩放

      补充：layout viewport、visual viewport、ideal viewport

      • layout viewport :移动端默认viewport ，与PC端浏览器区域的宽度相同。目的是使PC端开发的页面同样可以显示在移动端上。layout viewport 可以通过 document.documentElement.clientWidth获取
      • visual viewport: 移动端浏览器实际的可视区域的宽度。默认情况下layout viewport的宽度是大于visual viewport 的。visual viewport可以通过window.innerWidth获取。
      • ideal viewport: 完美适配移动设备的viewport。所谓的完美适配指的是，首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字大小合适。

    • rem

  • 工作原理

    • 利用viewport和设备像素比调整基准像素 （自适应核心原理）
    • 利用 px2rem自动转换css单位
2.4 SPA设计
  • 设计意义
    • 前后端分离
    • 减轻服务器压力
    • 增强用户体验
    • Prerender预渲染优化SEO
  • 工作原理
    • History API
    • Hash
2.5 构建设计
  • Webpack : 配置 安装 plugin
  • Babel : 配置 安装 loader
  • dev-server : 配置 安装
  • npm script
2.6 上线指导
  • 生产构建
    • 合并：将所有CSS样式和JS代码分别合并到一个文件中
    • 抽取：样式要从JS中抽取出来
    • 压缩：JS、CSS都要压缩
    • 调试：开启sourceMap ，项目上线以后便于调试，找Bug
  • 发布部署
    • 提交：使用Git提交代码，管理线上版本
    • 部署：php、java等从git仓库拉取代码，通过小流量、跨机房、全量部署
    • 开启gzip压缩
    • 更新CDN

3.构建工具详解