前端理解控制反转ioc

工作一直都是写前端，而且都是偏业务的。相关的框架代码层面的了解还是有很大的缺失。一直想多写些维护性，可读性强的代码。

这段时间对控制反转ioc，这样的设计有了一个初步的了解。

     前端为弱语言，平时代码的时候主要是过程化的思路去解决问题。虽然也会定义一些class，但是和面向对象还是存在很大的差别的。

     平时写的偏业务，也不需要抽象，一般也就直接写个实现类，再这个基础上面再进行扩展。主要是不存在类型检测之类的，可以随意一些，相对的错误也不大好发现。

     控制反转ioc主要是用于解耦方面，下面看下解耦的最基本的原则

　　依赖倒置原则（Dependence Inversion Principle，DIP）：
　　A. 上层模块不应该依赖于下层模块，它们共同依赖于一个抽象。
　　B. 抽象不能依赖于具象，具象依赖于抽象。

　　简单点就是面向接口编程，具体实现具体类可以更换，只要是实现了某个接口就行。听起来像是鸭子类型

      “当看到一只鸟走起来像鸭子、游泳起来像鸭子、叫起来也像鸭子，那么这只鸟就可以被称为鸭子。”

     举个场景,比如当前页面结构

     Page {
        Header
        Main {
　　　　　　  SideBar
            MainContent {
                detail
                comment
            }
　　  }

      简易代码如下      

 1 class Detail {}
 2 class Comment {
 3     constructor() {
 4         console.log('a');
 5     }
 6 }
 7 class SideBar {}
 8 class Header{}
 9 class MainContent {
10     constructor() {
11         this.detail = new Detail();
12         this.comment = new Comment();
13     }
14 }
15 
16 class Main {
17     constructor() {
18         this.sideBar = new SideBar();
19         this.mainContent = new MainContent();
20     }
21 }
22 
23 class Page {
24     constructor() {
25         this.header = new Header();
26         this.main = new Main();
27     }
28 }
29 
30 new Page();

View Code