weixin_43996061的博客

原创 防抖和节流？

防抖触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发， 则重新计算时间。function debounce(fn, timing) { let timer; return function() { clearTimeout(timer); timer = setTimeout(() => { fn(); }, timing); }}节流高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行效率。 function t

原创 JavaScript（闭包、递归、枚举、构造函数、原型、原型链）

闭包函数嵌套函数。内部函数就是闭包。正常情况下，函数执行完后内部会被销毁（释放内部空间）。闭包，内部函数没有执行完成，外部函数、变量不会被销毁。枚举JavaScript中本身是没有枚举这个概念的，但是在typeScript中有。枚举的是指把所有相关的子数据都收集起来。例如： enum Weekday { Monday, Tuseday, Wednesday, Thursday, Friday, Saturday, Sunday }

原创 js中的同步、异步、promise

同步、异步、promise

原创 单页面和多页面的区别、SEO相关

（学习笔记）单页面：指一个外壳和多个内容片段组成。例如vue，是由多个组件组成。（常用于PC端官网、购物等网站）多页面：指多个完整页面构成。（多页面跳转刷新所有资源，每个公共资源(js、css等)需选择性重新加载，常用于 app 或 客户端等）单页面：优点：用户体验好，块，改变内容的时候不需要重新加载整个页面，spa（single page application单页应用程序）对服务器压力较小（服务器只用出数据就.

原创 为什么使用transform偏移比使用定位top性能更好？重绘、回流是什么？

以下为使用top的盒模型以下为使用transform的盒模型终上可看出使用top改变了盒模型，而使用transform没有改变。通过以下performance调试可以看出时间也有差异，top时间更长，因为使用top引起了回流。什么是重绘和回流？重绘: 当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而 不会影响布局的操作，比如 background color，我们将这样的操作称为重绘。回流：当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重

原创 vue相关

1、vue的双向数据绑定、mvvm实现mvvm的双向绑定，通过Object.defineProperty()来劫持各个属性的setter，getter。Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 W

翻译 vue的响应式原理 (官网总结)

一、如何追踪变化一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProPerty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也是Vue 不支持 IE8 以及更低版本游览器的原因。这些 getter/setter 对于用户来说是不可见的，但是在内部它们让 vue 能够追踪依赖，在 pro

原创 vue组件通信

一、父子组件传值父 - 子 父 :bind 后，子 props 接受// 父组件<Details :data="data" />// 子组件props: ['data']子 - 父 子 $emit 后，父 @接收// 子组件this.$emit('data', data)// 父组件<button :data="data" />data(val) { console.log(val)}二、vuexconst s...

原创 vue - MVVM

MVVM 是 Model-View-ViewModel 的简写即：模型-视图-视图模型模型：后端传递的数据视图：所看到的页面视图模型：是mvvm的核心，是连接view和model的桥梁。有两个方向：① 模型 转换成 视图 （将后端的数据转换成看到的页面。实现方式：数据绑定）② 视图 转换成 模型 （将所看到的页面转换成后端的数据。实现方式：DOM事件监 听，称之为数据的双向绑定）总结：MVVM框架下视图和模型是不能直接通信的。它们通过viewModel来通信，viewModel能够监听到数据的

原创 fultter

fullter (Mac环境)安装brewbrew 是 Mac 下的一个包管理工具，类似于 centos 下的 yum，可以很方便地进行安装/卸载/更新各种软件包，例如：nodejs, elasticsearch, kibana, mysql, mongodb 等等，可以用来快速搭建各种本地环境，程序员必备工具/usr/bin/ruby -e "$(curl -fsSL https://ra...

原创 el-table嵌套el-input进行验证

<el-table-column label="排序" align="center"> <template slot-scope="scope"> <el-form :ref="'form'+scope.$index" :model="scope.row" :rules="checkParamsRule"> <el-form-item prop="sortBy" style="margin-bottom: 0"> &l.

原创 element el-table 合并行或列的计算方法

<el-table v-loading="loading" :data="tableData_year" border :span-method="arraySpanMethod"> <template slot="empty"> <div class="empty"> <img src="@/images/empty.png"> <p>暂无数.

原创 vue-element excel 表格导出

