每日知识点学习

表情地址

2021年8月11日

• async await
• 文章发布
• vuedraggable
• Sortable
• 自定义事件
• js设计模式
• ❌对象原型
• ❌编码解码

2021年8月12日

• 分支不及时更新 需要 git fetch

• 如果想为输入的变量重新取一个名字，import命令要使用as关键字，将输入的变量重命名。

  import { lastName as surname } from './profile.js';
  

• eventbus

• 组件改变之后需要重新拉取一下

2021年8月13日

• computed样式
• cursor: not-allowed; // 鼠标禁用样式

2021年8月14日

• const escapeRegexpString = (value = '') => 
  String(value).replace(/[|\\{}()[\]^$+*?.]/g, '\\$&');  正则匹配进行 转义
  

• element 里面 select 组件 搜索 键入值时候进行 搜索 ；分别进行判断当前的类别 跳转到 option内部的组件里面的方法进行 进行正则判断。

• forEach跳出本次循环 return; 结束循环 throw一个错误

• vant 电脑端有问题 // 字符串输入加判断

2021年8月15日

• 休息

2021年8月16日

• 本地开发中 .editor-container-wrapper 蒙层问题

• sourcetree 查看

• json.schema 中 resizeable--可调整大小

    // 如果是仅可调整宽度高度自适应的
    if (option === 'width' || option === 'none') {
      shapStyle.height = undefined
      shapStyle.minHeight = style.height + 'px'
    }
  

• // css hover  时候显示编辑 Nice
  .shape{
     &:hover {
      border: 1px dotted $--color-primary;
      .shape-tool-bar-wrapper {
        display: flex;
      }
    }
  }
  

• cross-env 跨环境

2021年8月17日

• npm init vite@latest my-vue-app --template vue-ts 
  $ npm init vite@latest 一样
  

• image-20210817110421179

• vite 以当前工作目录作为根目录启动开发服务器。你也可以通过 vite serve some/sub/dir 来指定一个替代的根目录。

• shims-vue.d.ts 的作用是帮助ts识别vue文件

• Volar 非常的Nice 对于vue3来说

image-20210817134226063

image-20210817134420182

• TypeScript 使用 tsconfig.json 文件作为其配置文件

• dotenv Dotenv 是一个零依赖模块，它将环境变量从 .env 文件加载到 process.env 中。 在与代码分开的环境中存储配置基于十二因素应用程序方法。

• Failed to load config "@vue/typescript/recommended" to extend from.

• 配置ts、ts保存 prettier格式化、初始化项目、vite配置、vue3配置

• vue sugar 里面需要eslint忽略一些组件申明。

• mock数据

2021年8月18日

• 路由安装、scss安装、ant-design-vue 搭建、x6搭建
• 环境变量搭建 dev、fat、production

2021年8月19日

• interface LabelledValue {
    label: string;
  }
  
  function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
  }
  
  let myObj = {size: 10, label: "Size 10 Object"};
  printLabel(myObj);
  
  //
  LabelledValue接口就好比一个名字，用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。 需要注意的是，我们在这里并不能像在其它语言里一样，说传给 printLabel的对象实现了这个接口。我们只会去关注值的外形。 只要传入的对象满足上面提到的必要条件，那么它就是被允许的。
  

2021年8月20日

• ts学习

• x6代码源码

• Umi，中文可发音为乌米，是可扩展的企业级前端应用框架。

• X6代码阅读

  image-20210820150337367

  几个例子

  er图：

  image-20210820150520630

  画图（流程图）：

  image-20210820150606023
  image-20210820142114827

  初始化时侯将graph 实例初始化部分参数

  this.initStencil() 初始化左侧流程图里面 小图标

  this.initEvent() 初始化画板里面的时间

  this.initKeyboard() 键盘注册事件

2021年8月21日

2021年8月22日

2021年8月23日

• js import ？

• npm run npm 脚本的原理非常简单。每当执行npm run，就会自动新建一个 Shell，在这个 Shell 里面执行指定的脚本命令。因此，只要是 Shell（一般是 Bash）可以运行的命令，就可以写在 npm 脚本里面。

  比较特别的是，npm run新建的这个 Shell，会将当前目录的node_modules/.bin子目录加入PATH变量，执行结束后，再将PATH变量恢复原样。这意味着，当前目录的node_modules/.bin子目录里面的所有脚本，都可以直接用脚本名调用，而不必加上路径

