docs: 组件化小结图片补齐

Chapter1 - iOS/1.64.md

@@ -32,17 +32,13 @@
 - https://blog.csdn.net/blog_jihq/article/details/80669616
 
 
-- RN iOS 插件化开发
+![MVC架构](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2021-03-02-MVC.png)
-
-
-
-![image-20200816000651547](/Users/lbp/Library/Application Support/typora-user-images/image-20200816000651547.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：我遵循你这个组织的协议，则我就可以加入你这个组织，比如某个组件遵循协议，然后就可以统一调度管理。

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. 优化手段