web前端开发需要用到哪些知识

一、web前端开发需要用到哪些知识

CSS2.1，CSS3规范，与HTML结合实现各种布局、效果

Ecma-262定义的javascript的语言核心，原生客户端javascript，DOM操作，HTML5新增功能

一个成熟的客户端javascript库，推荐jquery

一门服务器端语言：如果有服务器端开发经验，使用已经会的语言即可，如果没有服务器端开发经验，熟悉Java可以选择Servlet，不熟悉的可以选PHP，能实现简单登陆注册功能就足够支持前端开发了，后续可能需要继续学习，最基本要求是实现简单的功能模拟，

在掌握以上基础技能之后，工作中遇到需要的技术也能快速学习。

恰当的工具能有效提高学习效率，将重点放在知识本身，在出现问题时能快速定位并

解决问题，以下是个人觉得必备的前端开发工具：

文本编辑器：推荐Sublime Text，支持各种插件、主题、设置，使用方便

浏览器：推荐Google Chrome，更新快，对前端各种标准提供了非常好的支持

调试工具：推荐Chrome自带的Chrome develop tools，可以轻松查看DOM结构、样式，通过控制台输出调试信息，调试javascript，查看网络等

辅助工具：PhotoShop编辑图片、取色，fireworks量尺寸，AlloyDesigner对比尺寸，以及前面的到的Chrome develop tools，

入门阶段反复阅读经典书籍的中文版，书籍中的每一个例子都动手实现并在浏览器中查看效果

在具备一定基础之后可以上网搜各种教程、demo，了解各种功能的实际用法和常见功能的实现方法

阅读HTML，CSS，Javascript标准全面完善知识点

阅读前端牛人的博客、文章提升对知识的理解

熟记前面知识点部分的重要概念，结合学习经历得到自己的理解

熟悉常见功能的实现方法，如常见CSS布局，Tab控件等。

以下是入门阶段不错的书籍和资料

HTML先看《HTML& CSS: Design and Build Websites》1-9章，然后《HTML5: The Missing Manual》1-4章。

CSS先看《CSS: The Missing Manual》，然后《CSS权威指南》

javascript先看《javascript高级程序设计》，然后《javascript权威指南》

在整个学习过程中HTML CSS JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。

动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。以下是一些比较好的教程网址

可以搜索各大公司前端校招笔试面试题作为练习题或者他人总结的前端面试题还有个人总结的面试题（带参考答案）

有各种各样的教程

MDN也有很多教程，更重要的是里面有详细的文档，需要查找某个功能时在Google搜索：xxx site:

也有很多优质教程

原生javascript是需要重点掌握的技能，在掌握原生javascript的基础上推荐熟练掌握jQuery，在实际工作中用处很大，这方面的书籍有《Learning jQuery》或者去jQuery官网

建一个账号，保存平时学习中的各种代码和项目。

有了一定基础之后可以搭建一个个人博客，记录学习过程中遇到的问题和解决方法，方便自己查阅也为其他人提供了帮助。也可以去或者这样的网站注册账号，方便实用

经常实用Google搜索英文资料应该经常找到来自的高质量答案，与到问题可以直接在这里搜索，如果有精力，注册一个账号为别人解答问题也能极大提高个人能力。

经典书籍熟读之后，可以打开前面必备基础技能部分的链接。认真读对应标准，全面掌握知识

有了前面的基础之后，前端基本算是入门了，这时候可能每个人心中都有了一些学习方向，如果还是没有。

可以参考前面必备技能部分提到的那两个项目，从里面选一些进行发展学习。以下是一些不错的方面：

Grunt：前端自动化工具，提高工作效率

bootstrap：优秀的CSS框架，对没有设计师的团队很不错，与less结合使用效果完美

requirejs：AMD规范的模块加载器，前端模块化趋势的必备工具

Node.js：JavaScript也可以做后台，前端工程师地位更上一步

AngularJS：做Single Page Application的好工具

移动端web开发：智能手机的普及让移动端的流量正在逐步赶超PC端

Javascript内存管理：SPA长期运行需要注意内存泄露的问题

High Performance JavaScript(Build Faster Web Application Interfaces)

Best Practices for Speeding Up Your Web Site：重要技能

chrome dev tools：前端开发调试利器，着重注意几个功能：

liveload:修改页面后自动刷新，不用按F5

dimensions：直接在页面上测量的利器

livestyle：css样式修改后自动起效果，不需要刷新，elements修改后也能同步到代码中

pagespeed，YSlow：页面性能分析和优化插件

马克飞象：优秀的在线markdown编辑器，快速写周报，做记录

watch expression：通过表达式查看当前内存中的值

call stack：查看调用栈，开启async，可以看异步调用栈（这个非常有用，尤其是ajax调试的时候）