• SVG中的<foreignObject>元素允许包含来自不同的XML命名空间的元素。在浏览器的上下文中，很可能是XHTML / HTML。

• 配置项 可以先从图表示例中看。

• git clone https://shenwenwu@gitlab.enncloud.cn/FNInfraFront/platform/lowcode/component-develop-platform.git

2021年8月24日

• nuxt.js 服务端渲染 客户端请求资源 -> 服务端进行响应（一般在 asyncData 会对主要页面数据进行预先请求，获取到的数据会交由服务端拼接成 html 返回前端渲染，以此提高首屏加载速度和进行 seo 优化。）进行ssr合并处理 -> 返回html 进行渲染
• 组件开发平台调试
• 可视化搭建的过程
• json-schema JSON 模式（JSON Schema）是一种基于 JSON 格式定义 JSON 数据结构的规范。

2021年8月25日

• 基础知识学习
• 准备造轮子
• React hooks React 有类组件和函数组件两种写法。在没有Hooks以前，需要State的组件只能通过类组件实现
• Math.ceil(3.45) /4

2021年8月26日

• 脚本生成本地测试文件
• 你不知道的Js
• process.stdin.on 控制
• 一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现
  一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了

2021年8月27日

• 滚动条的样式

• js执行机制

   async function async1() {
        console.log('async1 start')
        await async2()
        console.log('async1 end')
      }
  
      async function async2() {
        console.log('async2')
      }
   
      console.log('script start')
     
      setTimeout(function () {
        console.log('setTimeout')
      }, 0)
      
      async1()
  
      new Promise((resolve) => {
        console.log('promise1')
        resolve()
      }).then(function () {
        console.log('promise2')
      })
  
      console.log('script end')
  
  //输出
  

• 关于样式的修改的话，找不到具体的值 时候 可以查看是否有伪元素

2021年8月29日

• element 表格 this.$refs.experienceInfoTable.clearSort();
• element 表格排序逻辑编写 可以通过数据来

2021年8月30日

• webpack 打包后为什么多了这么多注释符、为了方便在 development 阅读，在 production 模式下会被移除

• 自定义分析webpack打包过程分析

• 创建新的分支并且切换到 git checkout -b

• ❓ 父元素设置min-height子元素设置height100%继承不了

• background-color: revert; 可以进行覆盖之前的样式

• git branch -m oldName newName修改分支名称

• 编译器的工作可以被分解为三个主要阶段 解析（Parsing），转化（Transformation）以及 ** 代码生成（Code Generation）*

• assert.deepStrictEqual(actual, expected[, message]) 断言 断言出错时会输出

• ✊单行文本手机端开发

2021年8月31日

• 原型链：JavaScript 规定，所有对象都有自己的原型对象（prototype）。一方面，任何一个对象，都可以充当其他对象的原型；另一方面，由于原型对象也是对象，所以它也有自己的原型。因此，就会形成一个“原型链”（prototype chain）：对象到原型，再到原型的原型
• 调用栈 是 解析器追踪函数执行流的一种机制。当执行环境中调用了多个函数时候，通过这种机制，能够追踪到哪个函数正在执行。
• <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2017/11/11/ceb8f35afdeaee60e60053fa73a5cc01~tplv-t2oaga2asx-watermark.awebp" alt="img" style="zoom:25%;" />
• JavaScript 引擎除了在任何给定时刻执行单个程序块外，从未做过任何其他事情。所有环境的共同特点是一个称为事件循环的内置机制，它处理程序的多个块在一段时间内的执行，每次都调用 JS 引擎。
• ✊单选组件手机端开发

2021年9月1日

• Event Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。

• 《什么是 Event Loop？》

• ❗How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await

• #!/usr/bin/env node需要来指定这个脚本的解释程序是node

• nuxt.js的调试

• async-validator 代码调试

• ✊数值组件开发

2021年9月2日

• vue use() 检查插件是否安装、没有安装时候，那么调用插件的install方法，并传入Vue实例
• 微信读书里面还不错 能看到很多书

2021年9月3日

• rem -> root em

• css 优先级

• initial和inherit 是全局都会有的

