successLadder的博客

原创 错误图片处理

【代码】错误图片处理。

原创 纪念灰滤镜

【代码】纪念灰滤镜。

原创 上传图片前校验格式

上传图片前校验格式。

原创 mac打开跨域浏览器

mac打开chrome跨域浏览器

原创 React+mobx公共状态管理基础

【代码】React+mobx公共状态管理基础。

原创 前端分页列表删除当前pageNum数据后为空列表，返回上一页pageNum

【代码】前端分页列表删除当前pageNum数据后为空列表，返回上一页pageNum。

原创 手机信息中位脱敏

【代码】字符串脱敏。

原创 哈希链接修改参数并返回

【代码】哈希链接修改参数并返回。

原创 区间随机数

【代码】区间随机数。

原创 URL参数的增删改查以及不刷新页面更新url

【代码】URL参数的增删改查以及不刷新页面更新url。

原创 商品组曝光滑动曝光方法适用于曝光埋点

【代码】商品组曝光滑动曝光方法适用于曝光埋点。

原创 【导入file文件转数组】input -＞ type=‘file‘ -＞ list

【代码】【导入file文件转数组】input -＞ type=‘file‘ -＞ list。

原创 【切换tabs，不刷新修改链接参数】

【代码】【切换tabs，不刷新修改链接参数】

原创 原生 - 名字将数组对象中名字相同的项组成一个相同的数组

