- 博客(25)
- 收藏
- 关注
RSS订阅原创 vuecli3-scss全局样式配置
vuecli3-scss全局样式配置安装依赖安装依赖vuecli全局使用变量和@mixin样式混入，需要安装插件，在 vue.config.js 中配置// sass-loader: '8.0.0';node-sass: 4.14.1npm install style-resources-loader vue-cli-plugin-style-resources-loader --save-dev// vue.config.jsmodule.exports = { pluginOption
2022-03-08 11:19:03
575
1
原创 window事件
window事件DOMContentLoadedpageshowDOMContentLoadedHTML 文档解析完成就会触发 DOMContentLoaded，而所有资源加载完成之后，load 事件才会被触发。jQuery 中经常使用的 $(document).ready(function() { // …代码… }); 其实监听的就是 DOMContentLoaded 事件，而 $(document).load(function() { // …代码… }); 监听的是 load 事件。The
2021-09-27 14:16:22
141
原创 前端jsencrypt加密
1、在线生成非对称加密公钥私钥对、在线生成公私钥对、RSA Key pair create、生成RSA密钥对http://web.chacuo.net/netrsakeypair2、自动生成公私钥工具网站http://tools.jb51.net/password/rsa_encodeRSA加密算法是一种非对称加密算法，jsencrypt就是一个基于rsa加解密的js库。安装npm install jsencrypt引用import JSEncrypt from 'jsencrypt/.
2021-09-26 11:32:11
531
原创 scoket连接
const WS = { $ws: null, baseWSUrl: 'ws://XXX.XX.XX', timeout: 3000, timeOuter: null, linked: false, lockReconnect: false, // 避免重复链接 reconnectTime: 0, // 重连次数 timeLimit: 10, // 初始化websocket createWS: { if('Web
2021-09-26 10:35:47
88
原创 window对象
window对象全局对象属性history对象属性对象方法location对象screen对象存储对象存储对象属性存储对象方法全局对象属性history指向history对象，表示浏览器的浏览历史。对象属性.length：返回历史列表的网址数对象方法.back()：加载history列表中的前一个URL.forward()：加载history列表的下一个URL.go()：加载hostory列表中的某个具体页面location对象screen对象存储对象Web存储API提供了sess
2021-09-24 14:40:27
83
转载 setTimeout模拟setInterval
setTimeout和setInterval的回调函数，都是经过n毫秒后被添加到队列中，而不是过n毫秒后立即执行。setInterval性能问题仅当队列中没有该定时器的任何其他实例时，才会将定时器添加到队列中。存在弊端：1、使用setInterval时，某些间隔会被跳过。2、可能多个定时器会连续执行，达不到定时器的效果。setTimeout在前一个定时器执行完毕前，不会向队列插入新的定时器。可以解决setInterval存在的弊端。setTimeout模拟setIntervalvar i
2021-08-30 14:19:21
167
原创 统计页面的标签种类
统计页面的标签种类// 方法1let tags = document.getElementsByTagName('*')// 获取所有标签的names// 各个标签名的计数let names = []let result = {}for(let i = 0;i<tags1.length;i++) { let name = tags1[i].tagName.toLocaleLowerCase() names.push(name) if(!result[name]) {
2021-08-27 13:58:39
270
原创 vue proxy代理
vue proxy代理前言原理应用axios的baseURL前言本地和后端联调，本地的localhost:8080和后端服务地址触发了同源策略，会产生跨域。原理浏览器是禁止跨域的，但是服务端不禁止应用//vue-cli3.0 里面的 vue.config.js做配置devServer: { proxy: { '/api': { target: 'http://baidu.com', // 后台接口域名 ws: true,
2021-08-27 13:22:35
81
原创 spreadjs超级有用网址
spreadjs超级有用网址1、Spreadjs学习指南：https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/quickstart2、SpreadJS中文API：https://demo.grapecity.com.cn/spreadjs/help/api/index.html3、SpreadJS 产品文档：https://demo.grapecity.com.cn/spreadjs/help/docs/overview.html...
2021-08-27 09:36:19
335
原创 数组去重&扁平化
基本数据操作数组扁平化数组去重数组扁平化arr.flat(1) // 降维一级arr.flat(Infinity) // 降维无限级/*一层嵌套**/let arr = [1,2,3,[4,5]]// 方法1let arr1 = Array.prototype.concat.apply([], arr)// 方法2let arr2 = arr2 = [].concat(...arr)/**多层**/let b=[1,2,3,[4,[5,6]]]while(b.some(item
2021-07-16 06:56:11
89
原创 虚拟DOM（vDom）
虚拟DOM-vDom前言框架比对vue虚拟DOM产生流程Diff算法vDom意义前言js是解析引擎，页面渲染是渲染引擎，两个线程之间进行通信，操作越频繁，消耗的性能越多。所以虚拟DOM应运而生。虚拟DOM本质上就是一个js对象，可以提高页面渲染性能。操作内存中的JS对象的速度显然要更快。框架比对React：虚拟DOM比对Angular：脏检查技术Vue：vue1没有引入虚拟DOM，采用的是和上面2钟框架都不一样的更细力度的检查流程（直接监听节点的状态变化），来绑定更新视图。产生大量的watch
2021-07-15 23:35:34
210
转载 vue源码-小知识点
小知识点data选项必须是一个函数生命周期模板语法插值指令计算属性和侦听器data选项当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，那么对 它的改动将不会触发任何视图的更新。Object.freeze()，这会阻止修改现有的 p
2021-07-15 22:01:20
73
原创 vant全局loading封装
vant全局loading封装import { Toast } from 'vant'interface Loading { message?: string, forbidClick?: boolean}export default class globalLoading<Loading> { message: string, forbidClick: boolean constructor(message: string="加载中", forbidClick: boole
2021-07-15 17:45:29
1739
原创 svg-icon
SVG生成ICONvue.config.jsconst path = require('path')const resolve = dir => path.join(__dirname, '.', dir)module.exports = { chainWebpack: (config) => { // 打包分析图 config.module.rules.delete('svg'); config.module.rule('svg-sprite-loader') .test
2021-07-15 17:30:21
48
原创 核心算法 observer
核心算法 observerObserverDep：订阅者管理中心Watcher：派发数据更新为什么vue2不能监听数组1）侦测对象数据的变化。2）收集视图依赖了哪些数据。3）数据变化时，自动通知和数据相关联的视图页面，并对视图进行更新。数据对象侦测也可以叫数据劫持，vue.js 是采用数据劫持及发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter。在数据变动时发布消息给订阅者，触发相应的监听回调。当然我们也可以使用ES6中的Proxy来对各
2021-07-15 16:52:39
112
原创 vue源码-vue.use()
vue源码-vue.usevue中可能会用到很多vue.use()，比如ElementUI、Iview等插件。但是axios就不需要，axios的引入方式是：import axios from ‘axios’，这是为什么呢？因为axios没有install方法。/* @flow */import { toArray } from '../util/index'export function initUse (Vue: GlobalAPI) { Vue.use = function (plu
2021-07-15 09:49:47
57
原创 vue-cli4环境变量和分环境打包
vue-cli4环境变量和分环境打包基本原理环境变量概念模式概念环境变量的使用vue-cli-service serve用法vue-cli-service build用法分环境打包添加mode test添加.env.test文件基本原理环境变量概念可以在根目录的下列文件中指定环境变量：.env // 在所有环境中被载入.env.local // 在所有环境中被载入，但会被git忽略.env.[mode] // 只在指定的模式种被载入.env.[mode].local // 只在指定的模式中被
2021-07-06 18:07:17
287
转载 web sql & IndexedDB
web sql & IndexedDBweb sql说明弊端使用1、创建数据库2、创建表3、向表中插入数据4、读取数据5、更新表格数据IndexedDB说明indexedDB本地存储优势弊端使用1.创建表2.插入数据3.修改数据4.删除数据5.获取数据封装品断网、刷新续传web sql说明底层实现是通过sqllite这个轻量级的数据库。浏览器刷新，数据库和库里的表丢失。再次创建同名的数据库，库里的表及表里的数据仍然存在。webSQL:1.标准不再更新，关系型、底层sqlite。2. c
2021-06-30 13:59:19
556
原创 移动端适配问题
移动端适配问题安装插件配置lib-flexible配置 postcss-px2rem-exclude注意问题安装插件postcss-px2rem-exclude和amfe-flexiblenpm install postcss-px2rem-exclude --save-Dnpm install lib-flexible --save-D配置lib-flexible// main.js文件中引入lib-flexibleimport 'lib-flexible/flexible.js'配置
2021-06-16 14:42:15
66
原创 vue简单配置
vue简单配置productionTip基本配置查看vue.config.js配置信息基本配置Css预处理器借助less-loader预处理productionTipproductionTip设置为 false ，可以阻止 vue 在启动时生成生产提示。开发环境下，Vue 会提供很多警告来帮你对付常见的错误与陷阱。而在生产环境下，这些警告语句却没有用，反而会增加应用的体积。此外，有些警告检查还有一些小的运行时开销，这在生产环境模式下是可以避免的// main.jsVue.config.produc
2021-06-16 14:33:16
225
原创 vue3 新属性
vue3 script setupuseContext/defineProps/defineEmitBeforeAfter总结调用子组件的方法&属性BeforeAfter总结setup script就是vue3新出的一个语法糖，使用方法就是在书写script标签的时候在其后面加上一个setup修饰。作用：简化代码，大大提高开发效率。1、自动注册子组件（不需要在compontents中注册）2、属性和方法无需返回（setup函数中return的东西）useContext/defineProp
2021-06-16 11:31:29
307
原创 防抖和节流
防抖和节流前言debounce（防抖）throttle（节流）应用前言在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。debounce（防抖）在一定时间内触发同一事件，函数只会在最后一次点击后执行。（非立即执行）// 防抖函数 -- 非立即执行 function debounce(fn, wait
2021-06-15 11:14:03
37
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人