前端三大框架
MVC
MVC框架是MVC、MVP、MVVM这3个框架中历史最悠久的。20世纪70年代,施乐公司发明了Smalltalk语言,用来编写图形界面的应用程序,脱离了DOS系统,让系统可视化,不用一直看着黑白的界面
在Smalltalk发展到80版本的时候,MVC框架被一位工程师提出来,MVC框架的出现在很大程度上降低了应用程序的管理难度,之后被广泛应用于构架桌面和服务器应用程序。
Controller是MVC中的C,指控制层,在Controller层会接收用户所有的操作,并根据写好的代码进行相应的操作——触发Model层,或者触发View层,抑或是两者都触发。需要注意:Controller层触发View层时,并不会更新View层中的数据,View层中的数据是通过监听Model层数据变化而自动更新的,与Controller层无关
MVP
MVP框架比MVC框架大概晚出现20年,1990年,MVP由IBM的子公司Taligent公司提出,它最开始好像是一个用于C++ CommonPoint的框架
在MVC框架中,View层可以通过访问Model层来更新,但在MVP框架中,View层不能再直接访问Model层,必须通过Presenter层提供的接口,然后Presenter层再去访问Model层。这看起来有点多此一举,但用处着实不小。首先是因为Model层和View层都必须通过Presenter层来传递信息,所以完全分离了View层和Model层,也就是说,View层与Model层一点关系也没有,双方是不知道彼此存在的,在它们眼里,只有Presenter层。其次,因为View层与Model层没有关系,所以View层可以抽离出来做成组件,在复用性上比MVC模型好很多
View层与Model层确实互不干涉,View层也自由了很多。但还是有问题,因为View层和Model层都需经过Presenter层,致使Presenter层比较复杂,维护起来会有一定的问题。而且因为没有绑定数据,所有数据都需要Presenter层进行“手动同步”,代码量比较大,虽然比MVC模型好很多,但也是有比较多的冗余部分。为了让View层和Model的数据始终保持一致,避免同步,MVVM框架出现了。
MVVM
可能感觉MVVM的框架图与MVP的框架图相似,确实如此,两者都是从View层开始触发用户的操作,之后经过第三层,最后到达Model层。但是关键问题是这第三层的内容,ViewModel层双向绑定了View层和Model层,因此,随着View层的数据变化,系统会自动修改Model层的数据,反之同理。而Presenter层是采用手动写方法来调用或者修改View层和Model层
View层和Model层之间数据的传递也经过了ViewModel层,ViewModel层并没有对其进行“手动绑定”,不仅使速度有了一定的提高,代码量也减少很多,相比于MVC和MVP,MVVM有了长足的进步 至于双向数据绑定,可以这样理解:双向数据绑定是一个模板引擎,它会根据数据的变化实时渲染。这种说法可能不是很恰当
三者的区别和优劣
其实从MVC到MVP再到MVVM,是一个不断进步的过程,后两者都是在MVC的基础上做的变化,使MVC更进一步,使用起来也更加方便。 MVC、MVP、MVVM三者的主要区别就在于除View层和Model层之外的第三层,这一层的不同使得MV系列框架区分开来。其实很难说出MVC、MVP、MVVM哪一个更好,从表面上看,显然是MVVM最好,使用起来更方便,代码相对也较少。但问题是MVVM的框架体积较大,相比于MVC的不用框架、MVP的4KB框架,MVVM遥遥领先。 虽然MVVM框架可以单独引用,但现在更多使用前端脚手架工具进行开发,并且使用打包工具,这样一来,它跟MVC相比,体积是天差地别。虽然机能过剩更令人放心,但是轻巧一些的框架会令项目锦上添花。所以要根据实际项目的需求来选择MVC、MVP、MVVM,只有最适合的模式才是最好的框架。每项新技术都要经历一个从一开始不被大众认可到后来人尽皆知的过程,其实就是一个改变的过程。只要这个框架能跟上时代的潮流,满足人们开发的需求,这就是一个合适的框架。
前端开发工具的日常使用
- Vue.js devtools开发Vue.js时,这个插件是必不可少的,可以方便地用它查看当前路由和组件内容,及时地反馈变量内容的变化。
- AdBlockAdBlock是用来屏蔽广告的,功能十分强大,一般广告都会被屏蔽掉,给用户一个“干净”的网页。但是要注意,有些网站可能不支持AdBlock,打开AdBlock之后,网页的样式和架构可能会乱掉,这时可以选择把这个网页网址加入AdBlock的白名单里,这样AdBlock就不会对此网站进行过滤,简单方便。
- JSONViewChrome上其实有很多查看JSON数据的插件,但是经过测试,此款插件的展示效果非常好,除了放大、缩小、折叠之外,没有其他多余功能,简单易用。
- Momentum这个插件与开发没有多大关系,它用来替换初始页的背景图片,并且提供了一个TodoList,每次新开一个页面的时候,都会随机出现一张令人赏心悦目的风景图,同时TodoList还会提醒你接下来要做什么,在开发之余,还能放松心情。
- minerBlock此插件的作用是防止电脑被人恶意当作矿机使用。现在开源的东西比较多,可能就会有人利用这一点,曾经有人开源了一款JS插件,在插件中藏有恶意挖矿的代码,若是使用了这样的插件,每次运行的时候,都是在帮制作者挖矿。所以找到了minerBlock,用来防止类似事件的发生,有需要的读者可以安装一下。
VS Code
-
Chinese (Simplified) Language Pack for Visual Studio Code这是VS Code的汉化包,之前的VS Code可以在设置中修改语言类型,在某一版本后取消了多语言的支持,改为使用插件来汉化编辑器。VS Code汉化包就是官方开发的中文语言包。
-
vscode-icons几乎每个用户都会装一个这种图表式的插件,这是为了更方便地看见文件的类型,同时对文件进行区分。这款插件是VS Code官方推荐的,图标种类无比丰富,几乎涵盖了所有类型的文件。
-
ESLint一般前端都会使用ESLint来对代码格式进行规范,这可以解决很多不必要的Bug,在项目中也可以使用,但是只有在项目运行时的Terminal才能看见,这样相对比较麻烦,不利于修改。在VS Code中可以直接安装ESLint插件,在编写代码的时候,就可以看见自己的语法有哪些错误,利于修改。
-
Vetur Vetur是针对Vue.js的语法高亮、提示和补全的插件,同时还可以在VS Code内部进行Debugg,或者进行相应的代码格式化,是Vue.js开发者必备插件之一。
-
Beautify Beautify属于代码格式规范插件,可以针对HTML、CSS、Sass、JS进行代码格式整理,虽然Vetur也有代码规范功能,但仅限于Vue.js文件,对于一般的文件,Beautify使用起来更加方便。
-
Markdown Preview Enhanced 它可以增强对Markdown格式文件的预览,比原生的预览好看了很多。
-
One Dark Pro 这是一个暗黑系的Atom主题,虽然不是五花八门的黑,但也不是简简单单的纯黑,看上去比较舒服。
-
Solarized-light Theme 暖黄色的主题,对护眼比较看重的读者可以看看。需要注意:在这里没有安装任何语法提示的插件,因为VS Code原生已经支持了HTML、CSS和JS的语法提示,十分全面。