- 博客(58)
- 收藏
- 关注
RSS订阅原创 解题：使用 Promise 实现 machine 函数
这道题是一位群友发出来的，就动手实现了一下。思路：machine(‘ygy’)，可知 machine 函数需要传递一个参数，而后面的 execute() ，则执行打印，同时可知在执行 machine(‘ygy’) 函数之后会返回原型（machine.prototype）；而第二个执行中添加了 do 函数，且在执行 do 函数之后可以继续执行 exxcute 函数，可知 do 函数会 return machine.prototype，同理，wait 和 waitFirst 函数也一样；一般这些链式.
2021-08-06 17:30:13
227
原创 微信小程序实现输入框防抖
防抖在小程序上使用之前得先介绍一下防抖。无非就是将一个频繁的操作延迟触发并且同时减少触发次数。本质就是利用闭包保存定时器数据，并且在延迟时间内频繁触发会清除上一次的定时器操作。最后能触发的只能是触发事件之后的延迟时间内不再进行触发事件，则该在延迟时间结束后事件执行。（假设定时器设置的延迟时间为 500ms，第一次触发事件，第二次触发事件和第一次的时间间隔小于500ms，则清除第一次事件的触发，第三次触发事件和第二次的时间间隔若小于 500ms，则第二次不执行，… 直到第N次触发事件后的 500ms 不进
2021-06-05 22:48:18
1868
原创 Vue 封装的组件库
目前已封装完成的组件：按钮 Button输入框 Input单选框 Radio开关 Switch多选框 Checkbox表单 Form布局容器 Container加载 Loading图片 Image消息提示 Message导航菜单 NavMenu文字提示 Tooltip分割线 Divider置顶 BackTop进度条 Progress表格 Table标签 Tag走马灯 Carousel文档地址：Vpro-UI文档GitHub地址:Vpro-UI代码地址如果对你有帮
2020-12-25 16:07:05
258
原创 Vue 封装轮播图组件
vp-carousel.vue<template> <div class="vp-carousel" :style="{ height: height + 'px' }"> <div class="vp-carousel-arrow"> <ul class="vp-carousel-arrow-ul"> <li class="vp-carousel-arrow-li" v-
2020-12-25 15:57:06
724
1
原创 Vue 封装 backtop 组件
组件属性属性名类型属性值描述默认值targetString“.className” | “#IDName”置顶目标bodyvisibilityHeightNumber滚动多少高度显示200rightNumber距离浏览器右边距离50bottomNumber距离浏览器下边距离100事件名描述返回值click点击时触发event，target（触发目标）backtop到达目标时触发event，
2020-12-15 19:21:28
222
原创 Vue 封装 message 插件
属性名类型属性值描述默认值messageString消息提示文本“This is a message”typeString“info”|“success”|“warn”|“error”消息类型“info”iconClassString自定义提示文本前面的 icon 类“”centerBooleantrue | false文本是否居中falseshowCloseBooleantrue | false是否显示关闭按钮fal...
2020-12-12 22:47:42
506
原创 Vue 封装 img 组件
功能属性介绍：属性名类型属性值描述默认值srcString图片地址“”altString图片代替文本“”widthString图片宽度“300px”heightString图片高度“200px”lazyBooleantrue | false是否懒加载falsefitString“fill”|“contain”|“cover”|“none”|“scale-down”原生object-fit“fill”
2020-12-12 19:18:27
1198
原创 Vue 封装 loading 插件
具体属性：this.$loading(option: Object): Object -> close();option 属性：属性名类型描述默认值eleDOM元素要添加加载的DOM元素document.bodymessageString加载显示的文本“loading…”colorString加载显示文本颜色“#000000”iconfontString加载文本前方显示的 iconfont 类名(“icon-xxx”)“”b
2020-12-11 19:50:50
385
原创 React 跨域
http-proxy-middleware 跨域执行命令 npm i http-proxy-middleware --save在 src 目录下，新建一个 setupProxy.js 文件const { createProxyMiddleware } = require("http-proxy-middleware");module.exports = function (app) { app.use( createProxyMiddleware("/blogApi", {
2020-11-26 18:04:37
96
原创 Nginx 反向代理踩坑
自己的小项目发布时，发现有一个请求返回的是 404。通过排查 vue.config.js 中配置的代理，未发现错误在服务器中的 Node 服务已经是通过 pm2 开启。且一直是开启状态。通过 Postman 发送请求正常。这时，才排查到 Nginx 代理配置。原来的配置如下：而我所请求的路径：/api/commitRecord请求的目标路径为：http://请求的IP地址:3000/commitRecord由于 Postman 已经确认 http://请求的IP地址:3000/comm
2020-11-17 14:49:31
259
原创 Element-UI Loading 加载组件在 Vue 中使用
Element-UI Loading 加载组件在 Vue 中使用官方使用Loading 该组件解决在请求数据和加载渲染过程中的等待空白。以下以本人的 vue 项目，作为实践讲解。引入组件，并配置在 Vue 原型上。import { Loading } from "element-ui";Vue.prototype.$loading = Loading.service;在需要的组件或页面中使用如下：在组件中 methods 对象中添加如下方法loadingShow() {
2020-11-10 15:51:58
3513
原创 CookieUtil 和 SubCookieUtil
CookieUtilclass CookieUtil { static get(name) { let cookieName = `${encodeURIComponent(name)}=`, cookieStart = document.cookie.indexOf(cookieName); cookieValue = null; if (cookieStart > -1) { let cookieEnd = document.cookie.in
2020-11-05 10:46:10
179
原创 Mock.js 使用教程
Mock.js二话不说，官方文档双手奉上。Mock 通过可以自定义数据，同时也能拦截 AJAX 请求。对快速生成测试数据，提供便利。本文章主要讲解的是 Mock.js 在 Vue 中基本用法。安装npm install mockjs生成随机 Mock 数据// 引入 Mockimport Mock, { mock, Random } from "mockjs";// 引入所需常量import { // 随机用户对象数量最小值 USER_COUNT_MIN,
2020-11-04 15:40:09
750
原创 Vue 路由
Vue 路由安装NPM 方式安装：npm install vue-router使用在 Vue 项目的 src 目录下，新建一个名为 router 的文件夹，用于管理项目的路由。并在文件夹下新建 index.js 的文件。使用 Vue.use() 。明确地安装路由功能。// src/router/index.jsimport Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);需要创建一个路由实例，并
2020-11-02 16:23:50
99
原创 Web 前端个人学习教程（持续更新中）
Web 前端个人学习教程本仓库是由本人个人对于 Web 前端汇总。纯手工制造，无任何防腐剂，可放心食用。本人的 Github 前端学习汇总仓库（持续更新中）：小卡车-Web 学习汇总本人的 CSDN 博客：小卡车的CSDN博客观看过程中，如发现有误，请留言提醒，非常感谢！...
2020-11-02 14:20:39
177
原创 JavaScript 设计模式之模板方法模式
模板方法模式模板方法模式是一种只需使用继承就可以实现的非常简单的模式。模板方法模式是由两部分结构组成：第一部分是抽象父类，第二部分是具体的实现子类。例子：卡布奇诺和忘崽牛奶// 饮料抽象类let Beverage = function () {};// 子类公共方法Beverage.prototype.boilWater = function () { console.log("将水煮沸");};// 冲泡方法（需被子类重写)Beverage.prototype.brew = fu
2020-10-29 21:02:40
126
原创 JavaScript 设计模式之组合模式
组合模式组合模式将对象组合成树形结构，以表示“部分-整体”的层次结构。除了用来表示树形结构以外，组合模式的另一个好处是通过对象的多态性表现。let MainCommand = function () { return { commandsList: [], add: function (command) { this.commandsList.push(command); }, execute: function () { for (let i
2020-10-29 20:09:40
131
原创 JavaScript 设计模式之命令模式
命令模式命令模式中的命令指的是一个执行某些特定事情的指令。（最简单的设计模式）简单的实现let bindClick = function (button, func) { button.onclick = func;};let MenuBar = { refresh: function () { console.log("刷新"); },};let button1 = document.createElement("button");button1.innerText =
2020-10-24 21:34:19
107
原创 JavaScript 设计模式之发布-订阅模式
发布-订阅模式let Event = (function () { let clientList = {}, listen, trigger, remove; listen = function (key, fn) { if (!clientList[key]) { clientList[key] = []; } clientList[key].push(fn); }; trigger = function () { le
2020-10-23 23:19:41
152
原创 JavaScript 设计模式之迭代器模式
迭代器模式简单的迭代器let each = function (arr, callback) { for (let i = 0, l = arr.length; i < l; i++) { callback.call(arr[i], i, arr[i]); }};each([1, 2, 3, 4, 5, 6], function (index, item) { console.log(index, item);});/*0 11 22 33 44 55 6
2020-10-23 15:31:39
64
原创 JavaScript 设计模式之代理模式
代理模式代理模式实现图片预加载let img = (function () { let imgNode = document.createElement("img"); document.body.appendChild(imgNode); return { setSrc: function (src) { imgNode.src = src; }, };})();let proxyImg = (function () { let image = ne
2020-10-23 11:51:34
58
原创 JavaScript 设计模式之策略模式
策略模式定义一系列的算法，把他们一个个封装起来，并且使他们可以相互替换。使用策略模式计算奖金最初的代码实现let calculateBonus = function (performancelevel, salary) { if (performancelevel === "S") { return salary * 4; } else if (performancelevel === "A") { return salary * 3; } else { re
2020-10-23 00:44:27
66
原创 JavaScript 设计模式之单例模式
单例模式实现单例模式用一个变量来标记当前是否已经为某个类型创建过对象，如果创建过则在下一次获取该类的实例时，直接返回之前创建的对象。let Singleton = function (name) { this.name = name;};Singleton.instance = null;Singleton.prototype.getName = function () { console.log(this.name);};Singleton.getInstance = functi
2020-10-22 17:34:51
96
原创 网络请求与远程资源
网络请求与远程资源XMLHttpRequest 对象通过 XMLHttpRequest 构造函数原生支持 XHR 对象let xhr = new XMLHttpRequest();使用 XHR使用 XHR 对象首先要调用 open() 方法，这个方法接收 3 个参数：请求类型、请求URL、请求是否异步的布尔值。xhr.open("get", "example.php", false);注意： 只能访问同源 URL，否则会抛出安全错误。发送定义好的请求，必须调用 send() 方法：se
2020-10-20 22:43:24
151
原创 JSON详细教程
JSON语法JSON 语法的类型：**简单值：**字符串、数值、布尔值和 null 可以在 JSON 中出现，特殊值 undefined 不可以。**对象：**第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂值。**数组：**第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组值可以是任意类型。对象JavaScript 的对象：let xkcMsg = { name: "小卡车", age: 20,};JSON 表示的对象：{
2020-10-20 14:06:13
490
原创 表单脚本
表单脚本表单基础Web 表单在 HTML 中以 元素表示，在 JavaScript 中则以 HTMLFormElement 类型表示。acceptCharset：服务器可以接收的字符集，等价于 HTML 的 accept-charset 属性。action：请求的 URL，等价于 HTML 的 action 属性。elements：表单中所有控件的 HTMLCollection。enctype：请求的编码类型，等价于 HTML 的 enctype 属性。length：表单中控件的数量。
2020-10-19 22:17:53
231
原创 Canvas
Canvas 图形创建 元素时至少要设置 width 和 height 属性。<canvas id="xkcCanvas" width="700" height="700">小卡车 CANVAS</canvas>注意：如果发现在编写 canvas 的时候，发现没有 API 提示的话，需要在 JavaScript 代码之前写下以下代码即可。/** @type {HTMLCanvasElement}*/基本画布功能在画布上绘制图形，首先要先取得绘图上下文。使用 getC
2020-10-19 08:52:10
235
原创 DOM 事件
DOM 事件DOM 事件处理程序DOM0 事件处理程序每个元素都有小写的事件处理程序属性。比如 onclick 。需要把这个属性赋值一个函数。let xkcBtn = document.getElementById("xkc");xkcBtn.onclick = function () { console.log("click");};事件处理程序会在元素的作用域中运行，因此 this 等于元素。let xkcBtn = document.getElementById("xkc")
2020-10-18 13:41:42
97
原创 元素尺寸
元素尺寸偏移尺寸 第一组属性是偏移尺寸，包含元素在屏幕上占有的所有视觉空间。元素在页面上的视觉空间由高度和宽度决定，包括所有内边距，滚动条和边框（不包括外边距）。offsetHeight，元素在垂直方向上占有的像素尺寸，包括它的高度、水平滚动条高度和上下边框高度。offsetLeft，元素左边框外侧距离包含元素左边框内侧的像素数。offsetTop，元素上边框外侧距离包含元素上边框内侧的像素数。offsetWidth，元素在水平方向上占有的像素尺寸，包含它的宽度、垂直滚动条宽度和左右边框的宽
2020-10-16 13:23:08
250
原创 MutationObserver 接口
MutationObserver 接口可以在 DOM 被修改时异步执行回调。使用 MutationObserver 可以观察整个文档、DOM树的一部分，可以观察元素属性、子节点、文本的变化。需要先创建 MutationObserver 构造函数并传入一个回调函数：let observer = new MutationObserver(() => console.log("DOM 改变"));observe() 方法使用 observe() 方法与 DOM 关联起来，接收两个必需参数：要观察
2020-10-14 23:51:20
255
原创 DOM
DOM获取元素1.getElementById通过节点的 id 属性获取元素。document.getElementById(id);2.getElementsByTagName通过标签名称获取元素。document.getElementsByTagName(tag);3.getElementsByClassName通过节点的 class 属性获取元素document.getElementsByClassName;4.特殊集合document.anchors 包含文档中所有带 nam
2020-10-14 16:18:36
167
原创 navigator 对象
navigator 对象navigator 是客户端标识浏览器的标准。属性/方法说明activeVrDisplays返回数组，包含 ispresenting 属性为 true 的 VRDisplay 实例appCodeName即使不是 Mozilla 浏览器也会返回 “Mozilla”appName浏览器全名appVersion浏览器版本。与实际浏览器版本不一致battery返回暴露 Battery Status API 的 BatteryManag
2020-10-13 17:11:57
218
原创 location 对象
location 对象location 提供了当前窗口中加载文档的信息，以及通常的导航功能。既是 window 的属性，也是 document 的属性。可以用 window.location 和 document.location 使用。假设 URL ：http://xkcuser:xkcpassword@www.xkc.com:80/xkc/?name=xkc#xkclocation 对应 URL 的属性内容如下：属性值说明location.hash“#xkc”URL散
2020-10-13 16:10:51
189
原创 window 对象
window 对象窗口位置window 对象提供了 screenLeft 和 screenTop 属性，用于表示窗口相对于屏幕左侧和顶部的位置，返回值的单位是 CSS 像素。可以使用 moveTop() 和 moveBy() 方法移动窗口。moveTop() 接收要移动到的新位置的绝对坐标 x 和 y ；moveBy() 则接收相对当前位置在两个方向上移动的像素数。例：// 把窗口移动到左上角。window.moveTop(0, 0);// 把窗口向右移动 100 像素。window.m
2020-10-13 13:46:41
204
原创 async、await
async、awaitasyncasync function foo1() { console.log("foo1");}foo1(); // foo1// 异步函数使用 return 返回值，会被包装成 Promise.resolveasync function foo2() { return 1;}foo2().then(console.log); // 1// 返回解决期约async function foo3() { return Promise.resolve(
2020-10-12 16:39:41
93
原创 异步、期约
异步、期约异步返回值function test1(a, b, callback) { var a = a + b; // 异步操作 setTimeout(function () { // 异步执行完成获得数据作为参数返回给回调函数。 callback(a); }, 1000);}// 传入数据并利用回调函数获得异步结果。test1(1, 2, (res) => { console.log(res); // 3});失败处理function doub
2020-10-12 16:30:17
271
原创 Proxy
ProxyProxy：定义基本操作的自定义行为。参数：target：要使用 Proxy 包装的目标对象。handler：各属性中的函数分别定义了在执行对应操作时代理的行为。// 源对象const target1 = { foo: "bar",};// const handler1 = { // 获取 get() { return "handler override"; },};const proxy1 = new Proxy(target1, handler
2020-10-10 23:23:36
406
原创 JavaScript 各种继承
JavaScript 各种继承原型链继承function SuperClass(name) { this.name = name;}SuperClass.prototype.getName = function () { console.log(this.name);};function SubClass(id) { this.id = id;}SubClass.prototype = new SuperClass();SubClass.prototype.getID =
2020-10-08 20:43:30
61
原创 Object.assign
Object.assign简单复制let msg = {}, src = { id: 1 };result = Object.assign(msg, src);console.log(msg); // { id: 1 }console.log(result); // { id: 1 }console.log(msg === result); // trueconsole.log(msg === src); // false多个源对象msg = {};result = Object.
2020-10-07 14:06:19
79
原创 Object.defineProperty
Object.defineProperty数据属性属性：configurable enumberable writable valueconfigurable 表示属性是否可以通过 delete 删除并重新定义，默认为 true。enumberable 表示属性是否可以通过 for-in 循环返回，默认为 true。writbale 表示属性的值是否可以被修改，默认为 true。value 属性的值。默认为 undefined。writable 设置为 false 的时候，不能修改对应属性
2020-10-07 13:02:25
66
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人