学习Web前端开发，你可选择的高薪发展方向

于 2020-11-03 09:04:29 发布
阅读量959 收藏
点赞数
文章标签： javascript css vue.js html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icktpxcls/article/details/109461562
版权

近几年前端领域不断地涌现出新的技术，旧的技术也不断地进行更新换代。随着技术的不断进步，前端开发涉及的领域，也变得越来越广，一起来了解一下前端几个重要的领域吧。

PC

PC (Personal Computer) 即个人电脑。目前 电脑端仍是前端一个主要的领域，主要分为面向大众的各类网站，如新闻媒体、社交、电商、论坛等和面向管理员的各种 CMS (内容管理系统)和其它的后台管理系统。

其实早期并没有 “前端工程师” 的称号，那时候一般叫做 “网页设计师” 或 “美工”。记得最早接触到的网页设计软件是微软开发的 “Frontpage”，后面才接触到 “网页三剑客” (Dreamweaver、Fireworks、Flash) 中的 Dreamweaver，直到现在的各种 IDE (集成开发环境)，如 Sublime Text、WebStorm、Visual Studio Code 、Atom 等。

对于前端工程师来说，开发 PC 端项目，最痛苦的事情莫过于 解决浏览器兼容性问题，特别是 IE 浏览器不同版本的问题。值得高兴的是，针对现代浏览器不同特性的兼容问题，可以借助构建工具的插件来实现自动添加不同浏览器的特性前缀，比如 Post CSS 的 Autoprefixer 插件。

接下来我们来看一下，PC 端 第一个网页长啥样：

在这里插入图片描述

Web App

Web App 是指使用 Web 开发技术，实现的有较好用户体验的** Web 应用程序**。它是运行在手机和桌面端浏览中，随着移动端网络速度的提升，Web App 为我们提供了很大的便利。此外近两年 Google 提出了一种新的 Web App 形态，即 PWA(渐进增强 Web APP) 。

PWA 意图让 Web 在保留其本质（开放平台、易于访问、可索引）的同时， 在离线、交互、通知等方面达到类似 App 的用户体验。PWA 其具体技术包括 Service worker、 Web App Manifest、 Cache API、 Fetch API、 Push API、 Web Push Protocol、 Notification 等等。

Web App 的主要优点：

开发成本低

内容更新快

升级无需通知用户，自动升级

能够跨多个平台和终端

Web App 的主要缺点：

用户体验短期内还无法超越原生应用

离线工作的能力较弱

消息推送不够及时

无法获取系统级别的通知，提醒，动效等等

在这里插入图片描述

WeChat

WeChat (微信) 这个平台，拥有大量的用户群体，因此它也是我们前端开发另一个重要的领域。微信的公众号与订阅号为市场营销和自媒体从业者，打造了一个新的天地。我们以微信公众号为例，来分析一下微信公众号的主要作用：

信息推送

用户服务

用户互动

此外除了公众号与订阅号外，微信又推出了微信小程序。微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

微信小程序的主要优势：

不用安装，即开即用

相比于 App 开发来说，小程序开发成本更低

UI 和操作流程比较统一，降低用户的使用难度

基于微信平台，推广更容易、更简单

在这里插入图片描述

Hybrid App

**Hybrid App (混合应用) **是指介于 Web App、原生 App (主要是 Android 或 iOS )之间的 App，它兼具原生 App 良好用户交互体验的优势和 Web App 跨平台开发的优势。

混合应用功能按网页语言与程序语言的混合，通常分为三种类型：多View混合型，单View混合型，Web主体型。最早的混合应用开发技术，是基于 Phonegap/Cordova 技术。Cordova 为开发者提供了一组设备相关的 API，通过这组 API，移动应用能够以 JavaScript 访问原生的设备功能，如摄像头、麦克风等。

目前主流的混合应用开发框架有：React Native、Onsen UI、Ionic、Framework 7、Native Script 和 Weex 等。这里就不详细展开，对各个框架进行详细对比和分析，有兴趣的读者可以自行查阅一下相关资料。接下来我们来了解一下混合应用的优缺点。

混合应用的主要优点：

开发成本低

节省跨平台的时间和成本

可以访问硬件设备的功能

可以打包成 App，发布到 App Store 或各大安卓应用平台

混合应用的主要缺点：

用户体验不如原生 App

应用性能也不如原生 App

技术还未成熟

在这里插入图片描述

Game

HTML5 游戏从 2014 年 Egret 引擎开发的神经猫引爆朋友圈之后，就开始一发不可收拾。不过现在游戏开发变得越来越复杂，需要制作各种炫丽炫丽的效果，还要制作各炫丽于 2D 或者 3D 的场景。为了降低游戏的开发难度，加快游戏的开发进度，国内外不同厂商推出了众多游戏开发引擎。

HTML 5 主要的开源游戏引擎：

