├── readme.md
└── vue-project-thought.md


/readme.md:
--------------------------------------------------------------------------------
  1 | # 目录
  2 | 
  3 | 现如今的知识，或者编写技巧，更多来自，知与不知。并不是说问题不难，而是会有积极的，友好的人们，对其简化。将它变成一个库，一个工具，一个软件，更有可能是一段代码，一串命令，一点思维。
  4 | 而这个存档，是放我之后看到的，在源码/库层面的技巧与捷径。如果你问以前的，`(*^_^*)` 我已经忘了。所以，这个存档出现了。
  5 | 
  6 | 如何存，我会从，
  7 | 
  8 | 1. （what）这个工具/技巧是什么，(留下收录时间)，
  9 | 2. （where） 它被我在哪个项目（指向有名的，且有长期维护的项目）看到，
 10 | 3. （how） 以及，使用方法。（当然，是不详尽的，仅给出片段解释与关键代码。
 11 | 
 12 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 13 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 14 | 
 15 | - [目录](#目录)
 16 |   - [NPM package](#npm-package)
 17 |     - [comlink （2022-4-1）](#comlink-2022-4-1)
 18 |       - [diff.ts](#diffts)
 19 |       - [diff.worker.ts](#diffworkerts)
 20 |   - [一串命令](#一串命令)
 21 |     - [playwright（2022-4-1）](#playwright2022-4-1)
 22 |   - [一点思维](#一点思维)
 23 |     - [Vue](#vue)
 24 | 
 25 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 26 | 
 27 | ## NPM package
 28 | 
 29 | ### [comlink](https://github.com/GoogleChromeLabs/comlink) （2022-4-1）
 30 | 
 31 | > 工作线程的简化工具
 32 | 
 33 | 示例项目：[antfu/vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect/tree/bc525c40ab700ff05185048c687430608c63759c)
 34 | 
 35 | <details>
 36 | 
 37 | - [DiffEditor.vue](https://github.com/antfu/vite-plugin-inspect/blob/bc525c40ab700ff05185048c687430608c63759c/src/client/components/DiffEditor.vue#L66)
 38 | 
 39 | ```ts
 40 | // src/client/components/DiffEditor.vue
 41 | import { calucateDiffWithWorker } from "../worker/diff";
 42 | 
 43 | /* 这个工作函数的用处是，对比两个 文件，经过 vite 插件转换的之后对比，（也就类比，两个文件的不同比较 ）*/
 44 | const changes = await calucateDiffWithWorker(l, r);
 45 | ```
 46 | 
 47 | #### diff.ts
 48 | 
 49 | ```ts
 50 | import type { Remote } from "comlink";
 51 | import { wrap } from "comlink";
 52 | import type { Exports } from "./diff.worker";
 53 | 
 54 | let diffWorker: Remote<Exports> | undefined;
 55 | 
 56 | export const calucateDiffWithWorker = async (left: string, right: string) => {
 57 |   if (!diffWorker) {
 58 |     diffWorker = wrap(
 59 |       new Worker(new URL("./diff.worker.ts", import.meta.url), {
 60 |         type: "module",
 61 |       })
 62 |     );
 63 |   }
 64 | 
 65 |   const result = await diffWorker.calucateDiff(left, right);
 66 |   return result;
 67 | };
 68 | ```
 69 | 
 70 | #### diff.worker.ts
 71 | 
 72 | ```ts
 73 | import { expose } from "comlink";
 74 | import { diff_match_patch as Diff } from "diff-match-patch";
 75 | 
 76 | const calucateDiff = (left: string, right: string) => {
 77 |   const diff = new Diff();
 78 |   const changes = diff.diff_main(left, right);
 79 |   diff.diff_cleanupSemantic(changes);
 80 |   return changes;
 81 | };
 82 | 
 83 | const exports = {
 84 |   calucateDiff,
 85 | };
 86 | 
 87 | export type Exports = typeof exports;
 88 | 
 89 | expose(exports);
 90 | ```
 91 | 
 92 | </details>
 93 | 
 94 | ## 一串命令
 95 | 
 96 | ### playwright（2022-4-1）
 97 | 
 98 | 如果这个自动化框架，存在于项目开发依赖中。
 99 | 因其使用 electron 作为其依赖，自然它需要下载资源，而这个资源在国内网络下载失败的可能相当大，而这里给出一串命令，替换底层的下载代码的环境变量。
100 | 
101 | 先
102 | 
103 | ```bash
104 | # Linux
105 | export ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
106 | # Windows
107 | set ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"
108 | # 在进行
109 | yarn
110 | ```
111 | 
112 | ## 一点思维
113 | 
114 | ### Vue
115 | 
116 | - [Vue 项目工程 -- 战斗思维与技巧](vue-project-thought.md)


--------------------------------------------------------------------------------
/vue-project-thought.md:
--------------------------------------------------------------------------------
  1 | ## Vue 项目工程 -- 战斗思维与技巧
  2 | 
  3 | 有库用库，有便捷函数用便捷函数，有规范用用规范。———— Me
  4 | 
  5 | 
  6 | ## 目录
  7 | 
  8 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
  9 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 10 | 
 11 | - [纯组件](#%E7%BA%AF%E7%BB%84%E4%BB%B6)
 12 |   - [示例](#%E7%A4%BA%E4%BE%8B)
 13 | - [数据的展示与修改](#%E6%95%B0%E6%8D%AE%E7%9A%84%E5%B1%95%E7%A4%BA%E4%B8%8E%E4%BF%AE%E6%94%B9)
 14 |   - [大对象的数组](#%E5%A4%A7%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%95%B0%E7%BB%84)
 15 |     - [示例](#%E7%A4%BA%E4%BE%8B-1)
 16 | - [书写 变体组件，应该用 `<component :is="name" />`](#%E4%B9%A6%E5%86%99-%E5%8F%98%E4%BD%93%E7%BB%84%E4%BB%B6%E5%BA%94%E8%AF%A5%E7%94%A8-component-isname-)
 17 |   - [示例](#%E7%A4%BA%E4%BE%8B-2)
 18 |   - [Mixin](#mixin)
 19 | 
 20 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 21 | 
 22 | 
 23 | ## 纯组件
 24 | 
 25 | 认清楚纯组件，是一件相当重要的事情。因为它可以让你辨别**业务**与**表现UI**的分别。
 26 | 
 27 | 在我的认知里面，不带有**请求业务API**的组件，就是纯组件，
 28 | 
 29 | - 它会是一个叶子。
 30 | - 它应该放在 Components 文件夹下，
 31 | - 甚至说，常用的组件库，本身的每一组件，都可以看作纯组件。
 32 | - 按钮就是一个按钮，它的属性`:value`和方法`@click`，都是由调用它的组件来完成。
 33 | 
 34 | ### 示例
 35 | 
 36 | 将 `Son` 比作一个按钮
 37 | 
 38 | 
 39 | ``` js
 40 | // Father.vue
 41 | <Son :value="value" @click="doSomething">
 42 | 
 43 | const value = ref(0)
 44 | const doSomething = (fromSon) => {
 45 |   // 处理来自 Son 的 click 事件的回调
 46 | }
 47 | ```
 48 | 
 49 | > 为什么，我会从纯组件的角度出发，感觉我是在讲废话的, VUE 的作用不就是可以写组件吗，然后重用吗，谁不知道呢。
 50 | 
 51 | <!-- TODO: 解答 2022-4-3 为什么呢 -->
 52 | 
 53 | ## 数据的展示与修改
 54 | 
 55 | ### 大对象的数组
 56 | 
 57 | 
 58 | #### 示例
 59 | 
 60 | 举个栗子：人员对象的数组。
 61 | 
 62 | ```js
 63 | const personList = [{
 64 |   name: '张',
 65 |   age: 15,
 66 |   //...
 67 |   height: 177,
 68 |   // or
 69 |   info: {
 70 |     position: "地址",
 71 |     father: "Id",
 72 |     mother: "Id"
 73 |   }
 74 | }]
 75 | ```
 76 | 
 77 | ## 书写 变体组件，应该用 `<component :is="name" />`
 78 | 
 79 | ### 示例
 80 | 
 81 | 我们把题目的类型列出：
 82 | 
 83 | ```ts
 84 | const types = ['单选题', '多选题', '填空题', '问答题',' 连线题', 
 85 |               '自定义题'
 86 |               // 等等
 87 |               ]
 88 | ```
 89 | 
 90 | 根据传递的参数 `typeID`，应用不同的组件
 91 | 
 92 | -  **Question.vue**
 93 | -  
 94 | ``` js
 95 | 
 96 | <script>
 97 | /* 传入，题目类型，与题目的列表 */
 98 | props: ['typeID', 'questions']
 99 | components: {
100 |   Single: () => import("path/to/Single"),
101 |   Muliple: () => import("path/to/Muliple"),
102 |   Fillin: () => import("path/to/Fillin"),
103 |   QandA: () => import("path/to/QandA"),
104 |   // ...
105 | }
106 | methods: {
107 |   Which(componentName) {
108 |     if(this.convertIdToName(this.typeID) == componentName)
109 |   },
110 |   convertIdToName(typeID) {
111 |     // TODO: 将 类型常量id 转换 名称
112 |     // return Name
113 |   }
114 | }
115 | </script>
116 | 
117 | <template>
118 | 
119 | <div>
120 |   <!-- 组件集合 -->
121 |   <template v-for="(componentName) in ['Single','Muliple','Fillin','QandA', // ...]" 
122 |   >
123 |   /* 判断是哪个组件 */
124 |     <template v-if="Which(componentName)">
125 |     /* 以及使用 */
126 |     <component v-for="(question, idx) in questions"  
127 |       :is="componentName" :key="componentName + idx" 
128 |       :question="question" />
129 |     </template>
130 |   </template>
131 | </div>
132 | </template>
133 | 
134 | ```
135 | 
136 | ### Mixin
137 | 
138 | 我们要明白，`['Single','Muliple','Fillin','QandA',//...]` 这些个兄弟组件，应该具有相同的 **props**。(`question`)接口方面也应该统一，至于它们的差异，应在组件内部消化。
139 | 
140 | - 也就意味着，它们会有个 兄弟级别的 Mixin 组件，定义 props 与通用方法。
141 | 
142 | - **Single.vue**
143 | 
144 | ``` js
145 | <script>
146 | import setupQuestionMixin from "path/to/questionMixin"
147 | export default {
148 |   name: "Single",
149 |   mixins: ['setupQuestionMixin']
150 | }
151 | </script>
152 | ```
153 | - **Muliple.vue**
154 | 
155 | ``` js
156 | // .vue
157 | <script>
158 | import setupQuestionMixin from "path/to/questionMixin"
159 | export default {
160 |   name: "Muliple",
161 |   mixins: ['setupQuestionMixin']
162 | }
163 | </script>
164 | ```
165 | - **questionMixin.vue**
166 | 
167 | ```js
168 | export default {
169 |   name: "questionMixin",
170 |   props: {
171 |     question: {
172 |       type: Object,
173 |       required: true
174 |     }
175 |   },
176 |   methods: {
177 |     // ...
178 |   }
179 | }
180 | ```


--------------------------------------------------------------------------------