2 GHkmmm

尚未进行身份认证

我要认证

喜欢摄影的程序员

等级
TA的排名 29w+

在vite项目中展示markdown文件

由于vite不是基于webpack的,所以不能通过引入loader的方式实现加载markdown所以我们需要自制一个vite插件,将md文件转化为js文件1. 创建md.js(或md.ts)在项目根目录下创建plugins文件夹并在其中创建md.js(或md.ts)⚠️ 在 import marked from 'marked'之前我们需要npm intsall markedimport path from 'path'import fs from 'fs'import marked fr

2020-10-07 16:59:52

Vue3如何检查子组件类型

需求:检查parent组件的子组件是否为children组件<parent> <children></children></parent>解决方法拿到context.slots.default(),其中包含了parent组件下所有子组件的信息然后遍历context.slots.default(),其中有type属性,通过type属性我们可以知道每一个子组件的类型,是div还是span还是children…import children f.

2020-09-30 15:26:57

js中的连等赋值问题(图解)

代码var a = {n:1}; var b = a; // 持有a,以回查 a.x = a = {n:2}; alert(a.x);// --> undefined alert(b.x);// --> {n:2}思路赋值是从右到左的,但不要被绕晕了, 其实很简单,从运算符优先级来考虑首先创建两个变量a, b,这两个变量同时指向对象{n:1}.运算优先于=赋值运算所以此时先创建了a.x和对象{n:2}然后将a.x和a同时指向对象{n:2}

2020-09-26 12:38:12

记一次字节跳动面试的编程题

