面向对象面向君-优快云博客

原创 Object.defineProperties() 和 proxy 在拦截处理上的区别

defineProperties 是对对象上的每个属性进行独立拦截 getter 和 setter，proxy 是对整个对象增加了一层拦截并返回新的对象（并不会改变原对象）；如果对象的子属性也是对象那需要通过 defineProperties 进行递归处理，proxy 默认只能响应 getter 而不能相应 setter，所以其实也需要对子对象进行递归处理；defineProperties 对数组来说虽然可以监听到下标触发的 getter 和 setter，但对于 length 的改变和直接使用 pu

2023-03-22 21:08:22 310

原创基于 Vite + Vue3 项目中三种引入 Element Plus 方式的对照说明

会自动在编译过程中将我们在业务代码里面使用到的组件以按需引入的方式进行引入，包括了组件代码和样式代码，这样的方式对开发者来说是最方便的，同时也保证了代码体积和打包时间上的优化处理，总的来说这是最推荐的方式。这种方式的好处是相对简单方便，打出来的包的体积是根据使用了的组件的数量来的，所以使用数量越少相应的体积也就越小，打包时间也会更短，当然每次新增组件引用时都需要在。这样做的好处是简单方便，但问题也很明显，那就是打出来的包是包含了所有组件源代码和样式代码的，导致。只需要上述配置即可，不需要在。

2023-03-21 11:59:18 2648

原创基于 Node http 模块的简易 web server 实现

【代码】基于 Node http 模块的简易 web server 实现。

2023-03-20 19:14:12 247

原创 LRU 的 JavaScript 简单实现

LRU 即 Least Recently Used，最近最少使用算法，简单来说即是在固定存储大小为 max 的存储空间内，当存储空间已满的情况下再进行新的数据存储时会将最近最少使用的数据剔除掉。

2023-03-18 23:32:47 279

原创一维数组&多维数组去重的几个实现方法

针对值是非引用类型的一维数组&多维数组去重的几个实现方法

2023-01-17 22:44:09 306

原创 Vue less 静态资源绝对路径引用方式

Vue less 静态资源绝对路径引用方式。

2022-10-08 11:08:52 1187

原创 Vue less 方法中使用动态属性及动态值

在 Vue 的 style 中使用 less 时，定义函数内部的动态属性&动态值的写法。

2022-09-20 19:35:32 1866

原创关于 == 和 === 和 Object.is() 的详细介绍

关于 == 和 === 和 Object.is() 的详细介绍关于 ==等于运算符（==）检查其两个操作数是否相等，并返回Boolean结果，在某些情况下会尝试强制类型转换来比较不同类型的操作数。具体的规则如下：如果两个操作数都是对象，则仅当两个操作数都引用同一个对象时才返回true。（对象类型的判断其实和 === 一样，都是只看是否是相同引用即可）如果一个操作数是 null，另一个操作数是 undefined，则返回 true。如果两个操作数是不同类型的，就会尝试在比较之前将它们转换为相同类型

2022-04-01 15:21:43 563

原创获取浏览器路径（URL）中指定名字的 query 参数的值的几种方法

