
大前端课程笔记
Azer.Chen
这个作者很懒,什么都没留下…
展开
-
大前端 - Vue-Router
编程式导航// 将新的路由推入 history 中,history.length + 1this.$router.push()// 用新的路由替换掉当前 histroy 中的末尾项this.$router.replace()// 在 history 数组中,前进回退// + 前进 - 后退this.$router.go(-1)hash 模式URL中带有 # 标识,如:https://music.163.com/#/playlist?id=202 URL 中 .原创 2020-08-06 15:34:11 · 139 阅读 · 0 评论 -
大前端 - 打包工具
概要需求背景新特性代码编译,将具备新特性的代码编译成能够兼容低版本环境的代码,如 ES6 => ES 5 模块化 JavaScript 打包 支持不同类型的资源模块本质解决的是前端整体的模块化,并不单指 JavaScript 模块化功能模块打包器(Module Bundler) 解决模块 JS 打包问题 可以将零散的 JS 代码整合打包到一个 JS 文件中 模块加载器(Loader) 对于存在兼容问题的代码,可以通过引入对应的解析编译模块进行编译 代码拆分原创 2020-08-06 15:14:06 · 260 阅读 · 0 评论 -
大前端 - ES Modules
特性通过给 script 添加 type="module" 的属性,就可以以 ES Module 的标准执行其中的 JS 代码 ESM 自动采用严格模式,忽略 “use strict” 每个 ES Module 都是运行在单独的私有作用域中 ESM 是通过 CORS 的方式请求外部的 JS 模块的 ESM 的 script 标签会延迟执行脚本,不会阻滞页面的渲染导入导出 // 导出 module.jsvar name = 'foo module'function =原创 2020-08-06 14:42:49 · 226 阅读 · 0 评论 -
大前端 - Webpack
概述本质JavaScript 应用程序的静态模块打包器核心加载器(Loader)机制工作流程配置初始化 webpack 会首先读取配置文件,执行默认配置 编译前准备 webpack 会实例化 compiler,注册 plugins、resolverFactory、hooks。 reslove 前准备 webpack 实例化 compilation、NormalModuleFactory 和 ContextModuleFactory reslove 流程解析文件的路径信息以及 i原创 2020-08-05 18:04:09 · 247 阅读 · 0 评论 -
大前端 - 前端脚手架工具
脚手架工具本质作用创建项目基础结构 提供项目构建任务 提供项目规范、约定意义减少重复性的工作,不需要复制其他项目再删除无关代码,或者从零创建一个项目和文件 可以根据交互动态生成项目结构和配置文件 多人协作更为方便,不需要把文件传来传去常用脚手架工具 脚手架 作用 create-react-app 创建 React 项目 vue-cli 创建 Vue 项目原创 2020-08-04 18:46:34 · 398 阅读 · 0 评论 -
大前端 - 关于项目工程化
定义工程化是根据业务特点,将前端开发流程规范化,标准化,它包括了开发流程,技术选型,代码规范,构建发布等,用于提升前端工程师的开发效率和代码质量。作用制定各项规范,编码规范,开发流程规范,前后端接口规范等等 使用版本控制工具 git,commit描述规范 使用合适前端技术和框架,提高生产效率,降低维护难度,采用模块化,组件化,数据分离等 代码可测试,单元测试,端到端测试等 开发部署自动化意义减少重复性的工作,不需要复制其他项目再删除无关代码,或者从零创建一个项目和文件。 可以根据原创 2020-08-04 18:02:17 · 228 阅读 · 0 评论 -
前端路 - JavaScript 性能优化
浏览器内存管理基本概念JavaScript 中垃圾的定义内存 由可读写的单元组成,表示一片可操作空间 JS 中的内存空间在变量定义时自动分配,无法人为指定明确大小 管理:认为的去操控一片空间的申请、使用和释放 内存管理:开发者主动申请空间、使用空间、释放空间 管理流程:申请 => 使用 => 释放 不再被引用的对象 不能从根上访问到的对象(非可达对象) 程序中不再需要使用的对象 程序中不能再访问到的对象JavaScript 中可达对象的定义可以访问到原创 2020-08-04 17:11:26 · 117 阅读 · 0 评论 -
前端路 - JavaScript 中的数据类型校验
类型系统相关介绍类型安全强类型 语言层面限制函数的实参类型必须与形参类型相同 语言中不允许任意的隐式类型转换 弱类型 语言层面不会限制实参的类型 语言中允许任意的隐式类型转换 类型检查静态类型 声明时,变量的类型便是明确的 声明后,变量的类型就不允许再修改 动态类型 在运行阶段,才能够明确类型变量 变量的类型可以随时发生变化 可理解为,动态类型的变量是没有类型的,而变量的值是有类型的 强类型语言优势错误更早暴露 代码更智能,编码更准确 重构原创 2020-07-27 11:26:55 · 577 阅读 · 0 评论 -
前端路 - ES6
作用域ES6 在全局作用域、局部作用域外,新增了一个块级作用域。在 { } 中使用 let / const 则会形成块级作用域,在 “块” 外层不能获取到 “块” 中的变量。在 for 循环中,for 的条件语句中声明的参数与其执行语句中声明的参数之间互相不影响,互相独立。可视为 for 循环中嵌套了两层作用域。for (let i = 0; i < 3; i++) { let i = 'Azer'; console.log(i);}// Azer Azer Azer原创 2020-07-27 10:44:45 · 160 阅读 · 0 评论 -
前端路 - 手打实现 Promise
分析Promise 就是一个类,在执行这个类时,需要传递一个执行器进去,执行器会立即执行 Promise 有三种状态 pending 等待 fulfilled 成功 rejected 失败 Promise 状态变化只能有两种情况: pending > fulfilled pending > rejected 状态一旦确定就不可再更改 resolve() 和 reject() 用于更改状态 resolve:fulfilled reject:rejecte原创 2020-07-27 00:36:20 · 128 阅读 · 0 评论 -
前端路 - JavaScript 中的异步编程方案
Promise 方案误区在一个 Promise 的回调中调用另一个 Promise,即 Promise 的嵌套调用,形成了回调地狱。promise().then(res => { promise().then(re => { promise().then(r => {}) })})链式调用Promise 对象的 then 方法会返回一个全新的 Promise 对象 后边的 then 方法就是在为上一个 then 返回的 Promis原创 2020-07-27 00:28:44 · 120 阅读 · 0 评论 -
前端路 - JavaScript 函数式编程
高阶函数JavaScript 的函数其实都指向某个变量。既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,这种函数就称之为高阶函数。高阶函数可以用来抽象通用的问题,让我们可以只关注于我们需要实现的目标。函数作为参数function forEach (array, fn) { for (let i = 0; i < array.length; i++) { fn(array[i]) }}function filter (array,原创 2020-07-23 11:20:48 · 196 阅读 · 0 评论