- 博客(133)
- 收藏
- 关注
RSS订阅原创 JS中document对象和window对象的区别
一、指代不同1、document对象：代表给定浏览器窗口中的 HTML 文档。2、window对象：表示浏览器中打开的窗口。二、作用不同1、document对象：使用 document 对象可以对 HTML 文档进行检查、修改或添加内容，并处理该文档内部的事件。2、window对象：浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。三、使用方式不同1、document对象：在 Web 页面上，document 对象可通过 window 对
2022-02-02 19:00:56
1165
原创 数组中常用的几个响应式方法
push添加元素到数组的尾部,可以添加任意个元素pop删除数组中的最后一个元素shift删除数组中的第一个元素unshift从数组的头部插入一个元素, 也可以插入多个splice添加第二个参数是0删除第二个参数是删除元素的个数修改第二个参数是替换元素的个数sort排序reverse倒序Vue提供的set/delete方法新增与删除示例：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
2021-04-18 22:53:49
295
原创 vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。原因：因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化解决思路：将state的数据保存在localstorage、sessionstorage或cookie中（三者的区别），这样即可保证页面刷新数据不丢失且易于读取。localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后local
2021-04-12 22:46:06
586
原创 什么是commonjs
今天看到一个关于commonJs和nodeJs的简介~前言：早就听说有用于本地编程的JavaScript框架，但总觉得是小打小闹不成气候，也没有什么实用价值。但自从CommonJS和NodeJS两个项目的出现，JavaScript作为本地编程语言的这种特殊应用形式，才开始进入进入大众的视野。 本文翻译CommonJS首页的介绍，说明什么是CommonJS。 另外随着并行计算的普及，像JavaScript这种函数式语言，由于其固有的易于进行并行计算的特性，将有更广阔的应用前景。正文：JavaScrip
2021-04-08 23:43:19
447
原创 jsonp跨域原理解析
转自：https://blog.csdn.net/badmoonc/article/details/82289252背景：由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。举个简单的例子：http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同）http://w
2021-04-05 23:54:37
74
原创 vue-cli在不同环境下赋予变量不同的值
在开发环境下，可以自己赋值；在生产环境下，我则希望直接通过window.location.pathname获得。在创建vue-cli时会自动配置环境变量，生产环境是production，开发环境是development然后在.js和.vue中都可以通过process.env.NODE_ENV获得环境变量的值。因此如果要设置一个在不同环境下不同的变量，可以通过process.env.NODE_ENV作为key值。比如：<script> export default { na
2021-04-05 20:48:07
355
原创 ajax异步请求中途取消
应用场景当前端需要即时搜索时，会不断的向后端请求ajax，但是前端仅仅需要最后一次的搜索结果，之前的请求全部丢弃。示例对于未封装原生的js来说let xhr = new XMLHttpRequest();xhr.open(method,url,true);xhr.onreadystatechange = ()=>{} // 回调函数xhr.send(); // 发送请求xhr.abort(); // 请求终端Axioslet cancelToken = axios.CancelTo
2021-02-24 13:02:37
712
原创 理解和使用Promise.all和Promise.race
一、Pomise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。具体代码如下：let p1 = new Promise((resolve, reject) => { resolve('成功了')})let p2 = new Promise((resolve, reject) => { resolve('succe
2021-02-18 16:19:06
76
原创 路由hash
1 # 的含义 就是代表网页中的一个位置。 其后面的字符，就是该位置的标识符2 实例tip：#后面出现的任何字符，都会被浏览器解读为位置标识符，意味着， 这些字符不会被发送到服务器端#可以转码为 %23总结：1 改变#后的部分，浏览器只会滚动到相应位置， 不会重新加载网页2 改变#后的部分会改变浏览器的访问历史3 window.location.hash 读取#值， 可读可写， 读取时判断网页状态是否改变， 写入时，则会在不重载网页前提下，创造 一条访问历史记录4 onhas
2021-02-17 21:19:48
170
原创 ES6之Array.from()方法
Array.from()方法就是将一个类数组对象或者可遍历对象转换成一个真正的数组。那么什么是类数组对象呢？所谓类数组对象，最基本的要求就是具有length属性的对象。1、将类数组对象转换为真正数组：let arrayLike = { 0: 'tom', 1: '65', 2: '男', 3: ['jane','john','Mary'], 'length': 4}let arr = Array.from(arrayLike)console.log(ar
2021-02-07 10:56:26
130
原创 vue路由的两种模式，hash和history的区别
转自：https://www.cnblogs.com/lbcxq/p/12036788.html1.直观区别：hash模式url带#号，history模式不带#号。2.深层区别：hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的， 咱们把这个页面分享到第三方
2021-02-03 20:39:12
1368
原创 Vue的响应式原理及总结
详看：https://www.cnblogs.com/jiajialove/p/11323105.htmlVue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组
2021-01-27 15:19:11
96
原创 Vue中的computed属性、watch属性
参考原文：https://www.cnblogs.com/gunelark/p/8492468.html直接看原文较好。自己贴了一部分，有空再贴另一部分。自己的理解：computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之
2021-01-25 17:00:25
108
原创 for in 和 for of
for in ：循环数组、对象for of：循环数组循环数组最好用for of，循环for in，会多循环一个元素。for(let i in this.radios){ this.radiosmodel.push(this.radios[i].attr0)}this.radiosmodel数组最后会多一个undefined元素，而下面的循环不会多一个undefined元素for(let i of this.radios){ this.radiosmodel.push(i.attr0
2021-01-15 14:34:52
66
原创 Web前端用户体验的基本要求
Web前端用户体验的基本要求信息架构：信息的组织，归类以及结合结构要清晰合理交互体验人与产品/服务的交互机制要一人为本，让用户能够有效并高效的使用产品/服务交互界面人机交互应针对主要的用户群的基本需求进行设计，最大可能的符合用户群的审美观易用性最少的学习成本（网站的使用），系统错误（少），强势干扰（少）最高效的使用效率，可记忆性，满意程度兼容性浏览器的兼容性硬件设备的兼容性在实际的工作中可以用这些点来时时提醒自己，web设计中应注意的问题...
2021-01-13 16:59:37
639
2
原创 vue中v-for循环选中点击的元素并对该元素添加样式
v-for循环时，我只需要点击到的元素做出相应反应，其他的元素不变；但是往往所有v-for循环出的元素都会变化。如下面的代码：我需要点击到的元素添加一个类样式，其他元素不变，但是这样会导致所有的元素都会变化解决方法：使用index索引，当点击一个元素时，将该元素的index索引赋给类样式的启用变量，如果该变量和index相等时，则启用该类样式<template> <view> <view v-for="(item,index) in items" :
2021-01-12 23:30:27
1508
原创 微信小程序生命周期（onLoad，onHide，onShow，onReady，onUnload）
周期指程序从创建、到开始、暂停、唤起、停止、卸载的过程。下面从一下三个方面介绍微信小程序的生命周期：应用生命周期页面生命周期应用生命周期影响页面生命周期应用生命周期image1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。2、小程序初始化完成后，触发onShow方法，监听小程序显示。3、小程序从前台进入后台，触发 onHide方法。4、小程序从后台进入前台显示，触发 onShow方法。5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。前台、后台定义： 当用户
2021-01-08 15:20:02
11445
原创 不同小程序本地存储（setStorageSync、getStorageSync）隔离问题
不同小程序同一命名的本地存储混乱，A小程序新建读取的本地存储，会使用到B小程序的本地存储，小程序间的本地存储是不隔离的。目前在体验版、生产版小程序中均遇到此问题。解决方案：自己针对单独每个项目配置项目级别唯一缓存keywx.setStorageSync('userCode', 397615userCode);this.data.userCode = wx.getStorageSync('397615userCode');...
2021-01-06 16:51:43
895
原创 vue-cli3与vue2的区别；vue-cli3项目搭建
3.0 新加入了 TypeScript 以及 PWA 的支持• 部分命令发生了变化：下载安装 npm install -g vue@cli删除了vue list创建项目 vue create启动项目 npm run serve打包项目 npm run build-productionnpm run build-test• 默认项目目录结构也发生了变化：移除了配置文件目录，config 和 build 文件夹移除了 static 文件夹，新增 public 文件夹，并且 ind
2021-01-01 16:23:21
2050
转载 js 监听手机端键盘弹出和收起事件
本文转自：https://www.cnblogs.com/shimily/articles/12197217.htmlconst ua = typeof window === 'object' ? window.navigator.userAgent : '';let _isIOS = -1;let _isAndroid = -1;export function isIOS() { if (_isIOS === -1) { _isIOS = /iPhone|iPod|iPad
2020-12-29 15:57:39
2073
原创 微信分享wx.config配置时遇到invalid signature错误的解决办法
每次解决完问题，都想回到过去糊自己一巴掌。。。1 若JSSDK已配置仍遇到invalid signature错误，一定参考“附录5-常见错误及解决方法”部分有检查步骤可参考，一定要先看再开发！！浪费了多少大好时光，流下悔恨的泪水。。2 具体需要：1）设置ip白名单需要有开发权限 管理员权限 开发>基本配置>白名单>查看 IP白名单 多个IP用回车分隔。2） 设置域名白名单公众号设置—功能设置—js接口安全域名第3点的txt文件要放到域名下，保证随时可以访问。https:/
2020-12-22 11:28:02
3087
原创 IE浏览器兼容问题，IE下报错：ReferenceError: Promise。
IE浏览器兼容问题，IE下报错：ReferenceError: Promise。安装express，npm install express –save
2020-12-11 14:36:09
250
原创 background-size cover和contain的区别
cover：不会重复。会不失真的，按照原图比例，铺满屏幕。图片与屏幕比例不一致时，会溢出屏幕。contain：会重复。保证图像不失真的，按照原图比例，最大尺寸的铺到屏幕上。图片与屏幕比例不一致时，不会溢出，整张图都会在屏幕里，不足的部分重复repeat展示。...
2020-12-10 13:00:36
225
原创 vue引入自定义字体otf、ttf字体的方法
1 在src/assets下新建font文件夹，文件夹中包含以下文件2 新建font.css@font-face { font-family:'ALPH'; src:url('Alibaba-PuHuiTi-Regular.otf');}@font-face { font-family: 'YSBT'; src:url('ysbthei.ttf');}3 在项目中（main.js）引入刚刚加载进来的字体import './assets/font/font.css'在m
2020-12-08 15:55:41
5173
原创 chrome浏览器起不来项目，火狐浏览器报错[WDS] Disconnected!
vue页面中报错 [WDS] Disconnected!原因：因为用了全局代理软件，所以需要将 config/index.js中{host:localhost}改为{host: 127.0.0.1}重启项目即可
2020-11-30 16:01:29
567
转载 js中的同步和异步的理解
转自：https://blog.csdn.net/qq_22855325/article/details/72958345你应该知道，javascript语言是一门“单线程”的语言，不像java语言，类继承Thread再来个thread.start就可以开辟一个线程，所以，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程。那么这里说的同步和异步到底是什么呢？如果你真的不懂，我希望你认真读完这篇文章。其实我个人觉得js官方的文档在使用两个词的时候并不
2020-11-21 23:47:27
125
2
原创 EXCEL对比两列数据重复情况方法
打开名单文件，选中要比对的单元格内容，注意要把需要核对的单元格全选中才行，点击开始选项卡里的条件格式-突出显示单元格规则-重复值，在重复值对话框里修改为“唯一”，这时候你会发现没有重复的那些单元格颜色就变了，当然填充的颜色也可以修改为自定义的颜色或者修改为改变字体颜色。...
2020-11-19 15:49:52
7035
转载 解决前端post跨域问题
转自：https://blog.csdn.net/baidu_38027860/article/details/79960927网上post跨域解决的问题方案一箩筐，但是真正能用得上的我还真是一个没看到，基本上都是基于jsonp的方案去解决跨域的问题，jsonp的原理我就不讲了，网上介绍的多了去了，既然是jsonp了，那还谈什么post跨域问题了，一群标题党，来自一个查了一天百度及论坛人的吐槽…好了，言归正传，在具体说解决办法之前我先说一下为什么会有跨域的问题，post跨域问题本身是因为请求的域名和用于
2020-11-19 13:12:58
3541
1
原创 Axcure RP9新增元件库
1 Axcure软件打开在网上找的授权码。2 Axcure RP9新增元件库Axcure网站：http://www.iaxure.com/其中一篇：https://www.axure.com.cn/1828/，是ios元件库下载文章，里面有下载地址。将下载的元件库包，格式为Axcure RP Widget Library File的文件，放到目录“D:\Program Files (x86)\Axure\Axure RP 9\DefaultSettings\Libraries”下面。重启Axcu
2020-11-09 17:46:20
1161
转载 setCapture 和 releaseCapture
setCapture函数的作用就是将后续的mouse事件都发送给这个对象，releaseCapture就是将鼠标事件还回去，由 document、window、object之类的自行来处理。这样就保证了在拖动的过程中，不会由于经过了其它的元素而受到干扰另外，还有一个很重 要的事情是，在Win32上，mouse move的事件不是一个连续的，也就是说，并不是我们每次移动1px的鼠标指针，就会发生一个mousemove，windows会周期性检查mouse 的位置变化来产生mousemove的事件。所以，如
2020-10-26 22:22:09
354
转载 《大象 Thinking in UML》学习笔记（一）——为什么需要UML？
转自：https://blog.csdn.net/bit_kaki/article/details/78324529一、UML的定义UML,即Unified Modeling Language又称统一建模语言或标准建模语言，是始于1997年一个OMG（对象管理组织）标准，它是一个支持模型化和软件系统开发的图形化语言，为软件开发的所有阶段提供模型化和可视化支持，包括由需求分析到规格，到构造和配置。UML是一种是面向对象软件的标准化建模语言，要弄清UML，首先得搞清楚面向对象和面向过程。二、面向对象和面
2020-09-07 18:01:38
166
原创 yarn build 和 npm run build打包有什么区别
yarn build 和 npm run build打包有什么区别结论：没区别，yarn build === yarn run build === npm run build
2020-08-21 14:36:29
3212
转载 组件间传递信息
1 prop父子组件<!-- 父组件 --><template> <div> <my-child :parentMessage="parentMessage"></my-child> </div></template><script> import MyChild from '@components/common/MyChild' export def
2020-06-01 18:08:29
227
转载 Vuex2
转自：https://www.jianshu.com/p/2e5973fe1223一、初识VueX1.1 关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.2 安装由于Vu
2020-06-01 09:52:05
196
1
原创 Vuex1
Vuex 和单纯的全局对象有以下两点不同：1 Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。2 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。store/index.jsimport Vue from 'vue'i
2020-05-29 14:33:47
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人