scope variables：作用域链上的变量，非常有用

sources：代码中添加断点，单步调试，以及单步调试过程中查看内存中的对象

network：抓包查看每个请求，非常重要，前后端联调必备

timeline：分析渲染、js执行等等各个阶段，性能优化利器

emulation：模拟移动端环境，mobile页面开发必备

sublime text2：编码方便，插件多，速度快，性能好

sublimelinter+各种语言的lint和hint：代码纠错

一些snippets：自动补全，提升开发效率

Intellij IDEA和WebStorm：集成开发环境，集成了各种功能，开发比sublime要方便，但会比较吃性能

Mark Men：测量、取色、标注利器，拿到视觉稿之后第一个打开的软件

GFW Fucker：我用红杏，可以的话买个虚拟服务器当梯子

iHosts：非常优秀的hosts管理软件，轻松修改hosts，开发调试必备

Charles：Mac平台最好用的抓包分析工具

Rythem：AlloyTeam出品的代理抓包软件，非常轻量，安装简单，移动端（真机）开发调试很好用

Wunderlist：一个非常不错的Todo List，任务、需求多的时候管理起来很方便

前端的技能其实除了JavaScript（包括NodeJS）、HTML、CSS以外，还有很多。其实前端的技能树很大，这里只能列一些我开发中见到的说一说

作用域链、闭包、运行时上下文、this

CSS布局的方式和原理（盒子模型、BFC、IFC等等）

CSS 3，如animation、gradient、等等

异步控制（Promise、ES6 generator、Async）

模块化的开发方式（AMD、CMD、KMD等等）

JavaScript解释器的一些相关知识

jQuery：基于选择器的框架，但个人认为不能叫框架，应该算工具库，因为不具备模块加载机制，其中源码很适合阅读钻研

AngularJS/Avalon等MVVM框架：着重理解MVVM模式本身的理念和双向绑定的实现，如何解耦

underscore：优秀的工具库，方便的理解常用工具代码片段的实现

polymer/React:组件化开发，面向未来，理解组件化开发的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及浏览器处理的流程和绘制原理

DOM树、CSSOM树、渲染树的构建流程及页面渲染的过程

解析HTML、CSS、JavaScript时造成的阻塞

Canvas开发及动画原理（帧动画）

网页可用性、可访问性、其中的意义

SEO搜索引擎优化，了解搜索引擎的原理

善用缓存（application cache、http缓存、CDN、localstorage、sessionstorage，备忘录模式）

减少选择器消耗（从右到左），减少DOM操作（DOM和JavaScript解释器的分离）

Web Componets：面向未来的组件化开发方式

移动端Native开发：这也是需要了解的，以后前端工程师会经常地和webview打交道，也要了解native开发

二、零基础学习前端开发要怎么开始

这里整理了一份web前端学习路线的思维导图，需要掌握和学习的内容如下：

1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。

2.熟练运用HTML+CSS特性完成页面布局。

4.熟练应用CSS3技术，动画、弹性盒模型设计。

6.熟练运用所学知识仿制任意Web网站。

7.能综合运用所学知识完成网页设计实战。

1、Web前端开发环境，HTML常用标签，表单元素，Table布局，CSS样式表，DIV+CSS布局。熟练运用HTML和CSS样式属性完成页面的布局和美化，能够仿制任意网站的前端页面实现。

2、CSS3选择器、伪类、过渡、变换、动画、字体图标、弹性盒模型、响应式布局、移动端。熟练运用CSS3来开发网页、熟练开发移动端，整理网页开发技巧。

3、预编译css技术：less、sass基础知识、以及插件的运用、BootStrap源码分析。能够熟练使用 less、sass完成项目开发，深入了解BootStrap。

4、使用HTML、CSS、LESS、SASS等技术完成网页项目实战。通过项目掌握第一阶段html、css的内容、完成PC端页面设计和移动端页面设计。

1.了解JavaScript的发展历史、掌握Node环境搭建及npm使用。

2.熟练掌握JavaScript的基本数据类型和变量的概念。

3.熟练掌握JavaScript中的运算符使用。

4.深入理解分支结构语句和循环语句。

5.熟练使用数组来完成各种练习。

6.熟悉es6的语法、熟练掌握JavaScript面向对象编程。

7.DOM和BOM实战练习和H5新特性和协议的学习。

1、软件开发流程、算法、变量、数据类型、分之语句、循环语句、数组和函数。熟练运用JavaScript的知识完成各种练习。

2、JavaScript面向对象基础、异常处理机制、常见对象api，js的兼容性、ES6新特性。熟练掌握JavaScript面向对象的开发以及掌握es6中的重要内容。

