鹅厂原创 | MIG前端工程师：浅谈前端学习

2022-06-29 15:47:12 浏览数 (1)

戳蓝字“IMWeb前端社区”关注我们哦！

文/uknowzheng

腾讯MIG事业群——前端开发 工程师

1写在前面

本人从android开发转前端后，半年的前端开发经历，总结一下前端的学习思路以及后续方向。这个过程虽然也没做什么牛逼的大项目，过程中总结了一些学习的想法，所以分享下前端开发学习相关的东西。当然本文不是教你写代码，只是告诉你大概的一个学习的脚手架。

（左右滑动查看代码）

2浏览器内核背景

谈谈前端的学习，就离不开运行所在的环境的发展，下面简单介绍下浏览器的内核的一个结构以及情况，这样可以更好的帮助你了解学前端会遇到哪些问题，如何去解决。

浏览器内核结构：
  • 渲染引擎：负责将页面的渲染
  • js执行引擎：负责页面js交互逻辑代码执行

本身浏览器js引擎和渲染引擎最早是不进行区分，随着js引擎越来越独立，后续内核就越来越倾向于指代渲染引擎。以下简单介绍下：

1. pc主流浏览器目前常见的内核渲染引擎。
  • trident（万恶的ie）
  • gecko（mozilla）
  • webkit (apple)
  • blink(chrome)
  • presto(opera)

2. 移动端的主流浏览器内核渲染引擎

  • webkit(apple)
  • blink(chrome)
  • trident(万恶的ie)

3. 主流js执行引擎(js虚拟机，实现es语法支持)

  • JavascriptCore（apple）
  • V8（chrome）
  • Chakra（ie）
  • SpiderMonkey（mozilla）

综上说白了，做前端各种兼容坑就是各种内核不同带来的。毕竟也是有浏览器发展历史的原因的。w3c规范都是晚于浏览器实现的，做任何端都普遍存在类似的历史问题。最终结果就是：

  • 每种渲染引擎的不同，就代表着你html以及css运行在浏览器的效果不同
  • 每种js引擎的不同，就代表着你js的代码也存在各种浏览器兼容问题

3抛砖引玉

根据上述浏览器内核的发展史，大概也明确了前端必须具备以下基本技能外加一个好的ide或者编辑器：

  • javascript
  • css
  • html
明确好前端需要的技术后，简单的先看个最简单的例子：
代码语言：javascript复制
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" type="text/css" href="./css/a.css"/>
<script type="text/javascript" src="./js/a.js"/>
</head>
<body style="background-color:white">
    <div class="a-css-class" style="margin: 40px 0px 25px 0px">hello</div>
    <button onclick='clickMe'>点我下</button>
</body>
</html>

上述例子挺简单的，这也就完成了一个最基础的一个页面。如果能够看懂，说明前端对你来说入门还是没什么门槛的。但是往往看似简单的东西，背后所涵盖的知识面挺广的，而且也往往最容易出问题的。

上述例子可能存在什么问题呢？（结合大背景可推测）
  • 该例子跑在不同浏览器上某些样式展现的效果不一样。
  • 该例子中按钮可能在某些浏览器上点击逻辑执行不了。
  • 该例子在手机端打开看到的效果发现尺寸不对。
根据上述的提到的例子存在的问题可以get到以下几点：
  • 展现效果不同，说明各浏览器对html以及css的标准实现存在着差异，也意味着你可能需要解决一些兼容性的问题。
  • 逻辑执行不了，也说明各浏览器对js的代码执行也存在标准实现问题，写代码还得考虑js在不同浏览器的执行引擎兼容性。
  • 移动端尺寸不对，说明在移动端的展示的内容区域不对，你还得了解手机端和pc端可视窗口的不同，对html进行一些配置告知浏览器调整展示窗口（viewport）
对于我们开发者来说可能意识到什么呢？
  • 目标：解决各种兼容性问题，实现业务需求。
  • 问题：代码如何编写的风格以及规范。
  • 问题：面对大项目如何团队开发／前端是如何工程化。
  • 优化点：页面渲染性能／服务器负载优化。
针对上述存在的问题，浅谈下前端学习。

3浅谈前端学习

1).javascript／css／html
如上节例子看到的，学习前端主要掌握的技术主要有js／css／html三项，其实在接触到实际项目的时候，开发会遇到很多兼容性的问题。