• 一切要从我们熟悉的display属性开始。给元素添加display: flex，该元素变成了一个弹性容器（flexcontainer），它的直接子元素变成了弹性子元素（flex item）。弹性子元素默认是在同一行按照从左到右的顺序并排排列。弹性容器像块元素一样填满可用宽度，但是弹性子元素不一定填满其弹性容器的宽度。弹性子元素高度相等，该高度由它们的内容决定。

• npm link 开发NPM模块的时候，有时我们会希望，边开发边试用

  例子：项目中npm link 之后 会将bin 目录里面指令注册到全局里面，直接执行。

• husky husky 是一个Git Hook 工具。 husky 其实就是一个为git 客户端增加hook 的工具。 将其安装到所在仓库的过程中它会自动在 .git/ 目录下增加相应的钩子实现在 pre-commit 阶段就执行一系列流程保证每一个 commit 的正确性。

• 纯函数 - 好读、代码调试比较好、几乎没有副作用

• 脚手架实现

• commander - 完整的 node.js命令行解决方案。

2021年9月15日

• feature/sww_
• 伪类是选择器的一种，它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。它们表现得会像是你向你的文档的某个部分应用了一个类一样，帮你在你的标记文本中减少多余的类，让你的代码更灵活、更易于维护。
• flex 1
• history 和 hash 区别

2021年9月16日

• 准备研究一下 拖拽

• edge左右页面滑动禁止 'about:flags' -> ' scrolling personality' 禁用

• image-20210916161404604

• draggable 本质上是基于group来进行分组的 group相等的话 可以进行拖拽，clone的本质是 拖拽时候进行对目标容器进行复制一个组件、并不改变clone的拖拽的那个容器，动画Transition用于拖拽开始结束进行的动画。

  <img src="C:\Users\Dell\AppData\Roaming\Typora\typora-user-images\image-20210916163043636.png" alt="image-20210916163043636" style="zoom:25%;" />

• 拖拽前后都会触发重新渲染，包括位置的变化。拖拽时候 增加了class

  image-20210916233303646

• 搞了一下性能监视器 标签页切换比较会提前进行内存回收、每次点击一个操作 基本都会触发 cpu 的运算

2021年9月17日

• pc-plateform-editor -> draggable-> render触发 -> 用html写vue
• 分支提交规范 先与 Master 合并(git pull ) 然后进行 push 到自己分支 最后gitlab上进行合并请求
• 原生html 加 render 进行对页面的修改
• Move 传入到dragger然后进行触发

2021年9月18日

• element 表格 fixed之后 其实它是脱离了容器本身，然后需要对fixed之后的模块添加Mousewheel处理。所以会有卡顿，其实并不是卡顿

        handleFixedMousewheel(event, data) {
          const bodyWrapper = this.bodyWrapper;
          if (Math.abs(data.spinY) > 0) {
            const currentScrollTop = bodyWrapper.scrollTop;
            if (data.pixelY < 0 && currentScrollTop !== 0) {
              event.preventDefault();
            }
            if (data.pixelY > 0 && bodyWrapper.scrollHeight - bodyWrapper.clientHeight > currentScrollTop) {
              event.preventDefault();
            }
            bodyWrapper.scrollTop += Math.ceil(data.pixelY / 5);
          } else {
            bodyWrapper.scrollLeft += Math.ceil(data.pixelX / 5);
          }/*  */
        },
  

• 继续研究拖拽 dragger本质是把封装了一层节点对象 塞给 sortable 进行原生操作

• nodeType 属性可用来区分不同类型的节点，比如 元素, 文本 和 注释。

• 研究Sortable ；

  整个还是 创建实例（传入元素，选项），实例的原型函数初始化了很多方法。

  1.  on -> 注册事件
    function on(el, event, fn) {
      el.addEventListener(event, fn, !IE11OrLess && captureMode);
    }
  

2021年9月19日

• 放假

2021年9月20日

• 放假

2021年9月21日

• 放假

2021年9月22日

• 自定义组件 v-model

• max-width 覆盖 width

  • codesandbox 使用 要多刷新

• sortable.js拖拽时候执行move dragEL当前拖拽的元素,targetEL拖拽时候的目标元素

• 触发 dragover事件(每几百毫秒触发一次)

  image-20210922153605570

2021年9月23日

• 你不知道的JS系列
• 编辑器开发
• 大小比较 -- 如果两个值都是字符串，则根据它们包含的Unicode代码点的值将它们作为字符串进行比较。否则JavaScript会尝试将非数值类型转换为数值：
• image-20210923180144994

