社区导航

 

搜索
查看: 3572|回复: 20

[原创] 简单聊聊web前端

[复制链接]

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

发表于 2017-12-23 17:30:10 | 显示全部楼层 |阅读模式
本帖最后由 lcofjp 于 2017-12-23 18:23 编辑

做了几年单片机开发的工作,原理图、画板、写程序以及器件选型、测试之类这些都做,工作琐碎,知识含量也不高,深感疲倦,遂一念之间转做了码农。但是我还是告诫大家,别轻易转行,没相关工作经验工作并不好找,转行意味着从零开始,尤其是别裸辞,我找了两三个月才找到了目前这份工作,中间喝了一段时间西北风。
目前这份前端工作还不到一个月,所以我在前端方面还是个新新手,但是答应了管管要分享点web前端的东西,所以简单的聊一聊web前端开发相关的内容,让电工们对前端也有所了解,坛里大牛如云,勿见笑,如有错误之处请多多包涵与指正。

web前端是最近几年才兴起的,兴起的原因大概是AJAX的广泛使用和浏览器性能的提高,许多更适合前端处理的工作从后端转移了过来,node.js的出现使JavaScript在服务器端也占有了一席之地,并且前端技术借助一些框架还在向桌面应用和移动应用领域扩张,所以前端火了。

构成web前端的基础无非就是三大件:HTML,CSS,JavaScript(简称JS)。HTML是内容,CSS控制内容的表现,JavaScript最为强大,可以控制一切。

HTML是基石,一个页面可以没有CSS和JS,但是不可能没有HTML,CSS和JS都是通过HTML引入的。HTML的内容也比较简单,就是一些基本元素,比如<div> <input>这些,其中有些必不可少的有html,head,body,如果HTML文件中没有这些元素,则浏览器自动添加。html文件的第一行应该是声明文档的内容,通常是<!doctype html>来声明这是一个html5文件,浏览器知道文档类型之后,就可以按相应规则去解析文档。下一个重量级的元素就是head中的<meta charset="编码类型">,要及早通知浏览器本文档的文字编码类型,是浏览器可以更快的解析文档,所以这个元素应该放在head中第一条的位置中。
html5中引入了更具语义的标签,以及一些专用标签,比如<video>和<audio>,以前要在网页中嵌入音视频必须要通过flash来实现,现在可以摆脱了flash了,mp3和mp4应该是目前支持的最好的两种格式,要说音视频格式的内容(编码和容器)就比较多了,就不在这里扯了。<canvas>和svg的支持使数据可视化变得非常容易和炫酷,canvas不仅支持2D图像编程,还支持webgl开发3D应用,比如游戏。有兴趣的可以了解下echarts, d3.js, three.js等库。
在编写html过程中,遇到一些特殊符号的内容是没法避免的,这时候就需要用html实体(entity,以&开头;结尾的字符序列)来解决问题,比如保留字符:&、<、>、"这四个字符在HTML中具有特殊含义,需要分别用& < > "来表示。还有空格的处理,在html中的连续空白字符会被解析成一个空格,也就是无论html中写了多少个连续的空格,最终看到的只有一个,如果要插入多个空格,就需要插入多个 来实现,而 并不能完美解决一些问题,尤其是汉字文档中,例如有些表格中,两个字的列要个三个字的列保持一致,可能要在两个字的词之间插入一个空格,这时插入 并不能解决问题,插入两个也对不齐,因为 和汉字宽度之间没有对应关系,此时插入&embp;就比较合适,&embp;是全角空格,和汉字宽度保持一致,除了这个还有半角空格:&enbp;。还有一些特殊字符常用实体来表示,比如©:© 其实任何字符都可以用实体来表示,比如“我”字,可以用我这种形式表示,其中25105是unicode码点(code point)的十进制表示。更多的实体请参见这里:https://dev.w3.org/html5/html-author/charref
由于html元素的标签通常成对出现,又包含大于号小于号斜线等,写起来不是很方便,所以如果编辑html文件的话会是一件痛苦的事,所以懒惰的人发明了如pug.js这样的模板,用另一种简洁的语法来书写然后再转换成html,比如
p hello 会转成 <p>hello</p>, 比如一个表格可以用循环来实现。
另外MarkDown也是写作博客、文档等的利器,其就是使特定语法转换为html,转换工具比如marked
如果每个文档都从0开始写起的,那么也是一件乏味的事情,不过已经有人按最佳实践帮我们搭建起了html框架:html5-boilerplate,我们只需在此基础上添加内容即可。
前端开发清单:https://github.com/JohnsenZhou/Front-End-Checklist  ,提醒你每个页面所必要的东西。

