每日知识点学习

作者: 阿克伦之子 | 来源:发表于2021-11-14 13:41 被阅读0次

每日知识点学习

表情地址

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日

问题 -> 沟通不顺。

每日知识点学习