wojiaowuyali的博客

原创 创建唯一ID

Math.random().toString(36).substr(2)

原创 redux / rematch

重新思考Redux - Rematch实践指南

原创 lodash

compact:过滤0，false，undefined等假值 _.compact([0, 1, false, 2, '', 3]); // => [1, 2, 3] drop:从头截取，返回剩余切片 _.drop([1, 2, 3]); // => [2, 3] _.drop([1, 2, 3], 2); // => [3] _.drop([1, 2, 3], 5); // => [] _.drop([1, 2, 3], 0); // => [1, 2,

原创 比较两个对象的层级是否一样多

原始数据staticData=[ {value:1,chiledren:[{value:1-1,children:{value:1-1-1}},{value:1-2,children:{value:1-2-1}}]}, {value:2,chiledren:[{value:2-1,children:{value:2-1-1}}]}, {value:3,chiledren:[{value:3-1,children:{value:3-...

原创 将数组【】递归成对象{}

[1,2,3] { value:1, children:{ value:2, child } }

转载 react-dev-inspector

react项目中有这样一个款插件react-dev-inspector,用来解决什么问题呢？ 就是当一个已经上线的项目出现了一个bug的时候，如果你对该项目不是非常熟悉，那么你就需要从来去捋一遍代码，还要非常费劲的去找到该处的代码位置，那么react-dev-inspector就是来解决这个问题的。借用github的一张动图来表示，如下： 一、配置loader 在webpack中配置loader的作用是，在打包的过程中获取代码的位置，并记录在元素的html属性上，基本上有这么几个内容：...

原创 vue优化

一、vue-router组件懒加载： 在网站加载时会自动解析需要加载哪个 chunk，但是单看请求首屏速度的话会快很多 二、template： 循环数组加上:key，避免报错。 三、代码规范： eslint：代码风格优化，比如缩进，分号，空格，注释 typescript：js类型检查 四、动态菜单： 目前菜单信息是一个固定的数组，动态菜单可以做用户的权限控制 五、公共组件封装、减少重复代码： a)...

原创 reactjs开发规范

开发规范 一、关于生命周期的使用 废除的三个旧的生命周期禁止使用(以下为废除的生命周期) componentWillMountcomponentWillUpdatecomponentWillReceiveProps 使用新增的两个生命周期getDerivedStateFromPropsgetSnapshotBeforeUpdate 二、提升组件性能 一律使用PureComponent类继承组件组件中的设计的列表key的值禁止使用索引，使用数据计算的hash值 三、一个组件类内部的编写...

原创 代码规范啊

1、引用组件顺序： 先引用外部组件库,再引用当前组件块级组件, 然后是 common 里的公共函数库最后是 css 样式 import * as React from 'react'; import { Dropdown, Menu, Icon } from 'antd'; import Header from './Header'; import toast from 'common/toast'; import './index.less'; 2、命名： 类名: 大驼峰式风格，字母和数字，例

原创 复制功能

copyText () { let text = this.code var input = document.getElementById('input') input.value = text // 修改文本框的内容 input.select() // 选中文本 document.execCommand('copy') // 执行浏览器复制命令 this.$toast('复制成功') }, ...

原创 textarea插入表情

push (str) { console.log(str) var text = document.getElementById('mytextarea') var textLength = text.value.length text.focus() if (typeof document.selection !== 'undefined') { document.selection.createRange().text = str } else { text.value = text..

原创 在循环体内发起请求 统一返回做处理

原创 tree-select 公司部门递归

<template> <a-tree-select class="company" v-model="value" style="width: 100%" :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="treeData" placeholder="Please select" tree-default-expand-all :replaceFields="{ children

原创 antd 的table td 超出部分隐藏并显示省略号 ，鼠标悬停显示内容

columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: { maxWidth: 150, overflow: 'hidden', whiteSpace: 'nowrap', textOverflow:'ellipsis', cursor:'pointer' } } }, render: (text) => <Tooltip placement="topLeft" tit

原创 时间选择器 只能选择今天起30天

<template> <div> <a-range-picker :disabled-date="disabledPriceRangeDate" v-model="priceRangeDate" @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" format="YYYY-MM-DD" /> </div> </template> &

原创 table合并列

import React, { useState, useEffect, useRef } from 'react'; import { Table, Button, Tooltip, Modal, } from 'antd'; const Index = () => { const listData = [{ skuId: '143621', skuName: '无线产品7', storeName: 'pb顺丰仓', options: [{ ta.

原创 变量提升 this 构造函数 公有私有方法

1 function Foo() { getName = function () { alert (1); }; //定义静态属性 没有用var来声明 会修改window下getName的值 return this; this的指向是由调用的方式决定的 函数调用的方式this指向window 对象下的方法调用指向对象 } 2 Foo.getName = function () {...

原创 递归菜单

importReact,{Component}from'react'; import{Menu}from'antd'; import'antd/dist/antd.css'; import'./App.css' const{SubMenu}=Menu; classAppextendsComponent{ fn(subMenus...

原创 slice splice

slice 返回一个新数组，不改变原数组 （start,end） slice(-5) 从倒数第五个开始截取，一直到最后，用来摘取数组中的最后几位 splice 改变原数组（startIndex, 删除几个,填补内容） ...

原创 模糊查询

模糊查询的时候需要在state中保存两个变量 一个变量恒定不变 每次遍历时都是从这个变量里面遍历 这个变量不会呈现在页面中 一个变量是展示页面中变量 这个变量的值是改变的 是呈现在页面上的值 ...

原创 upLoad上传文件

原创 点击下载

通过a链接href属性 值是后台给的网址 会在当前浏览器页面下载一个文件

原创 react 函数的绑定

fn(e){ console.log(e.target.value) } <Input onChage={this.fn.bind(this)}> 方法一 //需要绑定this 不需要传e <Input onChage={(e) => this.fn(e)}> 方法二//箭头函数不用绑定this 需要传参数e react三种绑定函数的方式 一在...

原创 react配置eslint

https://yq.aliyun.com/articles/663255 npm install eslint --save-dev npm install eslint-config-airbnb --save-dev npm install eslint-plugin-import --save-dev npm install eslint-plugin-jsx-a11y --sav...

原创 nginx配置

#cd / ———根目录 #cd usr/local/etc/nginx ——nginx.conf(nginx配置文件目录) ##nginx -V ——查看nginx版本及安装目录 ##nginx -v ——查看nginx版本 ##ps -ef|grep nginx ——查看启动的nginx服务进程 ##sudo /usr/local/Cellar/nginx/1.1...

原创 尽可能遍历对象而不是switch

原创 数组

数组的复制 const arr =[1,2,3]; const arr2=[...arr]   Array.from()将类数组转成数组 const nodes=document.querySelector('.classname') Array.from(nodes).forEach(node)   判断数组中是否存在某个值 includes（）返回布尔值 可以做 if（）条件判...

原创 上传前端代码到服务器

 使用WinSCP上传node包到相关位置 使用MobaXterm进入对应目录 git命令拉取clone代码 下载依赖 npm start

原创 webpack

为什么使用webpack：      现在都是模块化开发，一些less sass jsx vue等文件并不能被浏览器锁识别 因此要全都打包成标准的静态文件js css来被浏览器所识别       也可以做一些性能优化 --save--dev 开发版本 创造 --save  生产环境 市场运行 保存到项目依赖中 查看版本号 webpack -v  (node -v 等等) 将src下的入...

原创 proxy代理

原创 node持续监听

npm i nodemon -g 必须全局安装 例如在命令行输入：modemon index.js

原创 部署前端代码

工具 MobaXterm(用于操作nginx启动服务器的)  WinScp(用于将本地build包考入服务器上的) 登录winScp 输入申请好的服务器ip地址 输入对应的账号密码 将本地磁盘的build文件拖拽到home/wyl404668  如下    登录MobalXterm 操作nginx系统  首先确保当文件目录下有最新的build包   进入cd /alidata ...

原创 tab和echart

tab切换里面在加载不同的echarts报错getAttribute错误 是因为获取的时候dom节点的时候出错了 需要setTimeOut才可以获取到节点 需要在onChange中获取节点 最好才用ref去获取节点 在tab里面封装一个公共组件的话 组件渲染需要在willReceiveProps里面执行 父组件传递props就好   ...

原创 dependencies&devDendencies

dependendies依赖 比如echart react等需要的必要的依赖 devDependencies 开发依赖 比如eslint webpack等开发时候才用的依赖 -D --save-D

原创 函数

function fn(...arg){    console.log(arg) // [1,2,3]    型参arg是个真正的数组（推荐使用）    argument是个类数组（不推荐） } fn(1,2,3)   型参设置默认值 function(option={},arr=[]){ }  ...

原创 解构赋值

在数组中最好的结构赋值方法 const arr=[1,2.,3] const [ffirst,second] = arr   在函数传参中结构赋值 fu({name:",sex:"}） function fn({name,sex}){ }(建议) function fn(params){ const name=params.name; const sex=params.sex ...

原创 做分页处理数据的方法

makeData().slice((pageNum-1)*pageSize,pageNum*pageSize)

原创 proxy

原创 html

1.form+filedset+legend 对表单中相关元素进行分类 &lt;form&gt;  &lt;fieldset&gt;   &lt;legend&gt;Personalia:&lt;/legend&gt;   Name: &lt;input type="text"&gt;&lt;br&gt;   Email: &lt;input type="text&quot

原创 bootstrap

小屏导航条折叠  导航和内容锚点关联 滚动内容对应导航高亮 标签页tab