diff --git "a/docs/pages/Abaddon/01-week01 \351\234\200\346\261\202\345\210\206\346\236\220\344\270\216\346\236\266\346\236\204\350\256\276\350\256\241.md" "b/docs/pages/Abaddon/01-week01 \351\234\200\346\261\202\345\210\206\346\236\220\344\270\216\346\236\266\346\236\204\350\256\276\350\256\241.md" index 2b55c23..ee454a7 100644 --- "a/docs/pages/Abaddon/01-week01 \351\234\200\346\261\202\345\210\206\346\236\220\344\270\216\346\236\266\346\236\204\350\256\276\350\256\241.md" +++ "b/docs/pages/Abaddon/01-week01 \351\234\200\346\261\202\345\210\206\346\236\220\344\270\216\346\236\266\346\236\204\350\256\276\350\256\241.md" @@ -1,11 +1,11 @@ ## 架构师与业务需求 - 架构师必须深入理解需求，以架构师的角度分析需求，须有全局思维、整体思维、闭环思维。 - 在此基础上确定需求范围，设计核心数据结构。 - ![](./images/1.png) +架构师必须深入理解需求，以架构师的角度分析需求，须有全局思维、整体思维、闭环思维。 +在此基础上确定需求范围，设计核心数据结构。 +![](./images/1.png) ## 产出 - 编写《整体技术方案设计》 +编写《整体技术方案设计》 diff --git "a/docs/pages/Abaddon/02-week02 \350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" "b/docs/pages/Abaddon/02-week02 \350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" new file mode 100644 index 0000000..76dc21d --- /dev/null +++ "b/docs/pages/Abaddon/02-week02 \350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" @@ -0,0 +1,138 @@ +## 一. 脚手架的价值 +* 自动化：项目重复代码拷贝/git操作/发布上线操作 +* 标准化：项目创建/git flow/发布流程/回滚流程 +* 数据和：研发过程系统化/数据化/可量化 +* 总之，提升前端研发效能 +![](./images/2.png) + +*** + +## 二. 脚手架简介及原理 +#### 简介 +> 命令示例：vue create vue-test-app --force -r https://registry.npm.taobao.org +* 主命令：vue +* command: create +* command param: vue-test-app +* option: --force 覆盖安装包 (可简写为-f, option param 默认为true) +* option: -r (简写，等于--registry) +* option param: https://registry.npm.taobao.org +* 可用vue create --help查看各个命令及简写情况 + +#### 脚手架执行原理 +![](./images/3.png) +1. 在终端输入 vue create vue-test-app +2. 终端解析出vue命令，在环境变量中找到vue命令（通过which vue命令可查; which vue 命令在 git bash 中可用） +3. 终端根据vue命令，连接到实际vue.js (which vue后的路径下node_modules/@vue/cli/bin/vue.js) +4. vue.js解析command/options，执行command +5. 执行完毕，退出 + +#### 脚手架实现原理的三个问题 +> 1. 全局安装@vue/cli后(npm install -g @vue/cli)，新增的命令为何是‘vue’？ +>> @vue/cli的安装路径（which vue后的路径下node_modules/@vue/cli/）下的package.json文件中配置项'bin',指定了命令的名称与对应执行的文件。 +> 2. 全局安装@vue/cli时发生了什么？ +>> 首先会把@vue/cli的包下载到指定路径（全局默认路径 C:\Users\pc\AppData\Roaming\npm, 可配置）的node_modules目录下，其次解析package.json中'bin'的配置项，根据该配置项的内容生产软链接，即某命令执行什么文件。（本机与视频呈现的不同，bin目录下没有软链接，只有vue.js一个文件，而更像是在bin同目录下的node_modules目录下）。 +> 3. 执行vue命令时发生了什么？为什么vue指向了一个js文件，就可以通过vue命令直接执行它？ +>> 首先通过环境变量找到vue命令，通过软链接找到vue.js, 解析vue.js中的第一句‘#!/usr/bin/env node’（在环境变量中找node命令）， 通过node执行vue.js。 + +#### 脚手架原理进阶 +> 1. 为什么说脚手架本质是操作系统的客户端？它和PC上安装的应用/软件什么区别？ +>> node是操作系统的客户端（node.exe）。 并无区别，唯一区别是node没有图形化图标界面。 +> 2. 如何为node脚手架命令创建别名? +>> 软链接嵌套。使用ln -s命令（Linux命令，详情自查）。 +>> 3. +![](./images/4.png) + +*** + +#### 脚手架开发流程 + +![](./images/6.jpg) + + +1. 开发流程 +* 创建npm项目 +* 创建脚手架入口文件，最上方添加： #!/usr/bin/env node +* 配置package.json的bin属性 +* 编写脚手架代码 +* 将脚手架发布到npm + +2. 使用流程 +* 安装脚手架 npm install -g your-own-cli +* 使用脚手架 your-own-cli + +#### 脚手架开发难点 +* 分包，将复杂的系统分拆若干个模块。 +* 命令注册 vue create/ vue add / vue invoke +* 参数解析(vue command [options] )： + options全称： --version/--help + options简写： -v/-h + 带params的options： --path /Usrs/Desktop/vue-test +* 帮助文档 + +#### 自建简易脚手架流程 +* 注册https://www.npmjs.com +* 新建npm项目（npm init） +* 在package.json中配置“bin”配置项，如"bin": {"imooc-test": "bin/index.js"}（注意package.json中name和version配置项）。 +* npm login登录 +* npm publish发布，成功后在npm官网可查看发布的package +* 安装 npm install -g 包名 +* 安装成功后可使用 + +#### 脚手架本地link标准流程 +不需要通过publish发布到线上，而是直接在本地调试。 +##### 1. 如果你有一个工程A +* cd A +* npm link + +##### 2. 如果你有两个工程，要在A工程中依赖B工程 +* cd B +* npm link +* cd A +* npm link B +* 如有需要配置A工程package.json中的dependencies + +##### 3. 取消本地的链接 +* cd B +* npm unlink +* cd A +* 如果link存在：npm unlink B;如果link不存在，删除A工程下的node_mudules中的B库文件 +* npm install -S A + +##### 4. 理解npm link/unlink +* npm link B: 将当前项目（比如工程A）中node_mudules下指定的库文件链接到node全局node_modules下的库文件。 +* npm link: 将当前项目链接到node全局node_modules中作为一个库文件，并解析bin配置创建可执行文件。 +* npm unlink: 将当前项目从node全局node_modules中移除。 +* npm unlink B: 从当前项目（比如工程A)的库文件中移除依赖B。 + +#### 脚手架命令注册与参数解析原理 +* 获取命令：const command = require('process').argv[2] +* 获取参数: const optionsAndParams = require('process').argv.slice(3) +* 获取解析命令及参数的库：require('B') +* 调用相应命令的执行方法并传入参数： require('B')\[command\](options & params). + +## 三. 脚手架框架搭建 + +#### Lerna简介 +* Lerna是一个优化基于git+npm的多package项目管理工具 +* 优势：大幅减少重复操作；提升操作的标准化；以效能为核心。 + +#### Lerna开发脚手架流程 +![](./images/5.png) +> ###### 脚手架项目初始化 +1. npm init +2. npm install -g lerna +3. lerna init + +> ###### Lerna一般命令（https://github.com/lerna/lerna#readme） +1. leran create packageName +2. lerna add dependencyName package(向package包安装依赖) +3. lerna clean(情况依赖) +4. lerna bootstrap(重装依赖) +5. lerna link(相互依赖) +6. lerna run (执行npm命令) + +> ###### 上线发布命令 +1. lerna version +2. lerna changed +3. lerna diff +4. lerna publish(注意私有配置publishConfig) \ No newline at end of file diff --git a/docs/pages/Abaddon/images/2.png b/docs/pages/Abaddon/images/2.png new file mode 100644 index 0000000..df2de40 Binary files /dev/null and b/docs/pages/Abaddon/images/2.png differ diff --git a/docs/pages/Abaddon/images/3.png b/docs/pages/Abaddon/images/3.png new file mode 100644 index 0000000..403e45c Binary files /dev/null and b/docs/pages/Abaddon/images/3.png differ diff --git a/docs/pages/Abaddon/images/4.png b/docs/pages/Abaddon/images/4.png new file mode 100644 index 0000000..d1f4306 Binary files /dev/null and b/docs/pages/Abaddon/images/4.png differ diff --git a/docs/pages/Abaddon/images/5.png b/docs/pages/Abaddon/images/5.png new file mode 100644 index 0000000..5e8af08 Binary files /dev/null and b/docs/pages/Abaddon/images/5.png differ diff --git a/docs/pages/Abaddon/images/6.jpg b/docs/pages/Abaddon/images/6.jpg new file mode 100644 index 0000000..9c6eae4 Binary files /dev/null and b/docs/pages/Abaddon/images/6.jpg differ diff --git "a/docs/pages/Baran/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" "b/docs/pages/Baran/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" deleted file mode 100644 index 2de5878..0000000 --- "a/docs/pages/Baran/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" +++ /dev/null @@ -1,5 +0,0 @@ -# 需求分析和架构设计 - -### 第3章 需求分析 - - diff --git a/docs/pages/Baran/README.md b/docs/pages/Baran/README.md deleted file mode 100644 index 179bb7f..0000000 --- a/docs/pages/Baran/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# Baran - 作业 -浅层学习看输入，深层学习看输出💪💪💪 -## 第一周 -- [01-需求分析和架构设计](01-需求分析和架构设计.md) \ No newline at end of file diff --git "a/docs/pages/Berners/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/docs/pages/Berners/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" deleted file mode 100644 index 7f3ffeb..0000000 --- "a/docs/pages/Berners/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" +++ /dev/null @@ -1,63 +0,0 @@ -## 需求设计 - - 脱离业务的架构就是耍流氓，架构师必须要深入理解需求，参与需求，看透需求背后的业务本质。 - -## 主要产出 - 熟悉产品需求 - 学会以架构师的思维分析需求 - 全局思维，整体思维，闭环思维 - -## 主要内容 - - 如何以架构师思维分析需求 - 项目的浅层需求 - 项目的深度需求 - 需求总揽 - -## 业务模块设计 - ![Image text](./images/架构设计.png) - -## 扩展性保证 - - 数据结构层面 - 一些可能的整体项目级别配置项。主要是是否可编辑，是否锁定等等。 - 一些页面级别的配置参数，大小，背景色之类的。 - 编辑器层面 - 保证组件的可扩展性，组件的锁定，可选，图层等等后续必要的扩展功能。 - -## 开发提效 - - 脚手架固化一些重复操作，规范流程，提高开发效率。 - 创建项目的流程 - 提交代码的流程 - 测试项目的流程 - 打包项目的流程 - 发布项目的流程 - 组件平台主要固化组件的开发和发布流程，提升组件开发效率。 - -## 运维保障（待补充），大中型企业自研 - - 线上服务和运维服务 - 安全 - 监控和报警 - 服务扩展性：流量大 - -## 架构师职责：项目设计，模块，逻辑抽象，正在是解决业务问题，梳理业务。通过技术手段实现业务增长，用架构设计模拟业务。 - -## 架构师核心思想 - - 通过技术手段，来保证业务的增长。对业务负责，需 要对需求精准深入的理解。 - 要坚信：技术永远都是为业务服务的，技术是实现业务增长的工具。 - - -## 学习方法 - - 要有耐心，不要一心想着写代码，觉得需求和设计不重要 - 抛开你固有的程序员思维，开始准备接受架构师思维 - 要坚信：技术永远都是为业务服务的，技术是实现业务增长的工具 - -## 注意事项 - 不要关注细节，要看整体，看范围 - 设计时判断可行性，不确定的就调研一下，（这需要大量的工作经验积累，技术能力） - 设计要考虑复杂度，越简单越好，不要过度设计，不要为了设计而设计 - diff --git "a/docs/pages/Berners/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/docs/pages/Berners/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" deleted file mode 100644 index 604b4f1..0000000 --- "a/docs/pages/Berners/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" +++ /dev/null @@ -1,134 +0,0 @@ -# 脚手架架构设计和框架搭建 - -## 标题 - 脚手架框架设计和框架搭建 - -## 收获 - 脚手架实现原理 - lerna的常见用法 - 架构设计机器和架构图绘制方法 - -## 主要内容 - 学习如何以架构师的角度思考基础架构问题 - 多package项目管理痛点和解决方案，居于lerna脚手架框架搭建 - imooc-cli脚手架需求分析和架构设计，架构设计图 - -## 附赠内容 - - 脚手架调试技巧 - lerna源码分析 - node的module模块分析 - yargs使用方法 - 剖析lerna架构设计 - -## 关键词 - - 脚手架-掌握脚手架原理和开发流程 - lerna-解决多package项目管理痛点 - 架构设计-学习大厂基础架构设计思路 - -## 学习方法 - - 架构三部曲：掌握原理 -> 独立思考 -> 总结反思 - 深度剖析优秀开源项目，由表及里，由深入浅 - 视角切换，多切换到架构师视角，从全局思考问题 - -## 站在前端研发的视角，分析开发脚手架的必要性 - - 研发效能：提升前端研发效能 - -## 脚手架核心价值 - - 将研发过程： - 自动化：项目重复代码拷贝/git操作/发布上线操作 - 标准化：项目创建/git flow/发布流程/回滚流程 - 数据化：研发过程系统化，数据化，使的研发过程可量化 - -# 脚手架的实现原理(window系统) - 1.为什么全局安装 @vue/cli 后台添加的命令为 vue？ - npm install -g @vue/cli - - 查看安装目录 -![](./images/@vue_cli安装目录.png) - - 1.1 操作系统注册 vue 命令 - 在 C:\Program Files\nodejs 目录下的 vue 文件中注册 vue 命令到环境变量 - - 直接执行 C:/Users/IG_G005/AppData/Roaming/nvm/v11.15.0/vue 文件命令和 vue 命令是等价的 -![](./images/直接执行目录下为vue文件.png) - - 执行vue命令会在环境变量中找到 vue 命令是否被注册 - vue 命令通过 软链接 在指向 C:\Users\IG_G005\AppData\Roaming\nvm\v11.15.0\node_modules\@vue\cli\bin\vue.js 这个文件 - - 1.2 为什么 C:\Users\IG_G005\AppData\Roaming\nvm\v11.15.0\node_modules\@vue\cli\bin\vue.js 文件可以被node解析器执行 - #!/usr/bin/env node - -![](./images/node解析器执行脚本文件.png) - - 主要是这个句话，声明使用node环境执行该脚本文件 - - 2.全局安装 @vue/cli 时发生了什么 - 在node安装目录的主目录， bin目录下创建一个软链接，软链接指向的是bin目录指向的实际文件 - -# 脚手架的实现原理(mac系统) - -## 1.为什么全局安装 @vue/cli 后会添加的命令为 vue ？ - which vue - - gaojunfengdembp:students-learn-task gaojunfeng$ which vue - /Users/gaojunfeng/.nvm/versions/node/v14.15.3/bin/vue - -### 该文件是一个可执行文件，是一个软链接（node环境下的全局命令） - gaojunfengdembp:bin gaojunfeng$ ls - node npm npx nrm vue - - 目录下 vue文件是个软链接，指向 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/bin/vue.js 文件 - 在执行 vue 命令时，其实就是在执行 指向的文件 - - 那 vue 命令，即软链接的名称，是在 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/package.json 文件中，配置的 vue 命令，执行命令时 指向 bin/vue.js 文件 - { - ... - "bin": { - "vue": "bin/vue.js" // 在这里通过key配置，决定名称，绑定 bin 目录下的 vue.js 文件 - }, - ... - } - -## 2.全局安装 @vue/cli 时发生了什么？ - 当我们在全局安装了 @vue/cli 模块，会下载到 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules 目录中， - 当包下载完成后，会自动解析 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/package.json 文件， - 读取文件中 "bin" 这个配置，发现 bin 下面有 vue 字符的这样一个配置，会在 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/bin - 目录下创建一个软链接 vue，软链接又指向 bin 对应的文件，即（/Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/bin/vue.js）文件 - - vue(命令) -> /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/bin/vue.js(原始文件) - /Users/gaojunfeng/.nvm/versions/node/v14.15.3/bin/vue(软链接) -> /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/bin/vue.js(原始文件) - -## 3.执行 vue 命令时发生了什么？ - 首先执行 which vue - - which vue - /Users/gaojunfeng/.nvm/versions/node/v14.15.3/bin/vue - - 返回一个软链接 - 执行该软链接 和 执行 vue 命令时等价的，该软链接上面讲了，又指向的是vue.js文件，看上面的说明 -![](./images/执行路径和vue命令是等价的.png) - -### 为什么 vue 指向一个 js 文件，我们却可以通过 vue 命令去执行它？ - - 查看 /Users/gaojunfeng/.nvm/versions/node/v14.15.3/lib/node_modules/@vue/cli/bin/vue.js 文件代码 -![](./images/为什么vue.js文件可执行.png) - 1.主要是 #!/usr/bin/env node 这句话，添加了执行该文件的环境变量。 - 表示当执行当前文件时，会到操作系统环境变量找 node 这个命令，找到以后通过 node 命令执行对应的文件。 - 直接执行 /usr/bin/env node 命令和直接执行 node 命令是一样的。 - - 2.怎么创建软链接(node环境下的全局命令) - 创建 imooc 命令 - 在/Users/gaojunfeng/.nvm/versions/node/v14.15.3/bin/目录下，通过 ln -s /xxx/xxx.js imooc 创建一个软链接，指向js文件 - -### 区别 - - #!/usr/bin/env node - #!/usr/bin/node - - 第一种是在环境变量种找 node - 第二种是直接执行 /usr/bin/ 目录下的 node \ No newline at end of file diff --git a/docs/pages/Berners/README.md b/docs/pages/Berners/README.md deleted file mode 100644 index c7a01f4..0000000 --- a/docs/pages/Berners/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# 高俊峰 - 学习分享 - -+ [第一周笔记](01-第一周笔记和作业.md) - -+ [第二周笔记](01-第二周笔记和作业.md) \ No newline at end of file diff --git "a/docs/pages/Berners/images/@vue_cli\345\256\211\350\243\205\347\233\256\345\275\225.png" "b/docs/pages/Berners/images/@vue_cli\345\256\211\350\243\205\347\233\256\345\275\225.png" deleted file mode 100644 index 6319d0e..0000000 Binary files "a/docs/pages/Berners/images/@vue_cli\345\256\211\350\243\205\347\233\256\345\275\225.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/node\350\247\243\346\236\220\345\231\250\346\211\247\350\241\214\350\204\232\346\234\254\346\226\207\344\273\266.png" "b/docs/pages/Berners/images/node\350\247\243\346\236\220\345\231\250\346\211\247\350\241\214\350\204\232\346\234\254\346\226\207\344\273\266.png" deleted file mode 100644 index b4a1603..0000000 Binary files "a/docs/pages/Berners/images/node\350\247\243\346\236\220\345\231\250\346\211\247\350\241\214\350\204\232\346\234\254\346\226\207\344\273\266.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\344\270\272\344\273\200\344\271\210vue.js\346\226\207\344\273\266\345\217\257\346\211\247\350\241\214.png" "b/docs/pages/Berners/images/\344\270\272\344\273\200\344\271\210vue.js\346\226\207\344\273\266\345\217\257\346\211\247\350\241\214.png" deleted file mode 100644 index 4f03d30..0000000 Binary files "a/docs/pages/Berners/images/\344\270\272\344\273\200\344\271\210vue.js\346\226\207\344\273\266\345\217\257\346\211\247\350\241\214.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\345\244\247\345\216\202\347\240\224\345\217\221\346\236\266\346\236\204\345\233\276.png" "b/docs/pages/Berners/images/\345\244\247\345\216\202\347\240\224\345\217\221\346\236\266\346\236\204\345\233\276.png" deleted file mode 100644 index 7a648b6..0000000 Binary files "a/docs/pages/Berners/images/\345\244\247\345\216\202\347\240\224\345\217\221\346\236\266\346\236\204\345\233\276.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\346\211\247\350\241\214\350\267\257\345\276\204\345\222\214vue\345\221\275\344\273\244\346\230\257\347\255\211\344\273\267\347\232\204.png" "b/docs/pages/Berners/images/\346\211\247\350\241\214\350\267\257\345\276\204\345\222\214vue\345\221\275\344\273\244\346\230\257\347\255\211\344\273\267\347\232\204.png" deleted file mode 100644 index 1a0430f..0000000 Binary files "a/docs/pages/Berners/images/\346\211\247\350\241\214\350\267\257\345\276\204\345\222\214vue\345\221\275\344\273\244\346\230\257\347\255\211\344\273\267\347\232\204.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\346\223\215\344\275\234\347\263\273\347\273\237\346\263\250\345\206\214vue\345\221\275\344\273\244.png" "b/docs/pages/Berners/images/\346\223\215\344\275\234\347\263\273\347\273\237\346\263\250\345\206\214vue\345\221\275\344\273\244.png" deleted file mode 100644 index 2f487cd..0000000 Binary files "a/docs/pages/Berners/images/\346\223\215\344\275\234\347\263\273\347\273\237\346\263\250\345\206\214vue\345\221\275\344\273\244.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\346\236\266\346\236\204\350\256\276\350\256\241.png" "b/docs/pages/Berners/images/\346\236\266\346\236\204\350\256\276\350\256\241.png" deleted file mode 100644 index bda3e40..0000000 Binary files "a/docs/pages/Berners/images/\346\236\266\346\236\204\350\256\276\350\256\241.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\347\233\264\346\216\245\346\211\247\350\241\214\347\233\256\345\275\225\344\270\213\344\270\272vue\346\226\207\344\273\266.png" "b/docs/pages/Berners/images/\347\233\264\346\216\245\346\211\247\350\241\214\347\233\256\345\275\225\344\270\213\344\270\272vue\346\226\207\344\273\266.png" deleted file mode 100644 index cde1855..0000000 Binary files "a/docs/pages/Berners/images/\347\233\264\346\216\245\346\211\247\350\241\214\347\233\256\345\275\225\344\270\213\344\270\272vue\346\226\207\344\273\266.png" and /dev/null differ diff --git "a/docs/pages/Berners/images/\347\237\245\350\257\206\347\202\271.png" "b/docs/pages/Berners/images/\347\237\245\350\257\206\347\202\271.png" deleted file mode 100644 index fbfe793..0000000 Binary files "a/docs/pages/Berners/images/\347\237\245\350\257\206\347\202\271.png" and /dev/null differ diff --git "a/docs/pages/Beyond/01-week01-\344\275\234\344\270\232.md" "b/docs/pages/Beyond/01-week01-\344\275\234\344\270\232.md" deleted file mode 100644 index 754fa28..0000000 --- "a/docs/pages/Beyond/01-week01-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,81 +0,0 @@ -# 技术方案设计文档 -## 需求背景 - -[慕课乐高 - UI设计和需求](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf) - -## 范围 -从需求来看，范围包括这几个方面 -- B端和编辑器 - - biz-editor-FE - - biz-editor-server -- C端 - - H5（从性能的角度考虑做SSR） -- 管理后台，做前端分析 - - admin-FE - - admin-server -- 独立的组件库 - - `npm`包的形式，供编辑器端和H5端使用； -- 统计服务 - -## 模块设计 - -![模块关系示意图](./images/模块关系图.jpg) - - -## 核心数据结构设计 -基本思路： -- 每个组件尽量符合`vnode`规范 -- 用数组来组织数据（有序） -- 尽量使用引用关系，不用冗余 - -```javascript -{ - 'project one': { - title: '', - setting: {/*可能需要的配置项*/}, - props: {/*页面body的一些设置*/}, - components: [ - { - id: 'xxx1', - name: 'xxx1', - tag: 'image', - attrs: { - fontSize: '14px' - }, - children: [] - }, - { - id: 'xxx2', - name: 'xxx2', - tag: 'text', - attrs: { - fontSize: '14px' - }, - children: null - }, - ] - } - //当前选中的组件id - activeComponentId: 'xxx' -} -``` - -## 扩展性保证 -- 扩展组件 -- 扩展编辑功能，如锁定，隐藏等 -- 扩展页面信息，如增加多语言或者主题色 -- 扩展其他功能，如大数据分析等 - - -## 研发提效 -- 脚手架：创建/发布 -- 组件平台 - - -## 运维保障 -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性：基于云服务，可以随时扩展机器和配置 - - diff --git a/docs/pages/Beyond/README.md b/docs/pages/Beyond/README.md deleted file mode 100644 index 21ae784..0000000 --- a/docs/pages/Beyond/README.md +++ /dev/null @@ -1,11 +0,0 @@ -# 目标只有一个：大厂 大厂 大厂！！！ - -## Week01 -- [Week01-作业-整体架构设计 V1.0](./01-week01-作业.md) - -## Week02 -## Week03 -## Week04 -## Week05 -## Week06 - diff --git "a/docs/pages/Beyond/images/\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.jpg" "b/docs/pages/Beyond/images/\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.jpg" deleted file mode 100644 index 3497b24..0000000 Binary files "a/docs/pages/Beyond/images/\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.jpg" and /dev/null differ diff --git a/docs/pages/EddieCookie/01-week01.md b/docs/pages/EddieCookie/01-week01.md deleted file mode 100644 index 3d5f436..0000000 --- a/docs/pages/EddieCookie/01-week01.md +++ /dev/null @@ -1,7 +0,0 @@ -# Week01 笔记 - -## 项目概览 - -![产品架构图](./images/product-archtect.png) - -![技能一览](./images/archtect-skills.png) diff --git a/docs/pages/EddieCookie/README.md b/docs/pages/EddieCookie/README.md deleted file mode 100644 index ea01a7f..0000000 --- a/docs/pages/EddieCookie/README.md +++ /dev/null @@ -1 +0,0 @@ -# 2021 也要加油鸭~ diff --git a/docs/pages/EddieCookie/images/architect-skills.png b/docs/pages/EddieCookie/images/architect-skills.png deleted file mode 100644 index 5822eda..0000000 Binary files a/docs/pages/EddieCookie/images/architect-skills.png and /dev/null differ diff --git a/docs/pages/EddieCookie/images/product-architect.png b/docs/pages/EddieCookie/images/product-architect.png deleted file mode 100644 index a694f4c..0000000 Binary files a/docs/pages/EddieCookie/images/product-architect.png and /dev/null differ diff --git "a/docs/pages/EditYJ/01-Week01-\344\275\234\344\270\232.md" "b/docs/pages/EditYJ/01-Week01-\344\275\234\344\270\232.md" deleted file mode 100644 index 9c5e462..0000000 --- "a/docs/pages/EditYJ/01-Week01-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,82 +0,0 @@ -# 整体架构设计 V1.0 - -## 范围 -整体设计，架构设计，没有细节 - -## 模块设计 -模块关系图 - - -![](./images/edityj-01.png) -- B端是前后端分离开发，受众不是大众所以不采用SSR模式开发，如果H5的编辑器比较复杂，可以拆分成单独项目进行开发。 -- C端采用的是SSR模式开发，一个原因是性能的考虑，另一个方面受众人数较多。 -- 组件库独立出来作为一个第三方项目，B端的编辑器和C端共用一个组件库进行H5页面的渲染。所见即所得，B端编辑好页面后，C端也可以复用组件库进行渲染，达到视觉统一，降低开发成本。 -- 管理后台采用前后端分离开发，内部人员使用，主要用来进行B端和C端的数据管理，数据统计，可以让运营人员把控产品的全局。 -- 自研统计服务，统计一些自定义事件，供B端和使用后台管理系统的人员知道产品的走向。 - - 自研统计服务主要是因为市面上支持自定义事件的统计服务大而全，而且价格昂贵，我们只需要有选择的开发一些满足自生需求的统计就行。 - -## 核心数据结构 -单个组件应该使用vnode规范，使用业界统一规范有助于我们少踩一些坑，并能得到扩展性较强的组件结构。vuex store 的大概结构如下： -```json -{ - // 作品 - work: { - title: '作品标题', - setting: { /* 一些可能的配置项，用不到就先预留 */ }, - props: { /* 页面 body 的一些设置，如背景色 */ }, - components: [ - // components 要用数组，有序结构 - - // 单个 node 要符合常见的 vnode 格式 - { - id: 'xxx', // 每个组件都有 id ，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - }, - ] - }, - - // 画布当前选中的组件 - activeComponentId: 'xxx' -} -``` -数据流转关系图 - - -![](./images/edityj-02.png) - - -使用统一的数据库管理数据，B端产生组件的配置数据存入数据库并发布项目，C端读取组件配置数据渲染出H5页面供用户访问，管理后台通过管理数据库的数据达到控制B端和C端的目的。 - -## 扩展性保证 -- 数据结构层面 - - 一些可能的整体项目级别配置项。主要是是否可编辑，是否锁定等等。 - - 一些页面级别的配置参数，大小，背景色之类的。 -- 编辑器层面 - - 保证组件的可扩展性，组件的锁定，可选，图层等等后续必要的扩展功能。 - -## 开发提效 -- 脚手架固化一些重复操作，规范流程，提高开发效率。 - - 创建项目的流程 - - 提交代码的流程 - - 测试项目的流程 - - 打包项目的流程 - - 发布项目的流程 -- 组件平台主要固化组件的开发和发布流程，提升组件开发效率。 - -## 运维保障（待补充） -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性：流量大 \ No newline at end of file diff --git "a/docs/pages/EditYJ/02-Week02-\347\254\224\350\256\260-\350\204\232\346\211\213\346\236\266\346\230\257\344\273\200\344\271\210.md" "b/docs/pages/EditYJ/02-Week02-\347\254\224\350\256\260-\350\204\232\346\211\213\346\236\266\346\230\257\344\273\200\344\271\210.md" deleted file mode 100644 index e2ae21c..0000000 --- "a/docs/pages/EditYJ/02-Week02-\347\254\224\350\256\260-\350\204\232\346\211\213\346\236\266\346\230\257\344\273\200\344\271\210.md" +++ /dev/null @@ -1,58 +0,0 @@ -# 脚手架是什么 - -## 核心目标 -**提升前端研发效能** - -将研发过程自动化，标准化，数据化。 - -## 本质 -脚手架的本质是一个操作系统的客户端，通过命令执行。 - -执行命令通常由主命令、command、option三部分组成，即：`主命令 command [command param] [option] [option param]` - -## 简单的执行过程 -以vue cli为例子，输入vue后的执行的大概过程如下： -- 输入主命令后，首先会去从环境变量中寻找vue命令的路径 -- 根据找到的vue命令链接到实际的vue.js -- 利用node执行vue.js -- 通过vue.js解析用户数据的后续参数 -- 执行用户指令 - -## 开发脚手架的简单过程 -以vue cli为例： -- 开发一个包含bin/vue.js目录的npm项目，发布在npm上 -- 安装此项目到node的lib/node_modules下 -- 指定node bin 目录下的vue连接至开发的vue.js - -## 回答三个问题 -> 为什么全局安装`@vue/cli`后会添加命令为`vue`? - -答：因为安装后会自动在node的bin目录下建立vue软链接文件, 这个软链接文件指向了`node/lib/node_modules/@vue`对应`vue.js`，由于`node/bin`目录是在环境变量下的，所以等于添加了命令vue。 - -> 全局安装`@vue/cli`后发生了什么? - -答：执行过程如下： -1. 下载了`vue.js`命令解析执行文件到`node/lib/node_modules`下 -2. 在`node/bin`目录下创建vue软链接文件连接到`node/lib/node_modules`对应`vue.js` - -> 执行vue命令时发生了什么？为什么vue指向一个js文件我们却可以通过vue命令去执行它? - -答：第一个问题参考上面的 *简单的执行过程*，通过下面的vue软链接文件的内容我们可以知道第二个问题的答案： -```shell -#!/bin/sh -basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')") - -case `uname` in - *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;; -esac - -if [ -x "$basedir/node" ]; then - "$basedir/node" "$basedir/node_modules/@vue/cli/bin/vue.js" "$@" - ret=$? -else - node "$basedir/node_modules/@vue/cli/bin/vue.js" "$@" - ret=$? -fi -exit $ret -``` -通过这个文件的内容我们可以清晰的看到，本质上其实就是利用shell命令执行了`node vue.js` \ No newline at end of file diff --git a/docs/pages/EditYJ/README.md b/docs/pages/EditYJ/README.md deleted file mode 100644 index 9aefdc7..0000000 --- a/docs/pages/EditYJ/README.md +++ /dev/null @@ -1,7 +0,0 @@ -# EditYJ - 课程打卡作业心得 - -## Week01 -- [Week01-作业-整体架构设计 V1.0](01-Week01-作业.md) - -## Week02 -- [Week02-笔记-脚手架是什么](02-Week02-笔记-脚手架是什么.md) diff --git a/docs/pages/EditYJ/images/edityj-01.png b/docs/pages/EditYJ/images/edityj-01.png deleted file mode 100644 index 5f81e1f..0000000 Binary files a/docs/pages/EditYJ/images/edityj-01.png and /dev/null differ diff --git a/docs/pages/EditYJ/images/edityj-02.png b/docs/pages/EditYJ/images/edityj-02.png deleted file mode 100644 index c64c82b..0000000 Binary files a/docs/pages/EditYJ/images/edityj-02.png and /dev/null differ diff --git "a/docs/pages/clqyfe/01-Week01-\344\275\234\344\270\232.md" "b/docs/pages/clqyfe/01-Week01-\344\275\234\344\270\232.md" deleted file mode 100644 index 2af9885..0000000 --- "a/docs/pages/clqyfe/01-Week01-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,88 +0,0 @@ -# 整体架构设计 V1.0 - -## 需求 - -- [需求文档](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf) -- [慕课乐高体验地址](https://www.imooc-lego.com/) - -## 模块设计 - -模块拆分: - -- B端和编辑器（前端，后端） -- H5（ssr） -- 管理后台（前端，后端） -- 第三方组件库：为了保证 编辑器和 h5 组件渲染的一致性 -- 自研统计模块：为了满足项目个性化的统计需求 - -模块的关系图，关键功能及职责： - -![module](./images/clqyfe-week01-module.png) - -## 作品的数据结构 - -核心数据结构： - -- 组件数据结构尽量复合 VNode 规范 -- 用数组来组织数据，有序 -- 尽量使用引用关系，避免冗余 - -```js -{ - // 作品 - work: { - title: '作品标题', - setting: { /* 拓展配置： 如配置渠道 */ }, - props: { /* 页面 body 的一些设置，如背景色 */ }, - components: [ - { - id: 'xxx', // 每个组件都有 id ，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - }, - ] - }, - // 画布当前选中的组件 - activeComponentId: 'xxx' -} -``` - -数据流转关系图： - -> B端将创建好的作品存入数据库；C端从数据库中读取创建的作品，渲染页面；管理后台可以管控作品的显示。 - -![module](./images/clqyfe-week01-data.png) - -## 扩展性保证 - -- 数据结构层面 - - 页面级别的配置参数，如全局样式配置 - - 项目级别的配置参数，如提供分渠道统计的参数配置项 -- 编辑器层面 - - 组件的扩展性，如组件隐藏，锁定及图层操作 - -## 开发提效 - -- 脚手架 - - 提供模板创建 - - CI/CD -- 组件平台 - - 组件库的创建，发布和预览 - -## 运维保障（待补充） - -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性：流量大 diff --git a/docs/pages/clqyfe/README.md b/docs/pages/clqyfe/README.md deleted file mode 100644 index 1853335..0000000 --- a/docs/pages/clqyfe/README.md +++ /dev/null @@ -1,5 +0,0 @@ -# 灿烂千阳FE - 课程打卡作业笔记 - -## Week01 需求分析和整体架构设计 - -[Week01-作业-整体架构设计 V1.0](01-Week01-作业.md) diff --git a/docs/pages/clqyfe/images/clqyfe-week01-data.png b/docs/pages/clqyfe/images/clqyfe-week01-data.png deleted file mode 100644 index 8304e9e..0000000 Binary files a/docs/pages/clqyfe/images/clqyfe-week01-data.png and /dev/null differ diff --git a/docs/pages/clqyfe/images/clqyfe-week01-module.png b/docs/pages/clqyfe/images/clqyfe-week01-module.png deleted file mode 100644 index 448a9e9..0000000 Binary files a/docs/pages/clqyfe/images/clqyfe-week01-module.png and /dev/null differ diff --git a/docs/pages/coderzlh/01-week01-note.md b/docs/pages/coderzlh/01-week01-note.md deleted file mode 100644 index b3884c9..0000000 --- a/docs/pages/coderzlh/01-week01-note.md +++ /dev/null @@ -1,113 +0,0 @@ -# 第一周笔记 - -体验地址: [慕课乐高](https://www.imooc-lego.com/) - -项目架构 - -![产品架构](https://class.imooc.com/static/module/marketpage2020/img/intro/fearchitect/section3-main.png) - -使用技术栈 - -![技术栈](https://class.imooc.com/static/module/marketpage2020/img/intro/fearchitect/section7-main.png) - -## 架构设计做什么 如何做 -> **架构师的核心价值** : 通过技术手段保证技术增长,对业务精准理解 -> -> + 需求指导设计,设计指导开发 -> + 技术永远是为业务服务的,技术是实现业务增长的工具 -> + 整体分析时不需要注意细节 -> + 判断可行性,需要适当调研 -> + 考虑复杂度,不过度设计 -> + **脱离业务的设计就是耍流氓** -> + 需求即业务,无业务不架构 -> + 需求闭环 业务闭环 - -## 前段开发流程 - -![前段开发流程](https://img.mukewang.com/wiki/5fdac52308c585a310321600.jpg) - - - -## 需求关系图 - -![需求关系图](https://img.mukewang.com/wiki/5fdac5fd08b94b2514200948.jpg) - - - -# 技术方案设计文档 - - - -## 模块设计 - -![image-20201222012242833](https://gitee.com/lhzhangcode/note-images/raw/master/image-20201222012242833.png) - - - -> h5端: 提供作品展示与分享的功能 -> -> 编辑器前端: 提供作品编辑 制作与发布功能 -> -> 编辑器服务端: 支持编辑器前端的功能 并将作品持久化到数据库 -> -> 后台管理前端: 供管理员使用 用于管理作品与模板 快速下线违规作品 查看运营统计数据 -> -> 后台管理服务端: 为后台管理提供接口服务 -> -> 组件库: 为h5与编辑器端提供组件服务 并可以通过脚手架工具快速创建和发布组件 -> -> 自研统计: 用于统计自定义事件的pv uv等指标 -> -> 三方服务: -> -> - 短信服务: 用于注册 登陆以及密码找回等操作需要验证用户身份时使用 -> - oss文件存储: 存储静态文件 -> - 埋点统计: 用于统计pv uv等常见运营指标 -> - 微信sdk: 用于微信分享 便于传播 - -## 核心数据结构 - -> + 每个组件尽量符合vnode规范 -> + 使用数据来组织数据 有序 -> + 尽量使用引用关系 不要冗余 - - ```json -{ - work:{ - id:'xxx', - title:'标题', - props:{/*全局配置属性*/}, - settings:{/*拓展预留*/}, - components:[ - { - id:'xxxx', - name:'文本1', - tag:'text', - attrs:{color:red}, - children:[] - } - ] - }, - //当前被选中的组件id - activeComponentId:'xx' -} - ``` - -## 拓展性 - -+ 增加动画,音效 甚至简单的交互功能 -+ 批量选中与批量修改 -+ 多人协作 同时编辑 - -## 研发提效 - -+ **脚手架: 创建发布** -+ **组件平台** - -## 运维保障 - -+ **线上服务和运维服务** -+ **安全** -+ **监控与告警** -+ **服务拓展性: 基于云服务,可以随时拓展机器和配置** - diff --git a/docs/pages/coderzlh/README.md b/docs/pages/coderzlh/README.md deleted file mode 100644 index 6f88d91..0000000 --- a/docs/pages/coderzlh/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# coderzlh - 学习分享 - -+ [第一周笔记](01-week01-note.md#第一周笔记) diff --git "a/docs/pages/jia\346\236\227_286621855/README.md" "b/docs/pages/jia\346\236\227_286621855/README.md" deleted file mode 100644 index 7ee9dc0..0000000 --- "a/docs/pages/jia\346\236\227_286621855/README.md" +++ /dev/null @@ -1,2 +0,0 @@ -## 前端架构 -- 整体思维、全局思维、闭环思维 \ No newline at end of file diff --git "a/docs/pages/jolly_chen/01-\346\212\200\346\234\257\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" "b/docs/pages/jolly_chen/01-\346\212\200\346\234\257\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" deleted file mode 100644 index 8a4f06b..0000000 --- "a/docs/pages/jolly_chen/01-\346\212\200\346\234\257\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" +++ /dev/null @@ -1,147 +0,0 @@ -# 整体架构设计V1.0 - -## 需求背景 - -[需求文档语雀链接](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf) - -创建作品、发布作品、管理作品 - -## 范围 - -整体设计、架构设计 - -包括B端和编辑器、H5端、管理后台、独立组件库、自研统计服务，pv/uv统计，使用第三方统计服务（免费的）。 - -## 模块设计 - -**模块拆分** - -- B端和编辑器，比较复杂，前后端分离 - -- H5端，考虑性能，使用SSR，只需要服务端 - -- 管理后台也前后端分离，分管理前端和管理后端 - -- 组件库分为业务组件库和组件平台 - - 业务组件库渲染B端画布和H5页面，保证B端编辑器和H5内容和样式，即B端编辑器和H5的组件和渲染逻辑一致。组件平台创建、发布组件，支持业务组件库，方便组件扩展。 - -- 自研统计服务 - -**模块关系图及各模块职责简要说明** - -![](/Users/jolly/Desktop/imooc/students-learn-task/docs/pages/jolly_chen/images/模块设计.png) - -**自研统计服务** - -负责pv/uv之外的统计，pv/uv只是域名级别的访问统计，自研统计服务实现参数级别的统计。具备的功能 - -- 支持自定义事件统计，接受埋点统计请求（日志收集） -- 分析统计结果（日志分析） -- 提供Open API给使用方 - -为何自研：调研发现，第三方统计服务，若要满足上述功能，费用很贵。但统计服务是整个业务的输入环节，供公司运营使用，提供决策依据，比如从什么渠道投放广告达到收益和费用的平衡等 。有输入有输出，项目才能闭环，不能砍掉，所以只能自研。 - - - -## 核心数据结构 - -**一个“作品”的数据结构** - -```javascript -{ - // 作品 - work: { - title: '作品标题', - setting: {/* 一些可能的配置项，用不到就预留 */}, - props: {/* 页面body的一些设置，如背景色等 */}， - components: [ - - // 单个node，要符合VNode规范 - { - id: 'xxx', - name: '文本1', - tag: 'text', - attrs: { fontSize: 20px }, - children: [ - '文本1' // 文本内容，有时候放在attrs或props中，没有标准，看情况而定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - } - ] - }, - - // 画布当前选中的组件 - activeComponentId: 'xxx' -} -``` - -使用vuex store的缓存数据，方便页面上各组件读写。 - -**图层** - -使用 vuex getter计算得出，这个的getter和vue computed类似 - -```javascript -{ - layers () => { - store.work.components.map(c => { - return { - id: c.id, - name: c.name - } - }) - } -} -``` - -**数据结构设计的解释** - -- 使用vnode规范存储组件数据，vue本身也实现了VNode，使用VNode也符合vue特点。其方便组件扩展，增强页面dom节点的表述，增加数据结构的合理性并降低学习成本 -- 使用数组存储组件，方便画布中的组件排序 -- 不单独存储图层数据，规避图层和组件状态同步问题。这里的图层是若干组件的一个索引或者是给组件排序的一个列表，应该使用computed计算出图层的索引，满足较少数据源原则 -- activeComponentId是画布和属性面板同步更新的重点，组件变了，图层就发生改变 -- 重复一遍，尽量使用索引，避免数据冗余 - -*问题（这个不属于技术方案设计文档的内容）：如何保证画布和属性面板是同步更新的？* - -​ *如果要扩展一个图层面板，数据结构该怎么设计？* - -**数据流转关系图** - -![](/Users/jolly/Desktop/imooc/students-learn-task/docs/pages/jolly_chen/images/数据流转.png) - -## 扩展性保证 - -- 扩展组件，当前数据结构层面可扩展，组件库层面扩展 - - 组件库是独立的，按照已有组件规范方便扩展 - - 数据结构上，也可以保证组件扩展 - -- 扩展编译器的功能，例如：组件隐藏、锁定、滑动翻页等，前两者在VNode中添加属性即可 - -- 扩展页面配置，vuex store setting - -## 开发提效 - -- 脚手架 -- 组件平台 - -运维保障 *（后续补充）* - -- 线上服务和运维服务用什么 -- 安全 -- 监控和报警 -- 服务扩展性：流量大时怎么解决 - -大厂自研，小厂使用第三方云服务，后续补充第三方云服务使用 - - - diff --git a/docs/pages/jolly_chen/README.md b/docs/pages/jolly_chen/README.md deleted file mode 100644 index 7abe661..0000000 --- a/docs/pages/jolly_chen/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Jolly_chen - 作业打卡 - -请直接看下级目录 diff --git "a/docs/pages/jolly_chen/images/\346\225\260\346\215\256\346\265\201\350\275\254.png" "b/docs/pages/jolly_chen/images/\346\225\260\346\215\256\346\265\201\350\275\254.png" deleted file mode 100644 index 8773f72..0000000 Binary files "a/docs/pages/jolly_chen/images/\346\225\260\346\215\256\346\265\201\350\275\254.png" and /dev/null differ diff --git "a/docs/pages/jolly_chen/images/\346\250\241\345\235\227\350\256\276\350\256\241.png" "b/docs/pages/jolly_chen/images/\346\250\241\345\235\227\350\256\276\350\256\241.png" deleted file mode 100644 index 5249246..0000000 Binary files "a/docs/pages/jolly_chen/images/\346\250\241\345\235\227\350\256\276\350\256\241.png" and /dev/null differ diff --git "a/docs/pages/liwen/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" "b/docs/pages/liwen/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" deleted file mode 100644 index 81b5873..0000000 --- "a/docs/pages/liwen/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" +++ /dev/null @@ -1 +0,0 @@ -week1 init \ No newline at end of file diff --git a/docs/pages/liwen/README.md b/docs/pages/liwen/README.md deleted file mode 100644 index 32f95c0..0000000 --- a/docs/pages/liwen/README.md +++ /dev/null @@ -1 +0,0 @@ -hi \ No newline at end of file diff --git a/docs/pages/mazy/01-week01.md b/docs/pages/mazy/01-week01.md deleted file mode 100644 index b990d89..0000000 --- a/docs/pages/mazy/01-week01.md +++ /dev/null @@ -1,47 +0,0 @@ -# 第一周笔记 -## 收获 -### 自身角度 -我目前职位是高级前端工程师, 从今年开始, 开始承担项目负责人的职务, 从老师的讲课中发现大部分还是跟自己的现状比较吻合 - -1. 虽然说是项目负责人, 但是考虑问题的角度更多还是以前端程序员的角度出发, 这个好做,这个不好做, 这个会有什么问题等等的考虑 -2. 在开需求评审的时候很少在整体的角度思考问题, 既需求是不是合理, 做的东西是否有输出有体现, 如何更好的交互等 -3. 在开发过程中, 要保证准时上线, 那么可能会跟产品有分歧, 砍掉需求等 -4. 总体来说, 目前的状态大多数还是跟产品对立的形式, 并没有统一战线, 使项目向着更好更稳定的方向发展 - - -## 项目 -### 项目的整体划分 - -+ B端和编辑器 - - biz-editor-FE - - biz-editor-server -+ C端 - - H5(SSR) -+ 管理系统 - - admin-FE - - admin-server -+ 组件库 -+ 统计服务 - - 三方免费pv/uv - - 自研自定义事件统计服务 - -#### 为什么这样分 -1. 前后端分离, 单独开发, 整体提升工作效率, 这个是必然, 术业有专攻 -2. 一个系统从来都不是单纯存在的, 有前台必然有后台, 所以有BC端, 必然有管理系统 -3. 组件库, 这个可以复用, 当多个系统同时使用同一套组件库,可以直接看文档传参数直接使用. 或者可以有专门人员来维护, 减少开发成本 -4. 统计服务,几乎所有网站都要用到统计, 简单的pv和uv,这个比较浅显, 那么还有一些业务较复杂的统计, 三方很难普及到, 或者说收费高, 那么就需要自己实现一套, 满足于系统业务的统计服务 - - -![](./images/01.png) - -## 数据结构 -### 考虑因素 -1. 是否可扩展,个人认为比较重要 -2. 结构是否清晰, 或者大多数人可以接受 -3. 数据结构本身的考量, 既哪些数据结构具有什么样的特点 - -### 实现方案 -1. 在设计组件或者store的时候都需要考虑扩展性问题 - - 怎么传, 怎么做兼容 - - 如何合并 -2. 结构清晰, 数组, 对象的特点, 在设计结构的时候, 是否冗余, 本来可以使用结构特点就可以实现, 最后又加了另外的结构来解决问题, 一直下去, 其他人很难维护 diff --git a/docs/pages/mazy/README.md b/docs/pages/mazy/README.md deleted file mode 100644 index ef6f1b8..0000000 --- a/docs/pages/mazy/README.md +++ /dev/null @@ -1,4 +0,0 @@ -# mazy - 学习记录 - -## Week01 -- [Week01-作业-整体架构设计 V1.0](01-week01.md) diff --git a/docs/pages/mazy/images/01.png b/docs/pages/mazy/images/01.png deleted file mode 100644 index 2361588..0000000 Binary files a/docs/pages/mazy/images/01.png and /dev/null differ diff --git "a/docs/pages/ricky94/01-\347\254\254\344\270\200\345\221\250.md" "b/docs/pages/ricky94/01-\347\254\254\344\270\200\345\221\250.md" deleted file mode 100644 index 5e9e7b9..0000000 --- "a/docs/pages/ricky94/01-\347\254\254\344\270\200\345\221\250.md" +++ /dev/null @@ -1,17 +0,0 @@ -# 第一周：需求分析和架构设计：做什么，如何做？ - - -## 需求设计 - -架构脱离不了业务。要做好架构必须要深入理解需求、参与需求、看透需求背后的业务本质。 - -> - PV（Page View）：即页面浏览量或点击量，用户每一次对网站中的每个网页访问均被记录一个PV。用户对同一个页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。 -> -> - UV（Unique Visitor）：是指通过互联网访问、浏览这个网页的自然人。一天内同一个访客多次访问仅计算一个UV。 -> -> - 自定义事件：通过代码埋点，对用户行为进行追踪，完成对用户行为细节的记录。 - - -## 架构设计 - -1. 分析需求，确定需要创建的项目 diff --git a/docs/pages/ricky94/README.md b/docs/pages/ricky94/README.md deleted file mode 100644 index ceb0f28..0000000 --- a/docs/pages/ricky94/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# Ricky94 - 学习笔记 - -[第一周：需求分析和架构设计：做什么，如何做？](01-第一周.md) \ No newline at end of file diff --git "a/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" "b/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" deleted file mode 100644 index 05213f1..0000000 --- "a/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" +++ /dev/null @@ -1,142 +0,0 @@ -# 幕客乐高技术方案 - -## 目录 - -## 需求 - -### 总体需求 - -原始需求：用户可按自身需求生成页面，并可分享出去供其他人浏览 - -## 确定范围 - -1. 用户可编辑页面（后台编辑） -2. 其他人可浏览（H5页面） -3. 可分享（埋点，数据分析） - -## 模块设计 - -模块拆分和关系图；关键功能职责；特殊模块重点说明 - -### 模块拆分 - -- 后台编辑项目 -- 后台编辑接口项目 -- 后台管理项目 -- 后台管理接口项目 -- H5 项目 - SSR -- 公用组件库项目 -- 公用接口项目 -- 埋点项目 - -### 特殊模块说明 - -- 后台管理和编辑拆两个项目的原因：管理员可以使用用户的操作，以及用户没有的操作将敏感操作和正常操作，尽量隔离 -- 多拆一个公用接口项目：后台管理和编辑，有高度相似接口，例如都支持新增、编辑、删除页面等基础操作 -- 公用组件库：后台管理和编辑有相似组件（例如：页面列表），后台和H5有相似组件（例如：后台预览和H5显示） -- H5只拆一个项目：没必要再多拆一个后端接口项目（后端预览可通用过来），且页面数据及渲染在编辑后，页面展示结果唯一，以及可能需要较好的 SEO优化，故此使用 SSR 可提升首屏速度，及SEO - -### 关系图 - -![关系图](./images/01_01.png) - -## 数据结构 - -### 数据结构原则 -- 使用 VNode 规范（拓展性好） -- 有序数据使用数组（数组是一组有序的相同类型的数据） -- 尽量使用引用关系，不要冗余（保证数据唯一性） -- 最外层一定要是对象（方便拓展新的顶级参数） - -### 数据结构示例 -```javaScript -{ - page: { - // 与H5页面渲染相关的字段 - id: "加密后的用户id-加密后的创建时间-随机标识码"， - title: "标题", - setting: { - // 页面功能性配置 - }, - style: { - // 页面样式配置 - }, - componets: [ - { - tag: '组件名', - id: '加密后的(用户id+随机标识码)', - flag: '', // 模板类（直接返回子元素），组件类（子元素外层包了一层），内容类（最底层的文本显示） - data: { - // 当前组件的数据 - }, - children: [ - // 子组件：无限套娃 - { - tag: '组件名', - id: '加密后的(用户id+随机标识码)', - flag: '', // 模板类（直接返回子元素），组件类（子元素外层包了一层），内容类（最底层的文本显示） - data: { - // 当前组件的数据 - }, - children: [ - // 子组件 - ], - setting: { - // 组件功能性配置 - }, - attrs: { - style: { - // 组件样式 - } - // 标签属性 - }, - event: { - // 要触发的事件 - } - } - ], - setting: { - // 组件功能性配置 - }, - attrs: { - style: { - // 组件样式 - } - // 标签属性 - }, - event: { - // 要触发的事件 - } - } - ] - - }, - setting: { - // 设置 - }, - status: { - currentComponentId: -1 // 当前选中组件，默认整个页面 - } -} -``` - -### 数据流转关系图 -![数据流转关系图](./images/01_02.png) - -## 拓展性 - -- 新组件怎么拓展 -- 新功能怎么拓展 -- 数据结构怎么拓展 -- 引导讨论拓展性（大家一起讨论，不是某个人单独就能确定的） - -## 开发提效 - -复用性，易用性 - -## 运维保障 - -如何保证系统；线上服务运维，安全，监控，报警，服务拓展性 - -- 公司有自研运维保障服务，要熟悉自研的 -- 公司没有自研运维保障服务，要熟悉常见服务商提供的 diff --git "a/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md" "b/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md" deleted file mode 100644 index 644f45b..0000000 --- "a/docs/pages/yhtx1997/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260.md" +++ /dev/null @@ -1,64 +0,0 @@ -# 笔记 - -## 内容分享目录格式 - -- 标题 -- 讲师 -- 将收获什么 -- 主要内容 -- 关键词 -- 学习方法 -- 注意事项 - -## 架构师原则及思维 - -### 总体思维导向 - -以业务价值为前提（首先要有），提升价值为最终目的（然后增加），并铺垫好今后可能发展的基础（最后发展） - -- 需求 > 设计 > 开发 -- 通过技术手段保证业务的增长 -- 技术为业务服务 -- 设计时判断可行性，不确定就调研 -- 设计时要考虑复杂度，越简单越好，不要过度设计，不要为了设计而设计 -- 脱离业务的架构就是耍流氓。架构师需要深入理解需求、参与需求、看透需求背后业务本质。 - -### 如何深入理解需求 - -三方面考虑：全面、 完整、 闭环 - -1. 拿到需求 -> 理解需求 -> 前因后果（哪里来那里去） -> 整体流程 -> 业务增长 -> 回顾总结 -2. 实际使用场景：从用户角度思考问题，简单好用 -3. 产品及运营角度： 1. 产品第一，运营第二；2. 看重投入产出比，方便做决策 -4. 统计，汇总，分析，基础建设； -5. 风险控制、 稳定性;系统稳定才能保证有人长期使用 - -架构师职责：深入理解需求，用软件把业务模拟出来。保证稳定运行，持续增长。技术永远为业务服务。 - -### 如何做技术设计 - -1. 基于业务 -2. 做方案先不要太过关注细节，要看整体，确定范围都哪些 -3. 拓展性，可行性 -4. 可复用部分 -5. 实现成本（永远选择最简单的实现方案） -6. 不确定就调研 - -#### 技术方案目录示例 - -- 标题 -- 目录 -- 需求 -- 范围 -- 模块设计 -- 数据结构 -- 拓展性保证 -- 开发提效 -- 运维保障 - -#### 数据结构设计思路 - -1. 拓展性字段的考虑，字段名称的统一性，字段尽可能的少 -2. [VNode(将组件或元素用数据描述出来)](https://cn.vuejs.org/v2/guide/render-function.html) -3. 单一数据源存储所有的数据（索引类尽量使用引用，避免多数据源强关联关系） -4. 数据流的周期 diff --git a/docs/pages/yhtx1997/README.md b/docs/pages/yhtx1997/README.md deleted file mode 100644 index 39a8779..0000000 --- a/docs/pages/yhtx1997/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# yhtx1997 - 课程记录 - -请直接看下级目录 \ No newline at end of file diff --git a/docs/pages/yhtx1997/images/01_01.png b/docs/pages/yhtx1997/images/01_01.png deleted file mode 100644 index 4dd8143..0000000 Binary files a/docs/pages/yhtx1997/images/01_01.png and /dev/null differ diff --git a/docs/pages/yhtx1997/images/01_02.png b/docs/pages/yhtx1997/images/01_02.png deleted file mode 100644 index ad3cbdc..0000000 Binary files a/docs/pages/yhtx1997/images/01_02.png and /dev/null differ diff --git "a/docs/pages/yhtx1997/images/\347\254\254\344\270\200\345\221\250\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.drawio" "b/docs/pages/yhtx1997/images/\347\254\254\344\270\200\345\221\250\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.drawio" deleted file mode 100644 index 85722cf..0000000 --- "a/docs/pages/yhtx1997/images/\347\254\254\344\270\200\345\221\250\346\250\241\345\235\227\345\205\263\347\263\273\345\233\276.drawio" +++ /dev/null @@ -1 +0,0 @@ -7Vtbk6I4FP41eewpIATCIyju1NbO1tZ0V83MIy2MsovEQuzW+fWbhADmYqs9irqzvnRyIAG+c3IuX9IAjhab36pkOf9E0qwAjpVuABwDh/5wQP8wybaR2L6LG8msylMh6wWP+Y9MCC0hXedptpJurAkp6nwpC6ekLLNpLcmSqiKv4jYx3XdSyE9dJrNMEzxOk0KXfsnTet5IseP38o9ZPpu3T7Y98cWLpL1ZPHo1T1LyuiOCMYCjipC6aS02o6xg6LW4NOMme652L1ZlZX3MgKftZ/9P/+n509PcRfGXze8vyecHp5nlJSnW4oM/ItoHsQ8CF4QYxB7AGEQ+iDEIYxBNQByAwGdt2ghtEAX85ohJmu+sty14FVmXacaebwEYvc7zOntcJlN29ZXaC5XN60VBezZtijfJqjrb7P1EuwOOmlxGFlldbektYoBru82Q1tpa7F971XWy+a7akBAmwlxm3dw9orQhQD0BYFcDJUupgYkuqeo5mZEyKeJeGsmw9ff8QchSgPV3VtdbsVqSdU1kKFd1Rf7JRqQgFX8mnEwg/XUgs1d4G2L6xmRdTbM3vgyK1ZhUs6x+4749KquyIqnzF/k9zg6/dw34KZTV9isb/wG13W9iOt4Zb6TeVvRuSm3OT6qNDw2rKtnu3LAkeVmvdmb+iwl2FrAvL2DXUiygmbC3h+7N3m8icJ8LRAAjEI52fKEPoghgF8Qua0TeDbpAB1uyCzzSA3qXcoBYg5cjOwGBzRoRBhiCGAL63thm4YbiGLm84YHI2rmEWCQKLR6AKO66Z6Wo1TKgSZHPStqeUvQyuqgihm1Oo3soLizyNG0WfbbKfyTPfCqmKWGpdF4UATRmc9F1vmqW/Ll05Sm68g3Ksg3Kci6lLNs2aItqAnFN0FRgzAM/7YYggFc3dlfGz4U6fsga0thtPZ/SQJpRlJZ7P17kscISu6TuBFCQDAr1YZpNYZNNXc6oDmNyfsN5Qz06ctfDJjBg4xXMi62WSUnbM9ZmKy6gTjAWrjPiCTpdiTT4sMhDLxljUTMTfTFpstt3mycpr/UFSDJ7pJt9MKgntQyelOYPIxbWaC0VxSIAslCGb21BiGmgmksYfMmgyYTtGVDFbD2wJKJJKzxDxLp9kz8U6GRNQE+PdN6g5u3/moqw8a0pwpRf637mP6eI4Nb0YIjkzLtPAI6YQrDDQvO9o45sdBB2d0jYHT3MdtX7AeyHLlY8pVqxDdgNG02dIzLzrExDRqMzkyyS1SqfKlzXJq+/CgxZm/NcDe1Fez3RxTotz9XxYx1ZtjPq2vxYq4H3EmRS7akrs5WdxqNpRJnnKMakrrDmO8Wo3k70iXx5Il+Zp4FBm+dc5FtrcZLbdHnUGvPwhXgc0xbzYeLt7lwrVPYuDO5h0ArG0YnRFnbEOTiaRzTsEM8yWEHqMl6IOV9dgzp1uo9EujfFuY4cE02MKxxUca5BcTwBxHw/L6CqGXFVOlwjGIQ+u/SrKS64Nb0hQzhuKJznqmdvNIm+V6tqZjVPlqyZTGsWOgdIdh6UZOfBgK4pUbxcrmNgDo4EV+XZEKuoAp2zuQLKCkHTBYiroWygBY5CuTtcgDjceh46PLiexn5dF9v2dd7K1luUUrKmvlQk7oewqkhNU1HC/HFgnYkmsYIPgfSToITutUsfeETpcytgqgnGDaBnyNr3obfKy9nR6J0BLY20Nm2qYndItAyJ9Klltlb6jkaWNRrtFuBd0f0N9KX5gQK86zQFuHOoAgdnrLOFUb/3/NAwdTa0lQj73job7tvrP1Bon3qC5kElBgY5QqNXHE+sGDhcIch2XZKSFQPf86JQRMdXEiYPI1N9Z3AyUEX5yMTrYrUDNG2M/X/MRtQeSjFiOhIx6DEbaEqTLxwRrHdFBH/IiODdQ0R4UCKCmjYcTbwqHkQ9gXyueKAGMDREPDBvSqonyj3GIuExp5bGnJPqnJDOM3IKOAp5QW6z204bTiURK9oZnxUywksffvd+Tj0P5xgoZGdQSguazjfdRuor7z0N6OX8I72cc00v5/pnynuRmikNvMHULgmFDI94btRR37rDYGQ4vxp6O4kU3+Bg+1AtGX7vPgMp5ygMeey5UiPa7f/ZqVFv/z9jMP4X \ No newline at end of file diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/01.Node.js\344\270\255\347\273\217\345\205\270\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/01.Node.js\344\270\255\347\273\217\345\205\270\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211.md" deleted file mode 100644 index 7f54018..0000000 --- "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/01.Node.js\344\270\255\347\273\217\345\205\270\347\256\227\346\263\225\357\274\210\344\270\200\357\274\211.md" +++ /dev/null @@ -1,61 +0,0 @@ -### Node.js中经典算法（一） - - - -​ 给定一个路径和目录，返回在这个路径下所有可能存在当前目录的路径组合算法，摘自Node模块算法 - - - -**一、声明一个保存node_modules逆序字符串(seludom_edon)的ASCII编码数组** - -```javascript -// seludom_edon对应的编码 -const nmChars = [ 115, 101, 108, 117, 100, 111, 109, 95, 101, 100, 111, 110 ]; -``` -**二、算法** - -```javascript -Module._nodeModulePaths = function(from) { - // 得到绝对路径 - from = path.resolve(from); - // 如果是根目录，直接返回一个['/node_modules'] - if (from === '/') - return ['/node_modules']; - // 存放所有可能存在node_modules的绝对路径数组 - const paths = []; - // 用户筛选异常路径中可能包含的node_modules目录 - var p = 0; - var last = from.length; // 路径的长度 - // 反向遍历 - for (var i = from.length - 1; i >= 0; --i) { - // 得到最后一个字符 - const code = from.charCodeAt(i); - // CHAR_FORWARD_SLASH === '/' === 47 - // 判断当前的编码是否为47 - if (code === CHAR_FORWARD_SLASH) { - if (p !== nmLen) // 比对完一个目录 判断目录是否为node_modules,如果不是则拼接一个/node_modules路径放入paths数组 - paths.push(from.slice(0, last) + '/node_modules'); - last = i;// 记录当前比对到的字符为'/'的位置(剩余未比对路径的长度+1)，用于拼接上一级目录+'/node_modules' - // 重置当前字符比对node_modules逆序时的相等相等的字符长度 如/a/modules_modules会跳过/a/modules_modules - // 直接加入paths,而是比对到/a后拼接得到一个/a/modules_modules加入paths目录 - p = 0; - } else if (p !== -1) { - if (nmChars[p] === code) { // 判断当前获取的字符是否和node_modules逆序相同，用于匹配node_modules - ++p; - } else { - p = -1; - } - } - } - // 最后追加一个根目录下的node_modules - paths.push('/node_modules'); - return paths; -}; -``` - - - -**示例：'/a/b/c'** - -**结果：['/a/b/c/node_modules','/a/b/node_modules','/a/node_modules','/node_modules']** - diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/02.Node.js\344\270\255\344\275\277\347\224\250ES Module\347\232\204\344\270\244\347\247\215\346\226\271\345\274\217.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/02.Node.js\344\270\255\344\275\277\347\224\250ES Module\347\232\204\344\270\244\347\247\215\346\226\271\345\274\217.md" deleted file mode 100644 index 849a38d..0000000 --- "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/02.Node.js\344\270\255\344\275\277\347\224\250ES Module\347\232\204\344\270\244\347\247\215\346\226\271\345\274\217.md" +++ /dev/null @@ -1,106 +0,0 @@ -### Node.js中使用ES Module的两种方式 - - - -#### 方式一 - -​ 使用webpack对源码进行构建，使用babel对js进行处理使其适应于低版本node - - - -**依赖：** - -**一、package.json** - -```json -"devDependencies": { - "@babel/core": "^7.12.10", - "@babel/plugin-transform-runtime": "^7.12.10", - "@babel/preset-env": "^7.12.11", - "@babel/runtime-corejs3": "^7.12.5", - "babel-loader": "^8.2.2", - "webpack": "^5.11.0", - "webpack-cli": "^4.3.0" -} -``` - -npm scripts - -```json -"scripts": { - "build": "webpack", - "dev": "webpack --watch" -}, -``` - -**二、webpack.config.js配置** - -```javascript -const path = require('path'); -module.exports = { - entry: './bin/core.js', // 入口文件 - mode: 'development', // 开发模式，development => 开发模式 production =》 生产模式 - output: { // 输出 - path: path.join(__dirname, '/dist'), // 输出目录 - filename: 'core.js' // 输出的文件名 - }, - target: 'node', // 默认web，因为需要使用到node原生模块，所以需要更改为node - module: { - rules: [{ // 配置babel-loader - test: /\.js$/, // 处理js - exclude: /(node_modules|dist)/, // 排除node_modules和dist目录 - use: { - loader: 'babel-loader', // 使用babel对js进行低版本兼容处理 - options: { - presets: ['@babel/preset-env'], - plugins: [ - [ - '@babel/plugin-transform-runtime', - { - 'corejs': 3, - 'regenerator': true, - "useESModules": true, - 'helpers': true - }] - ] - } - } - }] - } -} -``` - - - -#### 方式二 - -​ 通过Node原生支持ES Module - -**步骤一、** 更改js文件后缀为.mjs - - - -**步骤二、** import js的时候，如**import** **'./core'**;不能省略后缀名，需要写成**import** **'./core.mjs'**; - -执行：node --experimental-modules ./bin/index.mjs - -**步骤三、** 由于是实验性质特性，所以需要配置开启 --experimental-modules，否则会报如下错误 - -``` -internal/modules/cjs/loader.js:821 - throw new ERR_REQUIRE_ESM(filename); - ^ - -Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/snail/Desktop/code/lego/imooc-test1-dev/imooc-test1/bin/index.mjs - at Object.Module._extensions..mjs (internal/modules/cjs/loader.js:821:9) - at Module.load (internal/modules/cjs/loader.js:643:32) - at Function.Module._load (internal/modules/cjs/loader.js:556:12) - at Function.Module.runMain (internal/modules/cjs/loader.js:839:10) - at internal/main/run_main_module.js:17:11 -``` - -开启后会报一个警告，在node版本v14.x.x以后也支持该特性，不会显示警告信息 - -``` -(node:59215) ExperimentalWarning: The ESM module loader is experimental. -``` \ No newline at end of file diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/03.sim-cli\346\240\270\345\277\203\345\233\276\351\233\206.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/03.sim-cli\346\240\270\345\277\203\345\233\276\351\233\206.md" deleted file mode 100644 index b5a5aaf..0000000 --- "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/03.sim-cli\346\240\270\345\277\203\345\233\276\351\233\206.md" +++ /dev/null @@ -1,18 +0,0 @@ -### 第四周更新 - sim-cli核心图集 - - -**一、sim-cli脚手架架构图** - -![脚手架架构图](./images/020.jpg) - -**二、sim-cli脚手架核心流程图** - -![脚手架核心流程](./images/021.jpg) - -**第四周扩充** - -![脚手架核心流程](./images/030.png) - -**三、sim-cli脚手架依赖示意图** - -![sim-cli脚手架依赖示意图](./images/031.png) diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/04.Node.js\345\244\232\350\277\233\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/04.Node.js\345\244\232\350\277\233\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" deleted file mode 100644 index 838ceb6..0000000 --- "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/04.Node.js\345\244\232\350\277\233\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" +++ /dev/null @@ -1,39 +0,0 @@ -### 第四周作业 - Node源码分析 - -**一、总结：** - -- exec/execFile/spawn/fork的区别 - - * exec：原理是调用/bin/sh -c执行我们传入的shell脚本，只做了参数处理就调用了execFile - - * execFile：原理是直接执行我们传入的file和args，底层调用spawn创建和执行子进程，并建立了回调，一次性将所有的stdout和stderr结果返回 - - * spawn：原理是调用了internal/child_process，实例化了ChildProcess子进程对象，再调用child.spawn创建子进程并执行命令，底层调用了child._handle_spawn执行process_wrap中的spawn方法，此时才创建了子进程。执行过程是异步的，执行完毕后通过**PIPE**进行单向数据通信，通信结束后子进程发起onexit回调，同时Socket会执行close回调 - * fork：原理是通过spawn创建子进程和执行命令，通过setupchannel创建**IPC**通信，用于父子进程之间双向通信 - - - -* data/error/exit/cloes回调的区别 - - * data：主进程读取数据过程中通过onread=onStreamRead发起回调 - - * error：命令执行失败后发起回调 - - * exit：子进程关闭完成后发起回调 - - * close：子进程所有Socket实例全部关闭后发起回调（stdin,stdout,stderr） - - * Stdout close /stderr close：特定的PIPE读取完成后调用onReadableStreamEnd关闭socket时发起的回调 - - - - - -**二、源码分析思维导图** - -**exec：** -![node多进程源码分析 - exec](./images/040.png) - -**execSync：** -![node多进程源码分析 - execSync](./images/041.png) - diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/05.import-local\346\272\220\347\240\201\345\210\206\346\236\220\345\217\212node\346\250\241\345\235\227\345\212\240\350\275\275\346\265\201\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/05.import-local\346\272\220\347\240\201\345\210\206\346\236\220\345\217\212node\346\250\241\345\235\227\345\212\240\350\275\275\346\265\201\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" deleted file mode 100644 index 62b0131..0000000 --- "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/05.import-local\346\272\220\347\240\201\345\210\206\346\236\220\345\217\212node\346\250\241\345\235\227\345\212\240\350\275\275\346\265\201\347\250\213\346\272\220\347\240\201\345\210\206\346\236\220.md" +++ /dev/null @@ -1,16 +0,0 @@ -### 第四周作业扩展 - import-local源码分析及node模块加载流程源码分析 - -**一、总结** - -- 分析入口lerna源码 - -- 模块的完整查找流程只会执行一次，执行过后模块会以模块名/查找路径为key，模块真实路径为value缓存 - -- Module._resolveFilename()为node模块加载流程实现核心方法，require等在此基础是进一步封装 - -- import-local以包名（lerna）和入口文件（cli.js）调用resolveCwd.silent(path.join(pkg.name, relativePath))得到lerna源码中cli.js的绝对路径：/Users/snail/Desktop/code/lego/lerna/core/lerna/cli.js - - -**二、import-local源码分析及node模块加载流程源码分析思维导图** - -![import-local源码分析及node模块加载流程源码分析 - execSync](./images/042.png) diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/README.md" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/README.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/020.jpg" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/020.jpg" deleted file mode 100644 index 7408e8a..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/020.jpg" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/021.jpg" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/021.jpg" deleted file mode 100644 index d4e9ff4..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/021.jpg" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/030.png" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/030.png" deleted file mode 100644 index eb7c946..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/030.png" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/031.png" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/031.png" deleted file mode 100644 index f210564..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/031.png" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/040.png" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/040.png" deleted file mode 100644 index 42c384f..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/040.png" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/041.png" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/041.png" deleted file mode 100644 index 197d2af..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/041.png" and /dev/null differ diff --git "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/042.png" "b/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/042.png" deleted file mode 100644 index 4ee04cd..0000000 Binary files "a/docs/pages/\343\201\204 \347\213\202\345\245\224\347\232\204\350\234\227\347\211\233/images/042.png" and /dev/null differ diff --git "a/docs/pages/\345\205\255\344\270\252\345\221\250/README.md" "b/docs/pages/\345\205\255\344\270\252\345\221\250/README.md" deleted file mode 100644 index 23cabce..0000000 --- "a/docs/pages/\345\205\255\344\270\252\345\221\250/README.md" +++ /dev/null @@ -1,2 +0,0 @@ -# 学生-六个周-简介 -> 2021年的全年学习目标，就围绕着这门课程展开了。 \ No newline at end of file diff --git "a/docs/pages/\345\205\255\347\216\245/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/docs/pages/\345\205\255\347\216\245/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" deleted file mode 100644 index cf54816..0000000 --- "a/docs/pages/\345\205\255\347\216\245/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" +++ /dev/null @@ -1,135 +0,0 @@ -# 需求 - -乐高编辑器 - -# 范围 - -整体设计，架构设计，没有细节 - -## C端用户使用的手机端H5 - -C端用户通过H5端可以通过作品了解详情，并且可以进行转发分享，通过埋点可以了解相关的数据统计。 - -开发方式：SSR - -## B端用户或者个人所使用的PC端编辑器 - -B端用户或者个人可以通过乐高编辑器编辑、发布自己想要的广告海报和宣传页，生成对应的H5链接供C端用户使用 - -开发方式：前后端分离，前端：editor-fe，后端：editor-server - -## 管理员使用的后台管理系统 - -B端用户和个人可以在后台管理系统进行作品的管理，如发布、下线、用户权限的管理、相关数据的统计等， - -开发方式：前后端分离，前端：admin-fe，后端：admin-server - -# 模块设计 - -![image.png](https://cdn.nlark.com/yuque/0/2020/png/10383241/1609284677827-2f17886a-d6c7-4f36-b830-ccb836036fc7.png?x-oss-process=image%2Fresize%2Cw_1500) - -## 特殊的模块重点说明： - -### 组件库 - -独立第三方，同时用于编辑器和H5，因为编辑器画布使用的组件的渲染逻辑和h5完全一致，为了两边一致，应该抽离出来提供给它们使用，从而保证制作的时候和渲染出来的h5保持一致 - - - -### 自研统计服务 - -考虑自研服务前，先列出我们统计所需的功能 - -我们需要实现分渠道统计这个需求，要实现这个需求，我们就需要自定义事件统计 - -- 支持自定义事件统计 -- 支持Open API - -经过调研后，我们发现，市面上第三方服务要么不支持，要么收费很贵，综合对比，只能选择自研一个 - -包括： - -- 日志收集 -- 日志分析 -- Open API - -# 作品的数据结构 - -思路： - -- 每个组件尽量符合vnode规范 -- 用数组来组织数据，有序 -- 尽量使用引用关系，不要冗余 - -vuex store的数据结构 - -``` -{ - work: { - title: '作品标题', - setting: {/* 一些可能的配置项，用不到就先预留 */}, - props: {/* 页面body的一些设置，如背景色 */}, - components: [ - // components要用数组，有序结构 - // 单个node要符合常见的vnode格式 - { - id: 'xxx', // 每个组件都有id，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在children，有时候放在attrs或者props，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - } - ] - } -} -``` - -**vuex getter的数据结构** - -``` -// 图层 -{ - layers: (state) => { - state.work.components.map(c => { - return { - id: c.id, - name: c.name - } - }) - } -} -``` - -# 数据流转关系图 - -见模块设计 - -# 扩展性保证 - -- 扩展组件，数据结构层面 -- 扩展编辑器的功能，例如：组件隐藏、锁定 -- 扩展页面配置，如增加多语言、设置背景 -- 扩展其他功能，如大数据分析和计算等 - -# 开发提效 - -- 脚手架：创建发布 -- 组件平台 - -# 运维保障 - -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性： 流量大时，基于云服务，可以随时扩展机器和配置 - -# \ No newline at end of file diff --git "a/docs/pages/\345\205\255\347\216\245/README.md" "b/docs/pages/\345\205\255\347\216\245/README.md" deleted file mode 100644 index 7f5ed88..0000000 --- "a/docs/pages/\345\205\255\347\216\245/README.md" +++ /dev/null @@ -1,3 +0,0 @@ -# 六玥学习分享 - -2021年的全新征程 diff --git "a/docs/pages/\345\205\255\347\216\245/images/WeChat4f934c68ea20f3d0c2f98491324f12c9.png" "b/docs/pages/\345\205\255\347\216\245/images/WeChat4f934c68ea20f3d0c2f98491324f12c9.png" deleted file mode 100644 index 7f52fbd..0000000 Binary files "a/docs/pages/\345\205\255\347\216\245/images/WeChat4f934c68ea20f3d0c2f98491324f12c9.png" and /dev/null differ diff --git "a/docs/pages/\345\207\271\345\207\270\346\233\274/01-Week01-\344\275\234\344\270\232.md" "b/docs/pages/\345\207\271\345\207\270\346\233\274/01-Week01-\344\275\234\344\270\232.md" deleted file mode 100644 index cd849a6..0000000 --- "a/docs/pages/\345\207\271\345\207\270\346\233\274/01-Week01-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,109 +0,0 @@ -# 整体架构设计 V1.0 - -## 需求 -- [需求稳定](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf) -- [体验地址](https://www.imooc-lego.com/) - -## 范围 -从需求来看，可以简单拆分成以下几个大的模块 - -**B端和编辑器** - -采用前后端分离，因此可以划分为两个代码仓库 -- biz-editor-FE -- biz-editor-server - -通过可视化平台拖拽等方式，可以生成作品，然后发布。 - -**C 端** - -面向用户群体，因此可以高性能(使用SSR)，可以对作品进行分享，提升业务增长。 - -**管理后台** - -- admin-FE -- admin-server - -平台管理，负责作品的审核，发布，以及对用户的管理等待。 - -**独立的组件库** - -提升开发效率和复用，独立的 npm 包，供编辑器端和H5端使用 - -**统计服务** - -单独拆分，以报表等形式展示，可以清晰的看到 PV/UV，用户人数活跃度，增长等。 - -## 需求关系 - -![需求关系](./images/需求关系.png) - -## 模快设计 - -![架构图](./images/架构图.png) - -## 核心数据结构 - -单个组件应该使用vnode规范，使用业界统一规范有助于我们少踩一些坑，并能得到扩展性较强的组件结构。vuex store 的大概结构如下： - - -```js -{ - // 作品 - work: { - title: '作品标题', - setting: { /* 拓展配置： 如配置渠道 */ }, - props: { /* 页面 body 的一些设置，如背景色 */ }, - components: [ - { - id: 'xxx', // 每个组件都有 id ，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - }, - ] - }, - // 画布当前选中的组件 - activeComponentId: 'xxx' -} -``` - -**数据流转核心** - -根据组件的位置生成相应的数据结构 **JSON**，进行入库，然后在 C 端在根据对应的 JSON 对组件进行渲染 - -## 扩展性保证 - -- 预留一些字段， -- 后期可能多人协作开发 -- 自定义事件的加入 - -## 研发提效 - -- 脚手架的搭建，创建发布 -- 组件平台，方便复用 - -## 前端开发流程 - -![前端开发流程](./images/前端开发流程.png) - -## 运维保障 - -- 线上服务和运维服务 -- 安全 -- 监控与报警 -- 服务拓展性: 基于云服务,可以随时拓展机器和配置 - -## 愿景 - -保证业务增长，服务于当前的业务。 \ No newline at end of file diff --git "a/docs/pages/\345\207\271\345\207\270\346\233\274/README.md" "b/docs/pages/\345\207\271\345\207\270\346\233\274/README.md" deleted file mode 100644 index e69de29..0000000 diff --git "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213.png" "b/docs/pages/\345\207\271\345\207\270\346\233\274/images/\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213.png" deleted file mode 100644 index 1bc05d4..0000000 Binary files "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\345\211\215\347\253\257\345\274\200\345\217\221\346\265\201\347\250\213.png" and /dev/null differ diff --git "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\346\236\266\346\236\204\345\233\276.png" "b/docs/pages/\345\207\271\345\207\270\346\233\274/images/\346\236\266\346\236\204\345\233\276.png" deleted file mode 100644 index 367c918..0000000 Binary files "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\346\236\266\346\236\204\345\233\276.png" and /dev/null differ diff --git "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\351\234\200\346\261\202\345\205\263\347\263\273.png" "b/docs/pages/\345\207\271\345\207\270\346\233\274/images/\351\234\200\346\261\202\345\205\263\347\263\273.png" deleted file mode 100644 index c330430..0000000 Binary files "a/docs/pages/\345\207\271\345\207\270\346\233\274/images/\351\234\200\346\261\202\345\205\263\347\263\273.png" and /dev/null differ diff --git "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/1\343\200\201\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" "b/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/1\343\200\201\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" deleted file mode 100644 index 08db09b..0000000 --- "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/1\343\200\201\347\254\254\344\270\200\345\221\250\344\275\234\344\270\232.md" +++ /dev/null @@ -1,78 +0,0 @@ -# 技术方案设计文档 -## 需求 -xxx -## 范围 -* 前端编辑器 - * 用于创建发布作品分享等 - * 开发方式：前后端分离 -* h5 ssr - * 对性能考虑，采用ssr -* 后台管理 - * 用于管理h5内容、 数据分析等 - * 开发方式：前后端分离 - -## 模块设计 -![各个模块关系图](./images/1609135681.jpg) - -前端编辑器、后台管理和h5可以共用一个服务端。 - -前端编辑器和具有相同的样式，将相同样式业务部分独立拆分成共用的组件，方便维护 -## 数据结构 -![数据结构](./images/example.png) - -这个项目可以采用vue+vuex或react+redux实现 - -store中的数据格式 -```js -{ - work: { - title: '作品标题', - setting: {}, // 一些可能的配置项 - props: {}, // 页面的一些信息，如背景等 - components: [ //vnode格式 - { - id: '1', - name: '文本1', - tag: 'text', - attrs: { - fontSize: '20px' - }, - children: ['文本1'] - }, - { - id: '2', - name: '图片1', - tag: 'image', - attrs: { - src: 'xxx.png', - width: '120px' - }, - children: null - } - ] - }, - activeComponentId:0//当前选中组件的索引 -} -``` - -拓展一个图层可以通过计算属性获得当前选中的的图层组件，而不是新创建一个数据。这样做可以减少数据冗余 -## 拓展性 -* 扩展组件，页面数据结构 -* 扩展编辑器功能，如隐藏、锁定等 -* 扩展页面配置 - -## 开发提效 -* 前端工程化 - * 使用脚手架创建项目、自动化部署项目、规范代码 -* 组件管理 - * 使用脚手架工具管理发布组件库 -## 运维保障 -* 线上服务和运维保障 - * 出错后代码可快速回滚 -* 安全 - * 防止xss攻击和csrf攻击 - * 使用https - * 密码等敏感信息加密 -* 监控和报警 - * 发送短信等给管理员 -* 服务拓展性 \ No newline at end of file diff --git "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/README.md" "b/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/README.md" deleted file mode 100644 index c176509..0000000 --- "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/README.md" +++ /dev/null @@ -1,2 +0,0 @@ -# 作业 -### [第一周作业：技术方案设计文档](./1、第一周作业.md) \ No newline at end of file diff --git "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/1609135681.jpg" "b/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/1609135681.jpg" deleted file mode 100644 index 5e074c5..0000000 Binary files "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/1609135681.jpg" and /dev/null differ diff --git "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/example.png" "b/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/example.png" deleted file mode 100644 index 458b434..0000000 Binary files "a/docs/pages/\345\211\215\347\253\257\350\217\234\351\270\237/images/example.png" and /dev/null differ diff --git "a/docs/pages/\345\215\201\344\270\211/01-Week01-\344\275\234\344\270\232.md" "b/docs/pages/\345\215\201\344\270\211/01-Week01-\344\275\234\344\270\232.md" deleted file mode 100644 index 4654f76..0000000 --- "a/docs/pages/\345\215\201\344\270\211/01-Week01-\344\275\234\344\270\232.md" +++ /dev/null @@ -1,54 +0,0 @@ -# 《慕课乐高》 整体架构设计 V1.0 - -## 项目需求 -参见：[需求文档](https://www.yuque.com/books/share/af79538c-09eb-4ddd-bfb7-599816c233bf) - -## 核心功能清单 -| 使用者 | 功能 | -| ---- | ---- | -| B端 | 模板库 | -| | 作品管理 | -| | 编辑器| -| | 数据统计 | -| C端 | 查看作品| -| | 分享作品| -| 管理端 | 用户管理 | -| | 模板管理 | -| | 作品管理 | -| | 数据统计 | - -## 目标 -- 制定 作品制作>发布>展示 整体架构 -- 为下一步详细方案设计提供依据 - -## 范围 -- 根据需求进行整体架构设计，不涉及具体实现。 -- 业务逻辑需自我循环，有始有终，有进有出。 - -## 数据流转关系图 - -![](./images/week01/2.jpg) - -## 模块设计 - -![](./images/week01/1.jpg) - -- 组件库，独立第三方，同时用于编辑器和H5 -- 因需自定义事件统计，需自研统计服务 - - -## 扩展性保证 - -- 扩展组件 -- 扩展编辑器的功能，例如：组件隐藏、锁定 -- 扩展页面的配置 - -## 开发提效 -- 脚手架 -- 组件平台 - -## 运维保障 -- 线上服务和运维服务 -- 备份与安全 -- 监控和报警 -- 服务扩展性：流量大 \ No newline at end of file diff --git "a/docs/pages/\345\215\201\344\270\211/README.md" "b/docs/pages/\345\215\201\344\270\211/README.md" deleted file mode 100644 index bf2cfbd..0000000 --- "a/docs/pages/\345\215\201\344\270\211/README.md" +++ /dev/null @@ -1,4 +0,0 @@ -# 十三 - 学习记录 - -## Week01 -- [Week01-作业-整体架构设计 V1.0](01-Week01-作业.md) diff --git "a/docs/pages/\345\215\201\344\270\211/images/week01/1.jpg" "b/docs/pages/\345\215\201\344\270\211/images/week01/1.jpg" deleted file mode 100644 index 4b3d022..0000000 Binary files "a/docs/pages/\345\215\201\344\270\211/images/week01/1.jpg" and /dev/null differ diff --git "a/docs/pages/\345\215\201\344\270\211/images/week01/2.jpg" "b/docs/pages/\345\215\201\344\270\211/images/week01/2.jpg" deleted file mode 100644 index 5c451b7..0000000 Binary files "a/docs/pages/\345\215\201\344\270\211/images/week01/2.jpg" and /dev/null differ diff --git "a/docs/pages/\345\245\225\345\210\235/01-\346\225\264\344\275\223\346\236\266\346\236\204\350\256\276\350\256\241 V1.0.md" "b/docs/pages/\345\245\225\345\210\235/01-\346\225\264\344\275\223\346\236\266\346\236\204\350\256\276\350\256\241 V1.0.md" deleted file mode 100644 index 589794a..0000000 --- "a/docs/pages/\345\245\225\345\210\235/01-\346\225\264\344\275\223\346\236\266\346\236\204\350\256\276\350\256\241 V1.0.md" +++ /dev/null @@ -1,102 +0,0 @@ -# 架构方案设计文档 - -## 需求背景 - -[https://www.yuque.com/imooc-lego/zlz87z](https://www.yuque.com/imooc-lego/zlz87z) - -## 功能范围 - -本系统作为多身份应用平台，存在多个身份角色，暂时分为三种角色 - -分别为： - -- 前台：C端用户使用的 H5 -- 中台：运营人员使用的业务编辑器 -- 平台：管理员使用的管理系统 - -### H5 端（前台） - -- 使用者和用途：C端普通用户，可以对作品进行操作分享。 -- 开发方式：H5 SSR 的方式。 - -### 业务端（中台） - -- 使用者和用途：运营人员、H5 作品的作者们可以在此产出自己的海报作品，也就是可以创建、发布、编辑作品 -- 开发方式：前后端分离的方式由 editor-fe + editor-server 构成。 - -### 管理系统（平台） - -- 使用者和用途：慕课乐高这个平台的管理员使用的后台管理系统，可以在此对作品进行管理，如用户管理、模板管理、作品管理以及数据统计。 -- 开发方式：前后端分离的方式由 admin-fe + admin-server 构成。 - -## 模块设计 - -## 核心数据结构 - -### 数据结构思路 - -- 每个组件尽量符合 vnode 规范 -- 用数组来组织数据，有序 -- 尽量使用引用关系，不要冗余 - -### 数据结构示例 - -```javascript -{ - work: { - title: '作品标题', - setting: {}, // 一些可能的配置项 扩展性保证 - props: {}, // 页面的一些设置 扩展性保证 - components: [ - { - id: '1', - name: '文本1', - tag: 'text', - attrs: { - fontSize: '20px' - }, - children: ['文本1'] - }, - { - id: '2', - name: '图片1', - tag: 'image', - attrs: { - src: 'xxx.png', - width: '120px' - }, - children: null - } - ] - } -} -``` - - - -**一个核心： B端、C端和管理后台都共用一个数据库。** - -- 创建作品：初始化一个JSON数据 -- 发布作品：给后端发请求，对JSON数据修改一个标记 -- 保存作品：给后端发请求，保存JSON数据 -- C端浏览作品： 获取JSON数据，使用SSR渲染页面 -- 屏蔽作品： 给后端发请求，修改一个标记，C端来判断是否显示 - -## 扩展性保证 - -- 扩展组件 -- 扩展编辑器功能，如锁定、隐藏 -- 扩展页面信息，如增加多语言 -- 扩展其他功能，如大数据计算 - -## 研发提效 - -- 脚手架：创建、发布 -- 组件平台： 减少编写重复代码的时间，对业务组件进行抽象，积累业务组件 - -## 运维保障 - -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性：基于云服务，可以随时扩展机器配置 diff --git "a/docs/pages/\345\245\225\345\210\235/02-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\345\205\245\351\227\250\347\237\245\350\257\206.md" "b/docs/pages/\345\245\225\345\210\235/02-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\345\205\245\351\227\250\347\237\245\350\257\206.md" deleted file mode 100644 index 645325a..0000000 --- "a/docs/pages/\345\245\225\345\210\235/02-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\345\205\245\351\227\250\347\237\245\350\257\206.md" +++ /dev/null @@ -1,83 +0,0 @@ -# 脚手架开发入门知识 - -## 脚手架简介 - -脚手架本质是一个操作系统的客户端，它通过命令行执行，比如： - -``` -vue create project -``` - -上面这条命令由 3 个部分组成： - -- 主命令: `vue` -- command: `create` (类似向脚手架发送一个请求，让脚手架执行一个动作 ) -- command 的 param: `project` - -它表示创建一个 vue 项目，项目的名称为 `project`，以上是最一个较为简单的脚手架命令。 - -## 脚手架的执行原理 - -![image](https://cdn.nlark.com/yuque/0/2021/png/1125546/1609573046689-1f7e0c84-c12b-44be-a2cf-98c5322f2152.png) - - - -脚手架的执行原理如下： - -- 在终端输入`vue create project` -- 终端解析出 `vue` 命令 -- 终端在环境变量中找到 `vue` 命令 -- 终端根据 `vue` 命令链接到实际文件 `vue.js` -- 终端利用 `node` 执行 `vue.js` -- `vue.js` 解析 command / options -- `vue.js` 执行 command / options -- 执行完毕，退出执行 - -## 如何开发一个脚手架 - -> 这里以 `vue-cli` 为例 - -- 开发一个项目文件，该项目中应包含一个 `bin/vue.js` 文件，使用npm进行初始化，打开package.json 配置bin字段，创建一个命令，指向bin/index.js； -- 将这个项目发布到 `npm` -- 将 `npm` 项目上的项目全局安装到 `node` 的 `lib/node_modules` -- 在 `node` 的 `bin` 目录下配置 `vue` 软链接指向 `lib/node_modules/@vue/cli/bin/index.js` - -这样我们使用第一步中bin字段中配置的命令来使用脚手架，如：执行 `vue` 命令的时候就可以找到 `vue.js` 进行相关操作 - - - -## 脚手架的实现原理 - -通过 npm 全局安装一个 脚手架例如 `@vue/cli` 后，会解析 `package.json` 文件中的 bin 配置去在 node 的安装目录下的 bin 目录下，创建一个软连接，连接到软件包中，软连接的名称就是 bin 配置的 key，连接的文件就是 bin 配置的 value， 指向的文件中需要设置 `#! /usr/bin/env node` 来标识文件执行的方法 - - - -- **为什么全局安装@vue/cli后会添加命令为vue?** - -因为安装后会自动在node的bin目录下建立vue的软链接文件, 这个软链接文件指向了`node/lib/node_modules/@vue`对应`vue.js`。 - -- **全局安装 @vue/cli 时发生了什么？** - -执行过程如下： - -1. 解析执行文件到`node/lib/node_modules`下 - -2. 在`node/bin`目录下创建vue的软链接连接到`node/lib/node_modules`对应`vue.js`文件 - -- **执行vue命令时发生了什么** - -参考上面的执行原理 - -- **为什么** **vue** **指向一个** **js** **文件，我们却可以直接通过** **vue** **命令直接去执行它？** - -.主要是 #!/usr/bin/env node 这句话，添加了执行该文件的环境变量。 - -![image.png](https://cdn.nlark.com/yuque/0/2021/png/1125546/1609575823615-9c3e6fc1-2711-4a3d-9366-85b2ae5f2ee1.png) - -``` -#!/usr/bin/env node -#!/usr/bin/node - -//第一种是在环境变量种找 node -//第二种是直接执行 /usr/bin/ 目录下的 node -``` \ No newline at end of file diff --git "a/docs/pages/\345\245\225\345\210\235/03-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\346\265\201\347\250\213\350\257\246\350\247\243.md" "b/docs/pages/\345\245\225\345\210\235/03-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\346\265\201\347\250\213\350\257\246\350\247\243.md" deleted file mode 100644 index f4d3f06..0000000 --- "a/docs/pages/\345\245\225\345\210\235/03-\350\204\232\346\211\213\346\236\266\345\274\200\345\217\221\346\265\201\347\250\213\350\257\246\350\247\243.md" +++ /dev/null @@ -1,21 +0,0 @@ -# 脚手架开发流程详 - -### 开发流程 - -1. 创建项目，使用npm初始化这个项目 -2. 创建脚手架入口文件，第一行写如下代码： - -``` -#!/usr/bin/env node -``` - -1. 配置package.json文件，添加bin属性 -2. 编写脚手架代码 -3. 将脚手架发布到npm - -## 发布到npm的流程 - -1. 打开npm的官网,注册一个账号、创建相关的代码组织库； -3. npm login 输入账号、密码和邮箱进行登录； -4. npm publish 将项目发布上去。 - diff --git "a/docs/pages/\345\245\225\345\210\235/README.md" "b/docs/pages/\345\245\225\345\210\235/README.md" deleted file mode 100644 index 81f7600..0000000 --- "a/docs/pages/\345\245\225\345\210\235/README.md" +++ /dev/null @@ -1,8 +0,0 @@ -# 奕初--学习笔记 - -[整体架构设计 V1.0](./01-整体架构设计 V1.0.md) - -[02-脚手架开发入门知识](./02-脚手架开发入门知识.md) - -[03-脚手架开发流程详解](./03-脚手架开发流程详解.md) - diff --git "a/docs/pages/\345\245\225\345\210\235/images/02-image-01.png" "b/docs/pages/\345\245\225\345\210\235/images/02-image-01.png" deleted file mode 100644 index 1e198ca..0000000 Binary files "a/docs/pages/\345\245\225\345\210\235/images/02-image-01.png" and /dev/null differ diff --git "a/docs/pages/\345\267\246\345\255\220\347\251\206/01-\350\207\252\346\210\221\345\255\246\344\271\240-web\347\254\254\344\270\200\345\221\250\346\234\255\350\256\260.md" "b/docs/pages/\345\267\246\345\255\220\347\251\206/01-\350\207\252\346\210\221\345\255\246\344\271\240-web\347\254\254\344\270\200\345\221\250\346\234\255\350\256\260.md" deleted file mode 100644 index 1e24368..0000000 --- "a/docs/pages/\345\267\246\345\255\220\347\251\206/01-\350\207\252\346\210\221\345\255\246\344\271\240-web\347\254\254\344\270\200\345\221\250\346\234\255\350\256\260.md" +++ /dev/null @@ -1,124 +0,0 @@ -#### 文档资料：https://www.imooc.com/wiki/weban -#### 技术永远都是要为业务服务 -#### 技术是实现业务增长。 - -#### 架构师： -不要过多的关注细节，要看整体，看范围。 -不要确定内容需要调研设计 -设计需要考虑复杂度，越简单越好。 - - -#### 以架构师的思考-分析业务需求 -- 项目-浅层需求 -- 项目-深层需求 -没有业务场景无需求架构设计，需要有具体解决方案才需要有架构设计。 - - -前端研发流程： - - -#### 以架构师的思维来分析需求 - -- 核心点：需要分析潜在需求，需要全局的把握思维，需要为用户增长负责。 -- 全面、完整、闭环-三个关键点。 -- 参考业务理解能力：设计测试一个h5抽奖界面，你作为主要测试负责人，你会具体思考哪些需求点（常规、隐形），以 -- 测试过程中可能会涉及到前端实现的技术方案。 -- -需要通过流程图的完善业务--初级架构师。 - -#### 浅层需求分析 -需求指导设计、设计指导开发 - -#### 深层需求分析 -不容易一眼看出来，但却很重要的。 -架构师-需要深度理解业务，技术要为业务增长负责。 -功能存在必要性，服务业务增长。 -业务闭环，其中统计与统计分销很重要，c端方面渠道分销需要着重统计。 - -#### 架构设计-全局的结构设计 -不同角色，基于角色功能列表，每个功能单个闭环。 - -- pm的关系：统一战线，对业务负责。 - -#### 技术方案设计 -ssr的使用场景需要考虑-b端、c端？需要考虑场景toc 可以考虑ssr使用。 -前后端代码库设计。 - -#### 业务组件库？ -画布什么内容映射到c端h5就是什么样子，render 渲染的逻辑需要一致的。（业务组件-独立第三方内容 -，各个模块都是组件进行应用） - -#### 统计服务 -日常pv/uv,每个页面的访问、uv每个用户的访问 -具体事件-需要一定自定义事件。 - -#### 项目分析与项目之间依赖关系 -- 前端项目 h5ssr项目 -- 后端项目 -- 统计服务-提供openapi内容（面对用户，面对admin） - - -#### 脚手架 ->脚手架-创建项目 ->脚手架-组件 - -#### 数据结构的设计 -数据的存取与抽象内容。 -数据存取结构 -画布与同步修改 -图层？div? --------------------------------------------------------------------------------- -#### 技术方案 -阐述自己的思路，流程，处理方案，流程图，数据流，判断逻辑，库表设计。 -也是工作内容的产出。 --------------------------------------------------------------------------------- -#### 技术方案整体策略 -###### 产品需求 -范围：整体设计，架构设计，没有细节 -###### 模块设计 -模块拆分与关系图，结果 -模块的关键功能，职责（组件功能） -###### 特殊的模块重点说明 -组件库，独立第三方，用于编辑器 -自主研发的统计服务 -做的数据结构 -Vuex的 结构届时 -###### 数据结构关系图 - -###### 扩展性保证 -扩展组件，数据结构层面 -扩张选编辑器的功能 -扩展页面的配置 -（可以进行具体讨论操作，集思广益） - -###### 开发提效 -- 脚手架 -- 组件平台 - -###### 运维平台 -线上服务检测 -安全 -监控和报警 -服务扩展性；流量大 -大厂自己研发，小厂的第三方运维。 - --------------------------------------------------------------------------------- -#### 作业打卡 -- https://imooc-lego.github.io - - - -输入/输出。 -#### 学习的思考：浅层学习看输入，深层学习涮出。 - -##### 技术方案的理解 -技术方案是必要的，在日常项目管理也是督促完成方案设计，同时有具体方案可以与产品，测试进行沟通学习。 -技术方案是沉淀自己思想的途径。 - -#### 技术实现（业务） -h5抽奖为例 -从一个架构师思考： -功能完整性：安全设计需要补充。 - - -#### 网站技术方案流程图 -![流程图](./images/sw.png) \ No newline at end of file diff --git "a/docs/pages/\345\267\246\345\255\220\347\251\206/README.md" "b/docs/pages/\345\267\246\345\255\220\347\251\206/README.md" deleted file mode 100644 index 2528578..0000000 --- "a/docs/pages/\345\267\246\345\255\220\347\251\206/README.md" +++ /dev/null @@ -1,11 +0,0 @@ -## 子穆 --我是一个测试 - - - -## 学习课程目的 -- 了解前端框架设计，方便后软件测试层反推存进更好的与web开发沟通，同时提升自己的前端设计的理解。 - -- （个人非开发，拓展自己知识边界） - -## 札记目录 -+ [第一周学习札记](01-自我学习-web第一周札记.md) diff --git "a/docs/pages/\345\267\246\345\255\220\347\251\206/images/sw.png" "b/docs/pages/\345\267\246\345\255\220\347\251\206/images/sw.png" deleted file mode 100644 index 9241ab5..0000000 Binary files "a/docs/pages/\345\267\246\345\255\220\347\251\206/images/sw.png" and /dev/null differ diff --git "a/docs/pages/\345\275\251\347\254\224/README.md" "b/docs/pages/\345\275\251\347\254\224/README.md" deleted file mode 100644 index b5faadd..0000000 --- "a/docs/pages/\345\275\251\347\254\224/README.md" +++ /dev/null @@ -1,3 +0,0 @@ -# 彩笔 - 学习分享 - -+ [第一周笔记](作业-01-架构方案设计文档.md) diff --git "a/docs/pages/\345\275\251\347\254\224/images/01-img-01.png" "b/docs/pages/\345\275\251\347\254\224/images/01-img-01.png" deleted file mode 100644 index 52a65bd..0000000 Binary files "a/docs/pages/\345\275\251\347\254\224/images/01-img-01.png" and /dev/null differ diff --git "a/docs/pages/\345\275\251\347\254\224/images/02-img-01.png" "b/docs/pages/\345\275\251\347\254\224/images/02-img-01.png" deleted file mode 100644 index 1e198ca..0000000 Binary files "a/docs/pages/\345\275\251\347\254\224/images/02-img-01.png" and /dev/null differ diff --git "a/docs/pages/\345\275\251\347\254\224/images/03-img-01.png" "b/docs/pages/\345\275\251\347\254\224/images/03-img-01.png" deleted file mode 100644 index 173cfbe..0000000 Binary files "a/docs/pages/\345\275\251\347\254\224/images/03-img-01.png" and /dev/null differ diff --git "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-01-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" "b/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-01-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" deleted file mode 100644 index 7da802e..0000000 --- "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-01-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241\346\226\207\346\241\243.md" +++ /dev/null @@ -1,131 +0,0 @@ -# 慕课乐高架构方案设计文档 - -## 需求 -https://www/yuque.com/imooc-lego/zlz87z - -## 范围 -根据需求分化出了三个方面的内容：用户端(前台)、企业端(中台)、后台管理(后台) - -### 用户端(前台) -主要用来展示通过编辑器编辑出来的 H5 海报。 -由于 移动端 性能上的局限，所以可以考虑使用 SSR -1. H5-server - -### 企业端(中台) -主要提供可产出H5海报模板的功能，以及一系列相关的功能 -1. biz-editor-fe -2. biz-editor-server - -### 后台管理(后台) -主要用来管理 企业端的用户 以及 海报模板 ，掌控全局 -1. admin-fe -2. admin-server - -## 模块设计 -如下图所示 -![](./images/01-img-01.png) - -其中因为 用户端 和 企业端都会用到 组件库 所以可以独立出一个组件平台。 -统计服务由于第三方要么是功能不齐全，要么是性价比很低，因此考虑自研一个统计服务。 - -## 核心数据结构 -``` - { - scene: { - name: '场景名称', - setting: {}, // 扩展性保证 - options: {}, // 扩展性保证 - }, - components: [ - { - id: '1', - name: '组件名1', - type: 'text', - attr: { - w: 50, - h: 50, - z: 1, - }, - options: { - value: 'xxx' - color: 'red', - fontSize: 16 - }, - formatter: { // 扩展性保证 - isShow: '', - isControl: '', - isLook: '' - } - }, - { - id: '2', - name: '组件名2', - type: 'image', - attr: { - w: 50, - h: 50, - z: 1, - }, - options: { - src: 'xxx.png', - alt: 'xxx' - }, - formatter: { // 扩展性保证 - isShow: '', - isControl: '', - isLook: '' - } - } - ] - } -``` - -## 扩展性保证 -保证编辑器未来的扩展性 - -### 场景的扩展性 -``` -scene: { - name: '场景名称', - setting: {}, // 扩展性保证 - options: {}, // 扩展性保证 -} -``` - -### 组件的扩展性 -``` -{ - id: '1', - name: '组件名1', - type: 'text', - attr: { - w: 50, - h: 50, - z: 1, - }, - options: { - value: 'xxx' - color: 'red', - fontSize: 16 - }, - formatter: { // 扩展性保证 - isShow: '', - isControl: '', - isLook: '' - } -}, -``` - -## 开发提效 -脚手架 -组件平台 - -### 脚手架 -可以开发快速创建 项目 原型的脚手架，来省去配置项目初始化的时间。 -可以开发快速发布 项目 上线的脚手架，来省去发布项目的时间 - -### 组件平台 -搭建业务组件平台，来减少代码的重复率，对业务组件进行抽象，积累业务组件，提升开发效率，减少编写重复代码的时间 - -## 运维保障 -... diff --git "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-02-\350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" "b/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-02-\350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" deleted file mode 100644 index 3c98095..0000000 --- "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-02-\350\204\232\346\211\213\346\236\266\346\236\266\346\236\204\350\256\276\350\256\241\345\222\214\346\241\206\346\236\266\346\220\255\345\273\272.md" +++ /dev/null @@ -1,132 +0,0 @@ -# 脚手架架构设计和框架搭建 - -## 脚手架的作用 - -开发脚手架的核心目标是：提升前端研发效能 - -## 脚手架的核心价值 - -1. 自动化：项目重复代码拷贝/git 操作/发布上线操作 -2. 标准化：项目创建/git flow/发布流程/回滚流程 -3. 数据化：研发过程系统化、数据化，使得研发过程可量化 - -## 和自动化构建工具的区别 - -1. 不满足需求：jenkins、travis 通常在 git hooks 中触发，需要在服务端执行，无法覆盖研发人员本地的功能，如：创建项目自动挡化、本地 git 操作自动化等 -2. 定制负责：jenkins、travis 定制过程需要开发插件，其过程较为复杂，需要使用 java 语音，对前端开发不够友好 - -## 入门 - -脚手架本质上来说，是一个操作系统的客户端。 -它通过命令行执行： -``` -vue create vue-test-app -``` -![](./images/02-img-01.png) -### 脚手架的实现原理 - -通过 npm 全局安装一个 脚手架例如 `@vue/cli` 后，会解析 `package.json` 文件中的 bin 配置去在 node 的安装目录下的 bin 目录下，创建一个软连接，连接到软件包中，软连接的名称就是 bin 配置的 key，连接的文件就是 bin 配置的 value，value 指向的文件中需要设置 `#! /usr/bin/env node` 来标识文件执行的方法 - -### 基于 lerna 搭建自己的脚手架并且发布到 npm -安装方法 - -``` - npm install -g @weilai-cli/core -``` -执行命令 -``` - weilai-cli -h -``` - -## 进阶 - -### 理解 yargs 常用 API 和 开发流程 - -``` -const cli = yargs(); // 创建一个基础脚手架 - - cli - // 配置 使用提示 - .usage('Usage: weilai-test-cli [command] ') - // 配置 脚手架最少要接收一个命令 - .demandCommand(1, "最少需要输入一个命令。 通过 --help 查看所有可用的命令和选项。") - // 配置 命令输入错误的时候可以根据输入 推荐合适的命令 - .recommendCommands() - // 配置 严格的无法识别的命令也将报告为错误 - .strict() - // 配置 发生故障时执行的方法 - .fail((err, msg) => { - console.log(err) - }) - // 配置 help 和 version 的别名 - .alias('h', 'help') - .alias('v', 'version') - // 配置 容器宽度 - .wrap(cli.terminalWidth()) - // 配置 收尾的文字 - .epilogue( - dedent` - 哎哟，不错哟！ - 小伙汁 - ` - ) - // 配置 gameStart 配置 类型为布尔值，描述是五黑走起，别名是 g - .options({ - gameStart: { - type: 'boolean', - describe: '五黑走起', - alias: 'g' - } - }) - .option('gameEnd', { - type: 'string', - // hidden: true, - describe: '冲冲冲', - alias: 'r' - }) - // 配置 分组 把 gameStart 分配到 召唤师峡谷 这个组里面 - .group(['gameStart'], '召唤师峡谷:') - .group(['gameEnd'], '慕课网:') - // 配置 命令 当执行 init [name] 命令的时候一系列的行为 - .command( - 'init [name]', 'Do init a project', - (yargs) => { - // 子命令 - yargs - .option('name', { - type: 'string', - describe: 'Name of aproject', - alias: 'n' - }) - }, - (argv) => { - // 行为 - console.log(argv) - } - ) - // 配置 命令的第二种方法 - .command({ - command: 'list', - aliases: ['ls', 'la', 'll'], - describe: 'List local packages', - builder: (yargs) => { - - }, - handler: (argv) => { - console.log(argv) - } - }) - // 解析参数 - .parse(argv, context) -``` - -### 理解 lerna 实现原理 - -已经忘掉了😃 -准备二刷三刷 - -### import-local 实现原理，理解 require.resolve 实现原理 - -已经忘掉了😃 -准备二刷三刷 - diff --git "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-03-\350\204\232\346\211\213\346\236\266\346\240\270\345\277\203\346\265\201\347\250\213\345\274\200\345\217\221.md" "b/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-03-\350\204\232\346\211\213\346\236\266\346\240\270\345\277\203\346\265\201\347\250\213\345\274\200\345\217\221.md" deleted file mode 100644 index 0ecd7b9..0000000 --- "a/docs/pages/\345\275\251\347\254\224/\344\275\234\344\270\232-03-\350\204\232\346\211\213\346\236\266\346\240\270\345\277\203\346\265\201\347\250\213\345\274\200\345\217\221.md" +++ /dev/null @@ -1,204 +0,0 @@ -# 脚手架核心流程开发 - -## 标准 - -### 绘制 imooc-cli 脚手架架构设计图 -![](./images/03-img-01.png) - -### 实现 imooc-cli 脚手架准备过程代码 -``` -try { - checkPkgVersion() - checkNodeVersion() - checkRoot() - checkUserHome() - checkInputArgs() - checkEnv() - await checkGlobalUpdate() -} catch(error) { - log.error(error.message) -} - -// 检查是否需要全局更新 -async function checkGlobalUpdate() { - const currentVersion = pkg.version - const npmName = pkg.name - const lastVersions = await getNpmSemverVersions(npmName, currentVersion) - if(lastVersions && semver.gt(lastVersions, currentVersion)) { - log.warn('更新提示', colors.yellow( - dedent` - 请更新 ${npmName} - 当前版本: ${currentVersion} - 最新版本: ${lastVersions} - 更新命令: npm install -g ${npmName}@${lastVersions} - `)) - } -} - -// 环境变量检查 -function checkEnv() { - const dotenv = require('dotenv') - const dotenvPath = path.resolve(userHome, '.env') - if(pathExists(dotenvPath)) { - config = dotenv.config({ - path: dotenvPath - }) - } - - createDefaultConfig() - - log.verbose('环境变量:', process.env.CLI_HOME_PATH) -} - -// 创建默认的环境变量配置 -function createDefaultConfig() { - const cliConfig = { - home: userHome - } - - process.env.CLI_HOME_PATH = cliConfig['cliHome'] = process.env.CLI_HOME - ? path.join(userHome, process.env.CLI_HOME) - : path.join(userHome, constant.DEFAULT_CLI_HOME) -} - -// 入参检查 -function checkInputArgs() { - args = require('minimist')(process.argv.slice(2)) - checkArgs(args) -} - -// debug 模式判断 -function checkArgs(args) { - log.level = process.env.LOG_LEVEL = args.debug - ? 'verbose' - : 'info' -} - -// 检查 用户主目录 -function checkUserHome() { - if(!userHome || !pathExists(userHome)) { - throw new Error(colors.red('当前登陆用户主目录不存在')) - } -} - -// 检查登陆帐号的级别 以及 降级 -function checkRoot() { - require('root-check')() -} - -// 检查 node 的版本 -function checkNodeVersion() { - const currentNodeVersion = process.version - const lowestNodeVersion = constant.LOWEST_NODE_VERSION - if(!semver.gte(currentNodeVersion, lowestNodeVersion)) { - throw new Error(colors.red(`weilai-cli 需要安装 v${lowestNodeVersion} 以上版本的 Node.js`)) - } - log.notice('node', process.version) -} - -// 检查 package 的版本 -function checkPkgVersion() { - log.notice('cli', pkg.version) -} -``` - -### 通过 commander 框架实现一个脚手架，包含自定义 option 和 command 功能 -``` -#! /usr/bin/env node - -const commander = require('commander') - -const pkg = require('../package.json') - -// 获取 commander 的单例 -// const { program } = commander - -// 手动实例化一个 commander 实例 -const program = new commander.Command() - -program - .name(Object.keys(pkg.bin)[0]) - .usage(' [options]') - .version(pkg.version) - .option('-d, --debug', '是否开启调试模式', false) - .option('-e, --env ', '获取环境变量名称', false) - -// command 注册命令 -program - .command('clone [destination]') - .description('clone a repository') - .option('-f, --force', '是否强制拷贝') - .action((source, destination, cmdObj) => { - console.log('do clone', source, destination, cmdObj.force) - }) - - -// addCommand 注册子命令 -const service = new commander.Command('service') -service - .command('start [port]') - .description('start service at some port') - .action((prot, cmdObj) => { - console.log('do server start', prot) - }) -service - .command('stop') - .description('stop service') - .action(() => { - console.log('do server stop') - }) - - -program.addCommand(service) - -// program -// .command('install [name]', 'install package', { -// executableFile: 'weilai-cli', -// // isDefault: true, -// // hidden: true -// }) -// .alias('i') - - -// 高级定制：自定义help信息 -// console.log(program.outputHelp()) -// console.log(program.helpInformation()) -program.helpInformation = () => '' -program.on('--help', () => { - console.log('your help information') -}) - -program.on('option:debug', () => { - console.log('debug') -}) - -program.on('command:*', (obj) => { - console.log('未知的命令', obj) - const availableCommands = program.commands.map(cmd => cmd.name()) - console.log('可用的命令', availableCommands) -}) - - -// program -// .arguments(' [options]') -// .description('test command', { -// cmd: 'command to run', -// options: 'options for command' -// }) -// .action((cmd, options) => { -// console.log(cmd, 'arguments') -// }) - -program - .parse(process.argv) - -// console.log(program.debug) -// console.log(program.env) -// console.log(program.opts()) -``` -## 进阶 - -### 通过 webpack 和 原生两种方式实现 node 对 ES Module 的支持 - -1. 通过配置 webpack 来实现模块化(ES Module)，并且 使用 babel 进行编译，来兼容低版本的 node -2. 设置文件后缀名为 xxx.mjs , node 版本小于 14 需要加上 --experimental-modules 来对 mjs 进行支持 diff --git "a/docs/pages/\347\202\271\347\202\271/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" "b/docs/pages/\347\202\271\347\202\271/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" deleted file mode 100644 index f6aff14..0000000 --- "a/docs/pages/\347\202\271\347\202\271/01-\351\234\200\346\261\202\345\210\206\346\236\220\345\222\214\346\236\266\346\236\204\350\256\276\350\256\241.md" +++ /dev/null @@ -1,117 +0,0 @@ -### 需求分析 -##### 熟悉产品需求 -- 以架构师的思维分析需求，不能只停留在表面实现需求，要考虑怎么实现能给业务带来增长 -- 全局思维、整体思维、闭环思维，不能只考虑自己，要全局考虑整个团队，要做到有输出、有输入、有结果 - -##### 浅层需求 -- 分析表面需要实现的功能，如登录、创建作品、编辑、发布、访问作品等 - -##### 深度需求 -> 通过浅层需求分析，进一步分析需求 - -- 作品的管理 -- 作品统计 -- 作品发布 -- h5 -- 后台管理 - -以上需求还有很多细节点，就不一一阐述 - -##### 需求分析总览图 -![](./images/1.png) - -### 架构设计 -##### 需要的项目 -![](./images/2.png) - -**独立业务组件库** - -编辑器画布使用的组件和渲染逻辑和h5完全一致，为了两边一致，应该抽离出来提供给它们使用，从而保证制作的时候和渲染出来的h5保持一致 - -##### 自研统计服务 -考虑自研服务前，先列出我们统计所需的功能 - -我们需要实现分渠道统计这个需求，要实现这个需求，我们就需要自定义事件统计 - -- 支持自定义事件统计 -- 支持Open API - -经过调研后，我们发现，市面上第三方服务要么不支持，要么收费很贵，综合对比，只能选择自研一个 - -包括： - -- 日志收集 -- 日志分析 -- Open API - -##### 各个项目之间关系 -![](./images/3.png) - -##### 作品数据结构设计 - -思路： -- 每个组件尽量符合vnode规范 -- 用数组来组织数据，有序 -- 尽量使用引用关系，不要冗余 - -**vuex store** -```javascript -{ - work: { - title: '作品标题', - setting: {/* 一些可能的配置项，用不到就先预留 */}, - props: {/* 页面body的一些设置，如背景色 */}, - components: [ - // components要用数组，有序结构 - // 单个node要符合常见的vnode格式 - { - id: 'xxx', // 每个组件都有id，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在children，有时候放在attrs或者props，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - } - ] - } -} -``` - -**vuex getter** -```javascript -// 图层 -{ - layers: (state) => { - state.work.components.map(c => { - return { - id: c.id, - name: c.name - } - }) - } -} -``` - -##### 扩展性保证 -- 扩展组件 -- 扩展编辑器功能、如锁定、隐藏 -- 扩展页面信息，如增加多语言 -- 扩展其他功能，如大数据分析和计算等 - -##### 研发效率 -- 脚手架：创建发布 -- 组件平台 - -##### 运维保障 -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性： 基于云服务，可以随时扩展机器和配置 \ No newline at end of file diff --git "a/docs/pages/\347\202\271\347\202\271/README.md" "b/docs/pages/\347\202\271\347\202\271/README.md" deleted file mode 100644 index c4a0b86..0000000 --- "a/docs/pages/\347\202\271\347\202\271/README.md" +++ /dev/null @@ -1,5 +0,0 @@ -# 🐈点点 - 作业 - -## 第一周 -- [01-需求分析和架构设计](01-需求分析和架构设计.md) - diff --git "a/docs/pages/\347\202\271\347\202\271/images/1.png" "b/docs/pages/\347\202\271\347\202\271/images/1.png" deleted file mode 100644 index 2df8457..0000000 Binary files "a/docs/pages/\347\202\271\347\202\271/images/1.png" and /dev/null differ diff --git "a/docs/pages/\347\202\271\347\202\271/images/2.png" "b/docs/pages/\347\202\271\347\202\271/images/2.png" deleted file mode 100644 index 468c461..0000000 Binary files "a/docs/pages/\347\202\271\347\202\271/images/2.png" and /dev/null differ diff --git "a/docs/pages/\347\202\271\347\202\271/images/3.png" "b/docs/pages/\347\202\271\347\202\271/images/3.png" deleted file mode 100644 index a19cf2a..0000000 Binary files "a/docs/pages/\347\202\271\347\202\271/images/3.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/docs/pages/\351\203\255\344\272\214\350\233\213/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" deleted file mode 100644 index 1efe80b..0000000 --- "a/docs/pages/\351\203\255\344\272\214\350\233\213/01-\347\254\254\344\270\200\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" +++ /dev/null @@ -1,100 +0,0 @@ -# 慕课乐高架构方案设计文档 - -## 需求（背景） - -[https://www/yuque.com/imooc-lego/zlz87z](https://www/yuque.com/imooc-lego/zlz87z) - -## 范围 - -三种角色对应三个方面（平台）：普通用户使用的 H5（前台）、企业或者说 H5 作者们使用的编辑器（中台）、平台管理员使用的管理系统（后台）。 - -### 普通用户使用的 H5 端（C端） - -- 使用者和用途：普通用户，也就是作品的受众，可以对作品进行分享，对业务增长负责。 -- 开发方式：H5 SSR 的方式。 - -### 企业/作者们使用的 B 端（B端） - -- 使用者和用途：企业、H5 作品的作者们可以在此产出自己的海报作品，也就是可以创建、发布、编辑作品 -- 开发方式：前后端分离的方式由 editor-fe + editor-server 构成。 - -### 平台管理员使用的管理系统（后台） - -- 使用者和用途：慕课乐高这个平台的管理员使用的后台管理系统，可以在此对作品进行管理，如用户管理、模板管理、作品管理以及数据统计（统计这部分也会用到第三方，比如百度统计）。 -- 开发方式：前后端分离的方式由 admin-fe + admin-server 构成。 - -## 模块设计 - -如下图所示（初次接触，画的不好，多多海涵） -![二蛋画的模块设计图](./images/erdan_week1_01.png) - -## 核心数据结构 - -### 数据结构思路 - -- 每个组件尽量符合 vnode 规范 -- 用数组来组织数据，有序 -- 尽量使用引用关系，不要冗余 - -### 数据结构示例 - -```javascript -{ - work: { - title: '作品标题', - setting: {}, // 一些可能的配置项 扩展性保证 - props: {}, // 页面的一些设置 扩展性保证 - components: [ - { - id: '1', - name: '文本1', - tag: 'text', - attrs: { - fontSize: '20px' - }, - children: ['文本1'] - }, - { - id: '2', - name: '图片1', - tag: 'image', - attrs: { - src: 'xxx.png', - width: '120px' - }, - children: null - } - ] - } -} -``` - -### 数据关系流转 -![二蛋画的数据流转图](./images/erdan_week1_02.png) - -**一个核心： B端、C端和管理后台都共用一个数据库。** - -- 创建作品：初始化一个JSON数据 -- 发布作品：给后端发请求，对JSON数据修改一个标记 -- 保存作品：给后端发请求，保存JSON数据 -- C端浏览作品： 获取JSON数据，使用SSR渲染页面 -- 屏蔽作品： 给后端发请求，修改一个标记，C端来判断是否显示 - -## 扩展性保证 - -- 扩展组件 -- 扩展编辑器功能，如锁定、隐藏 -- 扩展页面信息，如增加多语言 -- 扩展其他功能，如大数据计算 - -## 研发提效 - -- 脚手架：创建、发布 -- 组件平台： 减少编写重复代码的时间，对业务组件进行抽象，积累业务组件 - -## 运维保障 - -- 线上服务和运维服务 -- 安全 -- 监控和报警 -- 服务扩展性：基于云服务，可以随时扩展机器配置 diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" "b/docs/pages/\351\203\255\344\272\214\350\233\213/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" deleted file mode 100644 index 5456113..0000000 --- "a/docs/pages/\351\203\255\344\272\214\350\233\213/02-\347\254\254\344\272\214\345\221\250\347\254\224\350\256\260\345\222\214\344\275\234\344\270\232.md" +++ /dev/null @@ -1,264 +0,0 @@ -# 脚手架架构设计和框架搭建 - -## 站在前端研发的角度，分析开发脚手架的必要性 - -### 脚手架核心价值是将研发过程 -- 自动化：项目重复代码拷贝/git操作/发布上线操作 -- 标准化：项目创建/git flow/发布流程/回滚流程 -- 数据化：研发过程数据化、系统化，使得研发过程可量化 - -### 自研脚手架和自动化构建工具的区别 -**市面上已经有了如Jenkins,travis等自动化构建工具，我们为什么还要自研脚手架？** -- 不满足需求：jenkins/travis通常需要在git hooks中触发，在服务端执行，无法覆盖研发人员本地的功能，如创建项目自动化，git操作自动化 -- 定制复杂：jenkins/travis等工具的定制过程需要开发插件，要用到Java语言，对前端开发人员并不友好 - -## 从使用的角度来理解什么是脚手架 - -### 脚手架简介 -其实脚手架的实质就是一个操作系统上的客户端。它通过命令行来执行，下面我们用一个常见的例子来举例： -```javascript -vue create project -``` -上面这条看似简单常见的命令实际上由3个部分组成： -- 主命令：vue -- command：create -- command的param：project -这条命令大家应该都很常见了，它表示创建一个vue项目，项目的名字叫project。 - -### 脚手架执行原理 -![二蛋画的脚手架执行原理图](./images/erdan_week2_01.png) - -**脚手架执行原理如下** -- 在终端输入`vue create project` -- 终端解析出vue -- 在环境变量中找到vue命令 -- 终端根据vue命令链接到实际文件vue.js -- 终端利用node执行vue.js -- vue.js解析command或者param -- vue.js执行command -- 执行完毕，退出执行 - -### 从应用的角度看 如何开发一个脚手架 -1. 新建一个文件夹（项目）使用npm进行初始化，打开package.json 配置bin字段，创建一个命令，指向bin/index.js； -2. 将这个项目发布到npm； -3. 全局安装这个脚手架； -4. 使用第一步中bin字段中配置的命令来使用脚手架即可。 - -## 脚手架开发流程详解 - -### 开发流程 -1. 创建项目，使用npm初始化这个项目 -2. 创建脚手架入口文件，第一行写如下代码： -```shell -#!/usr/bin/env node -``` -3. 配置package.json文件，添加bin属性 -4. 编写脚手架代码 -5. 将脚手架发布到npm - -### 使用流程 -1. 安装脚手架：npm install -g imooc-test-erdan -2. 使用脚手架：imooc-test-erdan / imooc-test-erdan -h - -### 把库发布到npm的流程 -1. 打开[npm的官网](https://www.npmjs.com/),注册一个账号； -2. 打开邮箱，进行验证； -3. npm login 输入账号、密码和邮箱进行登录； -4. npm publish 将项目发布上去。 - -## 加深对npm link的使用和理解 - -**新建&连接本地脚手架** - -```javascript -mkdir erdan-test -cd erdan-test -npm init -y -mkdir bin -cd bin -touch index.js -npm link -``` -**新建本地库文件并在本地脚手架中使用** -```javascript -mkdir erdan-test-lib -npm init -y -npm link -cd erdan-test -npm link erdan-test-lib -``` -**取消链接本地库文件** -```javascript -cd erdan-test-lib -npm unlink -cd erdan-test -# link存在的情况下执行下面这行 -npm unlink erdan-test-lib -# link不存在的情况下删除node_modules -# 从安装发布到远程仓库上的库文件 -npm i -S erdan-test-lib -``` -## Lerna学习笔记 - -### lerna简介 -我们在使用lerna之前，要知道我们为什么要用lerna，我们不妨看看原生开发脚手架存在什么痛点。 - -**重复操作** -- 多package本地link -- 多package安装依赖 -- 多package代码提交 -- 多package单元测试 -- 多package代码发布 - -**版本一致性** -- 发布时的版本一致性问题 -- 发布后相互依赖版本升级问题 - -有了上面这些原生开发脚手架的痛点以后，就有了lerna这个优秀的工具。用一句话概述lerna就**是一个优化基于git+npm的多package项目的管理工具。** - -lerna的优势就是可以**大幅减少重复操作、提升操作的标准化。** - -lerna是架构优化的产物，lerna的产生揭示了一个架构真理：**项目复杂度提升以后，就需要对项目进行架构优化，架构优化的目的往往都是以效能为核心。** - -### lerna开发脚手架流程图 -![二蛋画的脚手架执行原理图](./images/erdan_week2_02.png) - -### lerna实操 -**使用lerna搭建脚手架框架** -```javascript -mkdir tangmen-cli-dev -npm init -y -npm install -g lerna (// 全局安装) -npm install lerna -lerna -v ( // 输出版本号说明安装成功) -lerna init (// 初始化lerna项目，会创建一个lerna.json) -// 经过上面init这一步，会初始化git仓库，再搞一个.gitignore 配置一些不用上传的目录 -git remote xxx (// 添加远程仓库) -lerna create core (// 创建一个package) -lerna create utils(// 又创建了一个package) -lerna add (// 批量给两个package都安装依赖) -lerna publish (// 发布项目) -``` - -**lerna核心操作** - -初始化lerna -```javascript -lerna init -``` -创建package -```javascript -lerna create core -// 在这一步可以给package起一个别名 为了防止和npm上其它包重名 可以加个前缀@ -// 这里要注意的是后面想成功发布这种带前缀的私包的话，需要先在npm上创建一个组织 -// 举个栗子：如果你给这个包起的名字叫@tangmen-cli-dev/core -// 那你先要建一个叫tangmen-cli-dev的组织 -``` -安装依赖 -```javascript -lerna add mocha --dev (// 给所有package都安装) -lerna add mocha package/core --dev (给core这个package安装依赖) -``` -清空依赖 -```javascript -lerna clean -// 手动从package的package.json中删除依赖 -``` -恢复依赖 -```javascript -lerna bootstrap -``` -执行脚本 -```javascript -lerna exec -- rm -rf node_modules (// 在所有package中都执行) -lerna exec --scope @tangmen-cli-dev/core --rm -rf node_modules (// 在特定package中执行脚本) -``` -执行 npm script 命令 -```javascript -lerna run test (// 在所有package中都执行) -lerna run --scope @tangmen-cli-dev/core test (// 在特定package中执行脚本) -``` -发布项目 -```javascript -lerna publish -``` - -## 学习使用lerna发布项目时候遇到的几个小坑 -1. 有没有登录npm -2. tag重复问题 -3. 加了@前缀的包默认是private的，要在package.json中改变一下publishConfig -4. 如果发布的是带前缀@的包，一定一定记得要先在npm上穿件一个group -5. package-lock.json不能添加在.gitignore中 - -## 作业 - -**已经发布到npm上的简易脚手架** -1. imooc-test-erdan -2. erdan-test-lib -3. @tangmen-cli-dev/core -4. @tangmen-cli-dev/utils - -### 理解Yargs常用API和开发流程 -1. **Yargs常用API** - - Yargs.usage(提示脚手架用法) - - Yargs.strict(开启以后可以报错提示) - - Yargs.demandCommand(规定最少传几个command) - - Yargs.recommendCommands(在输入错误command以后可以给你推荐最接近的正确的command) - - Yargs.alias(起别名) - - Yargs.options(定义多个option) - - Yargs.option(定义option) - - Yargs.fail(错误处理方法) - - Yargs.group(分组) - - Yargs.wrap(命令行工具的宽度) - - Yargs.epilogue(命令行工具底部的提示) - -2. **Yargs开发流程** - - 脚手架初始化(将process.argv当参数传递给Yargs()) - - 脚手架命令注册(Yargs.command) - - 脚手架参数解析(Yargs.parse) - -### 理解lerna实现原理 -- 通过import-local来优先调用本地lerna命令 -- 通过Yargs初始化脚手架，然后注册全局属性，再注册命令，最后通过parse方法解析参数 -- lerna命令注册时需要传入build和handler两个函数，build用来注册命令专属的options，handler用来处理命令的业务逻辑 -- lerna通过配置npm本地依赖的方式进行本地开发，具体写法是在package.json中写入：file:your-locale-module-path,在lerna publish的时候会自动替换路径 - -### Node.js模块路径解析流程 -Node.js项目模块路径解析是通过`require.resolve`方法来实现的 - -`require.resolve`就是通过`Module._resolveFileName`来实现的 - -`require.resolve`实现原理： - -- `Module._resolveFileName`核心的3个点: - - 1.判断是否为内置模块 - - 2.通过`Module._resolveLookupPaths`生成node_modules可能存在的路径 - - 3.通过`Module._findPath`查询模块的真实路径 - -- `Module._findPath`核心流程有4点: - - 1.查询缓存(将request和paths通过x00合并成cacheKey) - - 2.遍历paths,将paths与request组成文件路径basePath - - 3.如果basePath存在则调用`fs.realPathSync`获取真实路径 - - 4.将真实路径缓存到`Module._pathCache`(key就是前面生成的cacheKey) - -- `fs.realPathSync`核心流程有3点: - - 1.查询缓存（缓存的key为p，也就是上面Module._findPath生成的路径） - - 2.从左往右遍历路径字符串遇到/时，拆分路径，判断该路径是否为软连接，如果是软连接则查询其真实链接，并生成新路径P，然后继续往后遍历 - - 3.遍历完成得到对应的真实路径，此时会将原始路径original作为key,真实路径保存为value保存到缓存中 - -- `require.resolve.paths`等价于`Module._resolveLoopupPaths`,该方法用于获取所有node_modules可能存在的路径 -- `require.resolve.paths`的实现原理: - - 1.如果路径为根目录，直接返回['/node_modules'] - - 2.否则将路径字符串从后往前遍历，遇见/时，拆分路经，在后面加上node_modules,并传入一个paths数组，直至查询不到/后返回paths数组 diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/03-\347\254\254\344\270\211\345\221\250\345\255\246\344\271\240\347\254\224\350\256\260.md" "b/docs/pages/\351\203\255\344\272\214\350\233\213/03-\347\254\254\344\270\211\345\221\250\345\255\246\344\271\240\347\254\224\350\256\260.md" deleted file mode 100644 index 600a597..0000000 --- "a/docs/pages/\351\203\255\344\272\214\350\233\213/03-\347\254\254\344\270\211\345\221\250\345\255\246\344\271\240\347\254\224\350\256\260.md" +++ /dev/null @@ -1,254 +0,0 @@ -# 脚手架核心流程开发 - -## 脚手架整体架构设计 - ---- - -### 前端开发过程中的痛点和需求分析 - -**痛点** - -- 存在大量重复代码的拷贝 -- 协同开发时，分支混乱， 操作不规范，导致耗时 -- 发布上线耗时，会出现各种各样的错误 - -**需求分析** - -1.通用的组件/模板创建能力 - -- 模板支持定制，定制后能发布生效 -- 模板支持快速接入，极低的接入成本 - - 2.通用的项目/组件发布能力 - -- 发布过程中自动完成标准的 git 操作 -- 发布完成后自动删除开发分支并创建 tag -- 发布后自动完成云构建、cdn、域名绑定 -- 发布过程支持测试/正式两种模式 - -**大厂是如何做项目的** - -自己动手画了一下示意图 -![二蛋画的大厂做项目示意图](./images/dachang.png) - -**git 操作规范** - -自己动手画了一下示意图 -![二蛋画的git操作规范示意图](./images/git.png) - -**架构设计图** -![二蛋画的脚手架架构设计图](./images/tangmen_cli.png) - -## 脚手架模块拆分策略 - -### 拆包原则 - -根据模块的功能来拆分： - -- core: 核心模块 -- utils: 工具模块 -- commands: 命令模块 -- models: 模型模块 - -### 拆包结果 - -1. 核心流程：core -2. 命令模块：commands - - 初始化 - - 发布 - - 清除缓存 -3. 模型： models - - Command 命令 - - Project 项目 - - Component 组件 - - Npm 模块 - - Git 仓库 -4. 支撑层： utils - - Git 操作 - - 云构建 - - 工具方法 - - API 请求 - - Git API - -## core 模块技术方案 - -core 模块的技术方案主要分为三个阶段，分别是**准备阶段、命令注册、命令执行**。第三周的课程内容主要是讲准备阶段。 - ---- - -### 涉及到的技术点 - -#### 核心库 - -- import-local -- commander - -#### 工具库 - -- fs-extra (用于文件操作，基于 fs 封装的库) -- dotenv (可以获取到环境变量) -- semver (比较 package 的版本) -- root-check (进行 root 降级) -- user-home (拿到用户主目录) -- colors (可以在终端当中打印不同颜色的文本) -- npmlog (打印日志用，可以进行定制) - ---- - -### 实现脚手架准备过程 -![脚手架准备过程](./images/core_01.png) -#### 检查版本号 - -思路：直接引用 package.json 文件，获取其中的 version 字段，打印到终端。注意：这里打印的时候可以使用 console.log，也可以使用 npmlog 这个依赖库。 - -```javascript -const pkg = require('../package.json') -function checkVersion() { - console.log(pkg.version) - // or - log.info(pkg.version) -} -``` - -#### 检查 Node 版本 - -思路： 获取当前的 node 版本，和我们事先预设好的版本进行比对，如果当前版本较低，那么给用户一个提示。 - -```javascript -const semver = require('semver') -const colors = require('colors/safe') -function checkNodeVersion() { - // 获取当前的 node 版本 - const currentVersion = process.version - // 和我们事先预设好的版本进行比对 - const lowestVersion = constant.LOWET_NODE_VERSION - // 如果当前版本较低，那么给用户一个提示 - if (!semver.gte(currentVersion, lowestVersion)) { - throw new Error(colors.red(`tangmen-cli 需要安装${lowestVersion}版本及以上的Node.js`)) - } -} -``` - -#### 检查 root 是否启动 - -思路：这个功能比较简单，事情都让 root-check 这个库帮我们做了，我们只需要引用并且调用一下就可以实现 root 降级，规避掉因为 root 用户带来的一系列权限问题。 - -```javascript -function checkRoot() { - const rootCheck = require('root-check') - rootCheck() -} -``` - -#### 检查用户主目录 - -```javascript -const userHome = require('user-home') -const pathExists = require('path-exists').sync -function checkUserHome() { - if (!userHome || !pathExists(userHome)) { - throw new Error(colors.red('当前用户主目录不存在，请检查!')) - } -} -``` - -#### 检查入参 - -```javascript -let args -function checkInputArgs() { - args = require('minimist')(process.argv.slice(2)) - checkArgs() -} - -function checkArgs() { - if (args.debug) { - process.env.LOG_LEVEL = 'verbose' - } else { - process.env.LOG_LEVEL = 'info' - } - log.level = process.env.LOG_LEVEL -} -``` - -#### 检查环境变量的两种实现方式 - -```javascript -function checkEnv() { - const dotenv = require('dotenv') - const dotenvPath = path.resolve(userHome, '.env') - if (pathExists(dotenvPath)) { - dotenv.config({ - path: dotenvPath - }) - } - createDefaultConfig() - log.verbose('环境变量', process.env.CLI_HOME_PATH) -} -// 创建默认的环境变量配置 -function createDefaultConfig() { - const cliConfig = { - home: userHome - } - if (process.env.CLI_HOME) { - cliConfig['cliHome'] = path.join(userHome, process.env.CLI_HOME) - } else { - cliConfig['cliHome'] = path.join(userHome, constant.DEFAULT_CLI_HOME) - } - process.env.CLI_HOME_PATH = cliConfig.cliHome -} -``` - -```javascript -function checkEnv() { - const dotenv = require('dotenv') - const dotenvPath = path.resolve(userHome, '.env') - if (pathExists(dotenvPath)) { - config = dotenv.config({ - path: dotenvPath - }) - } - config = createDefaultConfig() - log.verbose('环境变量', config, process.env.CLI_HOME) -} -// 创建默认的环境变量配置 -function createDefaultConfig() { - const cliConfig = { - home: userHome - } - if (process.env.CLI_HOME) { - cliConfig['cliHome'] = path.join(userHome, process.env.CLI_HOME) - } else { - cliConfig['cliHome'] = path.join(userHome, constant.DEFAULT_CLI_HOME) - } - return cliConfig -} -``` - -#### 检查是否为最新版本 - -```javascript -async function checkGlobalUpdate() { - // 获取当前用户安装的版本是多少 - const currentVersion = pkg.version - const npmName = pkg.name - // 通过接口请求拿到最新的版本号 - const { getNpmSemverVersion } = require('@tangmen-cli-dev/get-npm-info') - const latestVersion = await getNpmSemverVersion(currentVersion, npmName) - // 拿npm上最新的版本号和本地安装的版本号进行对比，如果前者大于后者，则给用户一个明显的提示 - if (latestVersion && semver.gt(latestVersion, currentVersion)) { - log.warn( - colors.yellow(`请手动更新${npmName}, 当前版本:${currentVersion}, 最新版本: ${latestVersion} - 更新命令: npm install -g ${npmName} - `) - ) - } -} -``` - -## 本周作业完成情况 - -1. 绘制脚手架架构设计图（已完成） -2. 实现脚手架准备过程代码（已完成） -3. 通过 commander 实现一个脚手架，包含自定义 option 和 command 功能：npm i -g imooc-test-erdan（已完成） -4. 通过 webpack 和原生两种方式实现 Node 对 ES Module 的支持（已完成） diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/README.md" "b/docs/pages/\351\203\255\344\272\214\350\233\213/README.md" deleted file mode 100644 index 58c9955..0000000 --- "a/docs/pages/\351\203\255\344\272\214\350\233\213/README.md" +++ /dev/null @@ -1,8 +0,0 @@ -# 郭二蛋 -嗨，你好呀！我是郭二蛋，在[慕课网](https://www.imooc.com/)混迹已有4个年头，从免费课到实战课到后来的专栏和微课，已经习惯了在慕课网充电学习，期间也认识了不少小伙伴，他们个个都很有才也很骚~ - -这门课就当作是在慕课的毕业课程吧，所以要更加认真学习阿，加油！加油！加油！ - -在这里记录一下学习[《web前端架构》](https://class.imooc.com/sc/110/learn)课程的笔记和作业。 - -没有人天生爱学习，可是这个世界只要成绩,与君共勉。 diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/core_01.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/core_01.png" deleted file mode 100644 index 74b714d..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/core_01.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/dachang.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/dachang.png" deleted file mode 100644 index 60b3bd7..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/dachang.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_01.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_01.png" deleted file mode 100644 index bdff410..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_01.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_02.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_02.png" deleted file mode 100644 index 3f3f219..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week1_02.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_01.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_01.png" deleted file mode 100644 index f2d3e21..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_01.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_02.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_02.png" deleted file mode 100644 index a3e20f8..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/erdan_week2_02.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/git.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/git.png" deleted file mode 100644 index 95a7f26..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/git.png" and /dev/null differ diff --git "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/tangmen_cli.png" "b/docs/pages/\351\203\255\344\272\214\350\233\213/images/tangmen_cli.png" deleted file mode 100644 index 603c01c..0000000 Binary files "a/docs/pages/\351\203\255\344\272\214\350\233\213/images/tangmen_cli.png" and /dev/null differ diff --git "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/01-\344\275\234\344\270\232-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241.md" "b/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/01-\344\275\234\344\270\232-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241.md" deleted file mode 100644 index 95ba3b6..0000000 --- "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/01-\344\275\234\344\270\232-\346\236\266\346\236\204\346\226\271\346\241\210\350\256\276\350\256\241.md" +++ /dev/null @@ -1,99 +0,0 @@ -# 整体架构设计方案 v1.0 - -## 需求 - -[需求地址](https://www.yuque.com/imooc-lego/zlz87z) - - -## 范围 -> 整体设计，架构设计，没有细节 - -编辑b端(前后分离)、项目服务端(中台)、管理端(前后分离)、作品展示c端(服务端渲染) - -## 模块设计 - -模块的拆分和关系图，结果 -模块的关键功能，职责等 -特殊的模块重点说明 - - -- 组件库，独立第三方，同时用于编辑器和 H5 -- 自研统计服务，为何自研 - -![](./images/整体架构.png) - -## 作品的数据结构 - -vuex store 的结构，解释 -数据流转关系图 - -```js -{ - // 作品 - work: { - title: '作品标题', - setting: { /* 一些可能的配置项，用不到就先预留 */ }, - props: { /* 页面 body 的一些设置，如背景色 */ }, - components: [ - // components 要用数组，有序结构 - // 单个 node 要符合常见的 vnode 格式 - { - id: 'xxx', // 每个组件都有 id ，不重复 - name: '文本1', - tag: 'text', - attrs: { fontSize: '20px' }, - children: [ - '文本1' // 文本内容，有时候放在 children ，有时候放在 attrs 或者 props ，没有标准，看实际情况来确定 - ] - }, - { - id: 'yyy', - name: '图片1', - tag: 'image', - attrs: { src: 'xxx.png', width: '100px' }, - children: null - }, - ] - }, - - // 画布当前选中的组件 - activeComponentId: 'xxx' -} - -``` - -vuex getter 选择当前选中的图层 -```js -{ - layers() => { - store.work.components.map(c => { - return { - id: c.id, - name: c.name - } - }) - } -} - -``` - -## 扩展性保证 - -扩展组件，数据结构层面 -扩展编辑器的功能，例如：组件隐藏、锁定 -扩展页面的配置 -（讨论，集思广益） - -## 开发提效 - -脚手架 创建：可以开发快速创建项目原型的脚手架，来省去配置项目初始化的时间。 -脚手架 发布：。。。 -组件平台 - - -## 运维保障 - -线上服务和运维服务 -安全 -监控和报警 -服务扩展性：流量大 \ No newline at end of file diff --git "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/README.md" "b/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/README.md" deleted file mode 100644 index 06f02d0..0000000 --- "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/README.md" +++ /dev/null @@ -1,3 +0,0 @@ -# 红鲤驴与绿驴鱼 - 学习分享 - -+ [第一周笔记](01-作业-架构方案设计.md) diff --git "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/images/\346\225\264\344\275\223\346\236\266\346\236\204.png" "b/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/images/\346\225\264\344\275\223\346\236\266\346\236\204.png" deleted file mode 100644 index bb9c102..0000000 Binary files "a/docs/pages/\360\237\220\237\347\272\242\351\262\244\351\251\264\344\270\216\347\273\277\351\251\264\351\261\274/images/\346\225\264\344\275\223\346\236\266\346\236\204.png" and /dev/null differ