CSS用来设置内容的样式,比如元素大小,字体大小和颜色等,尤其CSS3出现以后,各种炫酷的效果都可以用CSS来实现,比如背景渐变、阴影效果,元素的变换(平移、旋转、缩放),过渡效果、动画效果都原生支持,还有多种布局样式来控制页面布局,比如多列布局,Grid,FLex,Table布局。
CSS的内容比较多,学习CSS最权威的书籍就是《CSS THe Definitive Guide》作者是Eric A. Meyer。这是CSS最权威的指南,英文版的第四版刚出来不久,中文只有第三版,叫《CSS权威指南》(不建议购买,内容比较陈旧了)。
选择器是CSS的根基,CSS是用来给HTML元素设置样式的,那么样式是针对哪些元素的,这是就要用选择器来指定,选择器的详细语法可以参考W3C的文档。
掌握长度单位的使用也很重要,长度单位分为相对长度和绝对长度,绝对长度如:in, cm, mm, pt, px,在印刷领域绝对长度用的比较多,相对长度如rem和em,rem是根元素(html元素)的字体大小(font-size). em一般是参考父元素或者当前元素字体的大小,一般页面用rem,em和px的比较多。后来又出现了相对视口的单位,视口就是指浏览器窗口或者移动设备的显示区域。vw是视口宽度的1%,vh是视口高度的1%,比如窗口宽度的一半就是50vw。
html元素分为块元素和行内元素(display属性:block、inline-block、inline、等等),块元素具有宽高属性和盒模型,盒模型就是指margin,border,padding和content这几个属性,元素的大小是否包含border和padding需要根据元素的box-sizing属性来决定。
元素在文档中按顺序一个一个排列,这时position默认是static的,如果想改变默认的位置,就需要改变position的值,比如fixed会一直相对浏览器窗口定位,absolute绝对定位会把某个元素从文档流中提取出来,然后相对某个不是static的祖先定位,或者根据body定位。relative相对定位不从文档流中移除,仍保留他本来的位置,但是他可以相对自己的位置随意设置偏移来改变自己的位置。
响应式设计最近几年比较火,就是同一个页面在PC或者移动端都具有良好的表现形式,能根据屏幕的大小改变布局。可以通过媒体查询或者其他技术来实现。
CSS的一个问题是,由于浏览器厂商和版本众多,浏览器的默认属性是有差别的,因此依赖于默认的属性的设置在不同浏览器中的表现可能就会不一致,所以通常页面中会包含一个统一默认属性的css文件,比如Normalize.css
css如果从0写起的话,也是一件工作量很大的工作,不仅涉及到编码,还涉及到设计,而且未必能良好的工作,而bootstrap这样的框架给我们带来了极大的福音,使用bootstrap我们就可以通过写少量css甚至不写来实现一个漂亮的页面,而且具有良好的响应式布局。bootstrap包含大量组件(按钮、表单之类),能满足日常的大部分应用。除bootstrap外,开源社区还有类似的大量框架。
Ant Design包含了大量高质量的组件,几乎能满足大部分应用,写出一个漂亮的界面就是简单动动小手的事。
虽然CSS功能强大,但是在编程表达能力方面偏弱,各路大神又发明了产出和加工css的工具,包括但不限于:less,sass,sytlus,postcss
各种CSS技术技巧尽在CSS-TRICKS,可以订阅他的邮件和Twitter。
各种各样的图标FLATICONGLYPHICONS

