- 博客(141)
- 收藏
- 关注
RSS订阅
原创 从零搭建webpack+react+router+redux项目踩坑之旅
使用 webpack 从零搭建 reactwebpack区分命令npm init -y # 跳过回答问题，直接生成默认的 package.jsonnpm install webpack webpack-cli --save-dev # --save-dev 在package文件的devDependencies节点写入依赖，生产环境也要使用npm install --save lodas...
2019-04-30 13:29:09
804
原创 react系列之flux、redux、mobx、dva
简介react 是一个基于 mvvm 模式的组件化开发的 web 框架。做 react 项目需要掌握什么react 功能单一，用于 UI 渲染redux 用来管理数据react-router 用来管理路由webpack 用来配置工程ES6 让代码更加优雅简洁具体使用了些什么dva框架：dva 是一个前端应用框架，集成了 redux,redux-saga...
2018-05-07 18:58:41
2976
原创 DVA知识集合
react与dva 原文地址：https://github.com/dvajs/dva-knowledgemap1.变量声明const DELAY = 1000let count = 0count = count + 12. 模板字符串const user = 'world'console.log(`hello ${user}`)// 多行const content = ` hel
2017-07-19 13:17:48
17505
3
原创 Cache-Control浏览器缓存
描述同一个标签页，打开 A 站点，访问 config 接口，正常；打开 B 站点，访问 config 接口，正常；通过浏览器后退返回 A 站点，访问 config 接口，数据异常，config 返回了 B 站点的数据。测试站点数据https://a.aaa.comhttps://b.bbb.com分析判断是否是前端问题通过观察，后退时仍然向服务器发送了请求，调用了 config 接口，可以排除判断是不是前端本地存储未更新通过观察，config 接口返回的内容仍然是 B 站点的数据，排除本地
2021-05-12 15:04:27
12417
2
原创 React 或者 vue 为什么在列表组件中使用 key
先回答：key的作用主要是为了 虚拟DOM 在执行 diff算法 时更快的找到对应的节点，提高diff速度，高效的更新 Virtual DOM;key值采用index和id的区别？const list 1 = [ { id: 1, name; 'test1' }, { id: 2, name; 'test2' }, { id: 3, name; 'test3' }]// 向中间插入test4之后const list2 = [ { id: 1, name: "test1" },
2021-03-12 17:26:11
253
原创 架构第一篇Serverless
简介Serverless，无服务架构，由第三方云计算供应商以服务的方式为开发者提供所需的功能。Serverless 技术分为两种：Faas 函数即服务 和 Bass 后端即服务。优点云服务器省去购买服务器，安装操作系统的步骤，在云服务器上搭建环境，安装数据库就可以部署应用了。Fass什么是函数即服务一个函数通常用于处理某种业务逻辑，例如一个 abs() 函数，它将返回所传参数的绝对值。我们可以把这个函数托管到 Faas 平台，由平台提供容器并运行这个函数。当执行函数时，只需要提供函数所需的
2021-02-24 11:43:23
396
8
原创 umi中配置多环境运行打包发布
前提日常工作中，分为多个环境（开发，测试，预发，正式），不同环境下 api 不同，资源存放地址不同，这事，需要根据环境不同，运行不同的代码或者打包出不同的代码。方案我们常见的 process.en.NODE_ENV 来区分环境，默认是 dev，product 两个值，本地开发 dev，打包是 product，假如还有测试 test，预发 pre，就需要我们手动设置了。实施步骤安装因为 window 和 mac 下用到的命令不同，需要使用 cross-env 来解决不同系统的命令兼容问题np
2021-02-04 17:16:46
2968
原创 css礼花特效
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css3实现烟花特效</title> <style> * { margin: 0; padding: 0; } html{ width: 100
2020-11-16 10:01:17
1083
原创 前端各种功能效果插件 临时库
工具插件电脑实用工具homebrew 软件包管理工具git sourcetreenodeihosts 切换host的工具vscode插件Auto Rename TagBabel ES6/ES7BeautifyDebugger for ChromeGitLensHTML CSS Supportnpm Intellisenseopen in browserPath...
2019-12-27 16:10:47
207
原创 react 源码
react 源码React.js 文件const React = { Children: { map, forEach, count, toArray, only }, createRef, Component, PureComponent, createContext, forwardRef, lazy, m...
2019-12-27 16:07:35
358
原创 ES7、ES8、ES9、ES10新特性大盘点
ES7Array.prototype.includes()方法之前：indexOf() find() findIndex()求幂运算符**代替 Math.pow()ES8Async/Await使用同步代码实现异步访问资源的能力Object.values()，Object.entries()遍历对象，供 for…of 使用String paddin...
2019-12-16 12:04:15
259
原创 git commit 报错：husky > pre-commit hook failed (add --no-verify to bypass)
现象原因项目中使用了husky，并且配置了"precommit": “npm run lint”。因此会在你git commit的时候执行npm run lint 也就是eslint --ext .js src test。GIT_DIR/hooks/pre-commit :这个钩子被 git commit 命令调用, 而且可以通过在命令中添加–no-verify 参数来跳过。这个钩子不需要...
2019-12-09 15:02:51
1598
原创 git add报错 fatal: LF would be replaced by CRLF in 或 文本是相同的,但文件不匹配
现象：解决：进入项目目录，在.git文件夹下打开config配置文件，添加上下面两句话：由于执行命令不能解决问题,我们选择手动修改,放在core里面即可autocrlf = falsesafecrlf = false...
2019-12-09 14:56:01
5226
原创 css动画阴影渐变效果
图片 hover 效果.img { width: 100%; height: 100%; background-image: url("../../../styles/image/example.png"); background-repeat: no-repeat; background-size: 100% auto; background-position: 50%...
2019-12-02 15:00:23
1215
原创 文本超出省略单行多行问题
单行、多行文本截断问题<div class="box"> <p> 会计师的科技感深加工IE给大家是个我经费等四个技术第三款共计四个积分都交给你电视剧覅二斌发给 </p></div>单行文本省略```css.box { width: 200px;}p { text-overflow: ellipsis; wh...
2019-12-02 14:58:01
137
原创 css实现固定的图片比例
css 实现 16:9 的图片比例需求：最近产品要求不管原图的大小是多少，宽度一定，高度要自自适应为 16:9。分析：对于正常的固定好宽度大小，这个需求很容易解决，直接通过人工计算，根据宽度的数值计算好高度的数值，然后 css 直接设置高度就行了。这样当然简单。可是现在在移动开发的过程中，我们为了自适应不同大小的屏幕，通过设置百分比来定宽，这样 css 无法通过计算得出这个固定的高度。当...
2019-12-02 14:54:42
3668
原创 css全局变量声明
:rootcss 伪类，匹配文档的根元素 ， 可以用于声明全局 css 变量CSS/CSS3 原生变量 var:root { --PC: @primary-color;}body { color: var(--PC);}注意：作用域问题
2019-12-02 14:51:02
1238
原创 移动端问题总结
解决移动端 1px 线的问题&:after { border: 1px solid red; content: ""; position: absolute; top: 0; left: 0; -webkit-box-sizing: border-box; box-sizing: border-box; width: 200%; height: 2...
2019-12-02 14:34:47
127
原创 20190423 前端面试总结
题目概览使用 last-child 找到 ul 的最后一个 li 元素闭包的概念 & 缺点 & 解决方法作用域 & let var区别 & 变量提升如何判断数组还是对象 & ‘’ instanceof String 结果 & 数组去重的方法解决跨域问题的方案 & 前端可以做代理么…怎么使用 & 应用场景 & ar...
2019-07-01 10:43:50
199
原创 20190515 前端面试总结
自我介绍介绍？一下印象深刻的项目，自己主导开发的项目？都封装过什么样的组件？封装组件时需要注意的点？组件设计原则？浏览器缓存？状态码？post请求附带头信息及其影响箭头函数和普通函数的区别？怎样使用普通函数模拟箭头函数元素水平垂直居中的实现？flex 兼容性处理？transform兼容性处理？如何解决跨域？cors 设置信息？post请求会有什么副作用key的作用observer ...
2019-07-01 10:43:39
199
原创 20190510 前端面试总结
webpack 的核心概念？entry 如何配置？如何配置多入口ES6 的内容？说一说块级作用域？if() let a = 1;能执行么js 定义函数的方式？区别知不知道高阶组件当前使用的 react 版本？react 新增的内容？弃用的生命周期postmessage 是如何工作的mobx数据流管理，@observer的原理，实现的函数用的react的版本号？webpack版本介...
2019-07-01 10:43:28
133
原创 20190506 前端面试整理
题目概览css3 的新特性，h5 的新特性存储 localStorage 和 sessionStorage 的区别js 的基本数据类型和引用类型js 事件委托js 动画和 css 动画的区别闭包缺点对 promise 的理解new 做了什么样的事情React 16.3 新的生命周期react 新的 hooks移动端适配方案如何做跨域antd如何按需加载组件js 的基...
2019-07-01 10:42:59
191
原创 git 生成 SSH 公钥 添加公钥备注
cd ~/.sshssh-keygenssh-keygen -C '备注名称'cat ~/.ssh/id_rsa.pub
2019-07-01 10:42:15
510
原创 前端编码规范之react
React 编码规约组件每个文件只写一个组件，但是多个无状态组件可以放在单个文件中。【强制】有内部状态，方法或者是要对外暴露ref的组件，使用ES6 Class写法。// badconst Listing = React.createClass({ // ... render() { return <div>{this.state.hello}&l...
2019-06-25 10:09:53
1520
原创 前端编码规范之js
ECMAScript 6 编码规约变量【强制】 使用 let 或者 const 代替 var// Badvar x = "y";var CONFIG = {};// Goodlet x = "y";const CONFIG = {};【强制】 禁止修改被定义为 const 类型的变量// Badconst a = 0;a = 1;const a = 0;a...
2019-06-25 10:09:17
276
原创 前端编码规范之css
CSS 编码规约基本规约【强制】缩进使用两个空格/* bad */.mod-example {padding-left: 15px;}/* good */.mod-example { padding-left: 15px;}在每个声明块的左花括号前添加一个空格/* bad */.mod-example{ padding-left: 15px;}/*...
2019-06-25 10:08:20
340
原创 前端编码规范之less
less编码规范由于 Less 可以看做是 CSS 的超集，因此所有适用于 CSS 的规约均适用于 Less。故而其中重复的规约部分不再赘述。@import@import 语句必须声明于文件的头部位置。// bad.page { width: 960px; margin: 0 auto;}@import "est/all.less";// good@import ...
2019-06-25 10:07:19
393
原创 分别使用 css 和 js 实现平滑滚动
css平滑滚动 scroll-behavior: smooth; 支持性：不好，谷歌火狐支持；其他多数不支持js滚动 window.scrollTo(0,0) // 1. 回到顶部,不够友好 Element.scrollIntoView() // 2. 让当前元素滚动到浏览器可视化区域内举一个在react中应用的例子：ref+scrollIntoView <...
2019-06-05 15:59:40
787
原创 js 技巧
实现 new 操作符// 实现new操作符 实例化一个对象 原型绑定 this绑定// New(A, 1, 2) <=> new A(1, 2)function Persion(name, age) { this.name = name; this.age = age;}Persion.prototype.getInfo = function() { conso...
2019-06-05 15:55:06
116
原创 四个 this 的典型应用
构造函数中function Animal(name, age) { this.name = name; this.age = age;}绑定 DOM 元素<input type="button" onclick="showInfo(this);" value="button" />获取 DOM 元素的属性或者值<input id="btn" type="b...
2019-06-05 15:48:05
342
原创 ES基础
ECMAScriptES 与 JSJS 为了让自己成为国际标准给了 ECMA 组织，ECMA 组织创立了浏览器脚本语言的标准，也就是 ES。ES 是 JS 的标准；JS 是 ES 的实现。ES6 与 ES2015ES2015 是小版本迭代；ES6 泛指下一代 js 语言，也就是 ES2015、ES2016、ES2017 等。let & const概念：规定了变量的...
2019-06-05 15:45:53
274
原创 HSF、HTTP、RPC
HSF 接口 和 HTTP 接口分布式服务框架： http://www.sohu.com/a/141490021_268033/*** 定义hsf接口：* 1. 分组信息： hsf服务分组 2. ID： hsf服务ID; 3. 方法： HSF服务生产者提供的RPC函数*/<dubbo:reference id="paySuccessPageService" interfac...
2019-06-05 15:41:44
4544
原创 antd 按需加载，antd定制主题，antd上传组件，在线换肤
antd 按需加载组件，antd按需加载样式使用 babel-plugin-import，babel模块化导入插件，兼容antd，antd-mobile，lodash等库配置：{ "libraryName": "antd", style: "css" }使用style：导入真正的css源文件，并且可以在编译期间进行优化。style: "css"：预先捆绑的css文件按原样导入。相当于：re...
2019-05-27 15:38:11
1936
原创 20190521 基于数据劫持的双向绑定方法 Object.defineProperty 与 Proxy
双向绑定的方法KnockoutJS 基于观察者模式(发布-订阅)的双向绑定Ember 基于数据模型的双向绑定Angular 基于脏检查的双向绑定基于数据劫持的双向绑定 (重点讲解)Object.definePropertyProxy数据劫持数据劫持的优点不需要显示的调用比如：Vue 利用数据劫持+发布订阅，可以直接通知变化并且驱动视图可以精确得知变化数据我...
2019-05-22 14:30:43
293
原创 ES6中的 Proxy 和 Reflect
Proxy含义在目标对象之前架设一层 拦截 ，访问该对象时必须经过这层拦截，对外界的访问进行过滤和改写let obj = new Proxy( {}, { get: function(target, key, receiver) { console.log(`get ${key}`); return Reflect.get(target, key, r...
2019-05-22 14:23:32
275
原创 react 16新特性介绍
目录React v16.0 （2017 年 9 月）render 支持返回数组和字符串错误边界 componentDidCatchFiberReact v16.2 （2017 年 11 月）FragmentReact v16.3 （2018 年 3 月）Context创建 Ref 使用回调函数 或者 createRef组件的生命周期React v16.4 ...
2019-05-17 19:17:36
1258
原创 将window的location的search字符串转换成一个对象
直接上方法function formatSearch(se) { if (typeof se !== "undefined") { se = se.substr(1); var arr = se.split("&"), obj = {}, newarr = []; $.each(arr, function(i, v) { ...
2019-05-15 17:30:13
2458
原创 关于跨浏览器、跨平台、跨域、性能代码交互优化等问题总结
跨浏览器兼容性问题首先是现在市场上浏览器种类比较多，而不同的浏览器他的内核也不一样，这就导致了各个浏览器对网页的解析也是不一样的。最常见的问题应该就是网页元素混乱，错位。解决：使用 Normalize.css 解决 默认的内外边距不同通过document.createElement让浏览器支持新的元素；使用 IE 条件注释引入 html5shiv.js 解决 IE9 以下，对 H...
2019-05-15 17:05:19
795
原创 react-router browserHistory 刷新页面 404 问题解决
react-router 原理react-router 是建立在 history 之上的，history 监听浏览器地址栏的变化，解析 URL 然后转换成 location 对象，然后 router 使用它匹配到路由，正确的渲染对应的页面。browserHistory 原理browserHistory 使用的是浏览器的 history api，创建一个真实的 URL。browserHist...
2019-05-08 18:38:04
3798
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人