零基础想要学好前端开发,必须先“学好切图做静态页面”

开头第一句,这个文章针对的是零基础学员。

WEB前端开发,是用JS来操作DOM和DATA,响应用户的操作,实现前端的交互,包括更新view和ui以及更多。

Dom,就是HTML页面。你点击一个DOM元素,触发一个JS事件,请求一个API接口,返回一个JSON,调用tpl或其它,生成或更新DOM。等待下一次事件触发。

这算是一个简单版的交互流程。

很多零基础的同学,被WEB前端职位的高薪所吸引,向往之,追求之。付出了很多的时间,精力,也确实是学会了HTML,CSS,JS,JQ。但对“WEB前端开发”却依然是不得其门而入。

原因就在于,

一、对于HTML网页的理解并不透彻;

二、对于“交互--响应”这个过程理解不到位。

因为时间关系,简单的说一下这二点。

HTML网页,在培训班里是做为HTML,CSS课程的面貌出现的。于是,很多同学以为学了HTML,CSS,就是学会了HTML网页制作。虽然网页在代码层面上确实是由HTML,CSS组成,但在实际工作中,网页制作并不等于“HTML + CSS”。

我在昨天的文章“新人提问 | 一个自学前端四个月的新人来信”说过,许多同学脑子里所学到的只是技术的罗列。我这句话的意思,是说培训班并不讲,这个网页是怎么来的,以及为什么要这么做。

培训班所讲的前端开发中的业务层面的内容也不完整,甚至是根本不讲。例如,这个网页它的需求分析,它的使用场景,数据传输与展示,等等,这些东西在网页上呈现的时候,需要什么样的DOM结构。

从代码的角度来讲,静态网页制作并不难,无非是HTML,CSS,这也导致很多同学对于网页制作的环节是轻视的。我并不是说它有多难,我只是说它的重要性并没有被许多初学者所认识到,当然这不怪他们,他们本来就不懂。只是培训机构嘛,早讲完早拉倒。

简单点说吧,切图做页面,它的重要性就在于,“决定前端的View层展现结构”,JS的整个运行结果,都是基于它的;JS控制的,也是基于它。

不熟悉静态页面的来龙去脉,就不知道JS往哪写,就抓不到你要写的DEMO的JS的起点,就无处下笔。

如果不重视这个,就会造成想要自己写点东西的时候,不知道写什么,不知道往哪写,不知道操作谁。

三不知。

业务需求UI设计,UI设计决定网页制作。哪怕你随便在网上找个网页或图,你也要给它假设一个业务场景。

否则,没有网页设计图,就没有静态页面,就没有业务,就不知道做什么,就不知道用JS写什么。

不要试图反驳我,因为这是工作流程决定的。

而多数培训机构只是填鸭式的教学,这也造成初学者脑子里只是一些程序,代码的机械复制。再加上一些同学自身的懒,学习效果就更呵呵了。

当然了,现在WEB前端分化的很厉害,上面那些说的是零基础入WEB前端坑的人。

-== 分割线 ==-

还有另一种,就是后端转前端。

他们是不必关心DOM的,他们是完全的操作数据。写的内容基本都很底层了,例如前端类库开发,前端框架与库,通用组件库,整体的前端架构制定,等等。基本不太涉及具体的UI交互

对于这种人来讲,JS只是另一种工具而已,他们不在此文的范围之内。

转行的同学,或没有扎实的计算机科学基础的人,至少在三年之内,不要想成为“他们”。

原文发布于微信公众号 - web前端教室(webfeel)

原文发表时间:2016-11-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】使用html5的十大原因

你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HT...

34810
来自专栏布尔

IE10预览:HTML5初探 翻译自Sencha

IE10预览:HTML5初探 在过去的几年里我们做了一系列测试来评估主要的移动平台对HTML5应用的支持。直到现在,我们仍旧没有花时间在Windows phon...

2038
来自专栏九彩拼盘的叨叨叨

前端知识点列表

1011
来自专栏IMWeb前端团队

使用React全家桶高仿「Eyepetizer」开眼

简介 Eyepetizer是个人比较喜欢的美而小的短视频日报应用 原站使用jquery实现, 正好api没有限制, 于是用react高仿了一下. 应用不复杂但是...

3077
来自专栏林德熙的博客

win10 uwp 商业游戏 界面添加图标感谢

在显示启动的时候,是需要加载游戏需要使用的资源,如果觉得这时需要控制进度条,就需要使用注入的方法,给他知道现在的进度,不过我现在不去做这里,于是就很简单的代码做...

1151
来自专栏星流全栈

还在纠结 Flux 或 Relay,或许 Redux 更适合你

2046
来自专栏知晓程序

帮你快速抢红包,微信聊天记录竟有这些隐藏操作? | 晓技巧

1443
来自专栏问天丶天问

Jquery使用echarts饼图

1591
来自专栏idealclover的填坑日常

话说输入法——各输入法简要测评

输入法,一个说小不小,说大也不大的东西。往小了说,这不是一个很大的市场,愿意折腾输入法的人也只是千里挑一;然而往大了说,这又是一个与我们的电脑与手机朝夕相伴的不...

6783
来自专栏SEO

【思考】百度新推出“网页标题作弊详解”

3558

扫码关注云+社区

领取腾讯云代金券