2021年9月24日

• <img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/7/29/164e35fcb94dd97d~tplv-t2oaga2asx-watermark.awebp" alt="image" style="zoom: 67%;" />
• 查漏补缺

2021年9月25日

• 搬砖

2021年9月26日

• ES6支持若干预先定义好的内置符号，它们可以暴露JavaScript对象值的各种元特性。但是，这些符号并不是像一般设想的那样注册在全局符号表里

• ❌PUT等冥方法

• 元编程：代码查看自身、代码修改自身、代码修改默认语言特性，以此影响其他代码。

• 元属性以属性访问的形式提供特殊的其他方法无法获取的元信息。new.target为例，关键字new用作属性访问的上下文。显然，new本身并不是一个对象，因此这个功能很特殊。而在构造器调用（通过new触发的函数/方法）内部使用new. target时，new成了一个虚拟上下文，使得new.target能够指向调用new的目标构造器。

• 一部小心误触了 window.name 发现 访问了Name会调用 toString() window.name 会调用 toString 将赋给它的值转换成对应的字符串表示。

• EventTarget.dispatchEvent ==向一个指定的事件目标派发一个事件

2021年9月27日

• 迭代器的出现旨在消除这种复杂性并减少循环中的错误。

• 所有的集合对象（数组、Set集合及Map集合）和字符串都是可迭代对象，Symbol.iterator通过指定的函数可以返回一个作用于附属对象的迭代器

  image-20210927100726324

• 业务代码熟悉

2021年9月28日

• node-sass 语言是lang=scss ...
• 需求-> 三个页面 消息分类通知->消息列表->消息详情 三个都是要写的
• 你不知道的js
• 业务书写

2021年9月29日

• offerset 偏移尺寸相对于父元素来说 盒子的一些尺寸
• 输入事件和动画帧常常以差不多的频率被触发 所以无需去用动画帧去触发
• ✅符号就是用来创建唯一记号，进而用作非字符串形式的对象属性。
• for...in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。本质上 for ... in是为遍历对象属性而构建的
• reduce 函数 (accumulator，currentValue，currentIndex，currentIndex)
• image-20210929171749979

2021年9月30日

• dom事件还原

• image-20210930102955613

• 组建销毁时候 可以做一些清除监听（组件在节点被移除时候,比如v-if时候）

• 声明式编程是关于使用/创建从实现细节中抽象出来的工具。因此，您可以专注于如何解决问题。

2021年10月08日

• positon: sticky
• fit-content的使用
• 关于nuxt.js
• 后面可以研究koa
• 编辑器的 手机端和电脑端 共用一个组件 通过项目类型
• 今天的配置项可以配置 接入系统页面
• 样式问题（向上滚动时候 上面导航栏不固定）

2021年10月09日

• 编辑器完成
• app-render学习
• margin-bottom 失效 解决
• 蓝湖可以自定义尺寸来修改页面信息
• 三个页面的ui需要提供

2021年10月10日

• 整体交互上的问题可以修改
• 每页展示？15？这个文案是不是有点多？
• 修改触发的逻辑

2021年10月11日

• 完成编辑器页面
• 项目对接-接口
• iconfont 项目中的引用 在线链接 通过symbol

2021年10月12日

• 一个完整的前端监控平台包括三个部分：数据采集与上报、数据整理和存储、数据展示。
• z-index 问题
• display flex 和 css 文本超出就隐藏并且显示省略号 有冲突
• 新设计图页面修改
• ❌❌❌编辑器未完成项：接口、图标、

2021年10月13日

• 部分样式修改
• 渲染端项目编写项目
• transform-origin CSS属性让你更改一个元素变形的原点
• 编辑器保存数据之后 像后端提交当前页面的所有配置项目落得json，然后渲染端根据当前页面的配置项 数据结构进行展开 来进行重新画页面 （这里会有组件，根据组件的name 去远程拉取 或者本地 npm 包）

2021年10月14日

• html 语义化
• 新增的一些调试技巧
• 还是要多练习
• lin-123/javascript 好用的代码风格
• vue-ssr学习

2021年10月15日

• 继续研究 vue-ssr
• 研究一下 web-dev-plantform
• router api还很多哇
• 晚上继续还是写一下渲染端