3、BOM操作和DOM操作。熟练使用BOM的各种对象、熟练操作DOM的对象。

4、h5相关api、canvas、ajax、数据模拟、touch事件、mockjs。熟练使用所学知识来完成网站项目开发。

1.综合运用Web前端技术进行页面布局与美化。

2.综合运用Web前端开发框架进行Web系统开发。

3.熟练掌握Mysql、Mongodb数据库的发开。

4.熟练掌握vue.js、webpack、elementui等前端框技术。

5.熟练运用Node.js开发后台应用程序。

6.对Restful，Ajax，JSON，开发过程有深入的理解,掌握git的基本技能。

1、数据库知识，范式，MySQL配置，命令，建库建表，数据的增删改查，mongodb数据库。深入理解数据库管理系统通用知识及MySQL数据库的使用与管理，为Node.js后台开发打下坚实基础。

2、模块系统，函数，路由，全局对象，文件系统，请求处理，Web模块，Express框架，MySQL数据库处理，RestfulAPI，文件上传等。熟练运用Node.js运行环境和后台开发框架完成Web系统的后台开发。

3、vue的组件、生命周期、路由、组件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能够运用Vue.js完成基础前端开发、熟练运用Vue.js框架的高级功能完成Web前端开发和组件开发，对MVVM模式有深刻理解。

4、需求分析，数据库设计，后台开发，使用vue、node完成pc和移动端整站开发。于Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，实现整站项目完整功能并上线发布。

1.熟练掌握React.js框架，熟练使用React.js完成开发。

2.掌握移动端开发原理，理解原生开发和混合开发。

3.熟练使用react-native和Flutter框架完成移动端开发。

4.掌握微信小程序以及了解支付宝小程序的开发。

1、React面向组件编程、表单数据、组件通信、监听、生命周期、路由、Redux基本概念。练使用react完成项目开发、掌握Redux中的异步解决方案Saga。

2、react-native、开发工具、视图与渲染、api操作、Flutter环境搭建、路由、ListView组件、网络请求、打包。练掌握react-native和Flutter框架，并分别使用react-native和Flutter分别能开发移动端项目。

3、微信小程序基本介绍、开发工具、视图与渲染、api操作、支付宝小程序的入门和api学习。掌握微信小程序开发了解支付宝小程序。

4、大型购物网站实战，整个项目前后端分离开发；整个项目分为四部分：PC端网页、移动端APP、小程序、后台管理。团队协作开发，使用git进行版本控制。目期间可以扩展Three.js、TypeScript。

这已经是一套非常完备的Java学习路线了，零基础学习Java完全自学的话还是比较吃力的，建议还是找专业的机构系统学一下，可以点击头像了解一下。

三、Web 前端面试

博客园整理了一下，有好的面试题欢迎大家发在评论区哟

4. call,apply,bind三者的区别？

5.请介绍常见的 HTTP状态码(至少五个)

7.实现(5).add(3).minus(2)输出6

13.说说各浏览器存在的兼容问题

15. active-class属于Vue哪一个modules,有什么作用

17. computed和watch有什么区别

18.Vue组件中 data为什么必须是函数

19. vue中子组件调用父组件的方法

20. vue中 keep-alive组件的作用

21. vue中如何编写可复用的组件？

27. Vue组件 data为什么必须是函数

28.计算属性computed和事件 methods有什么区别

33.vue-loader是什么?使用和用途？

34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透

闭包指有权访问另一个函数中变量的函数，

MDN:

B站视频：

call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的

一般情况下this指向其调用者（）

fun.call(thisArg,arg1,ary2,...)

fun.apply(thisArg,[argsArray])

作用：调用函数，改变函数内部this指向

apply主要应用于借助数学对象等

bind()方法不会调用函数，但可以改变函数内部this指向

fun.bind(thisArg,arg1,arg2,...)

thisArg:在fun函数运行时指定的this值

返回由指定的this值和初始化参数改造的原函数拷贝

call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call

状态码是由 3位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

阮一峰：

最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

active-class属于vue-router的样式方法

当routerlink标签被点击时将会应用这个样式

为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：

还可以不用exact这种方法去解决，例如

computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch更多的是[观察]的作用，类似于某些数据的监听回调，用于观察props$emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

去这里看一下​blog.csdn.net

vue-router默认使用 hash模式，所以在路由加载的时候，项目中的 url会自带#。如果不想使用#，可以使用 vue-router的另一种模式 history

需要注意的是，当我们启用 history模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL匹配不到任何静态资源，则应该返回同一个 index.html页面

过滤器也同样接受全局注册和局部注册

具体可参考官方文档深入响应式原理

我们可以将同一函数定义为一个 method或者一个计算属性。对于最终的结果，两种方式是相同的