首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端从入门到转圈圈

前端从入门到转圈圈

作者头像
前端bubucuo
发布于 2022-09-16 09:45:15
发布于 2022-09-16 09:45:15
5630
举报
文章被收录于专栏:bubucuobubucuo

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",回复”卷王“,加入卷王圈地运动。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-02-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 bubucuo 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
史上最全的前端资源大汇总
目录 ---- 首先我们先来看一下文章的分区,以方便我们进行检索。 PS: 内容超长,请注意! 前言 目录 入门类 HTML 5 部分 CSS 3 部分 JQuery Angular JS React Vue Node JS JS Template 移动端 移动端 API 综合 API 其他 API 综合类 工具类 综合效果搜索平台 团队 BLOG 开发中心 ECMAScript D3 RequrieJS SeaJS Less & Sass Markdown 兼容性 UI相关 图表类 正
Tanyboye
2018/07/02
14.4K1
前端大牛们都学过哪些东西?
单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?
web前端教室
2019/07/05
5.8K0
前端插件以及部分细分网址梳理
图来源网络 前端插件以及部分细分网址梳理 插件 parallel.js: 前后端通用的一个并行库 zepto: 用于现代浏览器的兼容 jQuery 的库 totoro: 稳定的跨浏览器测试工具 TheaterJS: 一个用于模拟人输入状态的 JS 库 stellar.js: 前端用于实现异步滚动效果的库,现已不再维护 skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相 Framework7: 前端框架,是开发人员可以基于 web 技术构建 IOS7 程
企鹅号小编
2018/02/05
6.5K0
前端插件以及部分细分网址梳理
入门Vue.js要学习哪些知识?
入门Vue.js首先需要从最基础的知识学起,比如Vue.js的概念、作用、特点等等。只有对Vue.js有一个大致的初步了解,我们才能明白为什么掌握它如此重要。下面一起来具体看看入门Vue.js.js要学习哪些知识吧!
用户8671053
2021/09/19
1.2K0
一个前端大佬的十年回顾 | 漫画前端的前世今生
作者 | 京东科技 胡骏 岁月如梭,十载流年 前端技术,蓬勃向前 HTML,CSS,JavaScript 演绎出璀璨夺目的技术画卷 回到十年前,前端技术就像一名戴着厚重眼镜的书呆子,总是小心翼翼,被各种各样的浏览器兼容性问题欺负(就像在小学被欺负一样)。 但随着时间的推移,这个书呆子开始锻炼,变得越来越强壮,终于能够对抗那些讨厌的兼容性问题。 进入中学时期,前端技术遇到了那个改变它一生的朋友——jQuery。在 jQuery 的帮助下,前端技术变得更加自信,能够在各种浏览器之间轻松穿梭(就像
深度学习与Python
2023/04/14
7120
一个前端大佬的十年回顾 | 漫画前端的前世今生
2018前端最值得关注的技术有哪些?
2018已经过去了一多半,来简单总结一下。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!下面提及的技术,只是建议大家关注,也不是建议大家全部的都要学,而是建议大家按需学,自己觉得哪些需要学,对哪些有兴趣就学哪些!如果大家有什么工具,框架,库觉得可以推荐的,欢迎在评论区提点,让大家相互进步,学习!
Javanx
2019/09/04
1.3K0
2018前端最值得关注的技术有哪些?
2018 最值得关注的前端技术
2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!下面提及的技术,只是建议大家关注,也不是建议大家全部的都要学,而是建议大家按需学,自己觉得哪些需要学,对哪些有兴趣就学哪些!如果大家有什么工具,框架,库觉得可以推荐的,欢迎在评论区提点,让大家相互进步,学习!
一个会写诗的程序员
2018/08/17
1.3K0
2018 最值得关注的前端技术
2018前端值得关注的技术
2017悄然过去,2018已经来到。人在进步,技术在发展。2018年前端有哪些领域,技术值得关注,哪些技术会兴起,哪些技术会没落。下面就我个人的判断进行一个预测判断,希望能对大家起到一个参考作用!下面提及的技术,只是建议大家关注,也不是建议大家全部的都要学,而是建议大家按需学,自己觉得哪些需要学,对哪些有兴趣就学哪些!如果大家有什么工具,框架,库觉得可以推荐的,欢迎在评论区提点,让大家相互进步,学习!
守候i
2018/04/13
1.8K0
2018前端值得关注的技术
五年 Web 开发者 star 的 github 整理说明
深蓝zz
2017/09/13
9.5K1
2021大厂(阿里、百度、字体跳动、腾讯)前端面试题库
​​html和css部分 1.如何理解CSS盒子模型 2.BFC 3.标签语义化? 4.css与javascript引入设置 5.如何理解CSS盒子模型 6.HTML的块级元素,行内元素,行内块元素有哪些,区别是什么 7.CSS3有哪些新特性 8.实现元素隐藏 9.如何实现元素水平居中 10.如何实现元素垂直居中 11.Position 12.定位元素水平垂直居中 13.清除浮动 14.css选择器有哪些,选择器的优先级 15.各种布局优缺点 16.html5有哪些新特性、移除了那些元素?如何处理HTML5
用户8644488
2021/07/09
2.3K0
前端Js框架汇总
随着互联网飞速发展的时代,技术更新迭代的速度也在加快。看着Java、Js、Swift在各领域心花路放,也是煞是羡慕。寻了寻.net的消息,也是振奋人心,.net core 1,mono,xamarin等等,但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品,产品又在不同程度的推进着技术的演进。
青梅煮码
2023/03/02
7.8K0
前端工具分类简介
-bootstrap ,感觉是目前最好用的css框架了,是响应式的,手机屏幕会自动适配成合适的样式来展示,很傻瓜式的就可以写出比较精美的网页。
老码小张
2019/04/16
1K0
2018前端工程师成长路线图
成为前端工程师,第一步应该是学习HTML/CSS/JavaScript,这是基础。
一墨编程学习
2018/09/14
1.5K0
2018前端工程师成长路线图
前端基本内容概述
前端基本内容概述 HTML HTML(超文本标记语言)是一种用于创建网页的标准标记语言. CSS CSS(层叠样式表)是一种用来为结构化文档添加样式的计算机语言. JavaScript JS(JavaScript): 一种高级的,解释执行的编程语言. 解释型语言: 将代码一句一句直接运行, 不需要像编译语言经过编译器先行编译为机器码之后再运行 ES6 ES6(ECMAScript6)是新版本JavaScript语言的标准. AJAX AJAX: 用 JavaScript 执行异步网络请求. AJAX的优点:
星辉
2019/01/15
8340
009 | 快速入门Web前端开发的正确姿势
入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的,但要能参与实际项目开发,肯定还要掌握其他一些主流的框架体系。
Keegan小钢
2018/08/10
1.7K0
目前比较火的前端框架及UI组件
看到的一篇总结性的文章,收藏一下,感兴趣的可以自己看看,哪些是已经会的,哪些是没听说过的,哪些是一知半解的,都可以稍微看看。
何处锦绣不灰堆
2020/05/29
5.5K0
2017年前端框架、类库、工具大比拼
相比于JavaScript开发人员的数量,目前JavaScript框架、类库和工具的数量似乎更多一些。截至2017年5月,GitHub上的快速搜索显示,有超过110万个JavaScript项目。npmjs.org有50万个可用的软件包,每月下载量近100亿次。
葡萄城控件
2022/05/09
3.1K0
2017年前端框架、类库、工具大比拼
终于,小编我边哭边写,把web前端从入门到精通的路线写出来了
一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 请点击此处输入图片描述 在这个阶段你需要学习: 1、HTML+CSS: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等,学会常用算法,增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver、HBuilder等
企鹅号小编
2018/02/01
1.2K0
终于,小编我边哭边写,把web前端从入门到精通的路线写出来了
php工程狮感知的前端工作流程
最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。
大愚
2019/01/08
8420
重拾前端技能为你的职业前程保驾护航
最近自己身边有好几个小伙伴由于各种原因(个人,疫情等都有)离职了,但是今年好像都是行情不太好的一年。许多的小公司都倒闭了,大公司也裁员,所以离职的小伙伴好几个都在家待职 1-3 个月。由于自己身边的小伙伴当前处于这样一种状况,在职(活在舒适区)的我也有了一点危机感。于是自己整理里一份前端清单来巩固自己的前端知识,以便差缺补漏。
拾贰
2020/09/21
1.4K0
重拾前端技能为你的职业前程保驾护航
相关推荐
史上最全的前端资源大汇总
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档