Jade-beads-CSDN博客

原创 JS中判断两个对象是否相等

前段时间在学习如何封装 instanceof 函数的时候无意间想到了如何判断两个对象是否相等,尝试了一下自己封装了一个isEqual函数JS对象在内存中的存储方式在JS中,对象是引用数据类型,变量中存储的是其在堆中的内存地址,所以在用 ==,===运算符时,都是判断其内存地址是否相等,这样的话,就算两个对象中的所有键值都相等,用等号运算符的话也无法判断,思来想去,也只能用递归的方式来判断// 简化代码使用函数的方式判断是否为对象且不为null isObject(obj) { return t

2021-06-21 21:48:41 1026

原创解决跨域问题9个方法

什么是跨域？**跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去说的更直白一点，就是我们在前端使用ajax发送异步请求，如果这个请求的URL地址与当前地址栏中的

2021-05-20 08:06:13 4147 1

原创简单实现 Vue3 中 Proxy 对数据的劫持

vue3.0 使用Proxy代替了vue2.0版本中的Object.defineProperty()，首先利用compositionAPI中的 reactive() 函数返回一个Proxy对象，使得数据可监测。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写本篇将简单实现 shallowReactive 与 reactiv 、shallowRef与 ref，看Vue3中如何实现数据劫持shallowR

2021-05-18 10:58:53 1801 1

原创 Vue message组件开发思路

很多时候，在开发项目的时候是需要抽离公共组件和业务组件的。而有些公共组件在全局注册的同时可能还需要拓展成vue的实例方法，通过把它们添加到 Vue.prototype 上实现，方便直接使用js全局调用。拿一个Message组件做例子吧，代码比较简单，就直接上代码了。首先开发好Message.vue文件。<template> <div class='y-mask-white-dialog' v-show='show'> <div class='y-messag

2021-05-18 07:53:21 329

原创 vue组件传值总结

概述vue作为现在前端使用的主流框架之一，组件一直是vue的核心部分。起初，我在学习vue的过程中接触到了组件之间传值的功能，但是由于在工作中使用较少，对于这一部分没有深入的认识，导致在开发过程中遇到了一些问题，通过进一步的学习，我了解到了vue组件传值的方式以及存在两类不同的组件传值方式：同级组件之间的传值、父子组件之间的传值。同级组件之间的传值由于vue框架本身不支持同级之间组件的跳转，所以想要实现同级组件之间的跳转并且传值，需要先引入vue-router.js路由组件，使用路由的一大好处就是可以

2021-05-17 21:38:44 183

原创移动端IOS适配之输入框首字母大写问题

autocapitalize 全局属性是一个枚举属性，它控制用户输入/编辑文本输入时文本输入是否自动大写，以及如何自动大写。属性必须取下列值之一：off or none: 没有应用自动大写（所有字母都默认为小写字母）。on or sentences: 每个句子的第一个字母默认为大写字母；所有其他字母都默认为小写字母。words: 每个单词的第一个字母默认为大写字母；所有其他字母都默认为小写字母。characters: 所有的字母都默认为大写。在物理键盘上输入时，autocapitalize

2021-05-14 07:42:39 290

原创移动端适配之动态设置rem

动态配置rem其实就是在窗口大小改变时重新设置rem的值(function(doc, win) { var docEl = doc.documentElement, resizeEvt = "orientationchange" in window ? "orientationchange" : "resize", recalc = function() { if (docEl.clientWidth > 750) {

2021-05-14 07:37:20 101

原创 vue项目配置rem

export default function() { // 7.5根据设计稿的横向分辨率/100得来 var deviceWidth = document.documentElement.clientWidth; // var deviceWidth = window.screen.availWidth // console.log(navigator.userAgent) // console.log(deviceWidth) // console.log

2021-05-12 07:55:43 57

原创 mockjs使用方法

在我们的实际开发过程中，经常性的会前端进程比较快，导致调试页面时没有数据支持，需要等待后台接口，其实我们可以通过使用mockjs来模拟自己需要的数据，然后让后台配合我们模拟的字段来写接口，这样前端就可以自行模拟逻辑了，那么mockjs要如何使用呢?这里以在vue中使用为例加粗样式npm install mockjs --save / yarn add mockjs --save使用mockjs模拟数据并开发接口//新建一个mockApi.js模块来保存我们模拟的接口var Mock = r.

2021-05-12 07:53:41 78

原创 Vue axios接口封装和api管理

axios拦截为什么要进行接口封装？axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。每个组件中走一遍axios流程，很多时候在前端需要设置header，保存token，对异常进行统一处理等，所以最好对其进行封装。使用步骤安装npm install axios --save-dev引入一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios

2021-05-10 19:34:07 275

原创 vue中的slot（插槽）

1 、slot 基本用法插槽指允许将自定义的组件像普通标签一样插入内容import Vue from 'vue'// 定义组件componentOne const compoentOne = { template: ` <div :style="style1"> <slot></slot> // 定义插槽 </div> `, data () { return

2021-05-10 19:28:08 74

原创 cookie、localStorage、sessionStorage区别

CookieCookie设计初衷是用来和服务器通讯，而不是本地存储，他只是被‘借用’到本地存储。如下图，每次http请求，header都携带cookie;localStorage、sessionStorage在HTML5中，新加入了一个localStorage/sessionStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小。localStora

2021-05-10 19:08:28 58

原创 ePub.js 滑屏翻页

ePub.js是支持【滑屏翻页】和【翻页动画】的代码如下：this.book = new ePub(this.bookAddress, { openAs: "epub" });this.rendition = this.book.renderTo("read", {flow: "paginated",manager: "continuous",width: 1080,height: 720,snap: true});this.book.ready.then(() => {t

2021-05-08 14:51:24 1636 5

原创 JavaScript中let、const、var 的区别

在ES5中，声明变量只有var和function两种形式。但是因为var声明的变量会有一定的缺点（内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量，下面有介绍），ES6提出了使用let和const声明变量,弥补了ES5中var的缺点。1.是否存在变量提升？var声明的变量存在变量提升（将变量提升到当前作用域的顶部）。即变量可以在声明之前调用，值为undefined。let和const不存在变量提升。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。co

2021-05-07 08:04:46 41

原创 http常见的状态码

http状态码分类：100-199 提示信息 – 表示请求正在处理200-299 成功 – 表示请求正常处理完毕300-399 重定向 – 要完成请求必须进行更进一步的处理400-499 客户端错误 – 请求有语法错误或请求无法实现500-599 服务器端错误 – 服务器处理请求出错常见的状态码有哪些？①　200：请求成功，浏览器会把响应体内容（通常是html）显示在浏览器中；②　404：(客户端问题)请求的资源没有找到 400: 语义有误，当前请求无法被服务器理解。401: 当前请求需要用

2021-05-06 13:46:41 48

原创常见服务端错误码

1**：请求收到，继续处理2**：操作成功收到，分析、接受3**：完成此请求必须进一步处理4**：请求包含一个错误语法或不能完成5**：服务器执行一个完全有效请求失败100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成

2021-05-06 07:56:15 1374 1

原创 # 对象中的key值排序的问题

前端在做一些需要渲染城市列表时，一般后端都会传过来一个大对象，众所周知，对象的key是无序的，这时就需要前端对数据处理以后再进行页面渲染，话不多说，直接上代码可以看到 Object.keys()这个方法可以遍历对象返回一个对象key值的数组，接下来就简单了。可以查看结果就是我们想要的有序的对象其实还有很多方法都是可以实现的，只不过本人是个es6重度使用者，哈哈哈...

2021-05-05 12:52:09 395

m0_57188429的博客