原生，类库，框架，模式傻傻分不清楚

文章内容都是当下作者知识能力下的理解，错与对，只能自行拿捏。

原生js-js类库-js框架-前端框架，这几个说法有什么区别呢？

先列举个他们的代表作便于大家有个大致印象。

原生js：即纯JavaScript，没有经过任何的封装，也就是所有前端框架类库的底层，遵循ECMAscript标准，不依赖于任何框架，依托于浏览器标准引擎的脚本语言，不利于兼容以及实现。

js类库：如大家最熟悉的jQuery。其实就是将原生js根据需要进行封装后形成的一些组件方法，方便使用。

js框架：angularjs。比类库更有系统性，侧重的是一整套解决方案。

前端框架：bootstrap。 一般由js库css库各种插件库组成，是写好的各种可重用的组件，主要用于网站快速开发，直接可以出一套页面。

我们再来大概的区分下类库与框架，library和framework：

当你在调用library的时候， 你按照自己的意愿来control他（比如jQuery）。而对于framework， 那么control就是倒转过来了，是他在调用你（比如bootstrap)。

所以，类库，解决的是代码或者是模块级别的复用或者对复杂度的封装问题，例如jQuery获取DOM节点这个复杂问题的功能模块封装成一个函数$，提供一个简单的接口。库它是一种工具，它提供了很多封装好的方法，用与不用取决于我们自身，即使用了也不会影响我们呢的代码结构。

而框架，更多的是对模式级别的复用和对程序组织的规范。是面向一个领域来提供一套解决方案，提高开发效率，如果我们选择了使用某框架，就应该遵循该框架所规定的规则。

所以，简单地说，框架要求你用某种形式去写代码，比如遵照MVC的约定，等等。库只是提供了写代码时实现某种形式的方法，比如提供了XHR的封装，对DOM的简便操作。

那么，MVC、MVP、MVVM又有什么区别呢？

他它们在概念上都是基于分层的，将呈现(presentation) 与资料(data) 分开的设计架构。

MVC：MVC是将Model, View和Controller分离，让彼此的职责能够明确的分开。View和Model基本上是相关的，但它们并不会有直接的相依关系，而是由Controller去决定Model产生的资料，然后丢给View去做呈现，也就是说，Controller是Model和View之间的协调者，View和Model不能直接沟通，以确保责任的分离。而Controller可以只是一个Model和View的小类别，也可以是大到包含Workflow, Enterprise Services或是做为外部系统的Proxy Services等的逻辑系统，MVC各元件是可以分离的组件，也可以是分离的系统。

MVVM：MVVM的架构一样是M, V分离，但中间是以VM (ViewModel)来连接。这个ViewModel比较像是View的一个代理程式，它负责直接对Model做沟通，而View可以透过一些机制来和ViewModel沟通以取得资料或将资料抛给Model做存取等工作，ViewModel也可以作为和外部系统的代理程式，例如Web Service或是REST Service或是Enterprise Services等等，不过它和MVC不同的地方，就是ViewModel和View的黏合度比较高，因为View必须要透过ViewModel才可以取得Model，而ViewModel又必须要处理来自View的通知讯息，所以虽然职责一样分明，但是却不像MVC那样可以扩展到整个系统元件都能用。

MVP：MVP一样也是Model与View分离的架构，但是这个P (Presenter)和ViewModel很类似，不过就如同Presenter (主持人)这个字所代表的意义，所有主控View呈现的工作，都是由Presenter来做，而View本身只是Presenter所要使用的舞台而已，所以View原则上会相依于Presenter，但是为了要做到关注点分离，所以在View和Presenter间都会加入一个介面(ex: IView)，然后以IoC的方式将View注射到Presenter中，而Presenter就使用介面所定义的方法去操控，而View就透过介面所定义的方法去呈现介面即可。但也因为受限于介面，所以Presenter只能依介面定义的动作去回应与处理，而不能再做更多的延伸功能，除非更改View的介面。

所以，总结就是MVVM与MVP就是MVC的瘦身，它们分别使用VM和P来代替controller功能，就可以省去很大一部分逻辑。所以，MVC更适合特大型的系统构建，而MVVM可以去实现这样的大型系统中的一个方面。