phaser

pixi.js

Babylon.js

whs.js

egret

cocos2d-html5

在这里插入图片描述

Desktop

桌面应用软件，就是我们日常生活中电脑中安装的各类软件。早期要开发桌面应用程序，就需要有专门的语言 UI (界面) 库支持，如 C++ 中的 Qt 库、MFC 库，Java 的 Swing、Python 的 PyQT 等，否则语言是没办法进行快速界面开发。

随着 Web 技术的不断发展，目前借助 NW.js、Electron 等开发框架，前端也可以开发桌面应用了。其中口碑不错的开源 IDE - Visual Studio Code 就是使用 Electron 开发的。使用 Web 技术，主要的优势是它的跨平台能力和开发效率。但也有它对应的缺点，就是运行效率不如使用专门语言开发的桌面应用。

在这里插入图片描述

Server

Node.js 一发布，立刻在前端工程师中引起了轩然大波，前端工程师们几乎立刻对这一项技术表露出了相当大的热情和期待。看到 Node.js 这个名字，初学者可能会误以为这是一个 Javascript 应用，事实上，Node.js 采用 C++ 语言编写而成，是一个 Javascript 的运行环境。

Node.js 让 JavaScript 能够运行在服务端，这个想法简直太棒了。这使得前端开发人员不用再去学服务端开发语言，如 PHP、Java、Ruby 和 C# 等，也可以进入服务端的开发领域。当然学习的过程可能对于大多数纯前端开发人员来说，会比较痛苦和漫长。

Node.js 主要的 Web 开发框架：

Express

Koa

Egg

Nodal

Sails

Loopback

在这里插入图片描述

当然前端涉及的领域，还不止这些。较新的领域还有， 数据可视化、 IOT (物联网)、 机器学习等。网上也有大神专门整理了前端开发人员的技能图谱，有兴趣的读者可以参考一下，但一定要做好心理准备，不要被吓到哦。里面介绍的是综合的技能，对于初学者的话，只要先学 HTML/HTML5、CSS/CSS3 和 JavaScript 的基础知识，等入门后在参考技能图谱，好好规划一下学习或进阶线路哟。

大多数人都选择的web前端学习方法：

前端技术每年都会不断更新，自学前端容易学不到最新的前端技术，前端学习建议大家还是要选择培训为好，在前端培训学校，
往往都是根据前端技术发展，从而更新前端课程，让学员学到最新的前端知识。像爱创课堂，是一家专门做前端教育的培训机构。
是由前百度前端架构师，张容铭老师亲自带队授课全程面授；授课以实战课程为主，张老师前端技术过人，每年有很多学员过
来学习，也教会无数名高级前端工程师，在各企业都有就职。近期爱创课堂就是由张容铭老师亲自全面授课的，精品小班，
名额有限，前端学习培训、视频教程、学习路线，请添加威信：haomei0452 联系我！现在也有很多人选择学校很茫然，
其实可以到实地去体验一下，毕竟适合自己才是最重要的。

前端学习方法很重要，选择适合自己的学习方法，学好前端最重要的培养持续的兴趣,其次就是不断实践，从实践中逐渐练习前端代码等，从而对前端有很好的理解与吸收。如大家对前端还有不了解的问题，可以持续关注我，每天会发一些关于前端相关知识，供大家学习与参考！

最后，这篇文章的目的不是为了炫耀前端开发有多牛逼，只是想作为有意向入行前端或刚入门前端人员的参考资料。俗话说得好， 术业有专攻，希望新时代的前端开发者，能先专攻某个领域，然后再扩展其它领域，即先有深度再有广度。

