自学前端，学多久可以自己找到工作？ ￡神魔★判官ぃ 2023-01-05 12:48 170阅读 0赞 假如有一天，我不小心失忆了，忘记了所有的编程经验，我变成了一只小白。我想自学前端，并且想要找到一份工作，我预计需要 6 个月的时间，前提条件是每天都处于高效率的学习状态当中，并且每天的学习时间至少在 12 个小时以上。 即便是这样，我敢肯定，找到的工作肯定不会太好，勉强能够维持生活吧，毕竟是零基础入门啊。 如果想更进一步，真正成为一名不可或缺的高级前端工程师，时间需要更久，两年、三年、五年，直到秃的那天。 想着想着，我就觉得有必要为那一天做点准备，以备不时之需。 ### **第一个阶段，开发环境和工具准备** ### * 浏览器 （Google，FireFox，…） * 下载，安装前端开发工具vscode， * 下载、安装 node、npm、webpack、webpack-cli、cnpm，配置前端开发环境 * 下载、配置PHP和MySQL ### **第二个阶段，前端入门，网页制作** ### ##### 1，HTML： ##### * [常用标签][Link 1]（div标签，p标签，span标签，a标签，img标签） * 锚点 * [列表标签][Link 2]（有序列表，无序列表，自定义列表） * [表单标签][Link 3] * [表格标签][Link 4] * 标签分类 * [标签语义化][Link 5] * 注释 * 字符实体 ##### 2，CSS： ##### * [CSS介绍][CSS] * 全局样式 * 行内元素 * 内联元素 * 选择器 （1）基础选择器（标签选择器，类选择器，ID选择器） （2）复合选择器（后代选择器，兄弟选择器，相邻元素选择器，交集选择器，并集选择器） （3）选择器优先级 * [字体样式值][Link 6] * [文本样式值][Link 6] * 颜色样式值 * 盒模型（标准盒模型，怪异盒模型） * 控制台使用 * [清除默认样式][Link 7] * [盒模型居中][Link 8] * [标准文档流][Link 9] * 块元素 * 行内元素 * 行内块元素 * 多种伪类元素 * 浮动 （1）浮动元素脱离文档流 （2）外边距塌陷问题 （3）N种清除浮动的方式 * 定位(相对定位，固定定位，绝对定位，z-index) * [CSS面试题总结][CSS 1] ### **第三个阶段，JavaScript动态交互** ### ##### 1，JavaScript初阶 ##### * 变量和运算符 （1）JS用途 （2）JS书写规则 （3）内置函数使用 （4）字面量 （5）变量 （6）命名标识符规范 （7）变量声明提升 （8）运算符（数学运算符，比较运算符，逻辑运算符，赋值运算符） （9）页面修改（innerHTML，innerText，value） * 逻辑控制 （1）if关键字（if…else，if…else if…else，多分支条件语句，嵌套if语句） （2）for关键字（for循环，双重for循环） （3）自增 （4）自减 （5）switch条件语句 （6）累加器 （7）累乘器 （8）while（continue关键字，break关键字，while循环语句，do…while循环语句） （9）js控制HTML标签 （10）三目运算符 （11）运算符优先级 * Math类 （1）Math属性（Math.PI，Math.E，…） （2）Math函数（round，floor，ceil，…） * 函数 （1）无参函数 （2）函数定义 （3）函数调用 （4）作用域 （5）参数（形参，实参，入参，出参） （6）不定参函数 （7）arguments * Object类 （1）对象的定义 （2）对象的使用 * 定时器 * Array类 * String类 * Date类 * [JavaScript面试题总结][JavaScript] ##### 2，JavaScript进阶 ##### * JavaScript DOM基础 （1）DOM元素遍历 （2）DOM元素查找 （3）DOM元素增加 （4）DOM元素删除 （5）DOM元素修改 （6）DOM元素剪切 （7）属性操作 （8）样式操作 （9）文档碎片 * this（在各个环境下this的指向） * 事件 （1）普通事件回顾 （2）绑定事件 （3）取消普通事件 （4）取消绑定事件 （5）事件类型（键盘事件，鼠标事件，聚焦&失焦事件） * 事件流 （1）事件源 （2）事件流 （3）事件冒泡 （4）事件捕获 （5）事件委托 * JavaScript BOM 基础 （1）offset （2）client （3）scroll （4）getBoundingClientRect() （5）滚动事件 * call&apply&bind （1）深入探究作用域 （2）偏函数的使用 * 自定义属性 * 面向对象编程 （1）封装 （2）构造方法 （3）instanceof （4）constructor （5）继承（函数继承，构造函数继承，类继承） （6）原型 （7）原型链 （8）多态 ##### 3，ES6 ##### * ECMAScript6简介 * let和const * ES6+的作用域 * 对象的扩展 * 函数的扩展 * 字符串的扩展 * Symbol * Set&Map * Promise对象 * async&awiat * 箭头函数 * 模板字符串 * rest参数 * Class * Module模块 ##### 4，JavaScript高阶 ##### * 闭包 （1）深入理解闭包 （2）深入理解闭包原理 （3）闭包面试题权威解析 * 立即执行函数 * 惰性函数 * 插件开发 * 多人协作 * 深复制与浅复制 * 数组扁平化 * 递归 （1）斐波那契数列详解 （2）递归深复制与浅复制 （3）柯里化思想 （4）柯里化及递归面试题权威解析 * 正则表达式全解 * 函数防抖 * 函数节流 ### **第四阶段，移动端开发技术实战** ### ##### 1，HTML5 ##### * HTML5简介 * HTML5新语法 * HTML5新语义化标签 * HTML5新表单元素属性 * HTML5手机端新事件处理 * HTML5新增多媒体实战 * 本地存储（cookie，localStorage，sessionStorage） * Canvas * HTML5地理组件GeoLocation ##### 2，CSS3 ##### * CSS3新增属性 * 圆角制作企业级方案 * CSS3背景属性 * 过渡动画 transition * 变化属性 transform * 特效轮播图实战 * 企业级flex布局实战 * grid布局实战 ##### 3，Bootstrap ##### * 响应式 * 媒体查询（媒体类型，媒体特性，媒体查询企业级应用） * 栅格系统 * 栅格参数 * 组合模式 * 列偏移/列排序/自动列 * 列对齐/列嵌套 * 文本与颜色 * 按钮 * 导航 * 图文混排 * 模态框 * 轮播图 ##### 4，移动端开发 ##### * 移动端简介 * 移动端视口约束 * 移动端flex移动端实践 * rem * vw * flexible企业级实战 ### **第五阶段，前后端分离技术及常用类库** ### ##### 1，ajax ##### * AJAX简介 * AJAX作用 * 封装AJAX * 创建XMLhttpRquest对象 * 同步和异步 * AJAX分页 ##### 2,JQuery ##### * jQuery介绍 * jQuery链式语法 * jQuery选择器 （1）基础选择器 （2）复合选择器 （3）jQuery独有选择器 * jQuery核心 （1）jQuery核心函数 （2）jQuery对象访问 （3）数据缓存 （4）队列控制 （5）插件机制 （6）多库共存 * jQuery工具 （1）浏览器及特性检测 （2）数组和对象操作 （3）函数操作 （4）测试操作 （5）字符串操作 （6）URL （7）插件编写 * jQuery事件 （1）原始事件 （2）创建事件 （3）页面载入 （4）事件处理 （5）事件委派 （6）事件切换 （7）事件 * jQuery事件对象 * jQuery特效(基本，滑动，淡入淡出，自定义，设置) * jQuery回调函数 * jQuery文档处理（内部插入，外部插入，包裹，替换,删除，复制） * jQuery筛选（过滤，查找，串联） * jQuery属性（属性，CSS类，HTML代码/文本/值） * jQueryCSS（CSS，位置，尺寸） ##### Echarts ##### * Echarts概述 * Echarts使用 * 坐标系 * 雷达图/饼状图/折线图 ### **第六阶段，企业级高级WEB架构开发** ### ##### 1，Webpack ##### Webpack的安装和使用 * 项目模块打包 * 静态打包模块器 * Webpack入口 * Webpack输出 * Webpack插件 * webpack模块 ##### 2，Vue ##### * Vue使用 * Vue响应式 * Vue双向数据绑定 * Vue相关指令 （1）条件渲染v-if （2）v-bind指令 （3）v-on指令 （4）v-on的修饰符 （5）列表渲染 （6）v-model指令 （7）v-model详细讲解 （8）v-cloak * vue-resource * axios * template选项 * Vue生命周期 * Vue组件 （1）Prop （2）监听组件事件 （3）插槽 （4）动态组件 （5）组件通信（父子，子父，其他组件） （6）函数式组件 （7）异步组件 * 自定义指令 * 过滤器 * computed属性 * Vue-cli 2.x和3.x 脚手架配置 * Vue-router （1）VueRouter基础 （2）嵌套路由 （3）路由重定向 （4）动态路由 （5）路由传参 （6）导航守卫 * Vuex（State，Getter，Mutation，Action，Module） * Element UI ##### 3，微信小程序 ##### * uni-app * mpvue * 微信小程序注册 * APPID申请 * 生命周期 * 小程序调试 * 微信小程序框架组件 * 微信小程序布局框架 * 微信小程序条件渲染和列表渲染 * 媒体组件audio * 视图容器 * 网络api * 相机api * 地图api ##### 4，uniapp ##### * uniapp基础 * uniapp初始化配置 * uniapp视图模板使用 * uniapp生命周期 * uniapp路由跳转 * uniapp常用组件 * uniappScrollView的使用 * uniapp-ui使用 * uniapp-Vuex使用 > 技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。有需要面试题文档，[点击这里][Link 10]可以免费领取。 ![022910ba96ca0acf0ae9e72302bc7766.png][] > \*\*结语：\*\*技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。 [Link 1]: https://www.jianshu.com/p/7929e4c9ff48 [Link 2]: https://www.jianshu.com/p/1ed4518165d6 [Link 3]: https://www.jianshu.com/p/b31bb5a7b953 [Link 4]: https://www.jianshu.com/p/54a0f2e6db7c [Link 5]: https://www.jianshu.com/p/67318c924310 [CSS]: https://www.jianshu.com/p/27977214b2f5 [Link 6]: https://www.jianshu.com/p/6aac3485307e [Link 7]: https://www.jianshu.com/p/83ac6ee72dbb [Link 8]: https://www.jianshu.com/p/1162c4f9590c [Link 9]: https://www.jianshu.com/p/a905aaa7d264 [CSS 1]: https://www.jianshu.com/p/f1592762ba31 [JavaScript]: https://www.jianshu.com/p/fe7a16e3fd19 [Link 10]: https://jq.qq.com/?_wv=1027&k=n3fRmyCT [022910ba96ca0acf0ae9e72302bc7766.png]: /images/20221119/d564f078327747d79a78d864690846bc.png
还没有评论，来说两句吧...