JavaScript:JavaScript之父和本坛@freebsder 大神都认为JavaScript是最垃圾的语言,不过我认为,经过短短几年的努力的,JavaScript已经完全步入了现代化,成为了一门正常的语言。最重要的是,它是浏览器唯一指定官方语言。JavaScript是基于原型的面向对象语言,和基于类的面向对象语言有一定的差别,虽然ES6(ES是js的标准,ES6就是ES2015,类似于C99这样的表示法)提供了类的语法糖,但是其类的本质还是一个函数。我认为js最糟糕的是js没有局部作用域,一个var变量要么属于全局作用域,要么属于某个函数,一不小心就会出问题,因为习惯了其他语言的人常常忽略这个事。另外一个js中的数值并不区分整数和浮点数,一切数值都用64位浮点数来表示,这会带来效率问题,不过我觉得现代浏览器已经在这方便做优化了。
js最重要的功能就是操作DOM,也就是可以动态的增加、删除、修改html元素,处理DOM事件,以及通过AJAX和服务器通讯。不过用原生js来写的话,由于浏览器之间API可能存在不兼容的问题,这又是一个头疼的事,jQuery的流行就是因为它处理了浏览器兼容问题并提供了功能丰富且简洁的API,由于jQuery功能强大导致体积也大,所以出现了zypto这样的精简版的jQuery。
在ES6之前,js的代码写起来比较费力且丑陋,因此诞生了各种可以生成js的语言。如CoffeeScript, TypeScript, Scals.js, ClojureScript, Dart等,他们都有各自的优势和特点,即使ES6发布后,仍有很多语言保持强劲的势头。
随着web应用越做越大,功能的增加会导致项目难以维护,于是各种MVC、MVVM等形式的框架开始涌现,目前的局面是ReactAngularVue三大框架鼎立、其他框架各雄霸一方的局面,借用一张图片:
blog.jpg
三大框架.png
一些框架的特点可以参考这个博客:https://www.sitepen.com/blog/201 ... eworks-conclusions/
虽然ES6支持模块化,但是目前大部分浏览器是不支持模块化的,因此模块化的打包工具也火了,如webpackrollup.js, parcel ,他们把ES6的模块转化为浏览器能识别的模块,并且他们不仅仅管理js,还可以管理CSS以及各种资源。学习JavaScript的书籍首推《JavaScript权威指南》和《JavaScript高级程序设计》两本砖头书,然后《ES6标准入门》和《深入理解ES6》两本现代化js

此内容由EEWORLD论坛网友lcofjp原创,如需转载或用于商业用途需征得作者同意并注明出处




此帖出自编程基础论坛
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 17:38:52 | 显示全部楼层
我知道为啥论坛广告那么多了,帖子内容中的'&'字符竟然不进行转义,然后我写的实体字符都被吃掉显示出来了。
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 17:40:43 | 显示全部楼层
因为没几个人看所以我就不改了。
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

911

TA的帖子

5

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

发表于 2017-12-23 17:54:32 | 显示全部楼层
队长牛逼,同转行路过

点评

跟你比起来我弱爆了。。  详情 回复 发表于 2017-12-23 18:24
作为一个菜逼,干货并没有多少。唯一会的就是水,所以回帖水分大。望见谅!


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 18:24:05 | 显示全部楼层
人民币的幻想 发表于 2017-12-23 17:54
队长牛逼,同转行路过

跟你比起来我弱爆了。。
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

557

TA的帖子

79

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2017-12-23 19:27:52 | 显示全部楼层

最近我正在自己看这东西,还是挺有意思的。
多谢八神


回复

使用道具 举报

557

TA的帖子

79

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2017-12-23 19:45:46 | 显示全部楼层
认真拜读了这篇文章。
八神说的这些框架是好东西,我觉得我熟悉了基本的东西以后,就看看这些框架。
JS是不是其实不复杂?网上下个特效,自己拿回来改改,就能用了吧?
有人动手写那些复杂的特效吗?

点评

一般页面的话,jQuery+bootstrap就够用了,一般特效jQuery+相应插件就能搞定。jQuery有很多插件。  详情 回复 发表于 2017-12-23 19:55


回复

使用道具 举报

3315

TA的帖子

0

TA的资源

纯净的硅(高级)

Rank: 6Rank: 6

发表于 2017-12-23 19:48:14 | 显示全部楼层
恭喜队长成功转型
过来仰望一下高层
So what......


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 19:55:28 | 显示全部楼层
高进 发表于 2017-12-23 19:45
认真拜读了这篇文章。
八神说的这些框架是好东西,我觉得我熟悉了基本的东西以后,就看看这些框架。
JS是 ...

一般页面的话,jQuery+bootstrap就够用了,一般特效jQuery+相应插件就能搞定。jQuery有很多插件。

点评