下面说明js／css／html三者之间的关系：

  • html：就是一个页面的骨架，搭建基本的框架。
  • css：骨架有了，剩下的就是布局以及填充对应的样式
  • javascript：调用浏览器接口去调整骨架和样式，实现交互效果

再细化其实分为两大块，以html css这块称为也页面重构，以js这块为主称为前端。这么划分主要因为浏览器众多情况下，为了能够使兼容性做的更好。

  • 页面重构需要关注各种pc和手机浏览器下渲染的效果的兼容
  • 前端需要关注逻辑实现以及js代码在各种执行引擎下的兼容性问题

说白了这两块水很深，实际接触代码以及坑自然就明白这块工作量还是很大的（做了你就知道）。

对于html css就简单介绍下一些点，本人对这块不算专业。最主要的自然是了解各个浏览器的差异，用简洁的css来对html进行合理布局。
html
  • 了解响应式设计
  • 了解html和html5的规范和各浏览器对html格标签支持情况 css
  • 了解传统布局方案：盒子模型 定位 浮动布局
  • 了解新布局方案：flex布局
  • 几种选择器的区别
  • css动画实现
  • css性能优化
  • 各个浏览器某些属性的差异
  • 善于用sass／less等预处理工具去优化解决兼容性的问题以及团队模块化合作问题。
接下来具体介绍下如何学习javascript。此处涉及到的内容比较多，除了js的基本知识，还有一些工程化方面的东西。推荐初学者一本红皮书《javascript高级程序设计》，千万千万不要去看什么犀牛书，一开始学不合适。
javascript
  • 主要了解js的发展史以及ECMAscript的规范由来
  • 了解最新比较主流的ECMAscript5/6/7的语法规范
  • 熟悉掌握函数和作用域以及内存管理的相关概念
  • 熟悉掌握js实现面向对象思想。
  • 熟悉掌握js函数表达式，理解闭包和this对象。
  • 熟悉掌握最基本的几种引用类型的使用
  • 熟悉掌握原生js的基本语法与异常处理
  • 熟悉掌握js设计模式以及运用
  • 熟悉掌握js模块化发展史和模块化编程
  • 了解一些js的预处理工具babel／coffeeScript
浏览器侧javascript
  • 了解DOM模型，掌握浏览器提供操作dom api，解决兼容性问题
  • 了解BOM模型，掌握浏览器提供的操作浏览器某些功能的api，解决各个浏览器兼容问题
  • 掌握浏览器的事件处理／表单操作／绘图／AJAX／跨域技术／数据存储等功能的基本使用
  • 掌握js的调试技术，了解浏览器开发者工具的使用
  • 浏览器侧数据序列化方式json
  • 了解浏览器安全问题
  • 了解浏览器的js执行原理
nodejs侧javascript
  • 善用nodejs包管理npm安装一些提高前端开发效率的工具
  • 使用gulp／grunt等构建工具将前端工程化
  • 结合webpack工具对代码／资源／样式等进行打包处理
附上JS模块化相关教程：

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html http://www.ruanyifeng.com/blog/2012/11/require_js.html http://www.alloyteam.com/2017/01/module-loading-tools-guide/?from=timeline

其实能够完整掌握了上述的基本功，可以算是很扎实的前端开发者了。但是实际上上手代码，用浏览器侧的js代码去编写逻辑，你会发现在解决浏览器兼容方面以及一些交互会写上一大坨代码。这时候就有个新的痛点，怎么让自己代码更精简，更容易维护，更容易扩展。下面就聊聊关于前端框架。
目前比较流行的前端框架／库：

javascript基础库

  • Prototype
  • jquery
  • zepto
  • underscore

javascript框架

  • backbone
  • vuejs
  • react
  • angularjs

ui框架

  • Bootstrap
  • Semantic UI

WebSocket

  • Socket.io

数据可视化

  • d3

webgl实现库

  • three.js

CSS3 动画库

  • Animate.css

流程控制工具库

  • ECMAscript Promise
  • async
  • Bluebird
  • q
基本熟悉使用一些前端框架的开发，有空了解下框架具体的源码的实现方式就可以了，每种框架使用场景都不太一样，建议结合自己业务的大小选择合适的框架。一般前端界面对外的都是重构按照设计师提供样式重新设计，只有管理系统出于方便开发才用现成的样式框架。
http／socket协议：

