web 前端工程师都应该知道的 Web 前端开发知识框架图. 把整个 Web 前端开发所需要的知识都之中在一个视图中, 形成一个完整的 Web 前端知识体系, 目的是想要颠覆人们对于前端只有三大块 (html,CSS,JS) 的认识 -- 做 Web 前端需要的比这三大块要多得多. 下面就来和小编一起看一看 Web 前端开发知识框架图.
在学习过程中有什么不懂得可以加我的 Web 前端学习交流扣扣 qun, 前面是 133, 中间 868, 后面是 702. 群里有不错的学习教程与开发工具, 项目源码分享, 专业的老师解答问题. 与你分享 Web 前端企业当下人才需求及怎么从零基础学习好 Web 前端, 和学习什么内容.
1, 分类
所有知识框架, 那肯定是一个结构型的展现, 就是一棵树. Web 前端的知识点非常多, 也非常散, 需要好几层结构来组织这个体系, 否则就会显得很乱. 那么如何组织, 把谁和谁放在一块儿? 这是真正值得我们去思考的, 你也可以自己来思考一下这个问题.
在我总结的这个知识框架中, 首先第一层我划分为: 理论知识, 类库框架, 编码开发, 运行环境.
接下来给大家解释一下:
这个图要从下往上看, 为何?-- 因为下面是上面的基础;
首先, 我们需要一定的理论知识, 不管是你听别人讲授, 自己看书还是网上淘资料, 你都需要一定的理论知识, 每一种程序开发, 都避免不了.
第二, 有了这些理论知识我们就可以编码了 -- 不错 --but, 没有人能抵挡住第三方框架和类库的诱惑, 例如 jQuery;
第三, 有了这些理论知识和协助我们的类库框架, 我们就可真正的编码了. 大家可能以为编码开发不就是写代码吗, 还有啥?-- 这里面道道多着呢;
最后, 开发程序的目的, 最终是为了能高效, 稳定的运行在相应的环境中, 这其中又有哪些事情需要我们去做? 请期待...
2, 理论知识
"软知识" 和 "硬知识" 大家可能觉得词陌生, 其实我一说大家就能明白.
所谓 "软" 的就是能在各个程序开发中都用到的, 算是基本功, 内功, 例如数据结构, 算法, 设计模式, 面向对象等等;
所谓 "硬" 的就是能直接用于本程序开发的. 用 C 语言你就得学 C 语言语法, 此时学 java 没用. 我们 Web 前端开发所需要的硬知识其实都包含在三个标准里面: http 标准, W3C 标准和 ECMAs cript 标准.
.3,Web 前端开发中的 "硬知识"
"软知识" 的内容非常多, 也是我们大学时代学习所谓的重点. 我们本次主要讨论的是 Web 前端这一个方向, 因此就点到为止, 让大家知道这些知识也在知识体系中扮演重要角色.
刚才说道, 硬知识有三个标准: http 标准, W3C 标准和 ECMAs cript 标准, 那咱们就挨个聊聊这三个标准.
3.1 http 标准
为什么做 Web 前端要了解 http 标准?-- 因为浏览器要从服务端获取网页, 网页也可能将信息再提交给服务器, 这其中都有 http 的连接. Web 系统既然和 http 链接有瓜葛, 你就必须去了解它.
我的意见是: 你不必去非常了解 http 的详细内容, 但是你要了解 Web 前端开发常用的一些 http 的知识 -- 就是上图中我列出来的那些. 当然, 我知识列了一个纲, 详细内容还得靠你自己去查阅(本文章讲的是知识框架, 不会涉及任何知识点的详细内容).
3.2 W3C 标准
如果说你只知道 Web 前端的一个标准, 估计肯定是 W3C 标准了(据我了解, 貌似大部分人真的都只知道这一个标准).
写到这里让我想起了一句话: 2/8 原则 --20% 的功能满足 80% 的需求. 我觉得这句话用到这里非常合适, 我们在平时开发过程中根本用不到这么多东西. 反而, 你要把平时用的多的东西搞懂了.
下图的这些知识, 我想不用再过多解释了, 这就是我文章开发说的 "三大块"(HTML,CSS,JS). 现在你要知道, 它们只不多是 W3C 标准的一部分, 而 W3C 标准也只是 Web 前端开发知识体系中的一部分而已.
3.3 ECMAs cript
简称 ES, 写全称太麻烦了.
有些人可能只知道 javas cript, 而不知道 ES-- 其实, JS 是在 ES 的基础上, 为 Web 浏览器做了一部分封装(增加了 DOM 操作, BOM 操作等).
如上图中的这些概念, 大家可能平时都在 javas cript 中看到, 其实他们是 ES 的内容. 只不过 javas cript 继承了 ES 的这些特性, 并且 javas cript 用的比较广泛, 因此才会在 JS 中讨论的多一些.
还是那个 "2/8 原则". 其实 ES 中的内容也非常多, 而且更新很快, 现在都到 ES6 了. 但是我上图中列出来的这些都是最重要的概念. 如果你不懂原型, 闭包和作用域, 那就说明你还不完全了解 ES, 也就是不完全会用 javas cript.
4, 框架和类库
前面已经描述完了 Web 前端开发所需要的理论知识. 如何实践呢?-- 不能蛮干 -- 还得绕世界去看看, 有哪些大牛已经为我们做出了如此多的贡献.
用下面的这些类库或者框架, 能大大提高你的开发效率.
首先, jQuery 一定是大部分 Web 前端开发者不可或缺的工具. 而我利用 jQuery 不仅仅停留在只使用它的 API 和插件上, 我还会自己去写 jQuery 插件, 我还会去读 jQuery 的源码, 了解 jQuery 的设计思路. 如果你也能那样做, 请相信我, 你会收获到意想不到的效果.
如果有一个问题: 怎样才能最最透彻的理解 javas cript 的事件系统? 最佳答案之一: 读几遍(一遍可能读不懂)jQuery 关于事件处理部分的源码!
Bootstrap 不用再过多解释了吧, 从 GitHub 上的排名也能看出道道来. 甚至连我们公司的 UI 设计师, 都从 Bootstrap 上截图作为素材.
Font Awesome 是全世界最强大的图标系统. 相比于 CSS 制作图标来说, 这个要好很多倍, 不管是开发, 效率还是维护上. icomoon.io 能让我自定义选择自己的图标文件.
RequireJS 和 SeaJS 这种模块定义系统, 也一定是你系统中不可或缺的. 我曾经看过一个教程, 讲师就说: RequireJS 带来了既 jQuery 之后的第二次前端技术变革.
其他的, Backbone,angular,react 这些也慢慢的开始发挥了他们的价值, 此处精力有限就不再赘述了 -- 但是, 他们很重要 -- 你至少要试着去了解它们.
5, 编码开发
要问编码 IDE 哪家强, 当然要属微软的 visual studio! 但是即便是微软的 VS 最新版本, 它也代替不了下面要说的这套开发环境.
如果你专门做 Web 前端, 就不要在用 vs 了, 当然要选择 Sublime. 写 HTML 语句还用手动一条一条写吗? 你得需要 zencoding 的协助, 否则效率太差了.
另外, 针对 HTML,CSS,JS 的压缩, 合并, 语法检查, 文件的清除, 复制这些操作, 你还要手动去做吗?-- 你需要 grunt 或者 gulp 的帮助.
如果你的系统中有比较多的 JS 代码或者文件, 请选择一个合适的模块定义规范 --CMD / AMD
请用 Git 来帮助你做文件版本管理, 最简单的就是使用 GitHub.
调试, 测试, 也都有专门的工具, 都是需要学的......
-- 我的天哪...... 这些字写到现在写的我的手都酸了, 别说要学习这些知识了 -- 再也别说我们 Web 前端是 "三大块" 了!
6, 运行环境
当系统真正到了运行环境中, 当你觉得终于完事儿的时候, 其实还有好几个知识点需要你掌握. 看下图:
首先, 你要知道 Web 系统虽然大部分是在浏览器下运行, 但是 JS 可能会被运行在 node 环境.
来源: http://www.jianshu.com/p/b12556e3121f