我就特别发怵写CSS。 我以前用.net写过后台,页面就用人家写好的CSS。 自己写CSS没一个图形工具,觉得很发怵  详情 回复 发表于 2017-12-23 20:02
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

6843

TA的帖子

17

TA的资源

版主

Rank: 6Rank: 6

发表于 2017-12-23 20:02:43 | 显示全部楼层
恭喜队长找到工作,恭喜队长成功转型
training


回复

使用道具 举报

557

TA的帖子

79

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2017-12-23 20:02:51 | 显示全部楼层
lcofjp 发表于 2017-12-23 19:55
一般页面的话,jQuery+bootstrap就够用了,一般特效jQuery+相应插件就能搞定。jQuery有很多插件。

我就特别发怵写CSS。
我以前用.net写过后台,页面就用人家写好的CSS。
自己写CSS没一个图形工具,觉得很发怵

点评

CSS不难,一本CSS权威指南看完你就是高手了  详情 回复 发表于 2017-12-23 20:09


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 20:09:44 | 显示全部楼层
高进 发表于 2017-12-23 20:02
我就特别发怵写CSS。
我以前用.net写过后台,页面就用人家写好的CSS。
自己写CSS没一个图形工具,觉得 ...

CSS不难,一本CSS权威指南看完你就是高手了
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

1511

TA的帖子

1

TA的资源

纯净的硅(高级)

Rank: 6Rank: 6

发表于 2017-12-23 20:54:53 来自手机 | 显示全部楼层
当扩展吧。进去1年后前端比嵌入式还没劲,高不成低不就,还是得要么往上要么往下。虽然它很热很火,st一样火,可流行不能证明它们不是垃圾。以上虽然不好听但是事实,说出来只是希望队长职场顺利。,目的只有一个坐等队长5块钱散板。

点评

写代码很适合我,写了两年代码了,没感觉到厌倦,而是很有兴趣。  详情 回复 发表于 2017-12-23 21:07


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 21:07:44 | 显示全部楼层
freebsder 发表于 2017-12-23 20:54
当扩展吧。进去1年后前端比嵌入式还没劲,高不成低不就,还是得要么往上要么往下。虽然它很热很火,st一样 ...

写代码很适合我,写了两年代码了,没感觉到厌倦,而是很有兴趣。

点评

写代码和前段完全两回事,写代码太广义,前段很狭隘。正是因为狭隘才有多余的时间和精力收那么多其他语言其他领域的书看。队长你开心就好,散板子吧。  详情 回复 发表于 2017-12-23 21:25
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

1511

TA的帖子

1

TA的资源

纯净的硅(高级)

Rank: 6Rank: 6

发表于 2017-12-23 21:25:21 来自手机 | 显示全部楼层
lcofjp 发表于 2017-12-23 21:07
写代码很适合我,写了两年代码了,没感觉到厌倦,而是很有兴趣。

写代码和前段完全两回事,写代码太广义,前段很狭隘。正是因为狭隘才有多余的时间和精力收那么多其他语言其他领域的书看。队长你开心就好,散板子吧。

点评

没房子,没媳妇,我再散了板子,生活还有什么意义  详情 回复 发表于 2017-12-23 21:57


回复

使用道具 举报

5470

TA的帖子

190

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2017-12-23 21:57:48 | 显示全部楼层
freebsder 发表于 2017-12-23 21:25
写代码和前段完全两回事,写代码太广义,前段很狭隘。正是因为狭隘才有多余的时间和精力收那么多其他语言 ...

没房子,没媳妇,我再散了板子,生活还有什么意义
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

1429

TA的帖子

2

TA的资源

纯净的硅(中级)

Rank: 5Rank: 5

测评达人

发表于 2017-12-24 11:12:56 来自手机 | 显示全部楼层
看起来前端的坑也是大大的


回复

使用道具 举报

351

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2017-12-24 20:25:01 | 显示全部楼层
圣诞节快乐!
楼主很用心,经验之谈!


回复

使用道具 举报

5

TA的帖子

0

TA的资源

一粒金砂(初级)

Rank: 1

发表于 2018-12-22 17:16:21 | 显示全部楼层
认真拜读了这篇文章。


回复

使用道具 举报

416

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2018-12-22 20:32:20 | 显示全部楼层
纯友情支持 帮顶


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

Archiver|手机版|小黑屋|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2019-1-16 18:03 , Processed in 0.505088 second(s), 18 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表