- 博客(66)
- 收藏
- 关注
RSS订阅原创 【面试】css
css选择器的优先级内联 > ID > 类 > 标签em\px\rem区别CSS有几种定位方式staticrelativeabsolutefixedsticky
2020-05-05 15:21:33
229
原创 面试--webpack
常见的plugindefinePlugindllPluginwebpack-analyzer-plugincopyPluginHMR热更新流程webpack 对文件系统进行 watch 打包到内存中devServer 通过webSocket 通知浏览器端文件发生改变（发送的是文件hash）webpack-dev-server/client 接收到服务端消息做出响应（如果没有配...
2020-05-05 11:49:01
270
原创 HTTP 缓存
HTTP是Web浏览器和服务器之间的通信协议，遵循经典的「客户端-服务器」模型，请求由客户端发起，服务器接收响应，接数据传输给客户端。从一定程度上来讲，客户端下载资源所需要的时间，决定了用户体验。 而HTTP设计之初就考虑到了这一点，所以实现了一套缓存机制，重用已获取的资源，来尽可能的提升网站和应用的性能。...
2019-09-28 16:44:56
114
原创 PageMaker项目历程
Page Builder是我在公司参与时间最长的一个项目了，自打实习期做了webIM，转正之后不久，就开始参与了PageBuilder项目的开发，前前后后大概经历了两年的时间，后来由于公司业务调整，已经在今年初逐步将项目交接了出去。虽然现在不再参与项目的维护，但是从这么长时间的开发过程中，还是学到了很多东西，也让我成长了很多。其实最关键的，并不是具体解决了什么问题，而是解决问题的思路与方法。Pa...
2019-07-21 12:32:29
409
1
原创 React函数式组件，异步操作导致更新旧的数据状态的问题
在使用React Hooks开发组件的过程中，遇到了这样的一个问题，看一下示例代码：import React, { useState } from 'react'export default ()=>{ const [num, setNum] = useState(0); const handleClick = ()=>{ setNum(num+1); se...
2019-07-14 12:38:04
11733
2
原创 React 事件冒泡
在React中，我们可以在创建element的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给document绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的demoDemo比如有如下的代码：import React from 'react'class Demo1 extends React.Comp...
2019-01-27 11:50:15
4213
1
原创 React SyntheticEvent
why在react中，有一个很重要的概念就是：合成事件。他是基于Virtual DOM 所实现的一套事件系统。我们在React中所创建的事件处理函数，都会接受一个到一个SyntheticEvent的实例。为什么要这么实现是如下的原因：抹平各浏览器之间的事件差异，不存在兼容性问题，对开发者极为友好合成事件利用冒泡机制，在顶层document完成事件注册和分发，避免直接操作DOM事件，减少内存...
2019-01-26 12:50:30
919
原创 wepack scope hoisting
背景有一次在使用webpack构建组件项目时，需要动态指定publicpath，类似如下的代码：构建后，在运行态下，发现模块A中，并没有应用动态指定的publicPath。查看了构建后的资源：可以明显看到，模块A被提升到了 指定publicPath的前面，这就导致了A中的path并没有生效。查阅了webpack的官方文档，也验证了这一点：就是说，如果你使用了ES6 Module 导入...
2019-01-20 21:40:06
380
原创 cssmodule
http://www.alloyteam.com/2017/03/getting-started-with-css-modules-and-react-in-practice/#prettyPhoto
2019-01-16 09:17:33
283
原创 跨域iframe通信
前段时间，在重构业务相关SDK对接方案中，涉及到跨域Iframe通信的场景，最终采取的方案是window.postMessage , 这里总结一下该方案的应用场景及其注意事项。该API旨在安全的实现跨源通信。通常情况下，两个页面之间的脚本，只有在 协议 主机名 和 端口号 完全相同的情况下，才能互相通信。但是 postMessage 方法却可以实现 跨源调用，这也是该API设计的核心所在。另外...
2019-01-06 12:07:17
508
原创 fetch在移动端的兼容性问题
前段时间在做移动端H5应用开发过程中，遇到一个奇怪的问题：同样的页面，在IOS比较新的版本上可以正常加载，但是在IOS 10.2.1 上却一直 loading，加载不出来。借助调试工具发现，是在发送 HTTP 请求的过程中报错了，Unhanled promise rejection ,具体的错误截图当时忘记保存了。刚开始怀疑是IOS 版本的问题，但是同样版本上，其他的H5页面可以正常加载。然后...
2018-12-27 09:38:05
3248
原创 script的异步加载
异步加载what two conceptjs引擎:渲染引擎:why性能优化 渲染时间下面是一个再简单不过的页面： index.jsalert(1232) index.html<!DOCTYPE html><html lang="en"><head> <meta ...
2018-06-10 10:36:34
4324
原创 React高阶组件在业务场景下的应用
背景在参与beisenCloud和pageBuilder的对接任务中，出现了这样一个问题：有两个组件同时关联了同一个属性组件，并且在constructor和componentDidMount内等做了一些初始化操作，当在这两个组件之间切换的时候，由于属性组件已经被首次render了，所以只进行了diff算法，并没有重新生成一个新的组件实例，从而导致了属性组件没有同步更新方案当然，我们...
2018-06-10 10:34:04
2044
原创 React this绑定的几点思考
我们在react项目开发时，通常会遇到this 绑定的问题。解决的方法总结下分为下面的三种情况：import React from 'react'export default class Demo extends React.Component{ constructor(props){ super(props); this.click1.bind(...
2018-06-10 10:27:19
1741
原创 webpack dll VS external
webpack在打包后，生成的文件主要分为三种类型： * 业务代码 * 外部依赖库 * webpack runtimewebpack中的dll和external在本质上其实是解决的同一个问题：避免将某些外部依赖库打包进我们的业务代码，而是在运行时提供这些依赖。一方面实现了代码拆分，以及依赖的复用，另一方面提升构建速度.这两种方案应该是各有各的优劣，分别适用于不同的环境。...
2018-06-05 10:07:58
2717
1
原创 关于深拷贝
今天的code rewiew , 看到了如下的代码来实现深拷贝的效果。var a = {name:'demo'};var c = JSON.parse(JSON.stringify(a))其实这样的实现，看似是解决了问题：防止数据的意外篡改。但是，其实有很多的隐患。性能首先是前端性能问题，这样做，对浏览器的性能消耗其实是很大的。尤其是在页面频繁render的时候，方法被重复调...
2018-05-17 18:38:22
261
原创 欢迎使用CSDN-markdown编辑器
firefox 下的iframe问题今天在开发中，发现一个问题： 在页面中嵌入一个iframe，在谷歌下显示是正常的，但是在火狐下不能显示。经过查找和测试，发现了原因是：火狐下iframe不显示的问题，应该是浏览器的设计机制，防止出现无限递归显示，就是说在iframe的URL与父级的URL相同时，不加载这个iframe，而且在URL检测的时候，忽略掉了锚部分，即#以后的部分，但是虚拟目录在比较范围
2017-09-27 09:23:29
230
原创 单元测试
项目中准备引入自动化测试，记录下分享的内容Monkey Patch猴子补丁，在运行时对方法或者属性进行替换.虽然会解决一些问题，但是一定程度上会导致代码的混乱，所以应该慎用单元测试 Unit TestclassificationTDD：Test Driven Development测试驱动开发 先测试 后开发写代码。开发的过程是个尝试，探索的过程End To End :端对端测试 In
2017-07-26 10:19:31
671
原创 webpack2配置心路历程
最近在研究webpack2的配置，发现遇到了很多的问题，而且一绊就是好久。其实webpack2的配置，官方文档讲的还是很清楚明白的，很多的配置也清晰灵活了好多，应该是自己对webpack还不是太熟悉，一直停留使用封装好的框架上，对内部的一些配置不明就里。这里将自己在配置过程中出现的各种问题记录下，防止踩坑1. webpack-dev-server不能处理import其实这个问题真的是困扰了好久，在控
2017-06-20 09:30:09
1092
原创 webpack调试方法
在浏览器地址栏输入：chrome://inspect/#devices点击如下：在webpack的配置文件中加一个debugger 4.在你的package.json中添加一个新的script,比如："debug": "node --inspect --debug-brk node_modules/.bin/webpack --config webpack/webpack.config.js"
2017-06-16 09:29:41
7224
原创 高阶组件应用-组件重新实例化
背景在参与beisenCloud和pageBuilder的对接任务中，出现了这样一个问题：有两个组件同时关联了同一个属性组件，并且在constructor和componentDidMount内等做了一些初始化操作，当在这两个组件之间切换的时候，由于属性组件已经被首次render了，所以只进行了diff算法，并没有重新生成一个新的组件实例，从而导致了属性组件没有同步更新方案当然，我们可以在属性组件内添
2017-06-01 18:55:03
1369
原创 webpack打包优化
背景最近在做项目的过程中，发现项目打包的时间特别长，在npm start 的时候，需要耗费大概70s的时间，项目使用的webpack1+babel +react+redux，以及其他用到的第三方类库。于是接手了这样一个任务：对项目的webpack打包做优化。其实优化主要设计两方面的任务： 1. 打包时间 2. 打包后的文件体积在打包时间上，项目中已经使用了external 的形式，将react
2017-05-14 20:40:39
1386
原创 JS 继承
JS继承设计的缘由 看了阮一峰老师文章，总结了如下的几点：JS是基于面向对象的语言，需要一种机制，实现对象之间的关联借鉴面向类的语言中constructor 构造函数的思想，和new 关键字解决数据共享的问题，引入prototype 原文地址继承的实现方式继承FAQ__proto__ 与 prototype __proto__（隐式原型）与prototype（显式原型）首先，让我们明
2017-04-16 16:18:46
1833
原创 JS创建对象
在面向类的语言中，对象是类的实例，JS是面向对象的语言，对象是基于另一个对象继承而来。下面总结下在js中创建的对象的几种方式Object 构造函数var a = new Object()Object.createvar a = Object.create(Object.prototype);关于该方法的详细信息，可以查看对象字面量var a = {}使用这种方式创建对象，和Object.create
2017-04-16 11:32:48
380
原创 async和defer的异步加载
what two conceptjs引擎:渲染引擎:why性能优化 渲染时间下面是一个再简单不过的页面： index.jsalert(1232) index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wi
2017-04-09 15:59:41
718
1
转载 关于字体图标
1、为什么要将SVG图标改为使用icon-font呢？字体图标可以很容易的任意进行缩放可以简单的进行图标颜色的修改，svg图标不同色需要不同的文件，增加文件成本可以简单的给图标添加阴影，svg图标需要对图标进行重新设计，出现一个新的图标文件可以使得图标拥有透明的效果现在的浏览器大部分都支持可以通过css来很看好的实现各种效果可以为图标提供多种形态：hover、blur等效果文件体积更
2017-04-08 10:12:28
613
原创 Component & Element & ReactClass
本文主要阐述下react中，Component & Element & ReactClass之间的关系下面看一段基本的代码 demo.jsimport {Component} from 'react'export deault class Demo extends Component{ render(){ return <div>{this.props.name}</
2017-04-05 21:07:38
709
原创 React高阶组件应用
本文主要记录如何使用高阶组件实现外部逻辑注入，如性能打点，以及其中遇到的一些问题The defination of HOC所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个react组件demo如下是一个再简单不过的react组件import connect from './connect'import {Component} from 'react'class Demo extend
2017-04-04 21:13:21
3305
原创 关于对象/数组的深拷贝
在本次迭代开发中，由于引用对象的原因，导致一个bug，虽然很快得到了解决，但这个问题还是比较经典的。所以就整理下关于深拷贝的问题：对象Object.assignvar a={name:'name'}var b=Object.assign({},a)var c={...a}var d=JSON.parse(JSON.stringify(a))console.log(a===b)//false
2017-03-31 22:11:09
2324
2
原创 JavaScript高级程序设计
3.7 arguments关于函数参数：function(num){}//num 即为命名参数函数的命名参数只提供便利，非必须。任何参数都可以通过arguments对象来获取arguments对象只是与数组类似，但并不是数组的实例arguments的值始终与对应命名参数的值保持一致，但是他们的内存空间是独立的函数重载： 为一个函数编写两个定义，只要函数签名不同即可，即函数重载。在ECM
2017-03-28 22:18:56
461
原创 react state or redux store?
Use React for ephemeral state that doesn’t matter to the app globally and doesn’t mutate in complex ways. For example, a toggle in some UI element, a form input state. Use Redux for state that matters
2017-03-28 12:45:56
495
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人