【总结】每日总结

searchop
143 阅读7分钟

2023.6.23

  1. http2
  2. 浏览器工作原理与实践极客时间 浏览器课程学习 浏览器安全

2023.6.24

  1. 浏览器安全
  2. cookie session

2023.6.25

  1. vite

  2. webpack

2023.6.26

  1. 状态管理库

  2. vue单文件编译

  3. webpack

  4. treeshaking

2023.6.27

  1. 小程序相关

  2. js bridge hybird通信实现

  3. 小程序状态管理？ 结合状态管理库

2023.6.28

  1. 浏览器性能监控方案

  2. service worker

  3. 函数式编程，compose实现

function add(a, b, c) {
    return a + b + c
}

function curry3(fn) {
    const len = fn.length;
    const params = [];
    return function partial() {
        params.push(...arguments);
        console.log(params);
        if (params.length === len) {
            return fn(...params);
        } else {
            return partial;
        }
    }
}

const curryAdd = curry3(add);
curryAdd(1, 2)(3)

const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x)

function compose(...fns) {
    const fns = fns.reverse();
    return function(...args) {
        // 第一次acc是函数，传入args，后面会是计算的结果，为了支持多参数
        return fns.reduce((acc, cur) => typeof acc === 'function' ? cur(acc(...args)) : cur(acc))
    }
}

2023.6.29

计划

  1. 小程序优化方法
  2. 多端运行小程序原理
  3. http2
  4. arraybuffer
  5. ts学习

实际

  1. http2

  2. arraybuffer\ 迭代器

  3. 创建原型的方法

    1.  Object.setPrototypeOf(子，父)
1.  修改构造函数的原型 构造函数.prototype = 父
1.  obj = Object.create（父）设置obj的原型是父

    todo：class继承

  4. vue状态管理 vuex、pina，redux，以及回顾之前项目小程序和状态管理库的结合，所以今天主要是回顾了状态管理库。

    • 状态管理确实是为了管理组件的状态，例如多个组件间共享状态的处理，redux是比较纯粹的状态管理库，可以和任意框架集成，如果想和其他框架集成，还需要有一个连接器，一是将状态映射到组件里，第二是将effect也映射成组件的方法。

  5. vue组件间通信

总结

最近学习都很随意啊，想到哪里看哪里，有点太随意了

2023.6.30

  1. class继承 和原型继承不一样的有点多，一次记不住

  2. 浏览器事件循环

  3. vue nextTick实现

    • 用宏任务，微任务模拟实现
    • 宏任务使用setImmediate、setTimeout实现
    • 微任务使用promise、MutationObserver实现
    • 将任务先维护到一个队列里，然后用上面的方法模拟异步执行

  4. vue生命周期

    • beforeCreated: 初始化、props设置完成，还没有完成data、compute、watched的响应式，也就是不能访问到这些数据
    • created：完成了响应式，但还没挂载el
    • beforeMounted：此时已完成模版编译，将data等生成html，html还没挂载
    • mounted：html挂载完成，可以操作dom了
    • beforeUpdate：数据更新了触发
    • updated：数据的更新反映到了dom上之后触发
    • beforeUnmounted
    • unmounted
    • beforeDestoryed
    • destoryed

  5. vue子组件和父组件执行顺序

    • 加载

      • 父 beforeCreated
      • 父 created
      • 父 beforeMounted
      • 子 beforeCreated
      • 子 created
      • 子 beforeMounted
      • 子 mounted
      • 父 mounted

    • 更新

      • 父 beforeUpdate
      • 子 beforeUpdate
      • 子 updated
      • 父 updated

    • 销毁

      • 父 beforeDestory
      • 子 beforeDestory
      • 子 destoryed
      • 父 destoryed

  6. 小程序生命周期

    • app

      • onlaunch
      • onShow
      • onHide
      • onError
      • onPageNotFound

    • page

      • onLoad
      • onShow
      • onReady：首次显示页面会调用，只会调用一次
      • onHide
      • onUnload

    • component

      • created
      • attached
      • ready
      • moved
      • detached
      • error

    • 启动

      • app onLaunch
      • app onShow
      • page onLoad
      • page onShow
      • page onReady
      • page onHide
      • app onHide

    • 页面显示

      • component created
      • component attached
      • page onload
      • page onshow
      • component ready
      • page ready
      • page onUnload
      • component detached

