V_AYA_V-CSDN博客

关于thisthis即不指向函数自身也不指向函数的词法作用域不要妄图使用this来引用一个词法作用域内部的东西。也就是说无法实现this与词法作用域的查找混合使用。function foo() { var a = 2; this.bar(); }function bar() { console.log( this.a ); }foo(); // ReferenceError: a is not definedthis到底是什么？this的绑定与声明和函数声明的位置没有任何关系，只

2022-01-04 11:18:28 282

原创你不知道的JavaScript上卷-作用域和闭包

1. LHS引用与RHS引用的区别：RHS:取到源值-得到某某的值LHS:谁是赋值操作的源头-给谁赋值function foo(a) { var b = a; return a + b; }var c = foo( 2 );// 所有LHS查询：a=...(形参隐式赋值)/b=.../c=...// 所有RHS查询：foo(2)/=a/a+/+b2. 作用域是什么？作用域是一套规则，用于确定在何处以及如何查找变量（标识符）。3. 词法作用域：词法作用域就是在定义词法阶段产生的作用

2021-12-08 16:09:54 558

原创移动端页面点击块元素显示高亮背景问题解决办法

修改-webkit-text-size-adjust及 -webkit-tap-highlight-color属性body,html{ -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

2021-11-10 10:48:20 565

原创 git新建仓库修改分支名无效

git remote add origin ""git add .git commit -am ""git branch -M maingit push --set-upstream origin main

2021-10-20 15:40:11 770

原创 taro小程序添加Echarts代码包过大解决办法

上回书说到如何在Taro小程序中引入Echarts图表。如果小程序主包代码体量不多可以直接使用，但是如果小程序代码体量大，稍不留神就会导致主包代码超过2M，无法预览也无法真机调试。本文着重介绍一下Taro引入Echarts分包操作以及注意事项。前文链接，完整流程可以自行查阅 taro小程序添加Echarts实践分包操作：将与echarts组件相关都移到分包中，结构目录如下配置app.config.js...subpackages: [ { root: "subpag.

2021-10-20 15:24:28 819

原创 taro小程序添加Echarts实践

小程序需要添加简单的数据统计功能。因为对Echats比较熟悉，所以想将Echats引入到项目中，有几点注意事项，记录一下。taro版本：3.3.2（注意一下版本信息）官方物料仓库里面的Echarts大多不兼容最新版本taro框架，但是实现的思路都是一样的。大致说一下：准备工作下载Echarts官方的小程序插件echarts-for-weixin 传送门将项目中的ec-canvas文件夹复制保存去Echarts官网定制图表(不建议全部下载，文件太大，小程序体积大需要分包) 传送门.

2021-10-18 16:57:28 1978

原创 taro小程序使用canvas层级过高按钮点击失效解决方法

taro中使用canvas画板，因为小程序原生组件层级较高，导致交互按钮不可点击。为了解决这个问题，使用了CoverView组件，CoverView组件在使用时需注意到的一些问题也在本文总结一下：CoverView：覆盖在原生组件之上的文本视图。可覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher 。cover-view只支持嵌套cover-view，cover-image，buttoncover-view设置box-shadow.

2021-09-18 14:10:18 1483

原创 vite+vue3项目启动报错Unexpected “%“

vite+vue项目启动报错，思考良久，找不到原因，在github上查看到一issues，大致原因一样，记录一下 issuse地址描述：大致意思是装了管控软件，将一些文件夹直接给加密了。想来本公司之前是有做过防泄密操作，记录一下。...

2021-08-24 10:39:12 1750 3

原创如何将埋点信息在页面关闭之前发送出去？

公司自己搭建的数据监控后台系统，旨在统计一些前端应用的用户行为。为了不添加过多的请求压力，前端会定时将用户行为数据发送，这样会遇到一个问题，当行为数据栈里面有数据，没有在规定周期发出的时候关闭页面，会导致部分数据不能成功发出。遂想到添加如下代码：window.onbeforeunload = () => { // 请求后端数据,参数省略 Api.send({...})}查阅资料又接触到了beforeunload、unload、pagehide 和 visibilitychange这.

2021-08-17 14:20:21 1613

原创 vue+antdv省市区联动组件封装

省市区联动作为基础组件在各项目中都有使用，抽空封装一下。省市区JSON文件保存在本地，组件下级数据根据上级数据联动，支持删除叶子层级数据。效果图如下：<template> <div class="regionselect-container"> <a-form-model layout="inline" :model="form" :label-col="labelCol" :wrapper-col="wrap.

2021-08-17 10:26:50 1100

原创 taro小程序封装请求方法

最近需要开始写小程序，比较了uni-app与taro框架，听取了很多朋友的建议，最终还是选择使用taro。笔者之前使用过taro，因为不是自己搭建的总体框架，所以仅限业务开发。新开发的小程序将由笔者独立搭建总体框架，遇到的问题会不定时分享出来，以供诸君参考，也希望诸君不吝赐教！！！taro文档-网络请求import Taro from '@tarojs/taro'// 错误定义const HTTP_STATUS = { SUCCESS: 200, CREATED: 201, ACC.

2021-08-13 16:58:47 1867

原创巧用less循环加变量实现燃烧的蜡烛动画

本文参照网上的燃烧蜡烛实例，在vue-cli中使用less循环及变量实现，想学习less循环及变量使用的小伙伴可以参考一下完整代码如下<template> <div class="test-container"> <div class="g-candle"> <div class="g-body"></div> <div class="g-fire-box"> <d.

2021-08-10 14:58:52 398

原创 vue2.x全局使用less变量

1、执行 vue add style-resources-loader 命令，选择less2、安装好后vue.config.js会自动添加pluginOptions，配置引入地址即可//vue.config.js pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ path.resolve(__dirname, 'src/styles/v.

2021-07-29 16:45:31 534

原创 vue生成随机登录校验码及组件封装

前端项目在登录时需要使用验证码防止机器破解登录，校验码的生成可以后端生成也可以前端生成，本文探究前端生成校验码实现方式并封装成vue组件，以供参考。<template> <div class="s-canvas" @click="createdCode"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeight"></canvas> </div>&.

2021-07-12 09:57:26 312

原创 vue自定义指令实现点击元素以外区域隐藏当前元素

经常接到这样的需求，自己实现一个弹窗，点击弹窗以外地方隐藏当前弹窗，抽空安排一下vue自定义指令。实现思想监听点击事件判断点击事件target会否为当前dom主意取消监听事件实现过程实现clickoutside .jsconst clickoutside = { bind(el, binding) { const documentHandler = (e) => { if (el.contains(e.target)) return false .

2021-06-18 13:30:29 964 3

原创 vite+vue3全局定义less变量在单文件中使用

最近在探究使用vite+vue3搭建一个后台框架，为了更好的扩展性，将系统可能用到的所有颜色以及部分属性定义变量作为单独的less文件。在全局的index.less中定义之后，在其它文件使用直接报错，提示@primary-color为undefined解决方案，在vite配置文件css中加上modifyVars。重启项目就ok了// vite.config.js...css: { preprocessorOptions: { less: { modif.

2021-06-10 16:18:37 4371 1

原创 ts学习笔记-function

函数函数类型建议给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript 能够根据返回语句自动推断出返回值类型，因此通常省略。function add(x: number, y: number) { return x + y;}完整的函数类型包含参数定义和类型定义。不在乎参数的名字，类型相同即认为是有效的函数类型。当无返回值时需要定义成 void 不能省略。赋值语句一边指定了类型，另一边没有指定类型编译器会自动识别类型。// 完整的函数类型let myAdd:

2021-06-03 14:57:46 660

原创 ts学习笔记-interface

接口可选属性interface SquareConfig { color?: string; width?: number;}function createSquare(config: SquareConfig): { color: string, area: number } { // ...}额外的属性检查：跳过 interface 属性检测的方式类型断言添加字符串索引签名将对象赋值给另外一个变量// 类型断言let mySquare = createSquar

2021-05-24 15:31:21 544

原创 ts学习笔记-class

TS学习-类类的继承当派生类中有 constructor 构造函数的时候，一定要调用 super()->执行基类的构造函数。在派生类中使用 this 之前一定要使用 super()class Animal { name: string; constructor(theName: string) { this.name = theName; } move(name: string) { console.log(`${name}说：我能移动`); }}class Dog e

2021-05-24 15:28:24 128

原创 vue实现监听元素尺寸变化自定义指令

在某些业务场景中，我们需要监听元素的尺寸变化处理一些逻辑问题。但是没有像window的resize方法一样的方法直接能够监听到DOM尺寸的变化，所以只能采用曲线救国的方式。实现思想动态创建 Object标签，追加到容器中，宽高继承容器100%；load完成后获取 Object中的contentDocument，通过defaultView添加resize事件监听；实现过程实现domResize.jsconst domResize = { bind(el, binding) { .

2021-05-21 10:01:54 1137

原创前端代码规范HTML+CSS+Javascript(v1.0.0)

1.基本规范命名规范camelCase（小驼峰命名，e.g. userInfo）PascalCase（大驼峰命名，e.g. UserInfo）kebab-case（短横线连接式，e.g. user-info）snake_case（下划线连接式，e.g. user_info）项目命名一律采用小写，以下划线分隔，以"k12_项目名称"形式创建项目。html命名一律采用小写，以下划线分隔（除index文件外）。css文件命名一律采用小写，以下划线分隔（除index文件外）。

2021-05-18 15:12:36 289

原创 git分支管理-线上代码紧急更新

背景：本地开发分支dev、测试服分支master、线上发布分支release。master分支实时同步dev分支发版测试服，线上分支是落后dev及master分支的，现要求修改一个紧急的线上bug，但是又不想将dev里面的在开发功能发布上线。解决办法如下：1.从release分支切出热更新分支git checkout -b hotfix releasegit commit -a -m "Bumped version number to 1.2.1"2.该紧急问题被修复，并验收通过时发布修复版.

2021-04-16 10:43:47 380

原创 canvas根据坐标点绘制图形

有一需求，需要根据后台返回的坐标集在canvas中绘制图形。由于canvas使用不多，简单记录学习一下。整个需求实现主要分为三个部分一.前端等比展示a4纸大小canvas画布1. A4纸大小：210×297mm一般在ps中可以根据分辨率的不同转换成不同的px单位：当分辨率是72像素/英寸时，A4纸像素长宽分别是842×595当分辨率是120像素/英寸时，A4纸像素长宽分别是2105×1487当分辨率是150像素/英寸时，A4纸像素长宽分别是1754×1240当分辨率是300像素/英寸时，A.

2021-04-02 15:14:24 4511

原创 vue项目使用compression-webpack-plugin打包优化

前端项目越来越大，导致首页加载缓慢，了解到compression-webpack-plugin插件能够将项目代码打包压缩，如果要使用需要配合nginx达到提升网页加载速度效果。插件文档传送门先放一波压缩前和压缩后的对比压缩前：压缩后：可以看出来经过压缩后项目缩小的不是一个等级，接下来介绍插件使用安装插件npm install --save-dev compression-webpack-plugin配置vue.config.js（压缩配置可以参考官方文档，根据自己需求选择）.

2021-03-25 17:25:55 1112

原创 element-ui抽屉组件打开自动聚焦问题

在是用element-ui组件中遇到了几个非常奇怪的问题。经过一番捣鼓终于解决了，在这里总结一下，希望正在踩坑的朋友们能看到。打开el-drawer组件，点击右侧会聚焦整个弹框，并显示很丑的聚焦框，具体效果见下图解决办法：// less样式修改/deep/ .el-drawer__container:focus { outline: none; }/deep/ .el-drawer:focus { outline: none; }组件设置了withHeader为fals.

2021-03-16 17:39:11 2315 2

Vue3富文本编辑器组件封装

region.json树结构

gitmoji.json

vue版本2.x空项目

region.json

空空如也