见光就死123-优快云博客

原创 export 命令 import 命令模块的整体加载 export default 命令

1.export 命令 import 命令模块的整体加载 export default 命令介绍!：在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。ES6 模块的设计思...

2018-02-26 17:06:22 567

原创前端 Chrome 插件推荐

2.当你参与项目的一部分开发的时候，dev环境的接口太乱了，经常崩掉。但是pre环境的接口是好的，我们在本地开发需要把接口代理到预发环境。或者在修bug的时候，自己来拦截修改接口。ps: 其实就是对请求的一个拦截，来修改返回的响应数据。charles也可以做到相同的功能（模拟的比较的真实一点）。pc端的话，Ajax Interceptor 更加的轻量一些。1.前端本地在开发，后端接口还没好，可以提前mock数据，并且真实的模拟网络请求。可以对代码不侵入的方式，提高编码效率。后面真实联调速度就会快很多。

2023-04-24 20:30:07 901

原创前端环境搭建

@1：nvm的安装异常报错在终端运行zsh报错但是再zsh中使用nvm依旧提示解决方法编辑~/.zshrc添加source ~/.zshrc@2：nvm相关命令nvm list 查看已经安装的node版本nvm install version 安装指定版本nvm use version 切换使用指定的版本node@1：全局安装nrm包@2：查看nrm的包源@3：切换npm包源@4：增加npm包源@5：删除npm包源@6：切换npm包源之后，即可正常使

2022-07-10 17:12:36 391

原创前端面试手写题

