前端知识体系

眉间皱痕 提交于 2019-11-26 18:31:08

前端知识体系介绍

这里排版比较乱,可以参考这个:https://hackmd.io/s/rJ7ll5nrb (有点醉,博客园连markdown的链接语法都解析错,请自行复制粘帖)
拿到第一张工作牌,第一次参加公司培训,感觉很奇妙。很久没写文章了,今天给各位园友分享一下我入职远光大约三周的体会。(ps:因为这是一个练习markdown语法的作业,逻辑性不强,随便写的😄)

随便说说😄

我是6月份投的简历,岗位是前端开发岗,属于公司的大数据事业部,感觉面试表现不是太好,当时面试官问我关于session和cookie的问题,答的不好,然后面试官很耐心讲了一遍(感谢殷工)。后来收到邮件说面试通过了(可能公司对应届生要求不是太高),非常高兴,远光软件还是不错的,主要是做电力公司管理软件的(财务管理,燃料管理之类的),主要客户时国家电网、南方电网,很牛比👍👍👍,有木有。

7.6号提前一天入职了,因为7、8、9去北京参加爱奇艺的比赛了(尴尬😬,第一天就请假,错过了与小伙伴们玩游戏的机会,可气的是没得奖)。入职第一天,办理了入职手续,然后领了电脑,安排了工位,然后就是装软件装了一天。(感谢亚婷姐为我们跑前跑后,感谢蔡工的指导。❤️❤️❤️)

这一天的体会是公司的安全工作好严格啊(不知道其他公司是不是也是这样)。没法访问外网,文件是加密的,要登录一个什么客户端才能解密。没法访问外网还是很头疼的,虽然公司共享里边有一些必要的软件,但是有的自己喜欢的ide还是没法装。后来殷工说访问外网是需要写申请书的。

后来到公司就是参加培训了,首先是做的公司产品、管理规范、项目管理工具方面的介绍,说实话,不太能听懂。然后就是一个为期一个多星期的前端技能的培训(今天下午有测试),讲的比较粗,大致上把前端的一些东西拉了一遍。这个时今天分享的重点。


前端技术栈

  • 前端基础



    以上是前端的基本功,一些HTML5的新特性,新API还有CSS3的一些新特性,以及ES6的新语法也是比较热门的,培训中都有涉及。
  • 框架或库




    这是前端常用到的库和框架,包括:
  1. jQuery
  2. bootstrap
  3. requireJs
  4. echarts
  5. vue
  6. angularJs
  7. ionic
  • 一些工具

    目前用的最多的工具主要时npm模块管理工具,gulp、grunt、webpack等自动化或者模块管理工具。培训主要讲的时webpack。上几个图。


前端的其他方面

  • 性能与安全

  1. 从浏览器渲染角度考虑性能(并发下载,阻塞等等)
  2. 从js执行效率考虑性能
    1.避免内存泄漏
    2.避免意外全局变量
    3.避免蛮力算法
    4.减少dom操作
  3. 考虑跨站点脚本攻击和跨站点伪造(不要相信任何用户输入)
  • 前端延伸

  1. 借助v8引擎通过nodejs向服务端延伸
  2. 向桌面应用延伸

以上就是前端方面的知识体系,两周左右的培训将这些东西基本点到了。为了练习一下markdown语法,大~熊先做一个表格总结一下前端知识体系,然后简要介绍一些东西。

项目 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

国内大神尤雨溪经典作品,让我们向这位大神致敬。这款框架非常容易学容易用,本人10分钟就会用了(此处运用了夸张手法)。她有非常丰富的组件可用(请注意我的用词:她),跟angular1长得很像,非常棒!还有一点需要再次强调,国产精品!👏

更多请参考:vue中文文档


前端框架或库--angular

你走开!angular4!我已经认不得你了。他采用了typescript,具体我也不太了解。后面学习了在更几篇文章。

参考:官网


前端框架或库--ionic

这个我就更不熟了,据说是混合式应用必备利器。我要去学习了!不要拦我!

参考:官网


前端框架或库--echarts

Echarts很牛逼哦!小弟也是刚学的,通过几个简单的配置就可以画出各种图表了,nice!妈妈再也不用担心我不会画图了。

参考:官网


前端框架或库--requirejs

这是一个遵循AMD规范的模块管理库,我不是特熟,我是用的webpack,可以用es6的import export

参考:官网


前端工具简介

工具是干嘛的,帮我们偷懒的。

  • grunt是一个任务执行器
  • gulp是一个流式的任务执行器
  • webpack是一个模块打包工具

个人用的比较多的是webpack。具体可以到各自的官网学习。webpack有个中文版的,文档很好懂。


总结一下咯

上面就是这几天培训所讲的核心内容的整理,只是点到而已,如果你想详细学习的话去官网看文章就好了,也可以看一些写的比较好的博客。如果你有什么新的知识要补充,或者法现文章中的任何问题请留言给我。最后要是你觉得大熊的文章写的不错,欢迎关注我,还差两个粉丝就有40个粉丝了!!!

芳学姐,我用的morkdown语法不多,但是还是请给个满分!因为学姐最美了!心地最最善良了!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!