hello,大家好,经过上篇文章,相信大家都已经了解了js的红尘往事,但是往事不可追嘛,回顾当下,我们要学习最新的js,誓做前端街最靓的仔~
前端三剑客
如果你决定要做个前端仔了,那么请先认识下前端三剑客:html、css与js。其中html是网页,css负责样式,js负责动作。如果用一座大楼来解释的话,html是毛坯房、css是软装、js是水电。当然主人就是用户了,主人体验就依靠这哥仨的配合度了,要是只有html和css,相当于没水没电,简直活不下去。
html
html全名是Hyper Text Markup Language,即超文本标记语言,它包含一系列标签,如html、body、header、div、a等等,就相当于你建毛坯房的时候,你需要的砖、瓦、钢筋就是html里的不同标签,当然砖瓦会有各自的适用场景,当然你也可以“一块砖头走天下”,比如我家亲戚的二层小楼就是纯砖头盖的,我爸说虽然看起来也不错,但是不如用用点钢筋结实。
所以我们用html写页面的时候,你当然可以全程div,但是为了维护度和可读性,建议还是标签语义化,比如导航用nav标签,文字用p标签,模块选择section。
关于html标签的用法,我就不啰嗦了,直接上[菜鸟教程](https://www.runoob.com/html/html-tutorial.html)去对着写吧。也许你会觉得标签很多,记不住,没关系,我以前刚学前端的时候也这么苦恼过,但是多做几个页面很快就记住了。
css
css全名是Cascading Style Sheets,即层叠样式表。决定网页的显示样式,就是决定你家城堡要走公主风还是王子风的软装。关于css,给大家推荐一个博主[张鑫旭](https://www.zhangxinxu.com/wordpress/category/css/),他css的文章挺多挺全的,虽然有点怪蜀黍风格,我以前学css的时候经常看他的文章,很实用。
也许除了css,你还听说过less、scss、postcss,但是其实它们最终还是要转成css的,浏览器只认css,至于less之类都是为了我们开发者的方便才出现的。对于初学者,先学会css吧,然后less之类很简单,只是相当于加了模块和变量的css。
js
js就不用再多说了,上个篇幅也说了不少了,接下来的文章中我会以js为主。与之相关的,也许你还听过几个概念,如jQuery、zepto、Vue、React、Angular等,甚至还有Webpack、gulp、grunt、vite、element、antd等等。
js与jQuery、zepto
其实我之前自学前端的时候,根本分不清js和jQuery,只是网上找了教程,上来就写代码。然后居然就找到了一份还不错的前端工作,面试的时候我不想暴露自己不会js的缺点,面试题都是c 写的,然后可能因为我算法和网络的基础还不错,工作就到手了。
附上我那份面试收到的评价截图:
jQuery就是js的一个库,如果我们用纯js写网页功能的话,会很麻烦,比如获取id为_id的节点,要写成document.getElementById("_id"),如果是要获取class为_class的节点,又要写成document.getElementByclassName("_class"),很麻烦,而用jQuery的话,只需要简单使用选择器就可以了,如
如果你还是分不清,那么想象一下,js就是一堆土,而jQuery就是别人已经做好了的砖瓦。要盖房子了,你当然可以先和泥巴、再烧砖瓦,最后盖房子。或者你也可以直接用别人烧好的砖瓦去盖房子。纯原生js开发就是前者,而用jQuery就是后者。
zepto的话,相当于是jQuery的精简版,多因为其轻量的特点而用在移动端。
jQuery当年很火,老前端们的入行敲门砖很多都是《锋利的jQuery》,面试必考jQuery的某个API原理。当然,随着互联网的崛起,jQuery的缺点越来越明显,对于大型项目来说,jQuery无法高效支持模块化。虽然用jQuery加上魔法也可以模块化,但是代码可读性很差,并且只有大佬才会魔法。。。
React与Vue
因为React和Vue的崛起,jQuery逐渐被淘汰,React是Facebook开发的一个框架,最早用于内部,后来就开源了,再后来Facebook考虑过收费,国内一阵恐慌,纷纷想转Vue,但是后来Facebook放弃了收费,安心开源了。
Vue的开发者是尤雨溪,中国人,再加上Vue本身易上手的特点,Vue在国内的社区很繁荣,国内Vue用户也多于React用户。
说到这里,对于前端萌新来说,我觉得可以直接上手Vue或者React,没必要再去中间过渡一个jQuery,也许你会觉得太生硬,但是我确实喜欢赶鸭子上架,不行就硬来呗。我之前从jQuery转React的时候,只是看了阮一峰一篇React的入门文章,然后面上了React的工作,上来就硬写React,同时维护node,而我当时根本没写过node。当然过程很痛苦,那两周消瘦不少。再后来第一次写Vue项目的时候也是,直接拿到项目之后,一边写需求,一边看文档。当然我的方法也许有些速成,但我是个急性子,等不了慢慢磨。
最后回到一个哲学问题,Vue Or React?其实很简单,看你需要什么,或者你擅长什么,当然这里的“你”也指你的团队。如果短期内,你需要面试,建议至少精通一个,深挖底层,挖地三尺。如果长期来看,建议两个都学,艺多不压身嘛。不过人的精力是有限的,我做过React和Vue项目,但是目前的话,主要是以React为主,经常挖React源码,Vue作为小蛋糕,经常看看但是很少吃。
还有就是关于大厂更喜欢React这个事,确实有这个情况,但是大厂也有不少用Vue的,所以还是那句话,一招鲜吃遍天!至少精通一个吧~
Angular
最后来说说Angular,国内用的不多,所以市场不大,社区也有点凋零,请谨慎选择~
当然如果你是Angular真爱党,加油,孤独也是一种美~
grunt、gulp、webpack、vite
这四个都是构建工具,简单来说,比如我写了一个项目,图片、js、css以及html文件很大,上线的时候想处理下,比如js需要压缩下去掉空格,这个时候就用到这些工具了,grunt和gulp基本上停留在了当年的jQuery和zepto时代了,vite是刚出道的小花,很美但是作品还不够多,所以现在还是老大哥webpack的天下。
antd、element、varlet
都是UI库,就是提供标准化样式的组件,后台管理系统的挚爱,但是不适合花里胡哨的项目,比如移动端。
js回顾
js是一门用来与网页交互的脚本语言,包含以下三个组成部分:
- ECMAScript:由ECMA-262定义并提供核心功能
- DOM:提供与网页内容交互的方法和接口
- BOM:提供与浏览器交互的方法和接口
js的这三个部分得到了五大Web浏览器(IE、FireFox、Chrome、Safari和Opera)不同程度的支持。所有浏览器基本上对ES5提供了完善的支持,而对ES6和ES7的支持度也在不断提升。对于萌新来说,IE是最危险的浏览器,因为IE总是不支持好特性,比如proxy,如果你已经入坑或者将要就义,那么请带上脑子~
总结
最近不仅很多萌新在学习前端,也有不少老前端和我说想重学js,这不,我带着文章走向了你们,有诚意吧~
这也是我30天咸鱼计划的一部分,如果你也感兴趣,可以关注公众号"bubucuo",回复“咸鱼”,和我们一起闲着,卷王勿来~
如果你想不开非要当卷王,请圈地自卷!关注公众号"bubucuo",回复”卷王“,加入卷王圈地运动。