2023.07.10

不知不觉到了7月份，上周家里的各种事情打断了复习计划，竟然也没有记录学习内容，终于本周恢复正常，今日内容总结。

  1. Ts高级类型，类型编程

  2. 虚拟列表思路

    只渲染可视范围内元素，需要知道item的高度，如何计算出来哪些需要渲染出来？

    • 如果item高度固定，则start = scrollTop / height + 1，end = start + screenHeight / itemHeight，则在scroll时记录高度，计算哪些要渲染出来进行赋值。
    • 如果高度不固定，则先设置一个初始化的高度，等item渲染出来后，再更新item真实高度，如果元素top大于屏幕滚动高度，则记录为end

  3. vue3 hook使用

  4. vue3优化点

    • 响应式系统

      • 由defineProperty改为proxy，监听动态属性的添加和删除，数组索引和length改变

      • defineProperty缺点

        • 不能监听对象属性的添加和删除
        • 不能监听array的api
        • 对每个属性进行遍历监听，嵌套对象，需要递归，造成性能问题

      • proxy

        • 可以监听对象属性添加删除
        • 可以监听数组方法
        • get中对对象类型进行递归响应

    • 编译阶段

      • 静态标记：给绑定了动态属性的元素添加标记，diff时只diff这些节点
      • 静态提升：静态节点直接提升到render函数外面，不需要多次创建vnode
      • 事件监听缓存：默认事件监听被视为动态绑定，加了事件监听器缓存，如果有的话，不再重新创建事件件套函数

    • composition api

      • 逻辑复用，逻辑组织
      • 对 tree shaking友好

    • 源码体积

      • tree shaking：只会打包引入的函数
      • 基于ts编写，提供了更好的ts支持

2023.7.11

计划：

  1. ts类型编程
  2. vue面试题
  3. 堆排序

今日学习：

  1. 快速排序
  2. 堆排序
  3. ts类型编程

2023.7.12

  1. ts类型编程
  2. vue面试题
  3. vue css scope 原理：compile sfc时通过postcss来给每个元素加上id，实现样式隔离。
  4. vue-template-admin系列文章
  5. 刷个算法

明日计划

  1. ts常见面试题
  2. vue常见面试题
  3. 项目回顾、简历整理

又丢失了一段时间，我在干什么？最近工作偏多，工作时长占了一些。重新整理出发吧。

2023.7.24

  1. vue-loader插件原理
  2. 写简历

2023.7.25

  1. vue3响应式学习，发现看文章的方式理解太浅，还是得看源码，但是看源码又很花费时间，😮‍💨
  2. KMP算法学习

明日计划

  1. juejin.cn/book/714646…
  2. n皇后算法：programmercarl.com/0051.N%E7%9…
  3. 动态规划学习

2023.7.29

  1. webpack5新特性
    • 内置清除输出目录，之前是clean-webpack-plugin插件，现在output配置 clean: true即可
    • 增加了缓存，可以选择memory或者filesystem
    • 内置静态资源构建能力 —— Asset Modules
      • raw-loader：允许将文件处理成一个字符串导入
      • file-loader：将文件打包导到输出目录，并在 import 的时候返回一个文件的 URI
      • url-loader：当文件大小达到一定要求的时候，可以将其处理成 base64 的 URIS ，内置 file-loader
    • 原生支持了json、png、jpeg、jpg、text等文件格式，无需安装额外loader
    • modulesId和chunkIds优化，生成短hash来解决之前删除文件就会导致id变化的问题
    • 更智能的tree shaking
    • 模块联邦：公共依赖的解决方案，将公共依赖打包放在远程地址，项目间通过cdn来引用。
avatar
文章
阅读
粉丝