exportExcel() { // 多表导出 var that = this; console.log(this.$refs.day.tableData_day, this.$refs.week.tableData_week) //要导出历史数据标题 var arry = [['时间', '运行泵', '进水水位（m）', '母管压力（MPa）']]; // 要导出的历史数据 .

原创 this 引申的相关点

call、applycall() 方法是预定义的 JavaScript 方法。它可以用来调用所有者对象作为参数的方法。通过 call()，您能够使用属于另一个对象的方法。本例调用 person 的 fullName 方法，并用于 person1：call() 和 apply() 之间的区别不同之处是：call() 方法分别接受参数。apply() 方法接受数组形式的参数。如果要使用数组而不是参数列表，则 apply() 方法非常方便。call() 方法可接受参数：...

原创 链接收藏-

https://jianwai.netease.com/index/1

原创 flutter -- Text Widget 文本组件的使用

TextAlign属性文本的对齐方式center: 文本以居中形式对齐,这个也算比较常用的了。left:左对齐，经常使用，让文本居左进行对齐，效果和start一样。right :右对齐，使用频率也不算高。start:以开始位置进行对齐，类似于左对齐。end: 以为本结尾处进行对齐，不常用。有点类似右对齐.如下图 如果text文本长度过少, 设置是没有效果的maxLines:设置...

原创 flutter (mac) Dart语法

flutter 官网网址：https://flutterchina.club/setup-macos/配置环境变量将flutter下载完成之后, 打开终端命令行 ( 在所下载的文件上一级 )使用vim进行配置环境变量 vim ~/.bash_profile在打开的文件里增加一行代码，意思是配置flutter命令在任何地方都可以使用。export PATH=/app/flutter...

原创 微信小程序框架

taro https://taro.aotu.io/多端统一开发解决方案 基于react开发mbvuevue开发微信小程序(路由不同)

原创 轮播

https://surmon-china.github.io/vue-awesome-swiper/vue-awesome-swiper

原创 vue 项目-权限判断 导航守卫 滚动行为

标题import router from './router'import store from './store'import NProgress from 'nprogress' // progress bar 进度条import 'nprogress/nprogress.css' // progress bar style// import { Message } from 'e...

原创 写一个简单的 redux

1.在src中创建一个store文件夹2.创建一个index.ts 代码如下:// 创建 store 仓库import { createStore } from 'redux' // 引入 createStore 方法import reducer from './reducer' // 创建好后引入const store = createStore(reducer) // 创建数据...

原创 关于Safari游览器 日期兼容问题

使用 that.$moment.utc(Time).format(YYYY/MM/DD HH:mm:ss))或者使用 that.$moment.utc(Time).format(YYYY-MM-DD HH:mm:ss))首先在项目中 谷歌、火狐、ie游览器的日期都如下:但是Safari 游览器的数据却为 invalid date百度一下: 百度解说是说 Safari 游览器 不识别 Y...

原创 redux 状态管理 createStore, combineReducers, applyMiddleware, compose

安装稳定版: npm install --save redux可能还会使用到以下附加包npm install --save react-reduxnpm install --save-dev redux-devtools应用中所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 a...

原创 创建react js/ts 项目

npm install -g create-react-app 搭建一个全局的脚手架create-react-app my-demo 创建项目 my-demo是项目名字cd my-demo 进入目录 然后启动 npm start创建一个typescript react 项目:npm install -g create-react-...

原创 react 遇到的报错

index.js:1375 Warning: Each child in a list should have a unique “key” prop.解决办法:

原创 关于 react 引入文件 路径

在 tsconfig.json中添加代码"baseUrl": "src",create-react-app只支持src或node_modules可以把 ‘/’ 改成 src

原创 关于时间格式转换

UTC时间转本地时间:this.$moment.utc(Time).local().format('YYYY-MM-DD HH:mm:ss')

原创 关于 react - typescript - ant 表格删除行(hook useState)

先引入 useState定义我的数据在要处理的地方调用 并且在里面写上业务逻辑

原创 关于 react ant form 表单提交

必须要把当前那个值 return 出来, 否则当前input里面的值就是undefined, 并且输入不了

原创 React实现路由跳转 exact严格模式

安装 react-router-dom npm install react-router-dom --save-dev报错： Can’t resolve 'react-router-dom’说明 项目中缺少 react-router-dom 模块命令 npm i react-router-native 安装这个模块成功后 文件 package.json 中 dependencies 就...

原创 hook(react) 兄弟组件传值

hook 兄弟组件传值创建一个context对象.当react 渲染一个订阅你这个context 对象的组件, 这个组件会从组件树中离自身最近的那个匹配Provider(Provider 接收一个 value 属性, 传递给消费组件. 一个Provider可以和多个消费组件有对应关系. 多个Provider 也可以嵌套使用, 里层的会覆盖外层的数据 — 如:<MyContext.Pr...

原创 webpack 资源放到cdn上

assetsPublicPath这样打包的地址 就直接在cdn上了

原创 webpack 4

sudo npm install webpack webpack-cli webpack-dev-server -g . mac 要加 sudo. windows不需要输入密码mkdir config dist src 新建三个文件夹npm init -y 会自己创建一个package.jsontouch dist/index.html src/...

原创 webpack 入门

npm init npm i webpack -d -s (-d开发环境 -s生产环境) 此步骤会下载node-modules、package-lock.json新建一个src文件夹 下面建一个index.js 如图:使用 webpack ./src/index 进行打包如果未安装 请安装 npm install -g webp...

原创 数组比较length长度重新赋值

if (arr1.length < arr2.length) {[arr1, arr2] = [arr2, arr1]; console.log(arr1)}

原创 重定向

原创 vue . form表单清空的方法

this.$refs.XXX.resetFields()

原创 Redux

https://segmentfault.com/a/1190000011474522

原创 react 动画

css样式:使用:安装react-transition-groupnpm install react-transition-group --save安装好后，你可以先去github上来看一下文档，他是有着三个核心库（或者叫组件）。TransitionCSSTransitionTransitionGroup使用CSSTransition其实这个库用起来根ng-animat...

原创 react的简单动画

子组件:父组件:动画样式: