diff --git a/Chapter1 - iOS/1.64.md b/Chapter1 - iOS/1.64.md index 5123344..3d4cf98 100644 --- a/Chapter1 - iOS/1.64.md +++ b/Chapter1 - iOS/1.64.md @@ -32,17 +32,13 @@ - https://blog.csdn.net/blog_jihq/article/details/80669616 -- RN iOS 插件化开发 - - - -![image-20200816000651547](/Users/lbp/Library/Application Support/typora-user-images/image-20200816000651547.png) +![MVC架构](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-MVC.png) -![image-20200816000711707](/Users/lbp/Library/Application Support/typora-user-images/image-20200816000711707.png) +![组件化结构](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-Components-Structures.png) - 各个组件彼此独立，互不影响。 - 组件通过组件管理器（也被叫做 ComponentManager、Router、MediumBus）通信。通过中介者进行通信。 @@ -51,7 +47,7 @@ -![image-20200816004925859](/Users/lbp/Library/Application Support/typora-user-images/image-20200816004925859.png) +![组件化与传统架构对比](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-ComponentStructureComparation.png) - 左侧最基础的 MVC 架构 - 右侧是经过组件化之后的工程目录。 LianJiaClient 里面就是最基础的 AppDelegate，也就是 App 的启动入口。LJComponent 目录下按照彼此独立的功能拆分为多个组件。每个组件按照真实的物理文件夹，划分为多个工程文件夹，每个组件内部按照 MVC 组织，比如 UI、Model、Service、Logic、Connector @@ -67,11 +63,11 @@ - ![image-20200816010644959](/Users/lbp/Library/Application Support/typora-user-images/image-20200816010644959.png) + ![组件抽取](./..assets/2021-03-02-ComponentPickUp.png) 2. 单个组件内部可以按照合适的架构组织，比如 MVC 和一些分层，比如 service - ![image-20200816120154120](/Users/lbp/Library/Application Support/typora-user-images/image-20200816120154120.png) + ![单个组件结构示意图](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-SingleComponentStructure.png) @@ -81,33 +77,33 @@ url 导航去中心化。如果集中放到 Router 的导航方法内，则该方法可能会很长（n个组件，每个组件内m个页面，则需要 n*m 个组合）。每个业务组件，内部某个地方集中处理该组件内可能需要用到的注册 url 并返回对应的 vc，把 VC 返回给 ComponentManager，然后决定跳转方式（push、present） - ![image-20200816120108178](/Users/lbp/Library/Application Support/typora-user-images/image-20200816120108178.png) + ![组件间互相访问](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-CompentsVisit.png) - 服务调用 - ![image-20200816123924669](/Users/lbp/Library/Application Support/typora-user-images/image-20200816123924669.png) + ![组件通信代码](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-CompontentCommunicateCode.png) - ![image-20200816120957323](/Users/lbp/Library/Application Support/typora-user-images/image-20200816120957323.png) + ![组件间服务通信](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-ComponentsVisitByService.png) 4. 进一步优化。动态性 - ![image-20200816124854310](/Users/lbp/Library/Application Support/typora-user-images/image-20200816124854310.png) + ![组件通信 url 动态下发](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-ComponentURLViaNetwork.png) ComponentManager 在根据 lianjia://ModuleOverSeaHouseList 去匹配，然后发现有 url 则不跳转本地，直接打开 H5 5. 服务调用传递参数不方便。NSDictionary 组装很麻烦，可以将公共 Model 下沉，作为一个 Pod - ![image-20200816125008767](/Users/lbp/Library/Application Support/typora-user-images/image-20200816125008767.png) + ![Model下沉](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-ComponentStructureModelInDeep.png) 6. 组件化架构 - ![image-20200816130556184](/Users/lbp/Library/Application Support/typora-user-images/image-20200816130556184.png) + ![链家组件化架构](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-LianJiaComponentStructure.png) 7. 工程组织方式 - ![image-20200816130738633](/Users/lbp/Library/Application Support/typora-user-images/image-20200816130738633.png) + ![链家工程化代码结构](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-LianJiaComponentProject.png) 8. 遇到的问题 @@ -117,10 +113,10 @@ 9. 建议 - ![image-20200816132840319](/Users/lbp/Library/Application Support/typora-user-images/image-20200816132840319.png) + ![链家组件化过程中遇到的问题](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-LianJiaComponentIssue.png) 10. 总结 - ![image-20200816133001605](/Users/lbp/Library/Application Support/typora-user-images/image-20200816133001605.png) + ![组件化经验小结](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-ComponentTheory.png) Protocol：我遵循你这个组织的协议，则我就可以加入你这个组织，比如某个组件遵循协议，然后就可以统一调度管理。 \ No newline at end of file diff --git a/Chapter2 - Web FrontEnd/2.40.md b/Chapter2 - Web FrontEnd/2.40.md index e6877d2..e464e98 100644 --- a/Chapter2 - Web FrontEnd/2.40.md +++ b/Chapter2 - Web FrontEnd/2.40.md @@ -536,6 +536,17 @@ Electron 官方给出了解决方案 Squirrel，基于 Squirrel 框架完成的 12. Electron 和 Web 开发相比，各自有侧重点 ![ElectronAndWeb](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2020-05-04-ElectronAndWeb.png) + +13. 有些人开发 Electron 应用可能不喜欢 [electron-vue](https://github.com/SimulatedGREG/electron-vue) 这样的工具，喜欢自己自定义。假如自己利用 Vue 或者 React 开发的，开发过网页的同学都会习惯使用 Vue-devtools、React-devtools。所以在选用 Vue 或 React 后，习惯使用强大的 Vue-devtools、React-devtools 来查看 State、Action、Redux、Vuex、组件层级树等。 + + - 先去 Github 找到对应的 repo，比如 [Vue-devtools](https://github.com/vuejs/vue-devtools) + - 克隆代码到本地 + - 先安装依赖，再构建出 dist 产物 `cd vue-devtools; yarn install; yarn run build;` + - + + + + ### 2. 优化手段 diff --git a/assets/2021-03-02-CompentsVisit.png b/assets/2021-03-02-CompentsVisit.png new file mode 100644 index 0000000..8412dd6 Binary files /dev/null and b/assets/2021-03-02-CompentsVisit.png differ diff --git a/assets/2021-03-02-ComponentPickUp.png b/assets/2021-03-02-ComponentPickUp.png new file mode 100644 index 0000000..8298409 Binary files /dev/null and b/assets/2021-03-02-ComponentPickUp.png differ diff --git a/assets/2021-03-02-ComponentStructureComparation.png b/assets/2021-03-02-ComponentStructureComparation.png new file mode 100644 index 0000000..48ec999 Binary files /dev/null and b/assets/2021-03-02-ComponentStructureComparation.png differ diff --git a/assets/2021-03-02-ComponentStructureModelInDeep.png b/assets/2021-03-02-ComponentStructureModelInDeep.png new file mode 100644 index 0000000..ac33767 Binary files /dev/null and b/assets/2021-03-02-ComponentStructureModelInDeep.png differ diff --git a/assets/2021-03-02-ComponentTheory.png b/assets/2021-03-02-ComponentTheory.png new file mode 100644 index 0000000..e8bc88f Binary files /dev/null and b/assets/2021-03-02-ComponentTheory.png differ diff --git a/assets/2021-03-02-ComponentURLViaNetwork.png b/assets/2021-03-02-ComponentURLViaNetwork.png new file mode 100644 index 0000000..d2aef2e Binary files /dev/null and b/assets/2021-03-02-ComponentURLViaNetwork.png differ diff --git a/assets/2021-03-02-Components-Structures.png b/assets/2021-03-02-Components-Structures.png new file mode 100644 index 0000000..5e4baf7 Binary files /dev/null and b/assets/2021-03-02-Components-Structures.png differ diff --git a/assets/2021-03-02-ComponentsVisitByService.png b/assets/2021-03-02-ComponentsVisitByService.png new file mode 100644 index 0000000..515d603 Binary files /dev/null and b/assets/2021-03-02-ComponentsVisitByService.png differ diff --git a/assets/2021-03-02-CompontentCommunicateCode.png b/assets/2021-03-02-CompontentCommunicateCode.png new file mode 100644 index 0000000..c2f1c12 Binary files /dev/null and b/assets/2021-03-02-CompontentCommunicateCode.png differ diff --git a/assets/2021-03-02-LianJiaComponentIssue.png b/assets/2021-03-02-LianJiaComponentIssue.png new file mode 100644 index 0000000..2449bc5 Binary files /dev/null and b/assets/2021-03-02-LianJiaComponentIssue.png differ diff --git a/assets/2021-03-02-LianJiaComponentProject.png b/assets/2021-03-02-LianJiaComponentProject.png new file mode 100644 index 0000000..421c266 Binary files /dev/null and b/assets/2021-03-02-LianJiaComponentProject.png differ diff --git a/assets/2021-03-02-LianJiaComponentStructure.png b/assets/2021-03-02-LianJiaComponentStructure.png new file mode 100644 index 0000000..4bfa377 Binary files /dev/null and b/assets/2021-03-02-LianJiaComponentStructure.png differ diff --git a/assets/2021-03-02-MVC.png b/assets/2021-03-02-MVC.png new file mode 100644 index 0000000..42b04b4 Binary files /dev/null and b/assets/2021-03-02-MVC.png differ diff --git a/assets/2021-03-02-SingleComponentStructure.png b/assets/2021-03-02-SingleComponentStructure.png new file mode 100644 index 0000000..448203e Binary files /dev/null and b/assets/2021-03-02-SingleComponentStructure.png differ diff --git a/assets/image-20200816132840319.png b/assets/image-20200816132840319.png new file mode 100644 index 0000000..8e4102a Binary files /dev/null and b/assets/image-20200816132840319.png differ