自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(32)
  • 收藏
  • 关注

原创 NPM 发包

NPM发包修改package.json运行命令修改package.json"bin": { "t": "cli.js" }, "files": ["*.js"],运行命令切回官方源:nrm use npm在 npm 官网注册账号登录账号:npm adduser发布:npm publish注意:每次重新发布都需要修改版本号...

2021-07-06 10:51:27 133

原创 React: 受控组件与非受控组件

React: 受控组件与非受控组件受控组件非受控组件受控组件受 react 控制的组件。react 的特性:UI = f(props, state)。函数式的特性,只有state 和 props 改变了,UI 才会变。给 input 的 value 绑定到一个 state。import { useState } from "react";export default function App() { const [value, setValue] = useState(""); /

2021-05-10 10:12:33 130

原创 React UI 造轮子笔记

React 开发技巧和细节总结篇1. 项目搭建小知识点2. utils 方法(1)设置多个classNames(2)给className加前缀1. 项目搭建小知识点(1) 设置 src 为baseUrl为了方便引用文件,在 tsconfig.json 文件的 compilerOptions 配置项里添加配置:"baseUrl": "src"此时引用路径可以直接写 dir/comp.tsx ,这个路径相当于 src/dir/comp.tsx2. utils 方法(1)设置多个classNam

2021-05-02 14:03:09 493

原创 React造轮子:Icon

React造轮子:Icon1. 介绍代码1. 介绍造一个 Icon 组件,可以引入 svg 图标。参考博客:https://juejin.cn/post/6844904194747400199代码Icon 组件import './importAll';import React from "react";/** * * 引入svg的步骤: * 1. 安装svg-sprite-loader * 2. 将svg放入src/assets文件夹 * 3. 在代码里引入svg:import '

2021-04-24 16:11:44 224

原创 前端一周一个小玩意儿(一):摇摇乐版音乐播放器

前言最近看到这篇文章 Reddit | 最糟糕的音量控制设计大赛…其中一个作品是这样的:

2021-03-28 12:28:52 427

原创 JS 时间相关函数

时间相关函数// 1.创建时间let date = new Date();console.log(date); // 2021-01-04T09:00:24.212Z// 2.获取当前年份console.log(date.getFullYear()); // 2021// 3.获取月份(0-11)console.log(date.getMonth()); // 0// 4.获取当前日期(1-31日)console.log(date.getDate()); // 4// 5.获取当

2021-01-04 17:27:35 112

翻译 Node.js Promise reject 用例调查

如今,Node.js 作为 OpenJS Foundation 中一个颇具影响力的项目, 通过向 stderr 发出弃用警告来处理还未被处理的 rejection。该警告显示了 rejection 发生在哪块内存栈中,并指出在将来的 Node.js 版本中,未处理的 rejection 将导致 Node.js 以非零状态码退出。我们打算删除弃用警告,将其替换为稳定的行为,该行为可能与弃用警告中描述的行为不同。我们正在进行一项调查,以更好地了解 Node.js 用户如何使用 Promises 以及如何处理未处

2020-12-01 17:01:16 597

翻译 JavaScript 引擎:概述

JavaScript 引擎:概述引言几个主流的 JavaScipt 引擎JavaScript 引擎流程图1. Parser 解析器引言JavaScript 引擎是执行JavaScript代码的计算机程序或解释器。JavaScript 引擎可以用多种语言编写。例如,支持 Chrome 浏览器的 V8 引擎是用 C ++ 编写的,而支持 Firefox 浏览器的 SpiderMonkey 引擎是用 C 和 C ++ 编写的。JavaScript 引擎可以作为标准解释器,也可以作为即时编译器将 JavaSc

2020-09-09 10:43:32 180

翻译 在JavaScript中使用Promises时最常见的3个错误

在JavaScript中使用Promises时最常见的3个错误Promise 在 JavaScript 中有着举足轻重的地位。即使如今引入了 async/await ,Promise 对 JS 开发人员来说仍旧是不可或缺的。

2020-08-18 20:18:29 401

原创 JS事件

JS事件事件基础事件基础1、什么是事件?事件分为两部分:1)行为本身:浏览器天生就赋予其的行为。onclick、onmouseover(onmouseenter)、onmouseout(onmouseleave)、onmousemove、onmousedown、onmouseup、onmousewheel(鼠标滚轮滚动行为)、onscroll(滚动条滚动行为)、onresize(wind...

2019-08-02 21:44:31 212

原创 JS DOM基础

DOM知识点获取DOM元素的方法DOM的节点节点关系属性节点操作:增删改查获取DOM元素的方法document.getElementById 一个元素对象[context].getElementsByTagName 元素集合[context].getElementsByClassName 元素集合document.getElementsByName 节点集合document.doc...

2019-07-29 16:36:05 198

原创 JS盒子模型

元素的13个私有属性,包括3个系列:1、client系列clientWidth:元素的内容+左右paddingclientHeight:元素的内容+上下paddingclientTop:元素的上边框(border-top-width)clientLeft:元素的左边框(border-left-width)2、offset系列offsetWidth:元素的clientWid...

2019-07-28 20:58:22 152

转载 css的position属性

css的position属性staticrelativeabsolutefixedsticky参考博客 https://blog.csdn.net/jianghao233/article/details/80534835static默认值。没有定位,元素出现在正常的流中(会忽略 top, bottom, left, right 或者 z-index 声明)。relative生成...

2019-07-20 18:47:16 245

原创 CSS内联元素

CSS内联元素定义内联元素的性质line-height设置垂直居中的原理vertical-align参考博客 https://www.cnblogs.com/wfeicherish/p/8884903.html定义内联元素(html规范中的概念)英文:inline element,其中文叫法有多种,如:内联元素、内嵌元素、行内元素、直进式元素等。基本上没有统一的翻译。另外提到内联元素,通常...

2019-07-20 15:23:59 1006

转载 js中获取css中的样式属性

参考博客:https://blog.csdn.net/zhu_xiao_yuan/article/details/47343213

2019-07-20 14:44:47 292

原创 AJAX相关知识

AJAX相关知识AJAX基础知识基于原生JS实现AJAXAJAX基础知识什么是AJAX?async JavaScript and xml,异步的JS和XML。xml:可扩展的标记语言作用是用来存储数据的(通过自己扩展的标记名称清晰地展示出数据结构)ajax之所以称为异步的js和xml,主要原因是:1)xml:当初最开始用ajax实现客户端和服务器数据通信的时候,传输的数据格...