2021年10月16日

• typora 应该用的是网页作为渲染容器 编辑时候就是 启用了 contenteditable="true"

• 研究了一下 vue-ssr 本质上 暴露出了 asyncData 方法 然后可以让服务端请求然后混合到页面中。或者说会预取数据状态 在挂载 (mount) 到客户端应用程序之前，需要获取到与服务器端应用程序完全相同的数据

• Nuxt.js 你可能想要在服务器端获取并渲染数据。添加了asyncData方法使得你能够在渲染组件之前异步获取数据。通过return 返回到当前的组件 可以通过上下文来进行获取。

  Promise.all(
                  matchedComponents.map(component => {
                      if (component.asyncData) {
                          return component.asyncData({
                              store,
                              route: router.currentRoute
                          })
                      }
                  })
              ).then(() => {
                  context.state = store.state
                  // Promise 应该 resolve 应用程序实例，以便它可以渲染
                  resolve(app)
              })
  

2021年10月17日

• babel研究

• flex 研究

• 关于谷歌浏览器对flex布局的支持

  image-20211017225722644

• 在整个flex-basis是基于整个父容器的宽度而言

2021年10月18日

• 业务开发
• app-render 路由映射
• 消息分类新增图标、新增消息详情页面

2021年10月19日

• 编辑器项目看看能不能优化一下
• 在申明了flex flex子项 可以一遍定具体宽度 一边可以等分
• 417验证问题
• vue问题 解决思路 1. 通过vue.js tools 面板查看 整体的逻辑 2. 通过查看页面元素来定位具体的组件 3. 通过debugger来进行调试

2021年10月20日

• 消息中心渲染端 滑动加载

2021年10月21日

• 代码

2021年10月22日

• 业务

2021年10月23日

• 业务

2021年10月24日

• 业务

2021年10月25、26日

• 已读未读ui更新、进入消息中心前面需要进行登录验证

• 优化部分体验 滚动条出现的话 会进行提示是否还有消息

• 远程调试协议

• 谷歌修改css 属性之后，本质会向v8引擎内核发送一个请求，通过websocket，谷歌也会发送一个response。

  image-20211026121417267

• 应用快捷方式 目标写入了一些网址 导致开启会自动启用某些网站

• 最后一步合并代码整个过程 拉取远程其他分支代码 到自己分支 然后提交代码到自己分支 然后提交代码到自己分支 然后在网页上向分支发起合并

• ❌❌❌ 忘记写了接口里面添加Message

• 已经完成了对pc-editor 分支的合并 只需要gitlab提代码就可以了

2021年10月27日

• ios点击跳转链接 默认不弹出
• 研究 chrome-remote-interface

2021年10月28日

• 需求评审
• 研究 chrome-remote-interface
• 每个DOM节点都有一个ID的镜像 通过这个ID来获取节点的信息
• image-20211028165329209
• 😃需要串一下谷歌调试协议的整个流程 首先 谷歌开启debugger 并且暴露出一个调试端口 -> 然后 chrome-remote-interface 进行对接到这个端口 并且设置调试的页面 然后可以通用的 api 来 获取dom节点 / 拦截到很多信息。 也可以通过set方法来进行更新。

2021年10月29日

• 文章编写-

2021年10月30日

• 回家

2021年10月31日

• 回家

2021年11月1日

• mjs 的引用
• 图片的加载...
• flex的应用 默认flex为1

2021年11月2日

• 图片样式修改
• 完成博客
• react拖拽

2021年11月3日

• 学习react
• 钩子（hook）就是 React 函数组件的副效应解决方案，用来为函数组件引入副效应。、 -- 函数式编程将那些跟数据计算无关的操作，都称为 "副效应"
• 自定义钩子基于react 提供的钩子进行再构建
• 拖拽不一定基于原生的拖拽方法 可以根据鼠标事件进行。

2021年11月4日

• 数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字
• 依靠Vue 完成了 原生的 拖拽事件

2021年11月5日

2021年11月8日

• splice 也能给数组添加数据的 牛哇

  image-20211108114746331

• 下一步技术重点： 服务端koa 、手写一个简单的vue

2021年11月9日

• zoom-pan
• html-plugin 版本问题
• 协助解决部分富文本问题、解决缩放的问题。
• miniVue的修改

2021年11月10日

• 问题 -> 沟通不顺。