2019回顾敏捷开发前端的人 | 掘金年度征文

1,795 阅读9分钟

1 介绍

        本人学艺不精,没有进行过任何系统化学习,曾经认为前端无非就是达成各种端的运行就可以了,在网页中奔跑,在微信小程序上奔跑,在app上奔跑,会用些前辈们造就的轮子。只要能用,那就是完成了。后来发现这一切并没有那么简单...

        本人非科班(大专)出生,不知道有多少人和我一样,没有死在技术的面试上,却输在了系统的筛选之中。一天刷上100家公司,80多家秒回不合适,剩下的未响应。

2 曾经我所认为的前端

2.1 初学前端

        大二那年,我加入了专门为比赛而诞生的团队。为了快速的入门,学习了关于<div>和盒子模型,float:left。这些可以速成页面的法门,在没有语义化的世界里,其实html中<div><a><img>。已经足够可以统一网页前端的世界。然后就是不断的学习简单版的css,paddingmarginmarginborderbackgroundwidthheight,其他的一律百度一下,你就知道(当然你可以选择谷歌一下速度更佳)。完全已经满足了,基本网页需求,关键是写的还蛮快的。那么js呢,其实初学者,只要懂一些c语言的运算符合数据类型,加上一个jQuery的选择器,难道非要去学习dom与bom?那些本来就需要时间和积累的东西嘛。我们只会朝着一个方向,就是敏捷开发,快速开发。

2.1 初学页面

        那时候根本没人带我们,我就真的敲了一个月的爱奇艺首页,及其枯燥。最后的考核,就是3个小时敲出来。(其实也没有什么诀窍,就是每天敲12个小时,你能记住所有的class)。我当时就说,如果下个月还敲,我就退出。没想到下个月真的不敲了。

2.2 入选比赛

        比赛的时候,还需要自己写一个后端,使用一门名曰php的语言,稍微了解了一下mvc的设计模式,靠着记忆力背出了连接数据库的语句。有一个叫做phpMyAdmin巧妙的生成了mysql的语句,学上增删改查,4个函数,就以为拿下了后端的世界。

         老师: 到了比赛场上,你就是个傻子。那为什么不让那些记性好的来呢。因为你们上场的时候,还能调试出错误。

        赛前,我记下来多少个文件夹、多少个function,每个页面执行什么函数。当然以我们的经验,最后比赛还是拿奖了。

2.3 开始实习

        实习的时候了,我们因为比赛,提前进入了校企合作。我们写着简陋的ajax,调用着前辈们写好的方法,开始进行了一场"拼图开发",这一切来得太简单,太容易了,似乎没有经历过什么痛苦,就已经成了所谓的"全栈工程师",我们会写前端,也会后端,对于数据最大理解就是将数据存储在一个教mysql的数据中。

2.4 毕业了

        毕业了,看到了社招的题目,猛然间五味杂陈,我看不懂什么叫做document,对于es6也就能说说letconstvar 和不知所以的箭头函数()=>。关于语义化也知之甚少。对于vue的理解也仅仅局限于双向绑定。webpack的使用无非就是百度一下,你就懂了。当然也会有人和我一样,对于webpack,局限在vue-cil脚手架上。前端的优化呢,使用工具压缩一下图片,将ajax的同步改成异步,防止页面堵塞。

3 前端无止境的天花板

        对此告诫那些刚刚入门对于代码世界充满希望的人——所有速成的东西,没一个是好东西。我们总是喜欢一些,敲下回车,马上有效果的东西。我们对于原理而言,我们对金钱更加感兴趣,我们更喜欢关注一些,比如说这个行业目前自己值多少钱,这样实际的东西。

        对此感谢掘金写作者计划,能够让我能够表达出,这2年对于前端的弊端,看到自己深深的不足。用上一句winter大神的话,重学前端。我将会分享一些关于前端一些入门笔记(当然有什么错误还请纠正),让那些和我一样,对于前端的了解(狭义)的人,开始重新认识这个,广阔无际的前端世界,对于技术重新包含这敬畏之心。

if(l want 后端){
  return [node、express、koa、egg]
}

if(l want 前端){
  return [jq、Angular、vue、react]
}

if(l want 小程序){
  return [微信、支付宝、QQ、百度只能、字节跳动]
}

if(l want app){
  return [react-natve、weex、Flutter、Cordova]
}

if(l want 应用){
  return [Electron]
}

if(l want 手机脚本){
  return [Auto]
}

4 基本功考察

4.1 关于html

  1. html语义化标签的理解;
  2. 结构化的理解;
  3. 能否写出简洁的html结构;
  4. SEO优化
  5. h5中新增的属性; 如自定义属性data, 类名className等, 新增表单元素, 拖拽Drag
  6. h5中新增的API, 修改的API, 废弃的API 稍作了解 (离线存储, audio, video)

4.2 关于CSS

  1. CSS选择器( 三大特性)
  2. BFC机制
  3. 盒模型

css入门笔记(上)

  1. CSS模块化开发(封装),SCSS和LESS的使用

  2. 屏幕适配 以及 页面自适应

  3. CSS3中新增的选择器

  4. CSS3中新增的属性, transform trasition animation等...

css入门笔记(下)

4.3 关于布局

  1. 标准文档流(padding + margin + 负margin) + 浮动float + 定位 left + right + top + bottom
  2. 百分比布局: px单位 用 %num代替, 占父级元素的百分比
  3. flex弹性布局: 主轴 辅助轴的几个属性
  4. grid栅格布局: 使用框架中的类名来替代: 本质上还是百分比布局