2019-07-18 15:21:50 266

原创 HTTP相关知识

HTTP和AJAX的相关知识在浏览器输入一个URL地址,到最后看到页面,中间经历了哪些过程?假设访问https://www.baidu.com 这个地址,按下ENTER键后,可以看到百度首页:1)百度首页并没有在自己的客户端本地,是输入地址后,才请求过来的2)输入不同的域名可以看到不同的页面3)有的网址是https,有的是http(也有的是ftp)4)需要客户端联网才能完成这些事...

2019-07-16 10:28:47 244

原创 CSS盒模型

2019-07-15 15:01:10 100

原创 三栏布局

面试知识点1. CSS页面布局1. CSS页面布局举个例子:实现一个高度固定的三栏布局有五种方式:绝对定位实现、float实现、flex实现、table和table-cell实现、grid实现。<section class="content"> <div class="left">left</div> <div class="m...

2019-07-14 20:01:15 107

原创 闭包总结

闭包总结闭包的定义闭包的作用:闭包的定义理论上闭包的定义如下:函数执行,形成一个私有作用域,保护里面的私有变量不受外界的干扰,这种保护机制叫做闭包。但是官方定义如下:函数执行,形成一个不被销毁的私有作用域,除了保护私有变量以外,还可以存储一些内容,这样的模式才是闭包。实现一个简单的闭包:var obj= (function () { return {};})();...

2019-07-13 22:41:45 129

原创 选项卡界面和功能实现

选项卡(有个样式问题)界面样式JS实现界面样式写了一个小demo,html代码如下:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="tabBox.css"> <t...

2019-07-13 21:43:41 541

原创 JS闭包

作用域和作用域链作用域(scope)的概念作用域链私有变量如何查找上级作用域闭包的作用1. 保护2. 保存作用域(scope)的概念JS中作用域就是栈内存,包括三种:全局作用域:window私有作用域:函数执行块级作用域:使用let创建变量存在块级作用域作用域链函数执行形成一个私有作用域(保护私有变量),进入到私有作用域中,首先变量提升(声明过的变量是私有的),接下来执行代码:...

2019-07-12 21:20:09 78

原创 JS变量提升

