web前端代码⼤全_web前端知识体系讲解⼤全，对你今后的前
端学习帮助很⼤
1. 前⾔
  ⼤约在⼏个⽉之前，让我看完了《webkit技术内幕》这本书的时候，突然有了⼀个想法。想把整个web前端开发所需要的知识都之中在⼀个视图中，形成⼀个完整的web前端知识体系，⽬的是想要颠覆⼈们对于前端只有三⼤块(html、css、js)的认识——做web前端需要的⽐这三⼤块要多得多。
  拖了好⼏个⽉了，但是由于近期将要参加的某⼀个活动，我不得不这两天把这个东西整出来。说⼲就⼲。上午我就开始在办公室画草图，乱七⼋糟的在那⼉理思路。
  ⼤家不要害怕，其实下⽂中的这个知识框架要⽐草图中的好看的多，草图⼤家权当没看见。
  好了，废话不扯。下⾯请跟随我本博客的内容，来看看web前端开发除了htm、css和js之外，还有哪些东西需要你⼀步⼀步去掌握。
2. 分类
  所有知识框架，那肯定是⼀个结构型的展现，就是⼀棵树。web前端的知识点⾮常多，也⾮常散，需要好⼏层结构来组织这个体系，否则就会显得很乱。那么如何组织、把谁和谁放在⼀块⼉？这是真正值得我们去思考的，你也可以⾃⼰来思考⼀下这个问题。
  在我总结的这个知识框架中，⾸先第⼀层我划分为：理论知识，类库框架，编码开发，运⾏环境。如下图：
  接下来给⼤家解释⼀下：
  这个图要从下往上看，为何？——因为下⾯是上⾯的基础；
⾸先，我们需要⼀定的理论知识，不管是你听别⼈讲授、⾃⼰看书还是⽹上淘资料，你都需要⼀定的
理论知识，每⼀种程序开发，都避免不了。
第⼆，有了这些理论知识我们就可以编码了——不错——but，没有⼈能抵挡住第三⽅框架和类库的诱惑，例如jquery；
第三，有了这些理论知识和协助我们的类库框架，我们就可真正的编码了。⼤家可能以为编码开发不就是写代码吗，还有啥？——这⾥⾯道道多着呢；
最后，开发程序的⽬的，最终是为了能⾼效、稳定的运⾏在相应的环境中，这其中⼜有哪些事情需要我们去做？请期待；
3. 理论知识包括“软知识”和“硬知识”
  “软知识”和“硬知识”⼤家可能觉得词陌⽣，其实我⼀说⼤家就能明⽩。
所谓“软”的就是能在各个程序开发中都⽤到的，算是基本功、内功，例如数据结构、算法、设计模式、⾯向对象等等；
所谓“硬”的就是能直接⽤于本程序开发的。⽤C语⾔你就得学C语⾔语法，此时学java没⽤。我们web前端开发所需要的硬知识其实都包含在三个标准⾥⾯：http标准、W3C标准和ECMAScript标准；
4. 聊⼀聊web前端开发中的“硬知识”
  “软知识”的内容⾮常多，也是我们⼤学时代学习的重点(没学好是另回事⼉，毕业再恶补)。我们本次主要讨论的是web前端这⼀个⽅向，因此就点到为⽌，让⼤家知道这些知识也在知识体系中扮演重要⾓⾊。
  刚才说道，硬知识有三个标准：http标准、W3C标准和ECMAScript标准，那咱们就挨个聊聊这三个标准。
4.1 http标准
  为什么做web前端要了解http标准？——因为浏览器要从服务端获取⽹页，⽹页也可能将信息再提交给服务器，这其中都有http的连接。web系统既然和http链接有⽠葛，你就必须去了解它。
  我的意见是：你不必去⾮常了解http的详细内容，但是你要了解web前端开发常⽤的⼀些http的知识——就是上图中我列出来的那些。当然，我知识列了⼀个纲，详细内容还得靠你⾃⼰去查阅(本⽂章讲的是知识框架，不会涉及任何知识点的详细内容)
  关于这⽅⾯的知识，建议去查阅《图解http》这本书，浅显易懂的讲述了这些内容，我曾经也看过。
