前端技术的飞速发展对前端同学来说也是一个不小的挑战。要学的东西五花八门，开发过程中经常被后端抓到有同学调侃说对于前端，根本就没有类的概念。很多时候，页面或者组件中需要积累大量的业务代码，使得组件和页面特别臃肿。一旦业务逻辑复杂，及时的组件改造做得很好，但还是难免维护。被后端同学嘲讽的原因一是基础不扎实，对前端的理解不到位，二是缺乏面向对象的思维，三是业务不行和基础是愚蠢的不清楚。ECMAScript2015和TypeScript的引入提出了一个非常重要的概念，就是类（class）的概念。在没有类之前，前端为了有类的概念，总是使用构造函数来模拟类的概念，通过原型来完成继承。虽然前端提出了很多概念（模块化、组件化……），但我个人认为面向对象应用是前端项目和整体架构的利器。代码结构的好坏与面向对象有一定的关系。但不是所有的。不过我们可以借助计算机领域的一些优秀的编程概念在一定程度上解决这些问题，然后再简单说一下依赖注入（控制反转）。什么是依赖注入？依赖注入一般指的是控制反转。它是面向对象编程中的一个设计原则，可以用来降低计算机代码之间的耦合度。最常见的方式称为依赖注入，另一种方式称为依赖查找。通过控制反转，当一个对象被创建时，它所依赖的对象的引用由一个外部实体传递给它，这个外部实体调节系统中的所有对象。也可以说依赖注入到对象中。从上面的描述可以发现，依赖注入发生在两个或多个类中。比如有两个类A和B，如果A作为基础类存在，B作为业务类存在，那么B就会依赖于A，上面这句话很重要。调节系统中所有对象的外部实体将其所依赖的对象的引用传递给它。个人理解，在B类中使用A类的实例，而不是继承A类。熟悉面向对象的同学应该明白面向对象的7大原则：单一职责开闭原则里氏替换依赖倒置接口隔离但是，使用依赖注入是为了降低代码的耦合度，提高代码的可扩展性。以上是一些面向对象的思想。让我们参考上面最重要的原则。层模块不应该依赖于低层模块。两者都应该依赖于抽象，抽象不应该依赖于具体的实现，具体的实现应该依赖于抽象。//团队信息不依赖具体实现//面向接口，即面向抽象编程Instance//抽象面向构造器(fruit){this.fruit=fruit;}info(){console.log(this.fruit.name)}}//把依赖放在这里进行管理和控制去这里//Tropical和Fruit没有直接依赖//Tropical直接控制Fruit，不再直接依赖//会依赖control,落在这里（专门用第三方模块管理）是控制反射转varym=newTropical(newFruit('banana'))ym.info()varkobe=newTropical(newFruit('pineapple'))kobe.info()依赖InjectionInjectionInitializedependentmodulesifnotinitializedifnotinitializedthroughdependencyinjectionmode依赖模块必须由依赖模块自己初始化。那么问题来了：依赖模块耦合依赖模块的初始化信息，注入到依赖模块中。依赖模块已经被其他管理器初始化，那么依赖模块如何获取这个模块呢？有两种方式：请别人主动给你没用的依赖注入方式是1，用了之后是2想想，当你需要什么的时候，你去找别人要，你需要什么资料提供给别人？最简单的就是那个东西叫什么，就是你需要提供一个名字。所以，方法一的问题是：依赖模块把依赖模块的名字和对方的名字耦合起来，方法二解决了这个问题，让依赖模块只依赖被需要模块的接口。依赖注入的优点依赖注入降低了依赖和依赖类型之间的耦合度。修改依赖类型的实现时，不需要修改依赖类型的实现。同时，对于依赖类型的测试。依赖注入可以最小化代码耦合，各个模块的扩展不会互相影响。实现数据访问层，即你的数据请求层的前端模块和接口重构。依赖注入背后的一个核心思想是单一功能原则，这意味着这些对象可以在系统的任何地方重复使用。随时添加单元测试，将功能封装到整个对象中都会使自动测试变得困难或不可能。将模块和接口隔离到特定对象，以这种方式重构允许进行更高级的单元测试。在Vue中使用上面写的例子只是依赖注入的使用。在项目过程中往往不是那么简单。绝对不是例子那么简单，而是一个非常复杂和庞大的工程。项目分为各个模块，这种情况怎么处理？依赖注入在JavaScript中很常见。从名字上看，所谓依赖注入就是指组件之间的依赖关系在运行时由容器决定。形象地讲，容器动态地给组件注入了一定的依赖关系。前端项目和后端不一样。有各种各样的班级。前端虽然可以写类，但是如果是React项目会好很多，因为它的框架都是基于类的。但是在vue项目中，应该如何体现呢？页面中的业务也可以作为类注入到Vue页面中，最终完成业务逻辑。你想通过依赖注入实现什么效果？依赖注入的最终效果是页面的性能与业务分离。本质上，页面的表现形式与业务逻辑没有根本的联系。如果使用这种形式的依赖注入，可以很容易地将业务和页面性能分离，页面更专注于展示，注入的东西更专注于业务处理。该项目也将变得更易于维护。index.vue
