每日知識點學習

表情地址

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日

• 問題 -> 溝通不順。