京东金融APP-笔记

项目设计与原理分析

CSS模块化设计

• 设计原则

  • 可复用能继承要完整（布局、页面、功能、业务）
  • 周期性迭代

• 设计方法

  • 先整体后部分再颗粒化
  • 先抽象再具体

// layout.scss
@mixin flex($direction: column, $inline:block) {
    display: if($inline==block,flex,inline-flex);
    flex-direction: $direction;
    flex-wrap:wrap;
}
​
// element.scss 
@import './layout.scss';
@mixin btn($size:14px, $clolor:#fff, $bgcolor: #f04752, $padding:5px, $radius:5px) {
    padding: $padding;
    background-color: $color;
    background-color: $bgcolor;
}
​
@mixin list($direction: column) {
    @include flex($direction);
}
@mixin panel($bgcolor: #fff, $padding:0) {
    background: $bgcolor;
    padding: $padding;
}
  

JS组件设计

• 设计原则

  • 高内聚低耦合（一个组件最好不要依赖另外一个组件）
  • 周期性迭代

• 设计方法

  • 先整体后部分再颗粒化
  • 尽可能的抽象

自适应

• 基本概念

  • css像素、设备像素、逻辑像素、设备像素比

    • css像素 = 逻辑像素，就是平时说的px
    • 设备像素：和硬件相关联，就是物理像素，retina屏是2个物理像素，就是说px对应一个真实的像素点

  • viewport：

    • width：控制视窗的大小，可以指定的一个值，比如600，或者特殊的值。 device-width 为设备的宽度
    • initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例
    • maximum-scale：允许用户缩放的最大比例
    • minimum-scale
    • user-scalable：用户是否可以缩放

  • viewport分几类

    • layout viewport：自己写的页面实际大小
    • visual viewport：被手机屏幕大小裁剪后的
    • idial viewport：手机的宽和高组成的尺寸

  • width=device-width：就是让自己写的页面等于手机的viewport

  • rem：（root element = html标签）根据html的尺寸进行计算（em是相对于父级元素）

• 工作原理

  • 利用viewport和设备像素比调整基准像素
  • 利用px2rem自动转换css单位

• 自适应js的引用方式

  • 去GitHub搜索hotcss
  • 找到hotcss.js，拷贝
  • 项目根目录新建viewport.js
  • 在webpack中修改入口文件配置。让文件能打包到我们的项目中
  • 重启项目后生效

SPA设计

• 设计意义

  • 前后端分离
  • 减轻服务器压力
  • 增强用户体验
  • Prerender预渲染优化SEO

• 工作原理

  • History API ：更优雅，对浏览器有要求
  • Hash ：不优雅，但兼容性更好

\