- 博客(82)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 echars点击图例之后只显示当前数据其他隐藏
经过在官网查看事件后发现最合适的是legendselectchanged事件，该事件在切换图例选中状态时触发。
2024-04-15 18:41:08
702
原创 closest的用法
Element.closest() 是一个DOM（文档对象模型）方法，用于从当前元素开始，沿着DOM树向上遍历，直到找到匹配指定选择器的第一个元素。如果没有找到匹配的元素，则返回 null。
2024-01-30 14:35:54
263
原创 git仓库镜像
在开发过程中经常会遇到项目需要换个仓库的情况，需要将代码从一个仓库迁移到另一个仓库，这个时候第一反应就是用clone + push，但是两个命令组合虽然达到了目的，但是只复制了当前分支，而且之前的commit日志全都无法保留，这是就需要用到一个新的概念，项目镜像。
2023-10-17 15:59:42
149
原创 vue项目中使用service-worker监测项目更新
注意点：打包的时候只有当打包环境为production的时候，打包时才会生成service-worker.js,且发布之后只有在https和localhost中可以使用。
2022-12-15 18:57:41
1011
1
原创 VUE项目中国际化按模块添加json
这里通过使用require.context 获取文件夹 locals 下的所有.json文件，并将其拼成一个json文件，然后创建i18n。将所有的语言文件放在一个文件夹中，通过js脚本将其内容拼接成一个json文件，然后在生成 i18n多语言化；通过自动化程序生成的json文件多个json文件，需要将其合并并使用i18n。...
2022-08-31 17:21:30
671
原创 Vue3使用i18n进行国际化代码
1. 按照插件yarn add vue-i18n@next2. 定义语言文件我这里使用了三个语言,具体的文件目录如下：在src文件夹下创建了i18n文件夹，lang中存放具体的各个国家语言，index.js中存放配置文件3. 写配置文件 index.jsimport { createI18n } from 'vue-i18n'const messages = { zh: require('./lang/zh.json'), ja: require('./lang/ja.json'
2022-04-21 18:42:56
1154
原创 Linux 修改文件的权限
1. 查看文件权限查看文件的详细信息：ls -l;2. 文件的权限显示就以上面的权限为例，显示说明：文件类型用户组用户其他用户-rwxrwxrwx说明：文件类型：d 表示文件目录， - 表示文件;用户，组用户，其他用户：都为rwx 形式；r：读 权限，用数字 4 表示；w：写 权限，用数字 2 表示；r：可执行 权限，用数字 1 表示；-：表示没有权限。3. 修改文件权限的写法chmod [用户权限数字之和][组用户权限数字之和][其他用户权
2022-02-22 16:04:00
2416
原创 git 推送到远程库的相关命令
创建本地新分支：git checkout -b branch(branch为新分支名称)将新建的分支推送到远程：git push origin branch:branch（前面branch为远程分支名，后面branch为本地分支名）设置当前本地分支与远程分支的关联：git branch --set-upstream-to=origin/branch branch（前面branch为远程分支名，后面branch为本地分支名）追加到上一次提交：git commit --amend强制推送： git p.
2022-02-08 10:17:02
276
原创 Linux常见命令
Linux常见命令目录操作命令ls生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入目录操作命令ls英文原意：list命令所在目录：/bin/ls执行权限：所有用户相关命令修饰符：ls（显示当前目录下的文件）ls 目录名（显示指定目录下的文件）ls -l（长格式显示目录文件）ls -l 文件名（显示指定目录
2021-12-20 10:03:08
258
原创 Markdown使用方法总结
1 语法1.1 段落和换行段落的前后必须是空行：空行是指行内什么都没有，或者只有空白符；Markdown中多数区块都需要在两个空行之间；可以在引用中使用任何 Markdown 的语法。第一段的第一行第一段的第二行第二段的第一行第二段的第二行显示效果：第一段的第一行第一段的第二行第二段的第一行第二段的第二行1.2 标题Setext 形式(上面必须空白一行)atx 形式：可以用对称的 # 包括文本(也可以只在左边使用 #)= 和 - 的数量是没有限制的。通常的做法
2021-08-26 11:58:52
1588
原创 在mac电脑本地搭建nginx
1. 首先检查当前电脑是否安装了brew -v// 如果没有安装则执行以下命令，安装brew：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"2. 检查是否安装了 nginx：brew search nginx// 如果没有安装 nginx，则使用以下命令来安装brew install nginx3. 查看nginx 本地配置文件(配置文件为该目录下的n..
2021-07-29 18:13:35
2243
原创 使用mac电脑生成 icns图标
1. 首先将你需要转换格式图片放在目标文件夹下，我这里需要转换格式的图片名称为 logo.png；2. 新建一个文件件，命名为 以.iconset 结尾，我这里将新建文件夹重命名为temp.iconset；3. 创建不同尺寸的 png 图标，具体命令如下：sips -z 16 16 pic.png --out icons.iconset/icon_16x16.pngsips -z 32 32 pic.png --out icons.iconset/icon_16x16@2.
2021-07-27 11:19:44
647
原创 封装cookies的set与get方法
const cookies = { defaultConfig: { expires: '1d', path: '; path=/', domain: '', secure: '', sameSite: '; SameSite=Lax' }, get: function(key) { var value = decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s.
2021-06-03 18:54:19
3685
原创 js函数调用自身
JS函数调用自身在函数内部调用自身函数的方式为arguments.callee[{id:"a",value:1,children:[{id:"b",value:2,children:[{id:"c",value:3,},{id:"d",value:4,},{id:"e",value:5,}]}]},{id:"f",value:3,},{id:"g",value:4,children:[{id:"h",v...
2021-04-21 11:57:29
6398
原创 通过js实现页面布局
（1）请实现上图所示的布局 （2）有以下已知条件： center 区域高度必然大于 left、right 区域 left、right 区域溢出后与 center 区域共用同一滚动条 当 left、right 区域内容溢出后，请实现以下功能： left、right 区域跟随滚动条滚动到底部就固定住，center 区域继续滚动 滚动条向上滚动，当 center 区域滚动到和 left、right 相同高度时，left、right 跟随滚 动，滚动到顶部时，left、right ...
2021-04-21 11:42:38
2778
原创 js工具函数
1. 实现一个数组随机打乱算法function disOrder(ary) { for (let i = 0; i < ary.length; i++) { let randomIndex = Math.floor(Math.random() * ary.length); swap(ary, i, randomIndex); }}function swap(ary, a, b) { let temp = ary[a]; ary[a] = ary[b];
2021-03-29 13:49:14
76
原创 短信跳转小程序
1. 使用接口获取 access_token接口：GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret查看文档2. 获取 jsapi_ticket接口：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi查看文档
2021-03-15 11:01:38
1410
2
原创 1.7 自定义组件
1.实现Icon// icon组件的使用 <Icon onClick={() => { alert('hello icon') }} name='jiadian-dianfanguo' style={{color:'red'}}/>// icon组件import React,{Component} from 'react'import PropTypes from 'prop-types'import '../../font-de.
2020-12-30 13:55:21
104
原创 1.6 React与es6
1. 变量的赋值与解构对象的解构let obj = { name: 'a', lesson: 'react', level: 'easy', info: { name: 'b', age: 30, sex: 'man' }}let { name, lesson, level, info: { name: infoName, age,
2020-11-30 14:36:22
183
原创 1.5 ReactDOM与表单
1. 组件的挂载与卸载import React from 'react';// 挂载ReactDOM.render( < HelloWorld /> , document.getElementById('root'));// 卸载ReactDOM.unmountComponentAtNode(document.getElementById('root'));需求：页面的初始化import React from 'react';ReactDOM.render(
2020-11-30 14:29:08
157
原创 1.4 组件通信
1. 组建通信组件是一个独立封闭的个体，不能直接使用外部的数据。通信场景 说明 父组件到子组件 不推荐使用 子组件到父组件 比较常用 兄弟组件之间 较少使用 import React from 'react'class List extends React.Component { render(){ return( this.props.list.map(el => <di.
2020-11-30 14:24:58
118
原创 1.3 生命周期与数据操作
1. 生命周期(1) 创建期(2) 存在期(3) 销毁期只有所有的组件都加载完全以后才会调用componentDidMount函数，进入组件首先执行render渲染基本页面组件，即在组件渲染之前执行。(4) 代码显示import React from 'react';class App extends React.Component { constructor(props) { super(props); this.state
2020-11-30 14:19:49
100
原创 1.2 虚拟DOM和JSX
1. JSX写法(1) ES6示例代码class Filter extends Component { render() { return ( <input /> ) }}class List extends Component { render() { return ( <ul> <li>aa</li&
2020-11-30 14:17:55
121
原创 1.1 React介绍与React代码规范
1. react 开发环境node 8； webpack babel es6； webstorm vscode。2. react 生态(1) 地址https://github.com/enaqx/awesome-react(2) UI组件库3. react 代码规范(1) standard.js规范npm install standard --save-dev; npm install snazzy --save-dev; 配置 package.js..
2020-11-30 14:04:33
331
1
原创 js监听当前页面是否处于浏览状态
js监听当前页面是否处于浏览状态有以下两种方法：1. 监听页面document的 visibilitychange 事件通过监听document的visibilitychange事件时，获取到的 visibilityState 变量的值来判断当前页面的状态。document.addEventListener('visibilitychange',() => { const state = document.visibilityState console.log(state) // hidde
2020-11-30 10:19:41
2202
原创 在vue项目中mock的使用
1. mock的作用模拟后台接口，提供页面需要的数据。2. mock的语法规范使用例子：// 使用 Mockvar Mock = require('mockjs')var data = Mock.mock({ // 属性 list 的值是一个数组，其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id 是一个自增数，起始值为 1，每次增 1 'id|+1': 1 }]})// 输出结果console.log(
2020-09-22 11:15:22
4646
原创 列表的虚拟加载
列表数据的虚拟加载1. 什么是列表的虚拟加载在网页中，当数据过多时可以选择使用分页加载数据，但是当每页中数据也很多时，只针对可见区域中的数据进行加载，而其他区域的数据则不加载或只进行部分加载。2. 实现原理(1) 页面列表向下滚动时当页面列表向下滚动时，超出可视区上部的列表中DOM元素使用空白区域代替，而不让用户在视觉上有所察觉页面的变化。(2)页面列表向上滚动时当页面列表向上滚动时，超出可视区下部的列表中DOM元素使用空白区域代替，而不让用户在视觉上有所察觉页面的变化。3.
2020-09-10 13:45:57
730
原创 正则常用的几种方法test、match、exec、replace
1. text()用途：用于检验一个字符串与正则表达式是否匹配；返回结果：Boolean类型实例：// 检验字符串是不是以数字结尾var str = 'aaaa34324';var exp = /\d$/g;console.log(exp.test(str)); // true2.match()用途：用于在字符串中挑选出符合要求的值的集合；返回结果：Array类型实例：// 从字符串中提取数字var str = '现在是2020年5月19日14时14分。';.
2020-05-19 15:24:58
458
原创 yarn的常用命令
1.yarn是什么？yarn是一个包管理器。你可以通过它使用别的开发者分享的代码，当然也可以分享自己的代码。简单的说yarn是npm的升级版。2. yarn 的优点速度超快：yarn缓存了每个之前下载过的包，无需重复下载。同时利用并行下载以最大化资源利用率；超级安全：执行代码之前，会通过算法校验每个安装包的完整性；可靠：将依赖包的不同版本归结为单一版本，避免创建多个副本。3. 安...
2019-12-13 15:45:18
677
原创 promise与settime的执行顺序
setTimeout(() => { console.log('timeout')})new Promise((resolve) => { console.log('before') resovle('then') console.log('after')}).then(res => { console.log(res)})这...
2019-12-05 17:55:14
704
原创 前端面试经典题型
1. let和var的区别：题目： for(var i=0;i<3;i++){ setTimeout(() => { console.log(i); }, 1); } for(let j=0;j<3;j++) { setTimeout(() => { consol...
2019-08-29 12:02:20
342
原创 判断window对象的方法
function isWindow(obj) { return obj != null && obj.window === obj; }只有window对象有window属性，且等于它本身。
2019-07-26 16:46:22
861
原创 JS 开发常用工具函数
1、isStatic：检测数据是不是除了symbol外的原始数据function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof...
2019-07-18 16:46:37
353
原创 animate.css的样式汇总
fade: { title: '淡入淡出', fadeIn: '淡入', fadeInDown: '向下淡入', fadeInDownBig: '向下快速淡入', fadeInLeft: '向右淡入', fadeInLeftBig: '向右快速淡入', fadeInRight: '向左淡...
2019-07-17 16:07:23
990
原创 ES6知识总结
1. 简介：ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。2.ES6新特性： 2.1....
2019-07-16 16:12:19
143
原创 js判断数据类型
通过对一个值使用 typeof 操作符会返回一下结果：‘undefined’：这个值未定义； ‘boolean’： 这个值是布尔值； ‘string’： 这个值是字符串； ‘number’：这个值是数值； ‘object’：这个值是对象或 null; ‘function’：这个值是函数；但是在实际应用中往往需要判断一个值是不是数组，这时候就用到了instanceof，我们可以使用...
2019-06-05 13:56:20
4133
原创 && 、 || 赋值计算与?
1. ||：首先在对于 a || b，大家都知道判断标准是只有当 a 为 false且 b 为 false时,整个语句为 假，否则为真。因此，在c = a ||b 中，只有当a 为 false 时才会考虑 b 的值，即：当 a 不为 false 时，等同于 c = a; 当 a 为 false 时，等同于 c = b;2. &&: 对于 a && b. ...
2019-05-29 13:52:49
628
1
原创 获取标签的子元素
<ul id="list"><!-- <li>0</li> --> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul> <script> var...
2019-05-24 17:47:37
3427
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人