获取浏览器路径（URL）中指定名字的 query 参数的值的几种方法history 模式下const getQueryByNameHistory = name => { return new URL(location.href).searchParams.get(name) // 或 // return new URLSearchParams(location.search).get(name)}hash 模式下const getQueryByNameHash = name =

2022-03-21 16:50:07 2362

原创 undefined 和 void

undefined 和 void在 core-util-is 这个库里面有个判断是否是 undefined 的方法是这么写的：function isUndefined(arg) { return arg === void 0;}为什么不直接用 arg === undefined 进行判断呢？void 0 又是什么意思？看完下面分别对 undefined 和 void 的介绍就能明白了。undefinedundefined 是 JavaScript 中的一种原始数据类型，是一个内置的全局属性

2022-03-16 15:31:06 428

原创关于 var 和 let 的变量提升问题

关于 var 和 let 的变量提升问题思考题 1showName();var showName = function() { console.log(2);};function showName() { console.log(1);}打印结果是：1原因：用 var 定义的变量存在定义和初始化的提升，使用关键字 function 定义的函数存在函数定义、初始化以及赋值的提升。所以实际的过程如下：var showName;showName = undefi

2022-03-16 15:29:32 634

原创如何在创建vue项目时使用上下翻页按键优雅地进行选项选择

在 Windows 系统中，当我们在命令行工具 git bash 中使用 vue create app 这个命令进行新项目创建时，会出现以下选项提示：让我们选择具体的选项，但实际上并不能进行选择，这个问题及解决方案在 Vue CLI 的官方文档都有详细说明。即：你必须通过 winpty vue.cmd create hello-world 启动这个命令。不过，如果你仍想使用 vue create hello-world，则可以通过在 ~/.bashrc 文件中添加以下行来为命令添加别名。 alias

2022-03-10 14:02:50 2169

原创各种对象上的 toString 方法的区别和关联

各种对象上的 toString 方法的区别和关联问：请简述一下用于判断数据类型都有哪些方法？答：巴拉巴拉……小魔仙在判断数据类型的时候，有一种方式可以清晰直接地区分出所有的数据类型，即 Object.prototype.toString.call()，这方法的核心就是利用了 Object 的原型对象上的 toString 方法，这个方法会返回一个表示对象的字符串，返回的格式是 [object type]，其中的 type 指代的是具体的数据类型，如下示例代码所示：Object.prototype.t

2022-03-10 10:54:04 399

原创 class - function ES6类的方法的两种定义方式及调用方式

方式import * as React from 'react';const { PureComponent, Fragment } = React;class Test extends PureComponent { render() { return ( <Fragment> <butt...

2018-12-06 19:33:59 8293 2

原创 React - setState() 的两种传参方式介绍及理解

方式传入新的 state 对象this.setState({ age: 2,});传入回调函数，并在回调函数里面返回新的 state 对象this.setState((prevState, props) =&gt; { return { age: prevState.age + props.age, };});说明关于调用 setState() 进行状态更...

2018-12-03 19:33:45 14721

原创基于ES6的缩放元素的插件

下载&使用说明地址：https://github.com/gonghongchen/ZoomJS DEMO地址：https://gonghongchen.github.io/ZoomJS/自我介绍下： 1.使用后可以对指定的某个元素实现缩放的功能，上下、左右四个方向可以用于缩放高、宽，四个顶点可以用于等比缩放大小； 2.可以使用指定的边界元素来限制缩放的范围； 3.这个是基于ES6的，所以在

2017-12-16 16:35:08 1089

原创基于ES6的移动（拖动）元素的插件(2)

下载&说明地址：https://github.com/gonghongchen/MoveJS DEMO地址：https://gonghongchen.github.io/MoveJS/这个相对于上一个移动元素的插件有如下区别： 1.上一个插件固定了移动元素的移动范围为浏览器可视窗口内，而这个版本可以通过设置移动元素的父级元素以实现自定义的移动范围； 2.上一个插件可以自定义移动时光标的放置位置

2017-12-16 15:44:44 506

原创在【ES6】的【Class】中编写属性的取值函数【get】和存值函数【set】时的三点注意事项

可以只编写【get】方法，但是方法名和属性名不能同名，否则在设置这个属性的值时会报“没有【set】方法”的错误。可以只编写【set】方法，但是方法名和属性名不能同名，否则会报“栈溢出”的错误。同时编写【get】和【set】方法时，两个方法名必须要同时满足同名且不和属性名同名的条件。下面是一个示例代码，可以用于上面三点的测试：<!DOCTYPE html><html> <head>

2017-12-10 14:57:28 3519

原创原生JavaScript（ES5）实现Ajax（可直接使用）及详细说明

JavaScript代码如下，说明见注释：var ajax = function(parameters) { /* * @description 用Ajax获取数据。 * @parameter {object} parameters 数据对象，属性如下： * @property {string} url 请求地址 * @property {string

2017-11-16 22:43:52 1481

原创用HTML写出能转换成合适的PDF文件（A4纸张大小）的相关问题和方法

1 PDF文件对应的HTML页面的宽度为【820px】； 2 一页PDF文件对应的HTML页面的高度为【1160px】，多页类推； 3 记得要将【body】元素的外边距【margin】清零；如：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <st

2017-11-11 20:54:50 15978 1

原创基于原生JS（ES5）的鼠标移动（拖拽）HTML元素的插件（MoveElementJS）

查看&下载&使用说明地址：https://github.com/gonghongchen/moveElementJSDemo地址：https://gonghongchen.github.io/moveElementJS/热烈欢迎大家查看、下载、使用、Star、Issues。谢谢，非常谢谢！

2017-11-10 14:49:36 937

原创 JavaScript的原型对象（prototype）——函数的&对象的

1、每个函数都有一个【prototype】属性，这个属性其实是个指针，指向的是该函数的原型对象，因此，我们可以通过这个属性设置和访问该函数的原型对象，如：function F() { this.name = "Xiao Ming";}F.prototype = { sayName : function() { return this.name; }};

2017-10-29 21:35:59 654

原创 JavaScript的回调函数内部this的指向问题以及四种绑定this指向的方法

1、常见回调函数内部的this指向问题我们先看下面这段代码：var o = { age : 12, say : function() { function callback() { return this.age; } func(callback); }};function func(callbac

2017-10-25 17:50:30 18027

转载前端常见跨域解决方案（全）

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域：1.) 资源跳转： A链接、重定向、表单提交2.) 资源嵌入：、、、等dom标签，还有样式中background:url()、@font-face()等文件外链3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域

2017-09-24 13:17:52 385

原创当子级元素浮动时让父级元素高度自适应的三种方法（以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法）

例如： div { width: 200px; } #parent { border: 1px solid red; } #child { float: left; } 我是child 效果：这就是我们经常遇到的问题了，即子级元素浮动的时候

2017-07-29 17:26:38 4846 2

转载分享两篇有关跨域的文章

1 说说JSON和JSONP，也许你会豁然开朗原文链接：http://kb.cnblogs.com/page/139725/2 跨域请求之jQuery的ajax jsonp的使用解惑原文链接：http://www.cnblogs.com/know/archive/2011/10/09/2204005.html

2017-05-16 09:30:44 357

原创用JS封装的通用addClass方法（函数）和removeClass方法（函数）

/* * 函数名：添加class。 * 参数说明：element（必选）指的是需要添加class的元素(对象); new_name（必选）指的是需要添加的class名。 * 返回值说明：形参为空则返回false；添加新的class名成功后则返回true。 * 函数作用：为指定的元素添加指定的class名。 */function addClass(element, new_name)

2017-03-20 10:15:14 3729

原创 js中firstChild和childNodes[0]以及children[0]之间的点滴问题

示例： js中firstChild和childNodes[0]以及children[0]之间的点滴问题 pppppppppppppppp window.onload = function() { if (!document.getElementById("div1")) return false; var

2017-03-11 16:41:12 7065

原创 table元素的宽度/高度设置问题

昨天在写页面的时候遇到一个很奇怪的问题，我想把页面里面的table元素的高度在css文件里面进行设置为0，可是用 height: 0; 这句话一直没有效果，最后我换用了ul才达到了想要的效果。不过，这是个问题，今天上午我解决了这个问题。（注：以下以高度设置问题作为演示，宽度设置问题同理）首先我们看下如下示例：代码： table元素的宽度/高度设置问题

2017-02-24 10:22:35 15032 2

原创 CSS之四种定位的理解

Static这个是元素的默认定位方式，元素出现在正常的文档流中，会占用页面空间。不能使用top，bottom，left，right和z-index。Relative相对定位方式，相对于其父级元素（无论父级元素此时为何种定位方式）进行定位，准确地说是相对于其父级元素所剩余的未被占用的空间进行定位（在父元素由多个相对定位的子元素时可以看出），且会占用该元素在文档中初始的页面

2017-02-03 14:18:07 9301

原创 CSS之元素水平/垂直居中问题

行内元素的水平居中方法一：使用text-align:center;实现水平居中。示例：CSS之居中* {margin: 0;padding: 0;box-sizing: border-box;font-size: 20px;font-family: "microsoft yahei";}#div1 {text-alig

2017-01-27 18:31:51 538

原创 JS中闭包的理解

概念：闭包，可以简单理解为定义在一个函数内部的函数。作用：实现函数外部语句通过函数内部的函数对该函数中的局部变量进行操作。示例：function a() {var b = 0;function c() {return b;}return c;}var e = a();console.log(e());

2017-01-14 10:42:17 456

原创 JS中全局变量和局部变量

全局变量，作用域为所属的整个程序。定义形式：在函数外定义。在函数内定义，但是不加var声明。使用 window.变量名的形式定义。（注：兼容性未知）使用 window['变量名']的形式定义。（注：兼容性未知）局部变量，作用域为所属的函数内部。定义形式：在函数内部定义的变量。函数中用到的形式参数。例子：var a =0;

2017-01-10 23:03:01 10483 1

原创上下元素margin重叠问题的解决办法（一种情况）

问题描述：当两个元素纵向存在，上面的元素设有margin-bottom,下面的元素设有margin-top,有时候我们就会遇到一个奇怪的现象，那就是我们实际得到的两个元素之间的间距并非是上面两个值的和，而是其它值。具体情况：我们先编写如下HTML代码：这是div1这是div2-1 CSS代码：* {margin:0;padd

2017-01-02 19:23:11 11397

走在前端