关闭

web前端开发入门_ web前端需要掌握的知识体系

时间: 2018-11-17阅读: 1189标签: web

入门者的知识体系包括哪些东西呢,下面是我的个人看法,按照这个流程走不一定立刻成为大牛,至少能让入门者抓住重点一步步走下去:


1. 基本工具使用

Git/GitHub的熟练使用,编辑器(sublime、webstrom、atom、vscode)的体验区分与使用,chrome开发调试工具的使用,Photoshop的简单使用,FQ软件、笔记工具、流程图工具、思维导图工具的了解使用


2. 静态页面功底

doctype、乱码、meta、字体原理、字体图标、常见标签的用法、html书写规范、css选择器使用及权重、css常见样式的写法、雪碧图、inline-block特性与使用、line-height与vertical-align用法、盒模型种类、浮动的特性与应用(两栏三栏布局)、清除浮动clearfix、BFC、定位的特性与使用场景、z-index、浮动与负边距的应用(圣杯布局双飞翼布局)、常见的CSS Hack、边框+伪元素+定位的应用(做三角、tooltip、绘制简单的效果)、CSS编码规范等。 
掌握这些功底后力量上你可以用合理规范的方式写出任何你看的到的静态页面,你有底气把自己写的html CSS代码拿给任何一个大牛来评判,给你一个页面你会无视效果直接审查元素指出源码中的不足并提出改进意见。


3. js与JQuery功底

页面渲染基本原理、白屏与FOUC、数据类型与类型转换、引用类型与基础类型的区别、深浅拷贝、声明前置、函数声明与函数表达式、字符串的各种操作、正则的各种操作、贪婪模式与非贪婪模式、日期数学函数各种操作、作用域与作用域链的概念与应用、闭包的概念与应用、IIFE的封装性、setTimeout相关概念、事件冒泡捕获机制、绑定事件的兼容性封装、事件代理、ajax的原理与封装、跨域的几种方式与实现、jsonp的封装、原生js实现常见效果的实现(懒加载、点击加载、回到顶部、导航条、Dialog、Tab等)、jquery的语法与使用、jquery实现各种常见效果(懒加载、点击加载、回到顶部、导航条、Modal模态框、Tab切换、各种轮播、瀑布流布局、木桶布局、懒加载+ajax+瀑布流的使用等)

做了这些后,你会对代码的规范性和美感有一定的认识,会以写出精简、好看、复用性高的代码为目标而不是以实现效果为目标。分析、拆解未知问题的能力有所提高,习惯于使用google搜索文档并掌握一些搜索技巧、习惯看英文文档、熟练使用调试工具定位错误解决问题,尝试总结纪录甚至分享心得。
到这里,你的能力甚至能力超过一些所谓的一两年甚至两三年工作经验的前端开发者。在交流群里慢慢的以准确、睿智的视角帮初学者解决问题。你开始发现代码不管怎么优化总是没那么满意,你会为别人更优雅的解决方式叹服抱怨自己太笨,你在空余时间默默实现你在很久以前羡慕的效果,默默的开始美化自己的博客记录心得,你开始觉得自己玩High了。对于找工作反而不急了。


4. JS进阶

OOP的概念、构造函数创建对象的方式、原型与原型链(会画图)、继承的写法、功能模块化的写法、常见的设计模式(工厂、单例、发布订阅)、面向对象的应用(轮播组件、Tab组件、曝光组件、日历组件、Dialog组件等)、JQurey插件的封装、JQuery核心源码解读、HTTP&webserver相关知识点、CMD&AMD规范、模块化写法 (Requirejs或者webpack使用)、npm的使用、工程化概念与应用(gulp)、HTML5新功能、纯CSS做一些有意思的特效和动画(如按钮、渐变特效、loading、CSS3轮播、3D轮播等)、响应式的应用(写一个bootstrap的栅格系统)、CSS预处理等

到这里之后,基本功已经很牢靠了,可以去看node教程、去看ES6语法、去尝试用express搭建个博客、去跑跑react Angular里的Demo,在一番体验后你清楚的知道它们的应用场景与利弊之道哪些需要深入哪些需要了解。

在学的同时在去多关注些大牛博客前端社区(了解跟进新技术),需要找工作的可以多做做笔试面试题(查缺补漏),如果是应届生需要抽空补一补数据结构算法。网络上东西太多太杂,在自己有一定判断力之后在去吸收些精华,否则很容易陷入迷茫不知道如何入手。那些所谓的让人眼花缭乱的新技术在基础扎实的前提下很容易快速介入,不要舍本逐末,丢了西瓜捡芝麻。


关于看书

在无人指导的情况下,看书是一种学习途径。比如《JS高级程序设计》《权威指南》是前端开发者必看书籍。但对于入门的同学来说看着费劲很难看懂、而且太枯燥很难坚持下去。我的建议是好的书籍是学习的补充,在有一定积累后可以把书作为查漏补缺的工具,平时偶尔翻一翻,对知识点不是很清楚可以针对性翻一翻。书是买来看的,不是找心理安慰的,一本一本买,一本一本看。对不喜欢看书的同学,也不要盲目跟风强迫自己做不喜欢的事失去了对前端的乐趣


关于入门学习资料

学习资料和看书一样,不要上去就收集一大堆自己永远都不会在看第二眼的资料(虽然里面有很多精华)。 HTML CSS可以从MDN看起CSS | MDN  。 在学习的时候 心里一定有个知识体系脉络图,参考我上面写的知识体系。一个知识点一个知识点的去学习去查找,如果这个资料没有在去google下一个资料,这个时候很多大牛的博客很多推荐资料才真的对你有价值,不至于自己在一些无关紧要的地方浪费大量时间和精力而不自知。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1359

关闭

web页面录屏实现

如果你的应用有接入到web apm系统中,那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误,给出错误栈,帮助你定位到BUG。但是,有些时候,当你不知道用户的具体操作时,是没有办法重现这个错误的,这时候,如果有操作录屏,你就可以清楚地了解到用户的操作路径

web开发-前后端分离原理

前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx+Tomcat的方式(也可以中间加一个Node.js)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式

web浏览器基础知识【web前端】

Web浏览器的主要功能是展示网页资源,即请求服务器并将结果展示在窗口中。地址栏输入URL到页面显示经历的过程、浏览器的主要组件、浏览器渲染...

开发者吐槽:谷歌引入 Web 新标准的方式过于专横

我和我在微软的同事们认为世界需要更多的 Clippy——也就是这个可爱的动画回形针。为此,我们在 Edge 6.0 中引入了一项新功能。Web 开发者现在可以使用 <clippy> 来调用一个动画虚拟助手了。

Web 研发模式的演变

Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。这种模式的好处是:简单明快

web的应用模式

在开发web应用中,有两种模式:1、前后端分离。2、前后端不分离。在前后端分离的应用模式中,我们通常将后端开发的每个视图都成为一个接口。或者API。前端通过访问接口来对数据进行增删改查。

web开发,关于XSS的介绍和案例分析

XSS攻击的全称Cross Site Scripting(跨站脚本攻击),为了避免和样式表CSS混淆而简写为XSS。XSS恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。

Web前端设计排版小技巧

web设计排版多种多样,如何更好的排版、设计出更符合美学的设计了?设计该如何更好的做好网页设计的布局排版了,今天给大家分享这几个小技巧,希望大家能有所用。

成为Web开发人员的7个简单步骤

你想成为一名Web开发人员,但现在你面前有这样一个问题,那就是你没有在高科技行业工作的经验。你上了一些课程,也花了时间在个人编码项目上

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!