getNew = () => { let beforeData = [ { parentId: "aaa", id: "0", age: "40" }, { parentId: "bbb", id: "1", age: "20" }, { parentId: "ccc", id: "2", a

原创 React - 甘特图时间轴

// 组件调用<TimeComponents // 维度数 ganttSliderValue={ganttSliderValue} // 维度length ganttAlgorithm={ganttAlgorithm} // 开始时间 startTime={ganttStartTime && ganttStartTime.format('YYYY-MM-DD HH:mm')} // 结束时间 endTime={ganttEndTime && gantt

原创 React - svg-sprote-loader使用

原创 原生 - 阻止冒泡

e.cancelBubble = truee.stopPropagation()// React里使用该方法点击组件不穿透e.nativeEvent.stopImmediatePropagation()

原创 React - Websocket

【代码】React - Websocket。

原创 React-防抖

// React实际操作// 两个事件 onMouseOver 和 onMouseOutHTML： <div className='demo' onMouseOver={() => this.onMouseOver(record)} onMouseOut={this.onMouseOut} >constructor： constructor () { super() this.state = {} this.onMouseOver = this.de

原创 JS保留n位小数方法

// 参数1：数字, 参数2：保留几位小数（四舍五入）function f(num, n) { return parseInt(num * Math.pow(10, n) + 0.5, 10) / Math.pow(10, n) }f(17 / 7, 5) // 2.42857f(17 / 7, 4) // 2.4286f(17 / 7, 3) // 2.429

原创 原生 - Dom对象常见属性

// 客户区大小 document.documentElement.clientWidth // 浏览器可视窗口的宽度（body有margin，无法获取真实的宽度） document.documentElement.clientHeight // 浏览器可视窗口的高度（body有margin，无法获取真实的高度） document.body.clientWidth document.body.clientHeight// 元素占有可见空间 clientWidth 获取元素的宽度 w

转载 Git - 命令1

1、创建本地分支 local_branch git branch local_branch2、创建本地分支local_branch 并切换到local_branch分支 git checkout -b local_branch3、切换到分支local_branch git checkout local_branch4、推送本地分支local_b...

原创 antd - 表单校验组件demo

import React, { Component } from 'react';import { Form, Input,Select } from "antd";const {Option} = Select;class ModelForm extends Component { render() { const { getFieldDecorator } = ...

原创 Git - xmind

创建远程个gitHub仓库打开gitHub网站 https://github.com/注册gitHub会员 点击Sign Up 填写用户名，邮箱，密码。填写完成点击Create an account 选择第一个免费，Unlimited public repositories for free.然后点击Continue创建新仓库 点击顶部右侧头像图标按钮左边的加号 new rep...

原创 antd - Login

html页import React, { Component } from 'react';import { Form, Icon, Input, Button } from 'antd';import { LoginWrapper } from "./styled";import {withRouter} from "react-router-dom";class Login ext...

原创 高阶权限校验

//权限校验高阶组件import React, { Component } from 'react';import {Redirect} from "react-router-dom";export default (WrapperComponent) => { return class extends Component { render() ...

原创 React - 常用封装方法之routerEach

import React from "react";import {Route} from "react-router-dom";export const routerEach = (routes) => { const fn = (children) => { return children.map((item,index) => ( ...

原创 antd - 常用封装方法之sliderEach

import React from "react";import { Menu , Icon } from 'antd';const { SubMenu } = Menu;export default (routes) => { let fn = (child) => { return <SubMenu key={ch...

原创 Git

//一、初始化仓库，创建git仓库git init //文件夹中会多出一个隐藏的.git文件//二、配置个人信息git config --global user.name "名字" //配置用户名git config --global user.email "邮箱" //配置邮箱git config --list //查看配置信息git config --g...

原创 AJAX模拟Form表单上传

//当前端上传图片的时候，需要传递给后端的是一个file对象，而不是一个路径//而files就是包含了图片的所有设置，包括大小、类型、内容等等var xxx = this.container.find("#xxx")[0].files ;//将jquery转换成dom 在dom方法中，file提交时有一个files属性//所有的提交图片或文件都会增加1个length//1、创建Form...

原创 原生 - 数组排序（冒泡、选择、sort）

//冒泡排序 function newArr(arr) { var len = arr.length; while(len > 0){ for(var i = 0 ; i < len ; i++){ if(arr[i] > arr[i+1]){ [arr[i],arr[i+1]] ...

原创 原生 - 深复制封装

function cloneObject(sourceObj,targetObj){ //如果目标对象没传参则进入 if(!targetObj){ //如果对象类型是事件正则类型 if(sourceObj.constructor === RegExp){ //创建一个类型为正则的目标对象 targetO...

原创 fetch二次封装

import {fetch as fetchPro} from "whatwg-fetch";import qs from "qs";const get = (url,data)=>{ if(data){ let str = ""; for(var key in data){ str += "&"+key+...

转载 原生-秒数转换为小时、分钟

function formatSeconds(value) { var secondTime = parseInt(value);// 秒 var minuteTime = 0;// 分 var hourTime = 0;// 小时 if(secondTime > 60) {//如果秒数大于60，将秒数转换成整数 //获取分钟，除以60取整数，得到整数分...

原创 axios封装及应用

// axios二次封装import axios from "axios";const server=axios.create({ // baseURL:"", timeout:5000, withCredentials:true})// 拦截器server.interceptors.request.use((config)=>{ if(conf...

原创 什么是单向数据流

当父组件给子组件传递数据的时候，子组件只允许进行数据的读操作，不允许做数据的改操作，因为当子组件改变父组件传递过来的数据的话会造成数据流难以理解。（简单分析一下：当子组件中更改了父级的内容时，其他需要引用父级组件也会被更改，从而导致父级组件在与其他组件结合时报错，但是报错无法确认是当前组件错误还是父组件错误还是更改父组件信息的子组件的错误）所以，总结：父组件传递给子组件的信息不允许在子组件内被...

原创 原生-数组去重方法

方法一:查找相同选项，利用continue跳出,push进新数组var arr = [1,2,3,6,8,9,1,2,3,6,7,4,0,1] ;var arr1 = [] ;for(var i = 0 ; i < arr.length ; i++){ if(arr1.indexOf(arr[i]) !== -1) continue ; //如果新数组中查找到了push进去的...

原创 原生-商品详情放大镜

1、公共文件var Utils=(function () { return { //样式复制 ce:function(type , style){ var elem = document.createElement(type) ; if(style) Object.assign(elem.style , style) ; return elem ; } ,...

原创 原生-事件节流

1、节流逻辑分解/* 设置在input输入时，间隔一定时间后再进行判断设置等内容，在间隔的时间内不再做任何处理 */2、代码实现var text = document.querySelector("input") , ids = 0 ; //用来设置延时定时的初始值text.addEventListener("input" , inputHandler) ; /...

原创 原生-懒加载

1、公共文件var Utils=(function () { return { //样式复制 ce:function(type , style){ var elem = document.createElement(type) ; if(style) Object.assign(elem.style , style) ; return elem ; ...