爱创乐育知识速递
关注
博客
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
08-08 227
11 个 ES2022（ES13)中惊人的 JavaScript 新特性
博客
Web前端VS后端那个好一点
04-11 1330
作为一个从事IT培训行业多年的人，被问及最多的三个问题就是，前端和后端哪个更好学？前端和后端哪个就业前景好？哪个薪资更高？众所周知，最近几年互联网发展迅速，想要从事互联网的同学也越来越多。那对于新手来说，选择一个自己喜欢的方向非常重要。有兴趣才能坚持，坚持才能成功。Java和Web前端，是当前热门职业之中之二，两者在关注度和热度上不分伯仲，也经常被拿来比较。那么，Java和Web前端，IT新人该如何选择呢？从发展层面来说，Java作为一门老牌编程语言，在国内的发展已经非常完善，目前，大部分的企业都使用
博客
web前端培训 - JavaScript 扩展运算符
03-21 308
JavaScript 扩展运算符简介ES6 提供了一个名为扩展运算符的新运算符，它由三个点 (…) 组成。扩展运算符允许我们扩展可迭代对象的元素，例如数组、映射或集合。例如：const odd = [1,3,5];const combined = [2,4,6, …odd];console.log(combined);输出：[ 2, 4, 6, 1, 3, 5 ]在此示例中，奇数数组前面的三个点 (…) 是展开运算符。扩展运算符 (…) 解包奇数数组的元素。请注意，ES6 还具有三个点 (…
博客
web前端培训 - 八进制和二进制字面量
03-18 1059
ES5 提供了八进制（前缀 0）、十进制（无前缀）和十六进制 (0x) 的数字文字。ES6 增加了对二进制字面量的支持并改变了它表示八进制字面量的方式。八进制要在 ES5 中表示八进制文字，我们使用零前缀 (0) 后跟八进制数字序列（从 0 到 7）。例如：let a = 051;console.log(a); // 41如果八进制文字包含超出范围的数字，JavaScript 会忽略前导 0 并将八进制文字视为十进制，如下例所示：let b = 058; // invalid octalcon
博客
web前端培训 - 12个有用的 JavaScript 代码片段
03-14 2507
1、数值排序 | 升序 [⇣⁰₉]const arr = [40, 100, 1, 5, 25, 10];arr.sort(function(a, b){return a-b;});之前：[40,100,1,5,25,10]之后：[1,5,10,25,40,100]说明：对于数字排序，必须创建一个 Comparator 实体或比较函数。在上面的代码片段中，这相当于const compare = function(a, b){return a-b;};排序结果是arr.sort(com
博客
web前端培训 - 使用const 关键字定义常量
03-08 370
JavaScript const 关键字简介ES6 提供了一种使用 const 关键字声明常量的新方法。const 关键字创建对值的只读引用。const CONSTANT_NAME = value;按照惯例，常量标识符是大写的。与 let 关键字一样， const 关键字声明块作用域变量。但是，由 const 关键字声明的块范围变量不能重新分配。let 关键字声明的变量是可变的。这意味着我们可以随时更改它们的值，如以下示例所示：let a = 10;a = 20;a = a + 5;con
博客
web前端培训 - let关键字声明块范围的变量
03-03 785
JavaScript let 关键字简介在 ES5 中，当我们使用 var 关键字声明一个变量时，变量的作用域要么是全局的，要么是局部的。如果在函数之外声明变量，则变量的范围是全局的。在函数内声明变量时，变量的作用域是局部的。ES6 提供了一种使用 let 关键字声明变量的新方法。let 关键字类似于 var 关键字，只是这些变量是块作用域的。例如：let variable_name;在 JavaScript 中，块用花括号 {} 表示，例如 if else、for、do while、while、t
博客
web前端 - 6 个可以在 CSS 代码中使用的CSS 函数
02-21 216
CSS 是每个 Web 开发人员必备的样式表语言。 它允许我们设置网页样式并使其具有响应性。 此外，借助 flexbox 和 grid 等新的 CSS 功能，我们可以轻松地为我们的网页创建复杂的布局。CSS与所有其他不同的语言一样，CSS 也有自己可以使用的功能。 这些函数可以放置在您要放置属性值的位置。在某些情况下，它们可以伴随另一个值声明。 一些 CSS 函数甚至可以嵌套到其他函数中，让您一次完成许多事情。在本文中，我将与您分享一些作为 Web 开发人员应该知道的有用的 CSS 函数。 现在，让我
博客
web前端 - 写出漂亮JavaScript代码的实用技巧
02-15 368
1、按强类型风格写代码js是弱类型的，但是写代码的时候不能太随意，写得太随意也体现了编码风格不好。下面分点说明：（1）定义变量的时候要指明类型，告诉JS解释器这个变量是什么数据类型的，而不要让解释器去猜，例如不好的写法：var num,str,obj;声明了三个变量，但其实没什么用，因为解释器不知道它们是什么类型的，好的写法应该是这样的：var num =0,str =’’,obj =null;定义变量的时候就给他一个默认值，这样不仅方便了解释器，也方便了阅读代码的人，他会在心里有数——
博客
web前端培训好处及前端成长路线
02-11 544
当今IT行业盛行，从事IT行业人员越来越多，从前端到后端职业中，更多的人喜欢前端开发，因为前端入门简单，学习起来容易，并且现在市场需求逐渐加大，只要拥有好的技术，会深受企业亲睐！今天就为各位分享web前端起步阶段、提升阶段、成型阶段都应该学习哪些知识？如何去学习这些知识？起步阶段1、基本知识的掌握在梳理的知识架构中，按照分析的两个维度里最前置的、最浅显的部分，作为打基础的阶段，必须要在这个过程中更多投入到实践中去，通常做的多了、熟练了，就认为这部分知识和内容掌握了。2、常用工具的掌握对于常用工具的
博客
web前端 - CSS快速开发技巧
01-19 405
使用CSS重置（reset）css重置库如normalize.css已经被使用很多年了，它们可以为你的网站样式提供一个比较清晰的标准，来确保跨浏览器之间的一致性。大多数项目并不需要这些库包含的所有规则，可以通过一条简单的规则来应用于布局中的所有元素，删除所有的margin、padding改变浏览器默认的盒模型。*{ box-sizing:border-box; margin:0; padding:0 }使用box-sizing声明是可选择，如果你使用下面继承的盒模型形式可以跳过它。继承盒模型让盒
博客
web前端 - JS中的4个for循环
01-17 630
在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。他们是：forfor infor eachfor of今天，就让我们一起来看看这4个 for 循环。1、简单的for循环我们来看看最常见的写法：const arr = [1, 2, 3];for(let i = 0; i < arr.length; i++) {console.log(arr[i]);}当循环中数组的长度没有变化
博客
web前端 - 5个常见的JavaScript内存错误
01-10 207
JavaScript 不提供任何内存管理操作。相反，内存由 JavaScript VM 通过内存回收过程管理，该过程称为垃圾收集。既然我们不能强制的垃圾回收，那我们怎么知道它能正常工作？我们对它又了解多少呢？脚本执行在此过程中暂停它为不可访问的资源释放内存它是不确定的它不会一次检查整个内存，而是在多个周期中运行它是不可预测的，但它会在必要时执行这是否意味着无需担心资源和内存分配问题?当然不是。如果我们一不小心，可能会产生一些内存泄漏。什么是内存泄漏？内存泄漏是软件无法回收的已分配的内存块。
博客
web前端 -关于this的面试题
01-05 270
1、默认绑定默认绑定通常是指函数独立调用，不涉及其他绑定规则。非严格模式下，this指向window，严格模式下，this指向undefined。01、题目1.1：非严格模式var foo = 123;function print(){this.foo = 234;console.log(this); // windowconsole.log(foo); // 234}print();非严格模式，print()为默认绑定，this指向window，所以打印window和234。这个fo
博客
JavaScript数组函数整理汇总
12-30 808
1、Array.isArray()我们列表中的第一项是 JavaScript 中的 isArray 方法，它确定传递的输入是否为数组。语法：在下面的代码中， arr 将是我们要检查的输入，是否为数组。isArray() 函数的结果将是一个布尔值。Array.isArray(arr)示例：Array.isArray([1, ‘something’, true]);// trueArray.isArray({anything: 123});// falseArray.isArray(‘som
博客
web前端 - JavaScript 中一流函数的日常用例
12-22 181
什么是“一流函数”？维基百科的定义：在计算机科学中，如果一种编程语言将函数视为一等公民，那么它就被称为具有一等函数。这意味着该语言支持将函数作为参数传递给其他函数，将它们作为其他函数的值返回，并将它们分配给变量或将它们存储在数据结构中。例如，在 JavaScript 中，我们可以将一个函数分配给一个变量。var sum = function(a, b) {return a + b;}var total = sum(10, 1);如果我们是第一次阅读，这个定义会有点混乱。然而，事实是我们在不知
博客
web前端 - 10 个很酷、很实用JavaScript特性
12-16 1472
1、空运算符如果左侧为空或未定义，则此运算符返回右侧值。const data= null ?? ‘data’;console.log(data);// expected output: “data”const data1 = 1 ?? 4;console.log(data1);// expected output: 1逻辑 OR (||) 运算符执行相同的操作，但是，当将 0 作为值传递时，它将视为 false，这使得它容易用于数字。function add(a, b) {val1 =
博客
web前端 - Vue常见问题汇总及解决方案
12-08 1071
Q1：安装超时(install timeout)方案有这么些:cnpm : 国内对npm的镜像版本/*cnpm website: https://npm.taobao.org/*/npm install -g cnpm --registry=https://registry.npm.taobao.org// cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些yarn 和 npm 改源大法//使用 nrm 模块 : www.npmjs.com/package/nrmnpm co
博客
web前端 - 6 种在 JavaScript 中清理代码的方法
12-01 944
1、删除不必要的 return 语句：检查函数内部是否需要存在。可以简化为一行代码吗？如果是这样，JavaScript 允许使用隐式返回来简化代码。从下面检查代码。在那里，我删除了额外的变量声明 usersFound，让我可以选择删除未使用的 return 语句。// This function receives as arguments an array of objects,// [{ firstName: ‘Test’ }, { firstName: ‘Ignacio’ }, …]// Th
博客
web前端 - 正则表达式的整理汇总
11-25 942
很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。01、手机机身码(IMEI)/^\d{15,17}$/02、必须带端口号的网址(或ip)/^((ht|f)tps?????/)?[\w-]+(.[\w-]+)+:\d{1,5}/?$/03、网址(url,支持端口和"?+参数"和"#+参数)/(((ht|f)tps?)????/)?[\w-]+(.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值