这块自己上网了解吧，不了解赶紧恶补tcp/ip网络基础。

(2).工具篇
首先你得有个编辑器，这里个人推荐webstorm。理由如下：
  1. 它是最好的前端ide，没有之一，谁用谁知道。
  2. 不像sublime一样折腾各种插件，专注于业务。
  3. 自带js语法语意分析，方便初学者阅读代码，
其次懂得浏览器端开发者工具的使用，本人还是推荐chrome自带的开发者工具了，学会基本断点调试，调整页面样式，了解渲染的流程，以及网络请求情况等等就可以了。
最后，当然也还得有个抓包工具抓包分析问题，替换一些js／css文件等等帮助定位问题。
还有值得一提的是nodejs的发展不得不说推动了大批优秀前端工具的诞生，日常开发过程中就有一些工具能够帮助你处理些重复性工作，诸如：
包管理工具
  • npm
  • bower
  • yarn
js预处理工具
  • babel

css预处理工具

  • less

代码质量管理

  • jslint
  • csslint

单元测试工具

  • qunit
  • mocha

打包工具

  • webpack
  • browerity

构建工具

  • grunt
  • gulp
  • yeoman

调试工具

  • browser-sync
上述的工具只是本人用到的一部分，当然还有很多涉及的好用的工具，欢迎大家推荐。
(3).前端工程化
有了上述提到的工具，能够帮你把前端的开发流程工程化起来。前端实际开发流程如下：
产品提出需求 -> 分析需求进行技术选型 -> 页面编写 -> 代码编写（模块化开发和单元测试） -> 代码混淆打包 -> 部署到测试服务器 -> 功能测试 -> 主要页面部署服务器上 -> 其余资源发布至cdn（标识版本号）
其中开发流程中，你可以跟你组员通过js模块化的一些规范各自实现自己的需求以及公共的组件，此外你可以借助nodejs的执行环境，通过工具自动化的帮你进行代码的单元测试/模块化代码的打包混淆优化/资源压缩处理／样式文件压缩优化。最后实际功能测试也可以有专门的工具帮你自动化打包，甚至把资源发布cdn，把代码部署正式环境等等。
最终就可以随着项目需求的迭代，只需要在原有代码的基础上，添加需求模块，然后重新再进行打包发布。后续如果有新的类似的项目过来，又可以重新以你项目流程模版生成新的项目的脚手架继续新项目开发.

4浅谈前端发展方

当然前端有很多方向可以去玩，甚至无所不能。当然啦，这也是有些限制的了。目前有几种学习方向：
  • hybird方向
  • nodejs后台开发方向
  • js全栈方向
无论两条路怎么选择，始终是朝着js全栈的方向去走了，一门语言走遍全端。当然，对于这个我也表示呵呵，run anywhere，挖坑 anywhere。当然，坑总是有的，不然怎么能锻炼自己定位问题能力以及知识面的广度。
当然作为前端，最好也得学习下nodejs后台开发，毕竟可以使用nodejs express起个web服务，前端可以用熟悉的js，自己编写一些接入层的逻辑。诸如：实现页面路由，定义Restful API，访问数据的统计，也可以在服务端进行数据直出，优化页面性能等等，当然也有些局限性，但是复杂的逻辑其实你还是可以通过nodejs作为接入层委托给大后端去处理具体逻辑。如果公司规模小，也没必要一定用nodejs express，路由这块前端有些框架能同样搞定，数据只需要后台人员自己搞个服务提供restful api出来，也不局限于任何技术语言实现。
后续发展主要自身能力考察的应该是以下几点：
  • 对网络知识的了解
  • 多维度的监控
  • 关注前端的安全问题
  • 团队合作如何更爽（团队化／模块化／平台化）
  • 分析方案选型，和竞品对比，根据业务取舍。
  • 系统分析技术架构，接入各种异构的系统等
后续的发展规划必须是往工程化系统化方面去思考相关支撑产品业务的整体技术架构（不局限于哪一端）。反正没有最牛逼的架构，只有最合适自己产品业务方向的架构。

免费送票还在继续

腾讯 2017 IMWebConf前端大会

点击下方礼包，打开文章链接

在评论区留下足迹，回答的点赞数越高，惊喜越多哦！

点我点我

html css java javascript ecmascript

0 人点赞