源码学习

keep-alive

  1. 初始化 缓存对象以及初始化keys
  2. 添加观察属性 include 和exclude
    1. 如果属性发生变化 清楚失效的组件实例
  3. 获取slot组件
  4. 获取组件名称
  5. 判断是否存在 include 或则 exclude属性
    1. 如果存在则拼匹配
    2. 如果匹配到不需要缓存则返回组件
  6. 判断是否存在 组件实例
    1. 存在则替换为缓存实例更新key
    2. 不存在则添加实例到缓存
    3. 如果缓存数量达到最大值则清楚第一个缓存
    4. 添加keepalive 属性为true
  7. 销毁时清空实例
  8. 初始化组件时
    1. 如果keeplive为真时处理 钩子函数prepath避免比较组件增加性能
  9. 组件挂载时根据keeplive属性处理
    1. 如果组件已经挂载 则调起激活组件钩子函数
  10. 组件销毁时如果keeplive为真时,调取去激活钩子,不销毁组件

net模块

创建tcp连接

net.createServer

  1. 传入回调函数
  2. 参数监听data 和end 等
    1. data 数据传输
    2. end 数据传输结束
    3. connection 连接到tcp 新的连接
  3. listen 监听端口
    1. 回调函数处理监听错误信息
    2. 可在毁掉错误中处理重复监听问题
  1. css隐藏

    1. 透明度 opacity:0 占用空间 子元素继承属性
    2. 不可见 visibility: hidden 占用空间
    3. display:none 不占用空间
    4. 放到屏幕外部 position:absolute
    5. clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px)
  2. cookie session

    1. cookie 文本存储 大小4k 自动传递
    2. session 服务器状态

基础学习

1. webpack 用途

  1. 项目工程化后,前端代码分布到各个模块中,webpack 分析打包模块
  2. 通过各种loader(插件) 以及自定义loader可处理各种类型文件

2. 配置

  1. webpack运行环境为 nodejs 所以使用commonjs语法,导出内容为一个对象

  2. context 配置公共目录

  3. target 输出模式

    1. node
    2. web 默认模式
  4. 文件加载入口 entry

    1. 单文件入口 entry 直接指定文件
    2. 多入口 entry 为对象文件
      1. 对象内指定任意内容
      2. key为出口配置 [name]
      3. value 为入口文件路径
      4. vendor array对象 抽离列表
  5. 文件输出出口 output

    1. path 配置输出文件路径
    2. filename 配置输出文件名称
    3. publicPath 配置公共文件夹,处理公共文件输出位置(静态图片字体等)
    4. library 导出文件名称
    5. libraryTarget 输出模式 amd commonjs
  6. mode

    1. 配置模式
      1. development
      2. production
  7. resolve

    1. alias 配置别名可在页面中直接使用别名
    2. extensions 配置扩展名列表可再引入时不写扩展名
    3. modules 模块查找目录
  8. devtool

  9. module

  10. noParse 不解析依赖库提高打包性能

  11. rules

    1. test 配置匹配文件正则表达式
    2. exclude 排除文件正则表达式 提高性能
    3. use 则 loader 配置loader 从又向左解析
      1. array对象
      2. 字符串或则对象
        1. 对象
          1. loader 字符串
          2. options 配置 属性
  12. plugins 配置插件 array对象

  13. 内容为各个插件实例列表

  14. devserver 服务器配置

    1. contentBase 默认根目录文件夹
    2. historyApiFallback
    3. overlay 覆盖错误配置
    4. stats: “errors-only”
    5. host
    6. port
    7. compress
    8. hot
    9. inline