题目描述要求实现一个Quene类,包括task方法传入两个参数延迟执行时间(单位:ms)执行的函数要求实现链式调用start方法执行start方法后依次执行(执行完上一个task方法中的函数后才能执行下一个)示例执行结果:一秒后输出a,十秒后输出b ,再过两秒输出ccodepen演示new Quene().task(1000, () => { console.log('a')}).task(10000, () => { console.

2020-09-20 00:07:09

Vue项目部署Nginx踩过的坑

一、问题描述在开发环境中,使用的是在vue.config.js中配置devServer的方法解决的跨域,但是打包部署到服务器上后,发现还是无法访问服务端数据,后面查阅资料发现vue.config.js在打包后会失效,所以得在Nginx上配置反向代理实现二、实现反向代理location /api/ { proxy_pass http://<ip地址>/; #反向代理}三、刷新页面404解决配置nginxlocation / { try_files $uri $uri/

2020-09-13 10:42:29

js函数柯里化

概念把接受多个参数的函数变换成接受单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术使用场景参数复用提前确认,避免每次都重复判断延迟计算/运行实现柯里化// 普通say函数function say ( company, academy, name) { console.log(`我的公司是${company},专业是${academy},名字是${name}`)} //调用say('a', 'b', 'c')// 柯里化funct

2020-09-10 10:51:54

从__proto__和prototype来深入理解JS对象和原型链

从__proto__和prototype来深入理解JS对象和原型链就标题而言,这是七八篇里起得最满意的,高大上,即使外行人也会不明觉厉! ????不过不是开玩笑,本文的确打算从__proto__和prototype这两个容易混淆来理解JS的终极命题之一:对象与原型链。__proto__和prototype__proto__引用《JavaScript权威指南》的一段描述:Every JavaScript object has a second JavaScript object (or null

2020-09-09 15:09:16

万字笔记快速复习计算机网络(图文)

文章目录层次结构设计的基本原则OSI七层模型TCP/IP四层模型计算机网络的性能指标速率时延RTT物理层概述物理层的作用信道的基本概念分用-复用技术数据链路层概述封装成帧透明传输差错检测奇偶校验码循环冗余校验码CRC最大传输单元MTUMTU路径MTU以太网协议详解Mac地址以太网协议数据格式传输过程网络层概述IP协议讲解虚拟互连网络IP协议IP协议的格式路由表简介IP协议的转发流程ARP协议与RARP协议IP地址的子网划分分类的IP地址特殊的主机号特殊的网络号划分子网子网掩码无分类编址CIDR斜线记法网络地

2020-09-03 10:59:04

js实现快速排序算法

思路假设有这么一个数组let ary = [12, 8, 15, 16, 1, 24]第一步找到中间项15​ --> 把它从原来数组中移除​ --> 获取这一项的结果第二步让拿出来的每一项和中间项继续比较并创建两个数组(左边数组和右边数组)比中间项小的放到左边比他大的放到右边左边数组:12,8,1右边数组16,24重复上面的操作 再分别将左右两个数组再取中间项,再分成左右两个数组,比中间项小的放到左边,比他大的放到右边…代码实现/* * 实现插入排

2020-08-26 16:59:24

js实现插入排序算法

思路假定有这么一个数组let ary = [12, 8, 24, 16, 1]插入排序的做法类似于我们平时打的扑克第一轮:先从数组中抽一张“牌”==> 12第二轮:再抓一张牌与之前抓到的牌依次比较如果当前新牌A比手里的某张牌B大,则把A放到B的后面,如果小则继续向前面的牌比前提:如果已经比较到第一张了,则把当前牌A插入到最前面即可==> 8, 12第三轮:==> 8, 12, 24第四轮:==> 8, 12, 16, 24…代码实现/* *

2020-08-25 22:47:52

js实现冒泡排序算法

什么是冒泡排序让数组中的当前项和后一项进行比较,如果当前项比后一项大,则两项交换位置(让大的靠后)即可分析假设有这么一个数组let ary = [12, 8, 24, 16, 1]如果采用冒泡排序,那么应该是这么执行的第一轮:12>8 => 交换位置 [8, 12, 24, 16, 1]12<24 => 不交换位置 [8, 12, 24, 16, 1]24>16 => 交换位置 [8, 12, 16, 24, 1]24>1 =&

2020-08-24 23:16:06

Iconfont搭建组件库的字体图标库

前言该系列文章主要记录搭建自己组件库中遇到的问题,分享自己在搭建组件库过程中遇到的坑,并且会通过分享源码的方式,讲解每个组件封装的重点难点,最终会发布到npm上。项目已开源至GitHub,喜欢的朋友记得帮我点个star哦!项目源码地址:OreoUI通过Iconfont搭建组件库的字体图标库组件库中搭建自己的字体图标库是必要的所以我们希望在使用到组件库的时候,能通过我们准备好的css文件,通过其中的类名去引用对应的图标<!-- 引用”关闭“图标 --><i class="or

2020-08-08 11:48:58

深入理解v-model

v-model的实质<input type="text" v-model="username"> 其实v-model实质上就是一个语法糖,等价于<input type="text" :value="username" @input="username=$event.target.value">相当于对input框的input事件进行了监听,其实在vue的源码中也是这么实现的想要手写实现修改props值的问题在日常开发中,我们经常会遇到需要修改props中的某个值的场

2020-08-06 11:53:51

使用vite搭建Vue3项目

全局安装create-vite-app# yarnyarn global add create-vite-app@1.18.0 # npmnpm i -g create-vite-app@1.18.0创建项目目录# oreo-ui是项目名称cva oreo-uicreate-vite-app oreo-ui根据提示安装对应依赖1.cd oreo-ui2.npm install(or `yarn`)3.npm run dev(or `yarn dev`)预览项目在浏览器输入

2020-08-05 20:17:03

300行代码实现Vue的MVVM响应式原理

前言源码下载Vue的响应式原理是面试老生常谈的问题了,而大多数人会选择直接背答案这样的形式去应付面试,一旦面试官继续追问,便什么也答不上来了,所以,我希望能通过参考Vue源码的形式,动手编写代码(大概300行左右)实现一个简单的Vue的MVVM框架,从而让我们更好的理解Vue的响应式原理。我们会通过实现指令解析器Compile实现数据监听器Observer实现观察者Watcher来实现整个Vue的MVVM的响应式原理实现的功能不是很完善,如果大家有兴趣,可以自己补充,本次代码主要是完成整

2020-08-04 14:52:25

Webpack配置详解

Webpack相关文章Webpack的基本使用Webpack的性能优化entry1.string类型单入口打包形成一个chunk输出一个bundle文件。此时chunk的默认名称是mainmodule.exports = { entry: './src/index.js', ...}2.array类型多入口所有入口文件最终只会形成-一个chunk,输出出去只有一个bundle文件只有在HMR功能中让html热更新生效module.exports = {

2020-08-03 10:59:45

Webpack的性能优化

HMRhot module replacement 热模块替换/模块热替换作用:一个模块发生变化,只会重新打包这一个模块(而不是打包所有模块) 极大提升构建速度module.exports = { entry: './src/js/index.html', ... devServer: { ... // 开启HMR功能 // 当修改了webpack配置,新配置要想生效,必须重新webpack服务 hot: true ... } ...}

2020-08-02 11:24:06

Webpack的基本使用

Webpack基础webpack的五个核心概念EntryOutputLoaderPluginsMode安装webpack cli​ npm i webpack webpack-cli -D​ -D是–save -dev的缩写运行指令开发环境//webpack会以./src/index.js为入口文件开始打包,打包后输出到./build/bulit.js,整体打包环境是开发环境webpack ./src/index.js -o ./build/built.js --mode=

2020-08-01 12:04:37

Js中this指向问题总结

this的默认指向全局环境下的this指向了windowconsole.log(this) // window函数独立调用,函数内部的this也指向了windowfunction fn(){ console.log(this) // window}被嵌套的函数独立调用时,this默认指向了windowvar a= 0;var obj= { a: 2, foo: function (){ //函数当做对象的方法来调用this指向了obj var tha

2020-07-31 09:27:20

手写实现promise源码(附源码)

手写实现promise源码源码下载一、前言需要掌握以下知识点promise的基本使用promise常见的APIJs的事件循环机制想复习或者学习promise的同学可以看看这篇文章实现的主要功能Promise.prototype.thenPromise.prototype.catchPromise.resolvePromise.rejectPromise.allPromise.race二、代码实现整体结构实现(function(window){ const

2020-07-30 12:00:56

查看更多

勋章 我的勋章
  • 签到新秀
    签到新秀
    累计签到获取,不积跬步,无以至千里,继续坚持!
  • 新人勋章
    新人勋章
    用户发布第一条blink获赞超过3个即可获得
  • 阅读者勋章Lv2
    阅读者勋章Lv2
    授予在CSDN APP累计阅读博文达到7天的你,是你的坚持与努力,使你超越了昨天的自己。
  • 持之以恒
    持之以恒
    授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!
  • 勤写标兵Lv3
    勤写标兵Lv3
    授予每个自然周发布7篇到8篇原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。
  • 分享学徒
    分享学徒
    成功上传1个资源即可获取