前端技术栈
-
前端基础
以上是前端的基本功,一些HTML5的新特性,新API还有CSS3的一些新特性,以及ES6的新语法也是比较热门的,都有涉及。 -
框架或库
这是前端常用到的库和框架,包括:
- jQuery
- bootstrap
- requireJs
- echarts
- vue
- angularJs
- ionic
- react
- ant-design
- easyui
目前用的最多的工具主要时npm模块管理工具,gulp、grunt、webpack等自动化或者模块管理工具。
前端的其他方面
- 从浏览器渲染角度考虑性能(并发下载,阻塞等等)
- 从js执行效率考虑性能
1.避免内存泄漏
2.避免意外全局变量
3.避免蛮力算法
4.减少dom操作 - 考虑跨站点脚本攻击和跨站点伪造(不要相信任何用户输入)
- 借助v8引擎通过nodejs向服务端延伸
- 向桌面应用延伸
项目 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
---|---|---|---|---|---|---|---|
前端基础 | html5 | css3 | javascript | ES6 | |||
前端框架与库 | jquery | bootstrap | vue | angularjs | ionic | requirejs | react |
前端工具 | webpack | grunt | gulp | less | sass | ||
前端其他 | 性能 | 安全 | 兼容 | nodejs | 计算机网络 |
前端基础–html5
html5前两年非常火,h5的主要改变有下面几点:
- 新增了一些结构元素,例如header,section,footer等等
- 新增了一些属性,例如contentEditable
- 新增一些表单类型,number,url等
- 废除了一些不那么常用或者可以通过css实现的元素
- 新增了一些好用的接口
- 与存储相关的localStroage、sessionStroage、indexedDB
- 与文件访问相关的FileSystem相关的接口
- cache接口
- canvas
- video、audio
- websocket
- webworker
- 还有新增了一些事件
更多请参考:w3school
前端基础–css3
不得不说css3真的很棒,尤其是他的动画,但是学好也是很难的。css3涉及的东西如下:
- 选择器的扩展
- 一些样式,例如背景、文字、边框等等
- 一些布局相关的东西,例如flex,column等等
- 一些变形,transform
- 过度效果,transition
- 基于关键帧的动画,animation
更多请参考:w3school
前端新知–ES6
ES6看上去怪怪的,不过挺好玩的,我比较喜欢他的函数参数默认值,模块管理,还有promise。参考阮一峰老师的那本书,ES6的要点如下:
- let 和 const 关键字
- 变量的解构赋值
- 字符串的扩展
- 正则的扩展
- 数值的扩展
- 函数的扩展
- 数组的扩展
- 对象的扩展
- Symbol
- Set 和 Map 数据结构
- Proxy
- Reflect
- Promise 对象
- Iterator 和 for…of 循环
- Generator 函数的语法
- Generator 函数的异步应用
- async 函数
- Class 的基本语法
- Class 的继承
- Decorator
- Module 的语法
- Module 的加载实现
给一段ES6的代码(是不是很怪,ps:练习代码块编写)
function bar(func = () => foo) {
let foo = 'inner';
console.log(func());
}
bar() // ReferenceError: foo is not defined
更多请参考:ES6标准入门
前端框架或库–jquery
所有学前端的不可能不知道jquery,个人认为jquery有如下特点:
- 强大的选择器,当然现在通过h5的api也可以实现
- 好用的方法
- 良好的兼容性
- 动画的支持
- 丰富的插件
更多请参考:jqury文档
前端框架或库–bootstrap
有了bootstrap,写几个class就可以做一个漂亮的响应式页面,而且还可以用他的相当好用的js插件。very 弯的four!
更多请参考:bootstrap中文文档
前端框架或库–vue
国内大神尤雨溪经典作品,让我们向这位大神致敬。这款框架非常容易学容易用。她有非常丰富的组件可用,跟angular1长得很像,非常棒!还有一点需要再次强调,国产精品!
更多请参考:vue中文文档
前端框架或库–angular
你走开!angular4!我已经认不得你了。他采用了typescript,具体我也不太了解。后面学习了在更几篇文章。
参考:教程
前端框架或库–ionic
这个我就更不熟了,据说是混合式应用必备利器。我要去学习了!不要拦我!
参考:教程
前端框架或库–echarts
Echarts很牛逼哦!小弟也是刚学的,通过几个简单的配置就可以画出各种图表了,nice!妈妈再也不用担心我不会画图了。
参考:官网
前端框架或库–requirejs
这是一个遵循AMD规范的模块管理库,我不是特熟,我是用的webpack,可以用es6的import export
参考:官网
前端工具简介
工具是干嘛的,帮我们偷懒的。
- grunt是一个任务执行器
- gulp是一个流式的任务执行器
- webpack是一个模块打包工具
个人用的比较多的是webpack。具体可以到各自的官网学习。webpack有个中文版的,文档很好懂。