4.2 W3C标准
  如果说你只知道web前端的⼀个标准，估计肯定是W3C标准了(据我了解，貌似⼤部分⼈真的都只知道这⼀个标准)。它的内容⾮常多，看看/TR/这个页⾯。
  写到这⾥让我想起了⼀句话：2/8原则——20%的功能满⾜80%的需求。我觉得这句话⽤到这⾥⾮常合适，我们在平时开发过程中根本⽤不到这么多东西。反⽽，你要把平时⽤的多的东西搞懂了。
  下图的这些知识，我想不⽤再过多解释了，这就是我⽂章开发说的“三⼤块”(html、css、js)。现在你要知道，它们只不多是W3C标准的⼀部分，⽽W3C标准也只是web前端开发知识体系中的⼀部分⽽已。
  (下图没有完全展开，想看权展开的图，可下载本⽂⼀开始提供的附件)
  关于CSS的基础知识，⽑遂⾃荐⼀下⾃⼰之前的⼀篇系列博客：《CSS知多少》
4.3 ECMAScript 
  简称ES，写全称太⿇烦了。
  有些⼈可能只知道javascript，⽽不知道ES——其实，js是在ES的基础上，为web浏览器做了⼀部分封装(增加了DOM操作、BOM操作等)。
  如上图中的这些概念，⼤家可能平时都在javascript中看到，其实他们是ES的内容。只不过javascript继承了ES的这些特性，并且javascript⽤的⽐较⼴泛，因此才会在js中讨论的多⼀些。
  还是那个“2/8原则”。其实ES中的内容也⾮常多，⽽且更新很快，现在都到ES6了。但是我上图中列出来的这些都是最重要的概念。如果你不懂原型、闭包和作⽤域，那就说明你还不完全了解ES，也就是不完全会⽤javascript。
jquery学习在线教程  在此⽑遂⾃荐⾃⼰之前的⼀篇系列博客，⼤家可以去参考：《深⼊理解javascript原型和闭包系列》
5. 框架和类库
  前⾯已经描述完了web前端开发所需要的理论知识。如何实践呢？——不能蛮⼲——还得绕世界去看看，有哪些⼤⽜已经为我们做出了如此多的贡献。
  ⽤下⾯的这些类库或者框架，能⼤⼤提⾼你的开发效率。
⾸先，jquery⼀定是⼤部分web前端开发者不可或缺的⼯具。⽽我利⽤jquery不仅仅停留在只使⽤它的API和插件上，我还会⾃⼰去写jquery插件，我还会去读jquery的源码、了解jquery的设计思路。如果你也能那样做，请相信我，你会收获到意想不到的效果。如果有⼀个问题：怎样才能最最透彻的理解javascript的事件系统？最佳答案之⼀：读⼏遍(⼀遍可能读不懂)jquery关于事件处理部分的源码！
bootstrap不⽤再过多解释了吧，从github上的排名也能看出道道来。甚⾄连我们公司的UI设计师，都从bootstrap上截图作为素材。
fontAwesome是全世界最强⼤的图标系统。相⽐于css制作图标来说，这个要好很多倍，不管是开发、效率还是维护上。icomoon.io 能让我⾃定义选择⾃⼰的图标⽂件。
requirejs和seajs这种模块定义系统，也⼀定是你系统中不可或缺的。我曾经看过⼀个教程，讲师就说：requirejs带来了既jquery之后的第⼆次前端技术变⾰。
其他的，backbone、angular、react这些也慢慢的开始发挥了他们的价值，此处精⼒有限就不再赘述了——但是，他们很重要——你⾄少要试着去了解它们。
6. 编码开发
  要问编码IDE哪家强，当然要属微软的visual studio！但是即便是微软的VS最新版本，它也代替不了
下⾯要说的这套开发环境。
  如果你专门做web前端，就不要在⽤vs了，当然要选择sublime。写html语句还⽤⼿动⼀条⼀条写吗？
你得需要zencoding的协助，否则效率太差了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。