- 博客(164)
- 资源 (16)
- 收藏
- 关注
RSS订阅原创 mac brew 安装
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
2022-03-09 11:10:57
93
原创 koa2-cors 跨域
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><body> 1</body><sc
2021-07-22 15:07:39
165
原创 移动端广告落地页预加载技术实践
背景介绍预加载技术与实践预加载的机遇与挑战点击率 = 点击次数/ 展示次数转化率 = 转化次数/ 点击次数落地页形式主要有两种 1: Native 端上提供模版 下发数据拼合 体验好 但是不够灵活 2：Web 页面 由HTML 实现 足够灵活 但是可能存在性能问题背景介绍 加载时长0-1.5s内 转化率都在15% 加载时长超过1.5s的落地页 ,转化率变化不大 优化落地页加载时长到1.5s内, 能显著提升落地页的转化率 常规的优化做完, 在进一步优化,就需
2021-03-04 13:40:22
852
1
原创 如何高效地实施 CSS 方法论中的BEM？
css 预处理工具 1. less 2. sass 3. stylus 4. postCSScss方法论 1. BEM 2. SUIT CSS 3. OOCSS css 加载器 1. CSS MODULES 2. CSS Loader css方法论 : 为了提高CSS的可维护性和扩展性 而衍生的一种CSS样式名的原则,概念及其明明规范BEM (Block Element Modifier)Block 表示一个模块 black可以包含blockElemen
2021-03-03 19:26:33
212
1
原创 性能优化小技巧合集
性能优化list渲染使用唯一-key — 加快DOM Diff更新超列表使用虚拟滚动 — 减少无意义列表渲染,提升用户体验不使用内连对象 — 避免对象饮用重复创建导致组件renderJSX中直接引入 — 加快svg展示速度 可自定义svg属性下面让我们开始挨个了解一下，首先是列表渲染使用唯一 key，我们都知道 React 在执行 Diff 算法时，会用到元素的 key 属性，它可以帮助 React 定位更改、添加或删除的项目，在重新 render 的时候尽
2021-03-03 11:24:03
106
原创 如何用lazy+ Suspense实现组件延迟加载？
我们正常引用一个组件，可以采用 ESM 的 import 语法import OtherComponent from './OtherComponent';如果希望能够延迟加载 OtherComponent 组件，我们可以使用 React.lazy 来加载这个组件const OtherComponent = React.lazy(() => import('./OtherComponent'));前面给大家讲解了 React.lazy 的用，接下来我们讲讲 Suspense 组件，Susp
2021-02-27 22:02:17
192
1
原创 react性能优化之组件render优化
举个例子例子说明，父组件触发 render，无论子组件使用到父组件的 state 作为 props 值是否改变，甚至无论子组件是否使用到父组件的 state，都会触发子组件 renderclass ChildOne extends React.Component { constructor(props) { super(props) } render() { const {value} = this.props; console.l
2021-02-26 09:43:14
382
1
原创 如何使用React Hooks重构HOC组件？
函数式组件优点容易拆分易于测试函数式组件的缺点react16.8 引入Hooks 具有让函数式组件拥有内部状态 生命周期 副作用 逻辑复用useState > stateuseEffect > 生命周期useContext > React.createContext自定义Hooks const [state, setState] = useState(initialState)适用useState注意 在渲染时候无论是调用一个useState() 还是多个use
2021-02-26 09:20:27
1059
原创 JavaScript这几种内存泄露写法
1. 未声明 / 意外的全局变量第一种，未声明或者意外的全局变量。全局变量的生命周期最长，直到页面关闭前，它都存活着，所以全局变量上的内存一直都不会被回收。所以当我们写代码的时候如果全局变量使用不当，没有及时回收，或者拼写错误将某个变量挂载到全局变量时，就会发生内存泄漏了。var a = '这是一个全局变量';function test(){ b = '变量 b'; //b 成为一个全局变量，不会被回收}这段代码中，test 函数中定义了一个变量 b，没有使用 var 或者 l.
2021-02-23 16:51:58
199
原创 如何设计一套规范的业务组件库？
评估总分 = 复用效果分 * 0.5 + 实现效果分 * 0.35 + 实际效果调研分 * 0.15复用效果分 = 引用次数 * 5 + 引用项目数 * 25实现效果分 = 文档详细程度 * 0.3 + 上手成本 * 0.3 + 使用成本 * 0.4实际效果调研分 = 每一调研项分数 * (100/ 调研项数目 )...
2021-02-23 16:21:18
725
原创 Ant Design Mobile of React
Ant文档创建一个项目create-react-app react-mobile-demo安装 npm install antd-mobile --save入口页面 (html 或 模板) 相关设置 <!-- set `maximum-scale` for some compatibility issues --> <meta name="viewport" content="width=device-width, initial-scale=1, maxi
2020-06-24 17:09:43
618
原创 JavaScript常用正则
电邮地址export const Email = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/ - \w 即为 [a-zA-Z0-9_] - [] 表示一个字符范围，就是一个整体，无需 () 包围 - Gmail 等服务商还支持形如 [email protected] 这样的用户别名邮箱 - (.[a-zA-Z0-9_-]{2,3}){1,2} 只适用于前些年常见的 .cn、.com.cn 一类根域名，近几年新增的 .name、.info、.club、.
2020-06-21 23:30:27
173
原创 git命令清单
1: 列出所有本地分支 git branch2: 列出所有远程分支 git branch -r3: 列出所有本地分支和远程分支 git branch -a4: 切换到指定分支，并更新工作区 git checkout [branch-name]创建自己的分支之前 一以master为准1: 切换到指定分支，并更新工作区 git checkout master2: 新建一个分支，并切换到该分支 git checkout -b [branch]3: 合并
2020-05-30 11:04:07
276
原创 数组去重问题
/* * 方案1 双层 for 循环*/ function distinct(arr) { for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.s...
2020-01-09 18:14:41
130
原创 react 通过 xlsx导入excel数据
import React, { Component } from 'react';import { Button, Icon, message } from 'antd';import * as XLSX from 'xlsx';let styles = { 'file-uploader':'height:30px', 'upload-text':'height:30px...
2020-01-08 10:32:16
1231
原创 node-sass报错
Node Sass does not yet support your current environment: OS X 64-bit with Unsupported runtime方案1:npm rebuild node-sass方案2npm uninstall --save node-sassnpm cache clean -fnpm install --save n...
2019-12-10 09:07:21
104
原创 Nginx 总的 配置文件 位置 /usr/local/nginx/conf/nginx.conf
Nginx 总的 配置文件 位置 /usr/local/nginx/conf/nginx.conf
2019-11-29 09:21:05
6866
原创 git 公钥和密钥
//生成公钥和密钥 ssh-keygen -t rsa -C "[email protected]" 一直Enter 获取公钥#进入.ssh目录$ cd ~/.ssh#查看文件目录$ ls #在终端查看私钥(私钥名称默认为id_rsa)$ cat id_rsa#在终端查看公钥(公钥名称默认为id_rsa.pub)$ cat id_rsa.pub...
2019-11-23 19:34:58
160
原创 react init配置
第一步//安装一下需要的插件yarn add antd react-app-rewired customize-cra babel-plugin-import less less-loader第二步"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", ...
2019-11-17 22:52:39
585
原创 前端安全类
CSRF基本概念和缩写 1: CSRF 通常称为跨站请求伪造 英文名 Cross-site request forgery 缩写 CSRF 3: 防御措施 1: Token 验证 2: Referer 验证 3: 隐藏令牌 2: 攻击原理 3: 防御措施 1: Token 验证 2: Referer 验证 3: 隐藏令牌XSS1: XSS(cro...
2019-10-29 09:45:36
120
原创 通信类
什么是同源策略及限制概念:同源策略限制从一个源加载的文档或脚本如何与来自另有个源的资源进行交互,这是一个用于隔离潜在恶意文件的关键的安全机制 1:协议 2:域名 3:端口1:Cookie LocalStorage 和IndexDB 无法读取2: DOM无法获得3:AJAX请求不能发送前后端如何通信1: Ajax :同源的情况下才可以通信2: WebSocket 不受同源策略的...
2019-10-28 08:32:45
113
原创 面向对象类
类与实例1:类的声明 1:第一种方式 用构造函数模拟类的方式 function Animal() { this.name = 'name'} 2: 第二种方式 ES6 class class Animal2 { constructor(name) { this.name = 'name'; } }2:生成实例 new Animal(), new Animal2()...
2019-10-27 18:01:36
73
原创 原型链
创建对象有几种方法第一种let o1 = { name: 'o1' };let o2 = new Object({ name: 'o2' });第二种let M = function(name){this.name = 'name'};let o3 = new M('o3');第三种 let P = {name:'o4'};let o4 = Object.create(...
2019-10-27 15:59:59
90
原创 HTTP协议类
HTTP协议的主要特点 1:简单快速 2:灵活 : 通过一个HTTP协议完成不同数据 3:无连接 : 连接一次之后就会断开 4;无状态 :无法区分 上次这个连接和下次连接的身份 HTTP报文的组成部分 1:请求报文 1:请求行 1:HTTP方法 2:页面地址 3:HTTP协议 4:版本 2:请求头 :key:value 告...
2019-10-27 13:32:38
204
原创 类型转换
数据类型1: 原始类型 Boolean Null Undefined Number String Symbol2: 对象显示类型转换Number 函数1:数值: 转换后还是原来的值2:字符串:如果可以被解析为数值,则转换为对应的数值, 否则转为NaN 空字符串为03:布尔值:true转为1 false 转为04:undefined: 转为NaN5:null: 转为06:对象...
2019-10-27 10:16:05
130
原创 DOM事件类
基本概念DOM事件的级别:1:DOM0 element.onclick = function(){}2:DOM2 element.addEventListener('click', function(){},false) false: 在冒泡阶段触发 true 在捕获阶段触发3:DOM3 element.addEventListener('keyup', function()...
2019-10-26 18:47:04
103
原创 css盒模型
基本概念:标准模型+ IE模型标准模型和IE模型区别标准模型 width=content 的宽IE模型 width=content+ padding+ borderCSS如何设置这两种模型标准模型 box-sizing:content-boxIE模型 box-sizing:border-boxJS如何设置获取盒模型对应的宽和高dom.style.width/height ...
2019-10-26 17:59:24
118
原创 三列布局
问题 : 假设高度已知，请写出三栏布局，其中左栏和右栏宽度都为270px,中间自适应 ？floatabsoluteflexboxtablegrid// 第一种方案 float <section class="layout float"> <div class="left">left</div> <...
2019-10-26 16:28:23
110
原创 will class fields be the new Bad Part of JavaScript?(笔记)
javaScript(犀牛)JavaScript the Good parts（ 蝴蝶）你不知道的javaScript（上中下）Class FieldsPublic Fields
2019-09-11 13:43:22
187
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人