拉钩大前端
文章平均质量分 88
Jack おう
后端转前端的码农小王---深圳
展开
-
拉钩-JS 性能优化-总结篇
基于之前写的俩篇做个总结JS 性能优化JS 性能优化2原创 2021-03-18 16:20:50 · 188 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Virtual DOM 的实现原理
1原创 2020-12-09 09:01:53 · 346 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - 模拟 Vue.js 响应式原理
目标原创 2020-12-09 09:01:12 · 272 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue-Router 原理实现
介绍Vue Router 基础回顾-使用步骤在main种导入刚刚创建好的router创建vue实例的时候创建vue-router的作用打印一下,没有注册和注册了的vue实例区别注释这行代码,运行注册看看注入了route和router属性。route存了路由规则。router相关方法。总结1.创建组件视图2注册插件3创建ruote对象,注册route对象4,route-view占位,当路由匹配成功会把route-view替换掉动态路由获取参数,建议第二种,不用太强依赖路原创 2020-12-07 22:45:21 · 292 阅读 · 0 评论 -
手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue.js 基础回顾
Vue.js 基础回顾阶段内容Vue 基础结构2Vue 的生命周期初始化注入阶段,props datas注入vue实例上 然后触发created(因为刚刚初始了props data methods,现在可以访问这个成员)vue创建完毕。把模板编译成render函数开始挂载dom,把元素渲染到页面后触发mounted函数mounted后可以访问新的dom,挂载完后修改data的话会拿到dom进行对比然后更新(beforeUpdate还是旧的数据,新数据在updated拿)最后销原创 2020-12-07 21:23:01 · 209 阅读 · 0 评论 -
阶段三模块一 直播
注意介绍vue集成ts原创 2020-12-02 18:01:07 · 199 阅读 · 0 评论 -
阶段二 模块二 直播
阶段二 模块二 直播原创 2020-12-02 17:56:00 · 372 阅读 · 0 评论 -
阶段二 模块二作业
阶段二 模块二作业原创 2020-12-02 17:55:28 · 305 阅读 · 0 评论 -
其他打包工具 如何使用rollup 和 Parcel
其他打包工具原创 2020-12-02 17:54:06 · 174 阅读 · 0 评论 -
Webpack 学这篇就够了,入门到上线优化
模块打包工具的由来ESM存在兼容问题(主流浏览器解决了)模块打包工具概要可以通过webpack把零散的文件打包到一个js中,通过下面这个进行代码兼容处理(转ES5)可以根据我们意愿进行拆分打包,把想打包到一起的文件组织起来,形成一个程序运行时所需的文件,后面需要的文件,用户点击后再加载,这样就可以渐进式加载,不会导致文件过碎或过大Webpack 快速上手可对前端所以资源进行模块化。yarn webpack 进行打包,会先从src index.js打包Webpack原创 2020-11-30 23:26:17 · 347 阅读 · 0 评论 -
模块化开发入门
模块化概述模块化是当下前端最重要的开发范式之一。把复杂的代码进行模块化提高开发效率。原创 2020-11-30 00:52:17 · 245 阅读 · 0 评论 -
阶段一模块一 直播
使用 TypeScript 的 Vue.js 项目差异1)基本操作安装 @vue/cli 最新版本使用 @vue/cli 创建一个项目(不选 TypeScript)先选这俩个。 use npm使用 @vue/cli 安装 TypeScript 插件注意项目中千万别这么搞,插件会覆盖掉一下代码。2)通过 Git Diff 对比介绍使用 TypeScript 的 Vue.js 项目差异安装了 @vue/cli-plugin-typescript 等插件shims原创 2020-11-28 09:06:52 · 73 阅读 · 0 评论 -
阶段三模块一作业
简答题1、谈谈你对工程化的初步认识,结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值。2、你认为脚手架除了为我们创建项目结构,还有什么更深的意义?编程题1、概述脚手架实现的过程,并使用 NodeJS 完成一个自定义的小型脚手架工具2、尝试使用 Gulp 完成项目的自动化构建项目基础代码下载地址:百度网盘:https://pan.baidu.com/s/1AyGApMTFEfCeGfQBdykOGg 提取码: bw3r说明:本次作业中的编程题要求大家完成相应代码后(二选一)原创 2020-11-26 14:51:37 · 262 阅读 · 0 评论 -
前端 自动化构建 入门及原理
自动化构建简介今天请假肝学习 周三.把一些重复的工作机械化和一些不被支持的新特转化,以及利用其它高效工具进行开发。自动化构建初体验scss也是一种自动化构建,帮我们自动转换成原始css,但也要重复执行命令,我们可以用npm script解决这些问题npm script 使用package中新增一个对象先安装下面这个,用于启动一个测试服务器package中添加启动成功我们要在这个服务器启动前设置样式,有个serve之前的属性添加变动监听变化 ,自动编译因为加了wat原创 2020-11-25 15:41:38 · 549 阅读 · 0 评论 -
脚手架工具入门
脚手架工具概要就是创建一个自定义项目的基础工具,提供了约定,开发范式等等。例如AndroidStudio 创建完了就帮你创建了所有文件和目录。本次内容常用的脚手架工具vue-cli和create-react-app-angular-cli等,类似yeoman这些可以提供根据自己模板自定义的脚手架。Yeoman 简介可以定制自己的脚手架。Yeoman 非常通用。Yeoman 基础使用yarn global add yo npm install -g yo安装yeoman必须搭配对应的原创 2020-11-25 09:36:08 · 752 阅读 · 0 评论 -
前端 工程化概述
工程化的定义和主要解决的问题把项目统一管理。一个项目过程中工程化的表现工程化不等于工具工程化一个是对一个项目的整体规划和架构。例如vue cli 不仅仅帮我们创建项目,更是明确了整个结构,例如route目录应该放哪,提供了规范化。工程化与 Node.js...原创 2020-11-24 21:28:03 · 197 阅读 · 0 评论 -
ES 新特性与 TypeScript、JS 性能优化> 内容概要-直播
20201109 直播零、答疑使用原型和不使用原型“对原型添加方法更好”,有疑惑,我在方法里面做一些访问属性的操作后,发现原型添加方法更消耗性能https://jsbench.me/function Person (id) { this.id = id}Person.prototype.say = function () { console.log(this.id, 'say~')}var p = new Person(Date.now())p.say()//p等于 Per.原创 2020-11-24 19:49:27 · 195 阅读 · 0 评论 -
学习目录-拉钩大前端高薪训练营
平常都看免费课,十块钱的课都不愿买的我,下了血本购买了近万的课程,既然买了就努力学吧。做个目录方便自己复习。共8个阶段。阶段一阶段二阶段三阶段四阶段五阶段六阶段七阶段八2个模块2个模块6个模块6个模块5个模块5个模块5个模块2个模块完成选项从早到晚。阶段模块名称连接完成时间阶段一模块一函数式编程范式添加链接描述2020-11-12...原创 2020-12-22 09:08:35 · 2612 阅读 · 17 评论 -
模块二作业
输出是6 这里出现了闭包,a[6]存了一个函数,函数里面存了6,这个函数还引用着i。报init的错误,因为在块级作用域里定义了let 这个新的 let 会形成作用域,如果使用前不声明就会报错。var 缺点 1.有变量提升,未声明前可以使用,2.重复命名会覆盖,3.污染全局作用域,4.块级作用域,外面也能访问。let 优点1.没有变量提升。2.未声明前不能使用。3.有自己的作用域。4,不会污染全局。const 可以声明常量,值不能修改,但是引用类型的属性可以修改。必须初始化。和let一样有自.原创 2020-11-23 20:29:20 · 108 阅读 · 0 评论 -
JS 函数式编程
为什么要学习函数编程以及什么是函数式编程函数式编程的特性(纯函数、柯里化、函数组合等)函数式编程的应用场景函数式编程库 Lodash为什么要学习函数式编程(FB)函数式编程是非常古老的一个概念,早于第一台计算机的诞生,函数式编程的历史。那我们为什么现在还要学函数式编程?函数式编程是随着 React 的流行受到越来越多的关注(例如react的函数组件,redux也是基于函数式编程的思想,想要学好react那么久必须学好FP)。Vue 3也开始拥抱函数式编程。函数式编程可以抛弃 this。打原创 2020-11-12 16:43:18 · 914 阅读 · 0 评论 -
JavaScript 异步编程
JS单线程的原因如果多线程同时操作了dom,浏览器并不知道以谁为准。优点:安全。缺点:如果有耗时任务,会出现假死现象。所以为了解决以上问题,JS有俩种模式同步模式代码依次执行。函数的声明不会入CallStack,调用的方法会进入CallStack,执行完成后弹出。可以想象成CallStack就是JS的任务执行表。如果同步模式遇到耗时操作,可能会卡死,这个时候就需要进行异步解决。异步模式开启异步任务后,继续执行同步代码,后续逻辑用回调函数处理。Timeout开启定时器,进入WebA原创 2020-11-14 14:28:41 · 211 阅读 · 0 评论 -
JS Event Loops 微任务 宏任务
EventLoop、宏任务、微任务console.log(1)setTimeout(function () { 进入宏任务队列 console.log(2)}, 0)console.log(3)console.log('global begin') 1setTimeout(function timer1 () { queueMicrotask(() => { 把函数内的东西放入微任务队列 console.log('queueMicrotask') 2 })原创 2020-11-14 15:11:18 · 218 阅读 · 0 评论 -
async await 面试题
async function t1() { let a = await "lagou"; console.log(a);}t1();console.log('a')先打印A 后执行微任务里的 let a = await “lagou”;console.log(a);原理其实就是Generator问题1解析await是一个表达式,如果后面不是一个 promise 对象,会先把表达式转换成promisefunction * t1 () { let a = yield "lagou原创 2020-11-14 15:32:19 · 2284 阅读 · 1 评论 -
从简到难手把手教你写Promise源码 手写 Promise源码
先写个简易版的const PENDING = 'pengding'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'class MyPromise { constructor(excecutor){ excecutor(this.resolve,this.rejected) } status = PENDING // 成功之后的值 value = undefined; /原创 2020-11-15 21:47:58 · 268 阅读 · 0 评论 -
JS ES6学习总结 拉钩模块二
目前大多数人还没搞明白语言和平台之间的关系。ECMAScript 概述ES是JS的扩展语言,也可以说ES就是JS。ES2015 概述ES2015 let 与块级作用域ES5前只有俩种作用域,全局和函数作用域,ES5后多了块级作用域。但使用let就不能获取到了。1不能let重复声明if (true) { var foo = 'zce' var foo = 'zce' console.log(foo)}// OKif (true) { var foo = 'zc原创 2020-11-21 16:34:50 · 332 阅读 · 1 评论 -
TypeScript入门
概述解决了JS类型问题。强类型,语言层面限制函数的实参类型必须和形参类型相同。弱类型就不限制,比如js。js中所有的类型判断错误都是运行时的代码判断,强类型的在编译的时候就报错了。例如python的变量是可以随时改变类型的。类型系统 静态类型与动态类型静态类型:声明的时候就是明确的而且是不能被改变的例如java,动态类型:运行阶段才能明确类型,而且可以随时变化。动态类型种变量没有类型,变量存放的值有类型。总之就是是否能被类型转换,能就是动态,反之静态。JavaScript原创 2020-11-22 01:12:58 · 134 阅读 · 1 评论 -
JS 性能优化
概述性能优化时不可避免的哪些内容可以看做是性能优化?任何一种可以提升程序运行效率,降低程序开销的行为,我们都可以看做是一种优化操作。这就意味着在软件开发的过程中,必然存在着很多值得优化的地方。无处不在的前端性能优化特别是在前端开发过程中,性能优化时无处不在的,例如请求资源时的网络、数据的传输方式,开发过程中所使用的的框架等。本篇的核心是JavaScript语言的优化,具体来说就是认知内存空间的使用,垃圾回收的方式介绍。从而可以让我们编写出高效的JavaScript代码。内存管理内存管理介绍原创 2020-11-22 18:39:37 · 815 阅读 · 0 评论 -
JavaScript 性能优化2
JSBench 使用https://jsbench.me/堆栈中的 JS 执行过程普通值存放栈内存,引用类型堆内存GC负责回收减少判断层级在我们编写的过程中,有可能会出现判断条件嵌套的场景,而往往这种场景都可以提前 return 掉那些无效的条件来达到嵌套层级的优化效果。// 嵌套 IFfunction doSomething(part, chapter) { const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']原创 2020-11-23 00:22:56 · 186 阅读 · 0 评论 -
什么是TypeScript TypeScript 快速入门
TypeScript 概述基于JS的扩展语言,最低能编译到ES3版本的代码。任何一种JavaScript运行环境都支持TypeScript进行开发相比于Flow,功能更为强大,生态更健全、更完善很多大项目都使用TypeScript进行开发 – Angular/Vue3.0TyperScript — 前端领域中都第二语言缺点:语言本身多了很多概念,提高了学习成本项目初期,TypeScript会增加一些成本TypeScript 快速上手安装: yarn add typescript --d原创 2020-11-23 19:53:06 · 348 阅读 · 0 评论 -
模块一 作业
异步编程:EventLoop:js中每个代理都是由事件循环驱动的,事件循环负责收集等待的任务,安排等待的任务执行。先执行微任务后执行宏任务,然后开始事件循环,总之EventLoop负责监听调用栈和消息队列。消息队列:当JS有异步任务时,首先异步任务会进入WebApi等待任务执行,异步任务开始执行时会(回调函数执行)进入消息队列,然后放入调用栈执行任务。宏任务:同步代码和setTimeout等属于宏任务,宏任务会在微任务结束后执行。微任务:Promise和queueMicroTask等属于微任务,调.原创 2020-11-18 22:57:30 · 170 阅读 · 0 评论