1.深拷贝概念：深拷贝是指源对象与拷贝对象互相独立，其中任何一个对象的改动都不会对另外一个对象造成影响const deepCopy = obj => { let result; // 判断参数的数据类型是不是对象？ if (typeof obj === 'object') { //参数是数组还是对象 result = Array.isArray(obj) ? [] : {}; //for in , i 是下标，不管是数组还是对象 for (le

2022-04-29 13:41:29 1479

原创自定义事件的建立和触发

// handle 要执行的函数const handle=(val)=>console.log(val?.detail?.name);// 自定义一个事件名称是：customEventName 。其他地方触发了此事件，就会执行handle操作window.addEventListener('customEventName',handle,false)// 触发customEventName事件，并且传递了一个事件对象，detail 有反馈的信息内容。此时hanlde打印值为1wi...

2021-09-15 22:27:30 574

原创 HOOK父组件调用子组件的方法

1.父组件import React,{useRef,useCallback} from 'react';import Son from './son';export default () => { const sonRef=useRef(); const fatherAdd=useCallback(()=>{ sonRef.current?.add() },[]) return ( <div className="test_menu">

2021-06-24 22:43:52 859

原创基于koa搭建一个属于自己的mock服务器

1.初衷的由来。mock可以让你在没有后端程序的情况下能真实地在线模拟 ajax 请求，实现前后端分离。大大提高前端开发的效率。目前线上有免费提供mock的平台https://www.fastmock.site/#/，但是在真实的项目开发中，涉及的敏感数据就不太方便在该平台上使用了。那怎么办吧？阿里开源的前端框架umi，线上地址https://umijs.org/zh-CN就集成了mock的能力，个人觉得在使用的时候。项目本身就很大，加上大量的mock集成看起来很冗余。为此想着搞上一个属于自己的mo

2021-02-19 20:05:49 678 3

原创 React 封装AntV F2

1.介绍最近项目遇到要在移动端使用图表，最后选择了AntV F2来自阿里的开源项目。具体细节可以访问。AntV F2的官网2.在项目中使用到了条形图和折线图，直接上代码说问题。详细代码地址可以访问完整代码自行下载。import React, { Component } from "react";import PropTypes from "prop-types";import F2 from "@antv/f2";export default class BarChart extend

2020-11-08 15:29:14 2279

原创 git 的常见操作

-撤销本地的提交记录:1.git log 可以看到commit 提交的记录id。2.git reset --hard [commit] 本地的提交记录就会重置掉。-回滚远程代码：1.git log 可以看到commit 提交的记录id。2.git reset --hard [commit] 本地的提交记录就会重置掉。3.git push [remote] --force 达到回滚效果。......

2020-09-18 11:07:29 265

原创 react 手写移动端radio&&checkbox组件支持rc-form的使用

1.文件目录：2.代码地址：https://github.com/wangchun123/react-Ant-Design-Mobile/tree/master/src/components3.checkbox的调用代码：import React, { Component } from 'react';import Checkbox from '@/components/checkbox';import './index.scss';export default class in

2020-09-15 15:17:06 996 3

原创 react-移动端&pc预览pdf文件

1.点击访问代码地址：demo地址2.前提准备工作：1.本次主要讲移动端预览，你要有一个移动端配置框架，如果没有准备好，访问上面的链接可以下载运行（否则会出现样式混乱）2.npm ireact-read-pdf --save3.想看详细apik可以访问https://www.npmjs.com/package/react-read-pdf3.开始介绍代码：1.直接访问本地的pdf地址。import React from 'react';import { MobilePDF..

2020-08-29 16:36:20 2414 1

原创 VScode插件收集和特殊设置

-特殊设置1.VSCode中tab自动补全html代码设置进入vscode里面 =>设置=>工作台=>外观=>在settings.json中编辑进入编辑状态// 添加这个之后保存即可{ "emmet.triggerExpansionOnTab":true}-插件推荐1.vscode-icons 设置文件图标主题。2...

2020-02-17 22:37:08 277

原创基于antd,使用hooks编写动态增删table

直接上代码。1.文件目录：2.index.jsx文件代码：import React, { useState, useEffect } from 'react';import { Button } from 'antd';import EditTable from './component/editTable';import { cloneDeep } from 'loda...

2020-01-11 01:04:25 2209 5

原创 HOOK的理解

—在React 16.8之前，我们会称呼一个叫无状态组件。其实也是一个函数。但是它不具备react一些比如State，生命周期等特性。它作为单纯的展示一个ui组件是最优的。但是React 16.8的到来。无状态组件变成了。有状态组件，可以叫函数式组件。以下的Hook的出现，改变了函数式组件的命运。使它同样具备react的一些特性。你可以自己感受Hook的书写感觉。1.useState@1....

2019-11-11 15:59:09 530

原创树形数据的处理。

1.以下为后端返回数据,需要处理为树形结构数据。var list = [{ id: 2, name: 'declare', parent: 0 },{ id: 3, name: 'gps', parent: 0 },{ id: 4, name: 'gui', parent: 1 },{ id: 5, name: 'http', parent: 1 },{ id: 0, name: ...

2019-08-08 01:48:22 994

原创前端实用技巧和插件

1.在项目中，依赖包一般比较庞大。手动删除会等待时间很长。（正对Windows）方案：1.npm install rimraf -g #全局安装2.rimraf node_modules # 使用命令删除2.使用Git提交代码的时候，ESLint要检查你的代码规范，有可能会造成提交失败。解决方案。git commit -m '' --no-verify #可以跳过ES...

2019-07-25 17:08:28 715

原创基于antd 表格高亮操作实现。

import React from 'react';import { Table } from 'antd';import styles from './index.less';const data = [ { key: '1', name: 'John Brown', age: 32, address: 'New ...

2019-07-18 17:14:36 2933

原创 2019年前端求职面试题-主攻react

—新的一年结束了，开始了求职之路。以下是多家面试机构的提问集合。1.css 相关的问题。@1：盒子模型的理解盒子是由自身的长宽高，加上padding和border加上margin。怪异盒模型加大padding和margin都不会改变自身的大小。正常盒模型加大padding和margin会改变自身的大小。@2：浏览器的兼容问题例如flex的兼容。.box{ disp...

2019-02-21 19:44:24 8051 4

原创 react ref的多种用法

ref绑在子组件上有两种写法,功能父组件可以调用子组件的方法。1.ref的值为字符串的时候login为父组件import React from 'react'import Some from '../test/index';const FormItem = Form.Item;class Login extends React.Component { constr...

2018-12-20 22:21:45 529

原创移动端的rem布局

@charset "utf-8";/*reset*/body,button,input,select,textarea{font:100%/1 "Helvetica Neue",Helvetica,STHeiTi,"Microsoft YaHei";}body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,f...

2018-12-18 10:21:55 199

原创 antd表格table的展开不能自定义设置展开的触发点，只能在表格行或者表头默认的地方展开?

1.可以自定义设置展开的触发点。——呈上代码import React from 'react';import { Table } from 'antd';import './xiaoyu.less';const key = [];//定义一个空的数组。export default class xiaoyu extends React.Component {constru...

2018-11-22 00:45:54 8682 8

原创 css 冷门常识

1.css怎么让页面上的内容不被选中。body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}2.让div选中效果失效pointer-events:none;...

2018-11-01 09:21:58 262

原创 antd 里面的Checkbox回显功能和收集信息功能

-可以直接运行源码看效果。import React from 'react';import { Checkbox,Form,Button} from 'antd';const CheckboxGroup = Checkbox.Group;const FormItem = Form.Item; class some extends React.Component{onCh...

2018-09-30 16:22:32 6245

原创 react 父组件调用子组件的方法

1.父组件内的代码：onRef = (e) => {this.modal = e}//添加add=(e)=>{this.modal.showModal();}<AddModal onRef={this.onRef} Parent={this} editMessage={this.state.editMessage}></AddModal...

2018-09-30 16:15:53 4300

转载后端给出下载Excel的接口。

axios.get('/liveblack/exportexcel',{ responseType: 'blob',// 表明返回服务器返回的数据类型, params: { params: JSON.stringify({ token: ...

2018-02-23 15:00:01 2636

qq_40959617的博客