本人从android开发转前端后,半年的前端开发经历,总结一下前端的学习思路以及后续方向。这个过程虽然也没做什么牛逼的大项目,过程中总结了一些学习的想法,所以分享下前端开发学习相关的东西。当然本文不是教你写代码,只是告诉你大概的一个学习的脚手架。
作者:郑潇乾--腾讯移动端开发工程师
@IMWeb前端社区
谈谈前端的学习,就离不开运行所在的环境的发展,下面简单介绍下浏览器的内核的一个结构以及情况,这样可以更好的帮助你了解学前端会遇到哪些问题,如何去解决。
渲染引擎:负责将页面的渲染
js执行引擎:负责页面js交互逻辑代码执行
本身浏览器js引擎和渲染引擎最早是不进行区分,随着js引擎越来越独立,后续内核就越来越倾向于指代渲染引擎。以下简单介绍下:
trident(万恶的ie)
gecko(mozilla)
webkit (apple)
blink(chrome)
presto(opera)
webkit(apple)
blink(chrome)
trident(万恶的ie)
JavascriptCore(apple)
V8(chrome)
Chakra(ie)
SpiderMonkey(mozilla)
综上说白了,做前端各种兼容坑就是各种内核不同带来的。毕竟也是有浏览器发展历史的原因的。w3c规范都是晚于浏览器实现的,做任何端都普遍存在类似的历史问题。最终结果就是:
每种渲染引擎的不同,就代表着你html以及css运行在浏览器的效果不同
每种js引擎的不同,就代表着你js的代码也存在各种浏览器兼容问题
根据上述浏览器内核的发展史,大概也明确了前端必须具备以下基本技能外加一个好的ide或者编辑器:
javascript
css
html
上述例子挺简单的,这也就完成了一个最基础的一个页面。如果能够看懂,说明前端对你来说入门还是没什么门槛的。但是往往看似简单的东西,背后所涵盖的知识面挺广的,而且也往往最容易出问题的。
该例子跑在不同浏览器上某些样式展现的效果不一样。
该例子中按钮可能在某些浏览器上点击逻辑执行不了。
该例子在手机端打开看到的效果发现尺寸不对。
根据上述的提到的例子存在的问题可以get到以下几点:
展现效果不同,说明各浏览器对html以及css的标准实现存在着差异,也意味着你可能需要解决一些兼容性的问题。
逻辑执行不了,也说明各浏览器对js的代码执行也存在标准实现问题,写代码还得考虑js在不同浏览器的执行引擎兼容性。
移动端尺寸不对,说明在移动端的展示的内容区域不对,你还得了解手机端和pc端可视窗口的不同,对html进行一些配置告知浏览器调整展示窗口(viewport)
目标:解决各种兼容性问题,实现业务需求。
问题:代码如何编写的风格以及规范。
问题:面对大项目如何团队开发/前端是如何工程化。
优化点:页面渲染性能/服务器负载优化。
下面说明js/css/html三者之间的关系
html:就是一个页面的骨架,搭建基本的框架。
css:骨架有了,剩下的就是布局以及填充对应的样式
javascript:调用浏览器接口去调整骨架和样式,实现交互效果
再细化其实分为两大块,以html+css这块称为也页面重构,以js这块为主称为前端。这么划分主要因为浏览器众多情况下,为了能够使兼容性做的更好。
页面重构需要关注各种pc和手机浏览器下渲染的效果的兼容
前端需要关注逻辑实现以及js代码在各种执行引擎下的兼容性问题
说白了这两块水很深,实际接触代码以及坑自然就明白这块工作量还是很大的(做了你就知道)。
了解响应式设计
了解html和html5的规范和各浏览器对html格标签支持情况
了解传统布局方案:盒子模型+定位+浮动布局
了解新布局方案:flex布局
几种选择器的区别
css动画实现
css性能优化
各个浏览器某些属性的差异
善于用sass/less等预处理工具去优化解决兼容性的问题以及团队模块化合作问题。
主要了解js的发展史以及ECMAscript的规范由来
了解最新比较主流的ECMAscript5/6/7的语法规范
熟悉掌握函数和作用域以及内存管理的相关概念
熟悉掌握js实现面向对象思想。
熟悉掌握js函数表达式,理解闭包和this对象。
熟悉掌握最基本的几种引用类型的使用
熟悉掌握原生js的基本语法与异常处理
熟悉掌握js设计模式以及运用
熟悉掌握js模块化发展史和模块化编程
了解一些js的预处理工具babel/coffeeScript
了解DOM模型,掌握浏览器提供操作dom api,解决兼容性问题
了解BOM模型,掌握浏览器提供的操作浏览器某些功能的api,解决各个浏览器兼容问题
掌握浏览器的事件处理/表单操作/绘图/AJAX/跨域技术/数据存储等功能的基本使用
掌握js的调试技术,了解浏览器开发者工具的使用
浏览器侧数据序列化方式json
了解浏览器安全问题
了解浏览器的js执行原理
善用nodejs包管理npm安装一些提高前端开发效率的工具
使用gulp/grunt等构建工具将前端工程化
结合webpack工具对代码/资源/样式等进行打包处理
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
javascript基础库
javascript框架
ui框架
WebSocket
数据可视化
webgl实现库
CSS3 动画库
流程控制工具库
这块自己上网了解吧,不了解赶紧恶补tcp/ip网络基础。
npm
bower
yarn
js预处理工具
babel
less
jslint
csslint
qunit
mocha
webpack
browerity
grunt
gulp
yeoman
browser-sync
hybird方向
nodejs后台开发方向
js全栈方向
对网络知识的了解
多维度的监控
关注前端的安全问题
团队合作如何更爽(团队化/模块化/平台化)
分析方案选型,和竞品对比,根据业务取舍。
系统分析技术架构,接入各种异构的系统等
、
扫码下方二维码,
随时关注更多前端干货文章!
▼
微信:IMWebTech