4.4 关于JS基础 (完成)

  1. 变量数据类型及检测: 基本 + 引用
  2. 运算符: 算术 + 条件 + 逻辑 + 位 + 短路, 隐式转换等
  3. 条件, 循环, 异常处理 if switch(){case xxx:} try catch finally throw
  4. 函数定义, 调用方式(apply, call, 直接调用), 传参: 实参给形参赋值
  5. 字符串, 数组, 对象常用API

JavaScript基础入门笔记

4.5 正则表达式

4.6 关于JS高级

  1. 作用域, 作用域链, 闭包
  2. 原型, 原型链, 继承
  3. 函数上下文, this指向
  4. js的运行机制, 事件队列和循环
  5. 同步, 异步编程

预解释作用域this

JavaScript | 异步处理

4.7 关于浏览器

  1. 浏览器的构成和运行机制
  2. 浏览器内核
  3. 浏览器交互: BOM和DOM相关webApi, 监听事件
  4. 浏览器缓存机制
  5. 浏览器的渲染原理
  6. 浏览器的安全性: 跨域 和 攻击

4.8 关于网络协议 (完成)

  1. HTTP协议
  2. Ajax原理
  3. axios

http与ajax入门笔记

axios的使用说明

4.9 cookie, session, token

4.10 关于ES6语法 (完成)

  1. 字符串, 数组, 对象 扩展的api
  2. 变量扩展: let const 解构赋值 块级作用域
  3. 函数扩展: 箭头函数 默认参数, rest参数
  4. 展开运算符, 模板字符串
  5. set 和 map数据结构
  6. 迭代器和生成器函数 next 和 yield的理解
  7. proxy对象 属性代理器: 属性的读取(get)和设置(set)相关操作
  8. promise对象, 异步编程的解决方案
  9. async + await: 异步编程的终极方案 promise + generator的语法糖
  10. class语法 构造函数的语法糖
  11. 模块化编程 export + import 的 导出和导入

ECMAScript 6入门笔记

4.11 VUE基础

  1. 基本指令
  2. 实例的 属性 和 方法
  3. 实例的生命周期
  4. 组件基础: 创建,注册,添加属性方法,套用等...
  5. 组件通信传值  父子, 兄弟, 跨级
  6. 插槽slot 等...

Vue.js 2.0 手把手入门笔记

4.12 VUE高级

  1. vue-router: 搭建SPA
  • 路由,组件的配置
  • 路由间的传值
  • 路由跳转
  • 路由的导航守卫
  • 记住在router.js 和 组件页面中的使用方式
  1. vuex: 状态管理: 数据仓库store
  • 实例化仓库的5大属性的使用
  • state, getters, mutations, actions, modules
  • 辅助函数mapState等..., 仓库中计算属性的映射, 方便操作
  • 记住在 store.js 和 组件中 使用方式

4.13 VUE深入, 源码阅读

  1. 数据响应式原理
  2. virtual dom
  3. diff 算法
  4. nextTick等等...

5 工程能力考察

5.1 项目能力

  1. vue-cli脚手架搭建 和 功能配置 vue.config.js
  2. webpack的常用配置
  3. 项目构建 打包
  4. 熟悉各类框架的文档...
  5. UI框架: Bootstrap, MUI, Element-ui等
  6. 常用的插件整理, 整理一个自己插件库, 封装自己的方法库,组件库
  7. 常用的工具熟练度
  8. PC端 和 移动端开发注意事项
  9. 经验总结: 快速确定项目的技术选型
  10. 坑点总结: 项目遇到坑坑坑!!!
  11. 项目中的性能优化记录 ( 都是细节点...多记录 )
  12. 需求文档的理解, 可以结合 项目流程图, UML图
  13. 问题解决能力: (bug定位调试, 查找文档, 寻求他人...)
  14. 记录习惯养成

5.2 模块化, 组件化开发能力

  1. 项目分类; 各类文件整理,分类
  2. 各类功能封装
  3. 组件和功能模块的抽离, 解耦, 复用

5.3 前端优化方案 (完成学习)

  1. 优化css
  2. 优化图片
  3. 优化js
  4. 优化html
  5. 移动端
  6. cookie
  7. 服务器端

前端优化方案

6 内功考察:

6.1 面向对象的编程思想

  1. 类的抽象
  2. 对象的封装, 继承
  • 为了更好的去管理数据, 分类数据     实现高内聚, 低耦合

6.2 设计模式

设计模式感觉也是 将面向对象思想 再度抽象成现实中 某些特定模式
数据结构和算法

学习常用的排序搜索算法, 顺序表,链表,栈,队列,树,堆 结构等等...
考验你的 抽象思维 和 数学功底了
将现实需求 抽象成 计算机代码 的思维能力

7 附加技能考察:

7.1 学习能力

  1. 持续学习的态度--博客, 笔记记录
  2. 技术论坛活跃度高, 问答多
  3. GitHub开源项目参与

7.2 了解一门后端语言

  1. python, node.js, php等...
  2. 数据库mysql,redis,mongodb.  sql的操作语句, mongo的操作语句, redis操作语句
  3. node + express 搭建本地服务等
  4. egg

egg-从入门到上线 (上)

egg-从入门到上线 (下)

7.3 系统编程

  1. Linux命令行操作, 系统文件管理
  2. 多任务, 多线程, 多进程, 协程, 并发, 并行, 串行, 同步, 异步等概念的理解

掘金年度征文 | 2019 与我的技术之路 征文活动正在进行中......