- 博客(60)
- 收藏
- 关注
RSS订阅原创 el-table获取全选的勾选状态
el-table开启多选模式时， 有时候需要获取当前页的全选checkbox是否勾选的状态，勾选dom标签肯定是有is-checked这个类的， 但是获取dom再判断dom的className的值就有点low, el-table肯定也是有对应的状态中心去管理其内部的checkbox的<el-table ref="multiTableInst" class="avue-crud multi-table" :data="dataList"
2022-01-22 09:59:55
5731
1
原创 el-table自动滚动到最底部
现有需求, 使用element-ui中el-table进行开发一个分组业务组件, 可以新增分组, 分组展示列表的最大高度160, 列表数量超过4条则显示滚动条添加分组功能, 点击新建分组, table的列表数据新增一条, 列表数量过多, 无法显示;期望: 列表数量过多, 点击新增, 自动滚动到新增那条数据所在的位置业务代码 //添加分组 addGroupItem() { const newRow = { groupName: '',
2021-12-22 16:54:01
4854
原创 cron表达式
代码使用vue-cron代码进行ui开发 https://gitee.com/lindeyi/vue-cron/tree/master实现效果参考下图:demo仓库为以下地址https://gitee.com/chunmeizhang/vue2-cron
2021-11-21 17:34:57
129
原创 最基础fieldset封装
<template> <fieldset class="fieldset-component"> <legend class="legend" :title="title"> <span class="legend-title" >{{title}}</span> <span class="legend-sub-title" v-if="subTitle">（{{subTitle}}）</spa
2021-11-19 10:55:06
1519
原创 npm安装的全局包,报错,不是内部或外部命令
由于本地开发需要用到多版本的node, 因此需要安装nvm工具,链接：https://github.com/coreybutler/nvm-windows/releases可下载以下版本：nvm-noinstall.zip：绿色免安装版，但使用时需要进行配置。nvm-setup.zip：安装版，推荐使用本人使用下载nvm-setup.zip, 解压后为一个nvm-setup.exe,双击该文件, 配置安装路径和选择nodejs安装路径安装后, 通过nvm的命令, 安装对应版本node, 并
2021-10-20 11:58:45
636
原创 浏览器窗口跨域名通讯postMessage
postMessage//语法: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessageotherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message将要
2021-09-15 10:53:42
593
原创 生成全局命令,配置命令脚本npm link
本地打包demo首先要生成打包的命令,类似在命令窗口使用webpack命令目录结构 -bin mypack.js //js脚本存在位置 -lib -node_modules -src -package.json -package-lock.json 在package.json配置bin{ "name": "mypack", "version": "1.0.0", "description": "", "main": "index.js", "scripts
2021-08-09 11:27:44
965
转载 js脚本加载
浏览器的核心是两部分：渲染引擎和 JavaScript 解释器（又称 JavaScript 引擎）。js脚本加载浏览器加载 JavaScript 脚本，主要通过<script>元素完成。正常的网页加载流程是这样的。浏览器一边下载 HTML 网页，一边开始解析。也就是说，不等到下载完，就开始解析。解析过程中，浏览器发现 <script>元素，就暂停解析，把网页渲染的控制权转交给 JavaScript 引擎。如果<script>元素引用了外部脚本，就下载该脚本再执
2021-07-14 10:40:52
296
转载 js使用new实例化过程
使用new命令时，它后面的函数依次执行下面的步骤。创建一个空对象，作为将要返回的对象实例。将这个空对象的原型，指向构造函数的prototype属性。将这个空对象赋值给函数内部的this关键字。开始执行构造函数内部的代码。构造函数内部有return语句，而且return后面跟着一个对象，new命令会返回return语句指定的对象；否则，就会不管return语句，返回this对象如果return语句返回的是一个跟this无关的新对象，new命令会返回这个新对象，而不是this对象。这一点需要
2021-07-11 11:19:14
1161
转载 js比较运算的实现
JavaScript 一共提供了8个比较运算符。>大于运算符< 小于运算符<= 小于或等于运算符>= 大于或等于运算符== 相等运算符=== 严格相等运算符!= 不相等运算符!== 严格不相等运算符这八个比较运算符分成两类：相等比较和非相等比较。两者的规则是不一样的，对于非相等的比较，算法是先看两个运算子是否都是字符串，如果是的，就按照字典顺序比较（实际上是比较 Unicode 码点）；否则，将两个运算子都转成数值，再比较数值的大小。非相等比较非相等运
2021-07-10 12:30:33
211
转载 js实现前端hash,history路由
js实现hash路由<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
2021-07-06 10:55:23
418
原创 vue中异步组件的写法
vue中定义了加载组件的方式,异步调用组件可以减小父组件的体积,加载显示更快可以通过dynamic import异步导入的方式进行懒加载子组件,设置webpackChunkName定义该异步的chunk的名字,不设置,则默认使用id命名该chunk源码中定义了vue组件中component的组件的注册有两种类型,其中异步组件也是两种类型, 下图:异步组件: AsyncComponent一: AsyncComponentFactory二: AsyncComponentPromise.
2021-07-03 22:20:17
894
5
原创 迷你实现express调用中间件
const http = require('http');const slice = Array.prototype.slice;class LikeExpress { constructor(){ // 存放中间件列表 this.routes = { all: [], get: [], post: [], put: [], patch: [], delete: [] } } register
2021-06-08 17:35:04
78
原创 发布npm包
发布npm包先在https://www.npmjs.com/signup注册sign up在终端窗口中执行 npm login命令，输入 用户名，密码，邮箱，即可登录成功注意： 运行 npm login 前，需要先把下包的服务器地址，切换为 npm官方的服务器，否则会发布失败npm config set registry=https://registry.npmjs.org/将终端切换到包的根目录下，运行npm publish命令，即可将包发布到npm上（报名不能雷同）删除已经发布的包，执行.
2021-06-02 15:33:15
85
原创 手写promise
class Promise { // 构造函数: executor执行器函数 constructor(executor) { const self = this //状态 this.PromiseState = 'pending' this.PromiseResult = null this.callback = [] //成功的回调函数 function resolve(data) { //只有状态为pending才能继续执行.
2021-05-30 22:35:11
60
原创 使用DllPlugin/DllReferencePlugin/AddAssetHtmlPlugin配置
DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度。webpack.dll.jsconst { resolve } = require('path');const webpack = require('webpack');module.exports = {//entry1：打包出来的dll文件将细化到每个入口名称 entry: { jquery: ['jquery'], lodash: ['.
2021-05-24 11:52:08
1263
原创 本地添加全局命令口令
目录结构：myApp -bin mypack.js -lib Compiler.js -template bound.ejs package.json package-lock.json// 配置 /bin/mypack.js #!/usr/bin/env node/*1.创建bin目录, 将打包主程序放入其中 主程序顶部添加'#!/usr/bin/env node'标识, 指定执行环境为node环境2.在package.json中添加bin脚本, pack
2021-05-18 14:22:06
220
原创 布隆过滤Bloom Filter:js/ts
/** * 存储节点 */var Node = function(key = null, value = null){ this.key = key; this.value = value; this.prev = null; this.next = null;}/** * @param {number} capacity */var LRUCache = function(capacity) { this.hashtable = new Map(.
2021-05-07 10:57:49
275
原创 leetcode:位运算的一些题目
/** * @param {number} n * @return {boolean} */var isPowerOfTwo = function(n) { //特殊判断 if(n<=0) return false; //2的幂次方的规律: 1,2,4,8...对应的二进制位都只有一个1,消去1后,如果是0,就是true return (n & (n-1)) == 0;};/** * @param {number} n - a positive in.
2021-05-06 16:47:47
104
原创 红黑树js
function RBTNode(value, parent) { this.value = value; this.parent = parent; this.left = null; this.right = null; this.color = true;//默认插入的节点颜色为红色}// 辅助函数// 使用boolean值作为颜色常量const RED = true;const BLACK = false;//染色const color = (node, col
2021-04-30 17:51:19
234
1
原创 AVLTree: js实现左右旋转
参考文章：js实现avl树的构建和查找https://cloud.tencent.com/developer/article/1538628function AVLNode(value) { this.value = value; this.left = this.right = null; this.height = 1;}// 获取节点高度： 该节点高度以经过的节点数作为avl树高度function height(node) { return node==null?0:
2021-04-29 09:43:23
108
原创 LeetCode: N皇后
leetcode: 51n 皇后问题 研究的是如何将 n 个皇后放置在 n×n 的棋盘上，并且使皇后彼此之间不能相互攻击。给你一个整数 n ，返回所有不同的 n 皇后问题 的解决方案。每一种解法包含一个不同的 n 皇后问题 的棋子放置方案，该方案中 ‘Q’ 和 ‘.’ 分别代表了皇后和空位。/** * @param {number} n * @return {string[][]} */var solveNQueens = function(n) { // 使用递归方法,回溯思想.
2021-04-28 19:49:56
92
原创 leetcode:37数独-js：9*9宫格，行，列，3*3宫格内数独
function suDuNumber(board) { // 每行维护一个set,9行维护一个Set[]数组 let rowSetArr = new Array(9); let colSetArr = new Array(9); let blockSetArr = new Array(9); for(let i = 0; i <9; i++) { rowSetArr[i]=new Set(); colSetArr[i]=new Set(); bloc
2021-04-25 11:02:20
445
原创 并查集之朋友圈
/*** 并查集* 查找find: 找到集合代表* 合并union: 合并两个元素所在集合* getCount: 获取集合总数*/class UnionFind { constructor(num) { this.count = num; //集合的个数 this.father = new Array(num); //用于记录每个元素所在集合的代表 for(let i = 0; i < num; i++) { //father[5] = 5 => 5所
2021-04-18 10:47:50
48
原创 虚拟机、docker部署nginx及web服务
------- 安装Nginx ------到home目录下,1.上传安装包alt + p进入sftp, 进行文件传输put D:\nginx-1.17.5.tar.gz2.解压安装包进入到上传的目录mv nginx-1.17.5.tar.gz /home/cd /home/tar -zxvf nginx-1.17.5.tar.gz3.进入Nginx目录cd nginx-1.17.54.安装依赖环境yum -y install pcre pcre-develyum
2021-04-03 22:52:23
668
1
原创 vuex中刷新实现保存状态
import Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getters'import mutations from './mutations'import actions from './actions'import {myPlugin} from './plugins';// vuex自带日志插件import createLogger from 'vuex/
2021-03-30 11:33:36
200
原创 css animation
动画(animation)transition：过渡动画，必须要用户触发才能开始执行，例如hover效果；animation：补间动画，可以让元素自身主动调用一个动画，不需要用户动作；//声明动画语法@keyframes nn(动画名称) { from { //开始状态 width:50px； height: 50px; background-color: red; } to { //结束状态 width: 300px; height: 300px; ba
2021-03-23 10:04:54
181
原创 input选择文件的类型type
文件上传和传输中,<input type="file" id="input" accept=".doc,.docx,application/msword,application/zip">accept定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号为分隔的 唯一文件类型说明符 列表。通过 File API，我们可以访问 FileList，它包含了表示用户所选文件的 File 对象file对象https://developer.mozilla.org/zh-CN/
2021-03-03 14:54:21
943
1
原创 模拟postman的send-and-download,前端请求实现
当后端接口返回流文件,使用postman的send and download可以直接将文件下载,但是前端应该怎么写接口响应逻辑exportHandler(data){ let self = this; let params = { name: data.name, Id: data.id }; //请求接口 axios({ method: 'get', url:'/export/file', params: params, responseType: 'blob'
2021-03-02 11:49:34
9584
4
转载 JavaScript 执行机制，宏任务和微任务(转载)
作者写的很棒, 转载一下https://blog.csdn.net/sunboylife/article/details/102858219https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/
2021-02-26 10:59:38
108
原创 Less的嵌套写法
自定义变量@color: skyblue;.box1 { color: @color;}.box2 { color: @color;}@length: 100;.box1 { width: @length * 3px; height: @length * 3px; background-color: red;}//变量还可以做运算，例如设置不同比例的宽高时。//混合写法.baseStyle() { width: 200px;
2021-02-22 08:47:32
970
转载 浏览器页面资源加载过程与优化
好文转载https://juejin.cn/post/6844903545016156174在10个xhr请求同时进行的时候, 某两个请求优先级太高, 响应时长又太久, 如何降低该http请求的优先级, 懂的可以留言目前只能将该请求扔到最后的方案(该请求结果需要实时获取, 并不能使用缓存策略)...
2021-01-27 09:58:06
541
原创 清除浮动影响4种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { float: left;
2020-12-23 11:12:00
253
原创 js函数预解析
在js代码运行时,分为两步: 先 预解析(var和function声明的变量和函数,将变量或函数提升至当前作用域的最前面) ,再逐行执行代码// 例1:function fun(){ console.log(num); var num = 10;}fun() // 输出: undefined// 原因: 使用var 声明的num 进行了函数内作用域提升,预解析后,代码如下function fun(){ var num; console.log(num); num = 10;}.
2020-11-18 14:38:45
418
原创 前端工具资源
IDE系列工具下载:(pyChartm, IDEA , WebStorm, Android Studio… )https://www.jetbrains.com/zh-cn/toolbox-app/android studiohttp://www.android-studio.org/node 安装http://nodejs.cn/download/
2020-11-04 10:11:21
87
原创 虚拟dom,
react什么是虚拟dom? 为什么要使用虚拟dom?简单的说,就是js对象!virtual Dom 是一种编程思想.这个概念里,UI以一种理想化的,或者说’虚拟的’表现形式保存于内存中,通过ReactDom等类库使之与真实的Dom同步,这个过程叫做协调(diff)由于真实dom 过于庞大,每个真实dom对象 都存在非常多的属性,并且这些属性很多使用不到,如果去对比真实dom之间的差异,操作太慢,成本太高,并且轻微的操作都会导致页面的重新排版,非常消耗性能相对于dom对象,js对象处理就非常快啦
2020-10-25 12:04:53
94
原创 redux 基础使用
import React from 'react'; //解析jsx对象,需要调用React.createElement()内部函数,返回vdom,需要引用react包import ReactDOM from 'react-dom'; //ReactDOM.render函数返回真实domimport { createStore} from "redux";/*1. 定义 reducer(用于创建容器使用)* 第一个参数: state 容器的初始状态, 可提供默认值* 第二个参数: ac
2020-10-04 09:52:09
207
原创 flutter 版本管理和回退
flutter 版本管理flutter sdk 版本的选择：1、Stable：稳定版。近一年中最好的beta版本。官方建议跟踪flutter的stable分支2、Beta：测试版。每隔几周都会选取近几个月中最好的dev版本作为Beta版。3、dev：最新的经过完全测试的版本。包含新功能，但可能有一些问题。4、master：最新版，但未经测试。查看flutter sdk版本号运行:flutter --version查看所有flutter sdk版本号运行:flutter version要查看您
2020-09-05 14:11:26
1637
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人