前端反思录(一)-技术就是核心竞争力
次阅读
3 月末完成了工作的转变,同时也从面试者的身份转向了面试官。在整个的面试过程中,经历了太多,也思考了很多。5 年了,是时候反思了。
这里,我不得不提一下「一万小时定律」:
人们眼中的天才之所以卓越非凡,并非天资超人一等,而是付出了持续不断的努力。
怎么理解呢?要成为某个领域的专家,需要 10000 小时,按比例计算就是:如果每天工作八个小时,一周工作五天,那么成为一个领域的专家至少需要五年-这就是一万小时定律。
1 万小时的锤炼是任何人从平凡变成世界级大师的必要条件。
原谅我开篇的啰嗦,本系列文章我将从三个层次来说明:
注意:为了更好的维护,我在 Github 增加了F2E-Awesome,本篇文章就不再同步更新啦!
一、不要小瞧 HTML5
- Audio 和 Video
- Web storage
- 离线存储
- WebSocket
- 地理定位
- Communication
- Web Worker
- requestAnimationFrame
- 摄像头
- 全屏
- HTML5 拖放实现
更多详情可以参考我之前的一篇文章:HTML5 API 大盘点。
二、CSS3
- CSS 实用概要
- CSS 实用 Tips
- CSS 三大特性
- 盒模型
- box-sizing
- BFC
- Flex
- 探究 CSS 解析原理
- 详谈层合成(composite)
- CSS Modules使用详解
三、你真的懂移动端吗
- Native App
- React Native
- Hybird App
- Ionic
- Cordova
- Phonegap
- Web App
- Weex
- 关于 Hbuilder
- 移动端 Touchend 事件不触发解决方案
四、PWA(渐进式 Web 增强)
五、WebAssembly
- WebAssembly,Web的新时代
- 来谈谈WebAssembly是个啥?为何说它会影响每一个Web开发者?
- WebAssembly 系列(四)WebAssembly 工作原理
- 如何评论浏览器最新的 WebAssembly 字节码技术?
六、小程序
七、Canvas、SVG、WebGL
- Canvas
- WebGl
- 走进 SVG
- SVG 类库 snap.svg.js,像操作 DOM 一样操作 SVG 资源
八、动画
- CSS3 动画
- CSS3 动画原理
- JS 动画
- 如何检测页面滚动并执行动画
九、JS 从哪里下手
- 原型与原型链
- 作用域与作用域链
- Event Loop
- 反思闭包
- 垃圾回收
- 堆和栈
- 继承
- 我所理解的 call 和 apply
- 掌握 JS 模板引擎
- js之强大的正则表达式
- 掌握 JS Stack Trace
- ES6
- Promise
- XHR or Fetch API ?
- TypeScript
- 何谓 JS 挖矿
- JS 之强大的正则表达式
- 30S JS
十、模块化编程
十一、强迫自己学习源码
- Lodash 源码分析(一)“Function” Methods
- Webpack 源码
- React 源码剖析系列 - 不可思议的 react diff
- React 源码解析
- 解密 JQuery
- Promise 的实现及解析
- 浅析 Redux-Saga 实现原理
- Antd 源码解读
- 自己动手做一个 Vue
- vue-come-true
- Vue.js 源码学习笔记
- …
源码对我来说也算是一个痛,一直没有耐下性子来看源码,所以这里也算是一个友善的建议吧。
- 要有读源码的意识,知道为什么要读。
- 不要在意源码的细枝末节,先顺着主干去捋一遍。
- 如果实在看不懂的话,可以找一些源码分析的文章。
- 请不要忽略源码中的代码测试部分,这里你可以看到函数的输入输出,以便理解。
还是一些建议:
十二、算法和数据结构对前端同等重要
十三、框架学习必不可少
- Angular
- Vue
- Mint-UI
- Element.UI
- VUE2
- VUEX
- Axios
- Vue-Router
- Vue-Loader
- React
- create-react-app
- 探路 Roadhog
- Redux
- Diff 算法
- 虚拟 Dom
- Redux-Saga
- TakeLatest
- Dva
- React 16 新特性
- React-Router@4
- React 性能优化
- Ant Design
- 从头实现一个 koa 框架
- Express
十四、努力向全栈奋斗
- Nodejs,Express,Koa,Mongo,Redis
- Nginx
- PM2 初体验
- Nodejs 事件循环机制
- Stream
- Buffer
- 多进程
- 内存相关
- 消息队列
- 数据库
十五、Python
- Python 入门指南
- Python 官方文档
- Cook Book
- Tornado
- Jinja2
- …
十六、设计模式
- 单例模式
- 简单工厂模式
- 观察者模式
- 适配器模式
- 代理模式
- 桥接模式
- 外观模式
- 访问者模式
- 策略模式
- 模版方法模式
- 中介者模式
- 迭代器模式
- 备忘录模式
- 职责链模式
- 享元模式
- 状态模式
这里只列出大概,详细请参考:常用的 Javascript 设计模式
十七、关于 HTTP
十八、函数式编程
- 什么是函数式编程思维?
- 我眼中的 JavaScript 函数式编程
- 参数个数 Arity
- 高阶组件 Higher-Order Functions (HOF)
- 偏应用函数 Partial Application
- 柯里化 Currying
- 闭包 Closure
- 自动柯里化 Auto Currying
- 函数合成 Function Composition
- Continuation
- 纯函数 Purity
- 副作用 Side effects
- 幂等 Idempotent
- Point-Free Style
- 断言 Predicate
- 约定 Contracts
- 范畴 Category
- …
当然,还有很多,需要学习的小伙伴们可以深度 JavaScript 函数式编程术语大全这篇文章。
十九、优化
- 方式
- 精简、打包、优化
- 减少 HTTP 请求
- 缓存
- 如何优化高德地图(AMap)Marker 动画
- Web 优化之 Request
- 高性能网站建设的14个原则
- 工具
- YSlow
- Performance
二十、DOM
二十一、兼容
二十二、缓存
- HTML5 离线存储
- HTML 和 HTTP 头文件 设置
- Meta
- Expires
- Last-Modified / If-Modified-Since
- Etag / If-None-Match
- Nginx 缓存
当然,缓存的方式还有很多,上面主要列出一些常用的,推荐阅读:彻底弄懂 HTTP 缓存机制及原理。
二十三、跨域
二十四、事件模型
- 观察者模式
- DOM0 级模型
- IE 事件模型
- DOM2 级模型
- JQuery Event 模型
- JS事件模型
二十五、Web 安全
二十六、项目构建
二十七、版本管理 Git
二十八、代码规范
二十九、应该知道 Nginx
三十、DNS
三十一、CDN
三十二、V8 引擎
三十三、Linux
三十四、跨平台桌面端 Electron
三十五、测试
三十六、抓包工具
三十七、总结
文中零零散散提到了一些概念,可能还不够全,我会持续补充的。如果你只关心技术,看这篇就够了,但是如果还要看一些除了技术以外的范畴,请关注我的另外两篇文章:
此外,欢迎关注我的博客同步版本 Github 哦!