变量提升变量提升的定义和操作定义变量时带var和不带var的区别只对等号左边进行变量提升不管条件是否成立都要进行变量提升变量提升的重名处理变量提升的定义和操作在当前作用域中,js代码自上而下执行之前,浏览器首先会把所有的带var/function关键字的进行提前声明/定义。注意声明和定义的区别:声明(declare):var num;在当前作用域中吼一嗓子我有num这个名字了。定义(d...

2019-07-12 15:23:18 155

原创 JS继承

js中的几种继承方式1.原型链继承2.call继承(借用构造函数)3.组合继承1:原型链+call4.原型式继承5.组合继承2:原型式+call6.冒充对象继承7.中间类继承1.原型链继承特点:父类私有+公有–>子类公有原型链继承:B.prototype = new A;子类原型等于父类的一个实例。function A() { this.x = 100;}A.protot...

2019-07-11 22:50:25 81

原创 JS中的call、apply和bind方法

call和apply方法call和apply的作用call和apply的区别call和apply的细节知识点应用call和apply的作用call和apply都是用来改变函数中的this关键字的:首先,让函数执行。然后,再把当前函数中的this改变为call和apply中的第一个参数传递的值。call和apply的区别执行的语法: 函数名.call(obj, arg1, a...

2019-07-11 20:49:38 96

原创 JS重写原型

重写prototype什么时候需要重写prototype重写原型需要注意的点(恢复constructor和恢复原有方法)什么时候需要重写prototype对于一个类,它天生自带一个属性:prototype。但是有时候,我们会重写类的原型。比如,在继承的时候,我们想通过原型让子类B继承父类A的原型上的属性和方法(公有继承公有)。function A() { this.x = 10;...

2019-07-10 16:55:36 518

原创 JS创建对象

JS创建对象JS中创建对象的7种方式1. 工厂模式2. 构造函数模式3. 组合模式:构造函数+原型模式JS中创建对象的7种方式讲原型链之前需要了解的,JS中创建对象的方式(这里的创建对象是指创建多个相似对象,它们有共同的属性和方法),高程上介绍了7种:工厂模式、构造函数模式、原型模式、组合使用构造函数和原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式。这里主要讲工厂模式-->...

2019-07-10 15:08:34 96

原创 JS中判断实例对象的属性是共有的还是私有的

in运算符和hasOwnProperty()方法in运算符hasOwnProperty()方法判断私有还是公有in运算符in:用来检测某一个属性是否属于这个对象(可以检测私有/公有属性)。举个栗子:function Person(name){ this.name = name; this.fn = function () { console.log(this...

2019-07-10 11:09:16 581

原创 JS中的堆栈内存

JS堆栈栈内存堆内存堆内存释放栈内存释放栈内存栈内存俗称作用域:全局作用域(只有一个,即window)和私有作用域。作用:为js代码提供执行的环境(执行js代码的地方)。基本数据类型是直接存放在栈内存中的。堆内存堆内存用于存储引用数据类型值的(相当于存储的仓库)。对象存储的是键值对。函数存储的是代码字符串。堆内存释放堆内存利用空对象指针null来释放空间。var o...

2019-07-09 22:43:19 953

原创 JS中typeof运算符的6种数据类型

typeof运算符typeof的返回值是字符串,因此判断时要加引号,例如:console.log(typeof a === "undefined");typeof有6种类型:undefinedstringnumberbooleanobjectfunctionconsole.log(typeof undefined); // =>undefinedconsole.l...

2019-07-09 22:24:39 459

原创 JS中的数据类型

JS有两种大的数据类型:基本数据类型(值类型)和引用数据类型值类型引用数据类型1. 在JS中遇到对象,会严格执行以下步骤:2. 在JS中函数的操作步骤,先创建函数,再执行函数值类型值类型有六种:numberstringbooleannullundefinedsymbol引用数据类型包括对象和函数。对象有:{ } 普通对象[ ] 数组/^$/ 正则Math 对象...

2019-07-09 22:08:33 171

原创 JS中this的几种情况

JS中this的指向问题this的定义注意点非严格模式下this的指向问题严格模式下this的指向问题this的定义this指的是当前函数执行的主体,也就是说,谁执行这个函数,this就是谁。注意点函数外面的this是window,但我们研究的是函数内部的this问题,因为这个比较具有困惑性。一定要注意一点:this是谁,和函数在哪个作用域定义的以及在哪执行的没有任何关系。functi...

2019-07-09 15:30:42 304

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除