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.codevar 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.lengthtext.focus()if (typeof document.selection !== 'undefined') {document.selection.createRange().text = str} else {text.value = text..

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

原创 tree-select 公司部门递归

<template><a-tree-selectclass="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 需要传参数ereact三种绑定函数的方式一在...

原创 react配置eslint

https://yq.aliyun.com/articles/663255npm install eslint --save-devnpm install eslint-config-airbnb --save-devnpm install eslint-plugin-import --save-devnpm 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