前端
问也去
GIS开发工程师,欢迎交流学习
展开
-
创建自己的脚手架命令工具
vue脚手架有自己的模板管理工具;vue-cli,我们也可以自己写一款自己的模板管理脚手架,通过使用自己的命令,安装相应的模板 初始化项目 npm初始化一个空项目 创建bin/cli.js文件 #! /usr/bin/env node //测试 console.log('sx') 创建lib/index.js文件为入口文件 修改package.json { "name": "sx", "version": "1.0.0", "description": "", "main": .原创 2022-03-30 10:47:41 · 179 阅读 · 0 评论 -
常见GC算法
基础知识 不同于常规的后端语言,js中的内存管理是自动的,不需要人为的去释放,这个内存管理机制叫做垃圾回收机制(GC) js对垃圾的定义: 对象不再被引用 对象不能从根上访问到 可达对象的定义 可以访问到的对象就是可达对象(引用,作用域链) 可达的标准就是从根上出发能否被找到 js的根可以理解为全局对象 GC算法 GC算法并不是一种,而是有多种算法工作,保证垃圾的有效回收,这些回收算法各有优缺点 引用计数算法 通过设置引用数,判断当前引用数是否为0 当引用关系改变时,其引用计数器发原创 2022-01-14 21:36:34 · 158 阅读 · 0 评论 -
迭代器接口实现
● for of 可以遍历拥有迭代接口的数据,如数组,Set,Map等,但是却不能操作普通对象 ● 因为普通对象里面没有迭代器接口 ○ 可以看到这些可遍历的数据类型的原型上,都有一个Symbol.iterator函数 let a = [1,2,3] let set = new Set([1,2,3]) console.log(a[Symbol.iterator]()) ○ 返回一个带有next方法的对象 ■ 调用这个方法,返回来数组的第一个值,可以看到,for of原创 2021-12-21 20:46:49 · 195 阅读 · 0 评论 -
函数式编程
前置知识 为什么要学习函数式编程 抛弃this 打包可以更好的利用tree shaking过滤无用代码 方便测试,方便并行处理 很多便利的库:lodash,underscore,ramda 函数是一等公民 函数是普通对象,所以可以存储到变量或数组中 高阶函数 可以把函数作为参数传递给另一个函数 forEachfunction forEach (arr, fn) { for (let i = 0; i < arr.length; ++i) { fn(arr[i])原创 2021-11-26 15:32:48 · 336 阅读 · 0 评论 -
简单理解eventLoop事件环
事件环:实现js异步概念,解决异步执行的时候的调度问题 浏览器由多个进程组成,每个进程包含多个线程 浏览器运行流程 js执行的时候,按照从上到下执行,代码会依次放入执行栈中执行,遇到异步,则 会 把异步回调放入事件队列(消息队列)中,等到执行栈中的代码全部执行完,再依次将事件队列中的函数拿出来依次执行 代码执行可能会遇到Promise,这些为微任务,微任务执行完浏览器会检测是否要重新渲染(GUI线程) 执行宏任务时,会把微任务放入微任务队列,每个宏任务都有一个微任务队列,并且宏任务执行完,其微任务.原创 2021-10-09 20:29:25 · 121 阅读 · 0 评论 -
字体单行及多行文本溢出隐藏 省略号代替
单行隐藏: display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 多行隐藏: overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; /*设置对其模式*/ -webkit-line-clamp: 2; /*设置多行的行数*/ ...原创 2021-07-21 09:52:21 · 142 阅读 · 0 评论 -
js中0.1+1.2 !=0.3的问题详解
我们在控制台中输入0.1+0.2,显然结果不是0.3,那么问什么会这样呢? 要了解这个问题,首先得明白浮点型在计算机中的存储方式 js中,浮点型总共64位,最高位为符号位,接下来11为指数位,那么剩下的52位就是小数位,我们可以推断,如果小数是无限循环小数,那么是不是只能保存其52位,剩余的肯定要舍去。 而我们的问题的答案就是这个原因 ,以0.1+0.2为例,首先这两个浮点数计算是先转化为二进制的, 0.1转化为2进制为:0.00001100110011001100110011…无限循环 0.2原创 2021-06-10 20:49:31 · 158 阅读 · 0 评论 -
js模拟new的实现
构造函数 js中通过构造函数实现实例之间的继承,这里通过new 一个对象,将this指向这个对象并返回,同时这个对象继承构造函数原型上的方法 function Animal(){ this.type = "cat" } Animal.prototype.say = function(){ console.log("喵喵喵"); } let animal = new Animal(); console.log(animal.type); //cat animal.say() //喵喵喵原创 2021-05-23 15:49:41 · 210 阅读 · 0 评论 -
模拟call和apply的实现
call和apply特点 传进去一个参数用来改变this指向 执行函数 function f1(){ console.log(this) } f1.call("hello") // [String: 'hello'] call实现原理 在Function原型链上声明一个函数myCall,传进去一个参数content,如果content不存在,则默认为window 在content上挂一个函数,指向this,这样调用这个函数相当于调用了外部函数,同时this指向content 接收剩余参数原创 2021-05-23 11:37:25 · 81 阅读 · 0 评论 -
js中的微任务与宏任务
js的执行顺序是先同步后异步,其中,js在运行的过程之中,同步代码会优先执行,在碰到异步代码时,会将异步代码放如任务队列之中,等同步代码执行完毕之后再将任务队列的中异步代码执行。 但是任务队列有两个,一个叫宏任务队列,一个叫微任务队列,这俩队列的优先级如何划分呢? 首先,微任务的优先级大于宏任务,主要包括: promise async\awat 宏任务包括: 一般的异步代码、定时器,DOM事件等 console.log('1'); setTi原创 2021-05-18 16:58:20 · 115 阅读 · 0 评论 -
async与 await
1.首先async放在函数前面,它可以使函数返回一个promise对象。 text1 = async function(){ return 1 } text2 = async function() { return Promise.resolve(2) } console.log('text1:',text1()) //text1: Promise { 1 } console.log('text2',text2()) // text2 Promise { <pending>原创 2021-05-17 14:18:00 · 47 阅读 · 0 评论 -
手撕Vue源码(四)模板渲染
1.将数据劫持之后,就可以根据数据变化对dom树进行更新,即对模板进行数据渲染。 主要流程为: 2.按词法解析html vue中解析词法没有用状态机,而是设置了一些正则指令,以此匹配开始标签、结束标签、属性等标志 主要原理: 3.词法解析结束后,会返回一个root树,这棵树记录了html中的每个节点,节点的属性,以及父子关系,接下来需要对root树生成对应的代码, 4.获得code字符串代码,就可以构造render函数,构造一个function,用来返回code 5.相关代码地址:原创 2021-04-27 21:28:48 · 142 阅读 · 0 评论 -
手撕Vue源码(三)数组数据劫持
我们在建立观察者的时候,没有考虑数据是数组的情况,如果数据是数组,按照之前的逻辑,会将数组以索引为属性名进行劫持,这样对性能并不高,我们不考虑对数组索引进行劫持,而只封装数组的方法 建立观察者时,添加对数组的判断 若为数组,则分流进行下一步操作 重建数组父类,重新添加数组方法 若数组里面的值为对象,则应该监听 遍历数组,对值调用观察者 数组可以通过封装的方法来追加对象,应该对追加的内容进行监听 在数组上追加属性,指向观察者实例 判断数组追加内容原创 2021-04-09 10:17:29 · 113 阅读 · 0 评论 -
手撕Vue源码(一) rollup的基本配置
rollup简介 rollup类似于webpack,可以用来打包我们写的类库,今天我们尝试模仿vue,写一个相似的类库。 安装 npm install rollup @babel/core @babel/preset-env rollup-plugin-babel -D 环境配置 入口文件设置 入口文件表示我们用rollup将要封装的类库 这里将文件新建在src/index.js中 rollup配置 在全局目录下新家rollup.config.js文件 文件配置如下: import原创 2021-04-07 10:37:51 · 377 阅读 · 0 评论 -
React入门笔记
第一章 react基本使用 react基础首先不使用脚手架工具,只学习相关语法 Hello World输出 因为react是通过创建虚拟DOM,然后把虚拟DOM添加到DOM树中,以此达到控制视图的目的,所以首先使用react的时候需要先引入react相关文件和babel(把jsx转换成js)。 ...原创 2021-03-11 10:59:25 · 127 阅读 · 0 评论 -
js类与原型链
类的创建 js中创建一个类很容易,如下所示: <script> class Person { } let p1 = new Person(); let p2 = new Person(); console.log(p1); console.log(p2); </script> 以上创建一个类,并且创建它的实例p1 和p2,输出可以看到输出两个Person实例 但是,我们原创 2021-01-26 17:00:02 · 145 阅读 · 0 评论 -
react按需导入antd
react中比较出名的组件库之一就是ant design,对于初学者,只需要npm下载ant组件库,然后分别导入相应的组件,引入样式即可使用。但是这种方式并不是很好,因为我们使用的组件是有限的,但是却引入了所有的antd样式,造成了性能的浪费,因此我们需要按需引入相应的组件。 这里纪录一下,如何不用webpack,只在原有的create-react-app创建的目录下面,按需引入antd组件 第一步肯定需要安装antd对应的组件库,这里不做过多描述 安装相应的插件,用来覆盖create-react.原创 2020-10-10 21:09:53 · 1211 阅读 · 1 评论