摘要：前言终于要做这个计划了，前端框架千千万，绝不能一头扎进去盲目开始，本片文章总结一下目前前各种端框架，以及它们的用途主要解决什么问题，然后最后做出学习计划。希望入了前端坑的同学们可以有所帮助。但是库与框架很难严格区分，所以统一称为解决方案。
前言：终于要做这个计划了，前端框架千千万，绝不能一头扎进去盲目开始，本片文章总结一下目前前各种端框架，以及它们的用途主要解决什么问题，然后最后做出学习计划。希望入了前端坑的同学们可以有所帮助。
1.库与框架什么是库，什么是框架？
库：是针对特定问题的一个解答，具有专业针对性；不控制应用程序流程的流程；被动的被调用
框架：控制反转；决定应用程序生命周期；一般会集成大量的库
是不是框架都集成了大量的库呢？其实这么理解是不对的，框架与库最大的区别就是控制反转，框架就像程序的骨架，拥有默认的有意义的行为，知道在特定情况下该做什么样的事情，在适当的时候框架会调用你的代码，从而整个程序实现你想实现的功能。但是库与框架很难严格区分，所以统一称为解决方案。
既然库和框架都是解决方案，那么它们都是要解决前端开发中的特定问题，目前前端开发中主要有以下7个方面的问题，各种解决方案也是针对这些问题被开发出来的。
DOM操作 （DOM）
通信 （Communication）
工具库 （Utility）
模版技术 （Templating）
组件 （Component）
路由 （Routing）
架构 （Architecture）
why？
开发效率
可靠性：浏览器兼容性／测试覆盖
更好的配套：文档／DEMO／工具
设计的更好
专业性
HOw
开放：基于一个外部模块系统，自由组合
半开放：基于一个定制过的模块系统，内部－外部的解决方案共存
大教堂：深度定制的模块系统，很少引入外部模块
3.DOM操作的解决方案DOM主要有以下几点：Selector／Manipulation／Event／Animation
选择器／DOM操作／事件（简化事件绑定，提供事件代理之类）／动画
职责：
提供便利的DOM查询／操作／移动 等操作
提供事件绑定／事件代理等支持
浏览器特性检测，UserAgent侦测
提供节点属性、样式、类名等操作
所有以上操作实现目标平台的跨浏览器支持
相关的框架：
JQuery
zepto.js
MOOTOOLS
JQuery：定义了两义型的接口，可读性不够
MOOTOOLS：严格遵循Commond－Query，没有两翼型接口，直接扩展了DOM原生对象：Element.propotype.inject = function(){}
三者对比：
MooTools：大小：96K，兼容性：IE6+；优点：概念清晰，没有包装对象；接口设计优秀；源码清晰易懂；不局限于DOM和Ajax。缺点：扩展了原生对象（致命）；社区衰弱
JQuery：大小：94K，兼容性：IE6+；优点：社区强大，普及率高；包装对象，不污染原生；基本上专注于DOM； 缺点：包装对象，容易混淆；接口两义性；社区水平层次不齐，容易踩坑。
Zepto.js:大小：25K，兼容性：IE10+；优点：小，启动快；接口与JQuery兼容；提供了简单的手势；缺点：与JQuery不能做到100%对应，支持的浏览器少，功能较弱。
建议：
MooTools：最好的源码阅读学习的资源，小型项目可以用
JQuery：最稳妥的方案
Zepto.js：移动端的备选品
DOM专业领域解决方案：
手势：Hammer.js:大小：12k；常见手势封装，包括tap，hold，transform，swipe等等，并支持自定义扩展。
局部滚动：iscroll.js：大小：13k；移动端position：fix＋overflow：scroll的救星
高级动画：Velocity.js:大小：12k；复杂动画序列实现，不仅限于dom
视频播放：vedio.js:大小：101k，类似原生vedio标签的使用方式，对低级浏览器回退到flash播放。
4.通信问题解决方案职责：
处理与服务器的请求与响应
预处理请求数据／响应数据Error／Success的判断封装
多种类型请求，统一接口（xmlHttpRequest1/2，JSONP，Iframe）
处理浏览器兼容性
相关框架：
JQuery和前面的框架基本都有通信的支持，但是推荐两个备选选择：
Reqwest：大小：3.4k；优点：JSONP支持；稳定／兼容IE6+；CROS跨域； Promise／A支持
qwest：大小：2.5k；优点：更小的代码量；支持XmlHttpRequest2；CORS跨域；支持搞基数据类型，如：ArrayBuffer，Blob和FormData
socket.io:实时性；支持二进制数据流；智能自动的回退支持（非二进制数据流）；多种后端语言支持
5.工具包框架职责：
弥补js语言原生不提供的功能。
方法门面包装，使其更易于使用（某些方法比较繁琐，包装后方便使用）
异步队列／流程控制等等
相关框架；
es5-shim（部分支持）：大小53k；提供语言垫片；Github：es－shims／es5-shim
es6-shim：大小38k；Github：paulmillr／es6-shim
underscore：大小：16.5k；兼容IE6+
Lodash：大小：50k；兼容IE6+；是underscore的高性能版本，方法大部分是runtime编译出来
6.模版技术 基于字符串的模版通过字符串生成DOM之后就不再变化，DOM无关，（解析到DOM时间很快），安全性差：用到innerHTML
解决方案：dustjs；hogan（mustache实现之一）；dot.js(体小速快)
可以动态修改更新，语法要写在节点上；初始化时间慢
解决方案：Angularjs；Vuejs； Knockout
可以动态更新，DOM无关，实现局部更新，安全性高（不使用innerHTML）
解决方案：Regularjs；Ractivejs；htmlbar
职责：
提供基础组件CSS支持
提供常用组件：Slider，Modal
提供声明式的调用方式（在HTML中绑定属性初始化组件）
解决方案（基于JQuery）：
Bootstrap
Foundation
相同点：Mobile First的流式栅格，可定制UI，都是基于JQuery，MIT开源协议。
解决方案（非JQuery版本）
Knockout－Bootstrap
UI Bootstrap
React Bootstrap
8.路由职责：
监听URL变化，并通知注册的模块
通过javascript进行主动跳转
历史管理
对目标浏览器兼容性的支持
解决方案：
page.js:大小：6.2k；兼容IE8+；
Director.js:大小：10k，兼容IE6+；可以前后端使用一套规则来定义路由
stateman：10k；兼容IE6+；用于处理深层复杂路由的独立路由库。
crossroad.js： 大小：7.5k；老牌Routing库，API定义繁琐，两年未更新。
9.架构（解耦）MVC／MVVM／MV＊
职责：
提供一种范式帮助（强制）开发者进行模块解耦
视图与模型分离
更容易进行单元测试
更容易实现应用程序的扩展
例子：
MVVM为例
Model：数据实体，用于记录应用程序的数据
View：展示友好的界面，它是数据的定制反映，它包含样式结构定义以及vm享有的声明式数据、事件绑定
ViewModel：view和model的粘合剂，它通过绑定、事件与view交互，并可以调用Sevice处理数据持久化，当然也能通过数据绑定将Model的变动更新到View中
10.常用网站介绍http://www.javascripting.com/
http://www.javascriptoo.com/
http://microjs.com
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/79908.html
摘要：只是抱怨事物的状态并没有什么卵用，我打算给你一个实实在在的一步一步征服生态圈的学习计划。好消息是，这刚好是本学习计划关注的问题。比如，一个不错的出发点是的课。是一个由创建和开源的库。我个人推荐的初学者课程。而个人项目是尝试新技术的完美时机。 本文转载自：众成翻译译者：网络埋伏纪事链接：http://www.zcfy.cc/article/1617原文：https://medium.fr...
摘要：前言自从上次在掘金发布年山地人的前端完整自学计划讲一个站主山地人的天前端自学故事以来，一眨眼山地人老哥在站做主已经有天了。所以这个体系里的一些框架包括也是山地人年自学计划的一部分。月底，山地人老哥开启了的两个专题。 前言 自从上次在掘金发布【2019年山地人的前端完整自学计划——讲一个B站UP主山地人的40天前端自学故事】 以来，一眨眼山地人老哥在B站做Up主已经有85天了。 时隔一个...
摘要：是今年一定要学的东西这两年页面上用的三方组件多了，写的少了，的一些属性不太记得了，针对的学习计划有两个参照的样式进行学习参照的组件样式，学习如何处理样式与组件之间的关系，规范自己的写法。 磕磕绊绊工作有几年了，前端界几乎每天都有新名词，令人眼花缭乱，目瞪狗呆。这两年一直在外包工作，业务写的多些，对js的基础掌握的还不是很到位。最近深感技术嗅觉迟钝，虽然平时也有看书学习，更多的时候都是断...
摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...
摘要：年，软件开发界发生了很多变化。六数据存储是一个关系型数据库管理系统，由瑞典公司开发，目前属于旗下公司。最流行的关系型数据库管理系统，在应用方面是最好的，关系数据库管理系统应用软件之一。七是最新的修订版本，年月由万维网联盟完成标准制定。 2015年，软件开发界发生了很多变化。有很多流行的新语言发布了，也有很多重要的框架和工具发布了新版本。下面有一个我们觉得最重要的简短清单，同时也有我们觉...
阅读 1777·2021-09-28 09:46
阅读 3125·2019-08-30 14:22
阅读 1861·2019-08-26 13:36
阅读 3306·2019-08-26 11:32
阅读 2053·2019-08-23 16:56
阅读 1104·2019-08-23 16:09
阅读 1260·2019-08-23 12:55
阅读 2123·2019-08-23 11:44
