- 博客(92)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 React-实用性能优化技巧
本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux/demos，喜欢请star哟~你可能听过一句话，过早的优化是万恶之源。项目开始，我们当然会首先考虑功能的实现，当完成第一版功能以后，就应该尽早开始优化和重构了。工具如果我们不去测量项目目前运行的速度，就无法知道后续进行的优化是否有效、效果有多少。下面介绍...
2019-02-01 17:46:43
609
原创 React-如何进行组件的单元测试
什么是单元测试一般测试分成几个类型：单元测试、集成测试、功能测试。集成测试和功能测试不赘述。单元测试是用来对一个模块、一个函数或者一个类来进行正确性检验的测试工作，这里的单元是程序工作的最小工作单位。单元测试应该仅仅依赖输入，不依赖多余的环境，如果你的单元测试依赖很多环境，那么你可能需要的是集成测试。单元测试又可以根据开发模式分成以下两类： 1. TDD, TDD指的是Test Driv...
2018-09-04 19:38:44
8602
原创 React-AMD标准、动态加载资源的Web APP如何做服务器端渲染
背景介绍需要做服务器端渲染的app是：可以点击添加组件，保存以后生成一个独立的web app。就是一个生成web app的web app。因为不一定每个组件都被添加到用户创建的web app中，所以，组件的资源是动态加载的，只有选择某个组件的时候，才会去加载这个组件的资源。前端资源使用AMD标准进行加载。困难点首先说明，这里不分析SSR中常见的问题，比如路由匹配、css loader处...
2018-06-24 22:48:19
900
原创 React-从源码分析React Fiber工作原理
本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux，喜欢请star哟~为什么要重写ReactReact16 以前React16 以前，对virtural dom的更新和渲染是同步的。就是当一次更新或者一次加载开始以后，diff virtual dom并且渲染的过程是一口气完成的。如果组件...
2018-04-28 11:40:25
12692
3
原创 React-react16和webpack4来写一个SSR应用
本文的demo仓库在 https://github.com/qiqingjin/blog/tree/master/React_Redux/，喜欢请star哟~前面的话React 16开始重视服务器端渲染，也就是SSR，不再严格对比checksum，不知道你的应用升级了么。 Webpack 4的支持主要看依赖的plugin和loader，目前主流plugin已经支持，可以升级咯。...
2018-04-24 17:47:46
2557
原创 Jenkins-服务器搭建和自动化任务执行
Jenkins是什么Jenkins是一个广泛用于持续构建的可视化web工具。根据我目前的使用（前端），Jenkins就是一个可以自动化完成拉取远程仓库代码、编译、打包、单元测试、合并分支等等一般需要我们手工完成的工作。Jenkins使用场景一个仓库，由少数几个开发者做“管理员”，有向master提交代码的权限，其他开发者在完成单个功能后向master提pull request，由“管理...
2018-02-24 17:52:31
2377
原创 React-UI库比较
回归博客了。说明我变得不那么忙了。最近干了件有意思的事情，根据团队需求选择一个React UI库，把结果和感受和大家分享一下。待对比的库国内使用React的小伙伴可能很多都用Antd，其实国外也有很多优秀的React UI库。本次选择的有：Ant DesignAnt Design MobileElemental UIMaterial UIReact-BootstrapR
2018-01-31 16:42:01
23604
3
原创 Webpack-源码四，从源码分析如何写一个loader
从黑盒和白盒两个角度讲讲如何写一个loader以及loader这个东西是如何在webpack中运作起来的。loader相当于一个翻译器，具体的loader会有很大不同，比如less-loader和ejs-loader内部代码肯定差异极大，这里只以最简单的loader举例，入坑以后大家根据自己需求自行探索。
2017-05-19 13:41:37
6884
6
原创 JavaScript-读 You Dont Know JS，原型继承不是继承
这篇博客是读You Dont Know JS系列书中this & Object Prototypes这本书后总结的第三篇博客，也是最后一篇（第一篇讲this到底是什么，第二篇讲Object到底是什么）。本篇博客中涉及到原型继承的链式结构、prototype与__proto__（也就是[[prototype]]）区别等问题。
2017-05-10 16:25:02
887
原创 JavaScript-读 You Dont Know JS， Object到底是什么
这篇博客是读You Dont Know JS系列书中this & Object Prototypes这本书后总结的第二篇博客（第一篇讲this到底是什么）。 这篇博客讲对象，其中会涉及到一些让我们困惑已久的问题，比如：对象的数据属性和访问器属性，对象属性（property）的特性（attribute）。
2017-05-10 11:12:05
1085
原创 Webpack-源码三，从源码分析如何写一个plugin
这篇博客告诉你如何入手写一个plugin，然后分析源码相关部分告诉你你的plugin是如何工作。知其然且知其所以然。
2017-05-07 18:33:19
9452
1
原创 JavaScript-读 You Dont Know JS，this到底是什么
You Dont Know JS一系列书不错。这一系列博客是我读这本书以后总结的干货。这篇博客讲解为什么使用this，以及如何确定一次函数调用的this到底是哪个对象。
2017-05-05 17:21:45
3630
原创 Webpack-源码二，整体调用流程与Tapable事件流
在上一篇博客中分析了webpack打包以后的bundle文件，了解webpack是如何通过require模拟commonjs标准加载模块的。下面探索webpack整体调用的流程，也就是如何通过shell输入webpack命令就可以实现整个编译、打包过程的。 这篇博客只对整个流程及相关的事件流进行分析，不具体分析每个步骤中的具体实现。也就是，对于plugin和loader的具体分析请移步后面的博客
2017-05-03 21:36:48
4565
1
原创 Webpack-源码一，使用require加载并打包模块
最近有同学致力于写一个脚手架工具，在研究webpack源码，问了我几个问题，然而我完全不能解答。于是开始研究webpack。webpack做的事情主要是实现前端模块化（即：让前端也可以像node端一样适用require方法加载模块）和借助插件实现编译、热加载等功能。webpack源码系列第一部分，就分享最简单的内容——如何使用require方法加载模块并打包。__webpack_require__
2017-03-06 18:49:27
15443
3
翻译 如何进行React组件单元测试
单元测试是定义我们构建的组件必须实现哪些功能的很好方式。它允许我们尽可能粒子化地测试我们组件的结构。我发现，单元测试使我在使用React时，写更多功能性的代码。我们将使用Karma，Jasmine和Enzyme开始React单元测试。如果只对示例代码感兴趣，请戳 https://github.com/aktof/example-react-unit-testing.什么是Karma，Jasmine
2016-12-21 20:14:06
9249
翻译 HTML5.1 里的新东西
查看原文请戳这里HTML 5.1概览两年前HTML5标准的发布对于web开发社区来说是一件大事。不仅是因为它包含了一系列让人印象深刻的新特性, 还因为它是1999年发布的HTML4.01标准以后，对HTML的第一个大版本更新。你现在依然可以看到一些网站夸耀他们在使用“现代”的HTML5标准。幸运的是我们不需为下一次HTML标准的更新等待那么长时间。2015年10月，W3C开始着手HTML5.1草案，
2016-12-09 13:24:53
1919
1
原创 HTML5-service worker进行缓存控制
讲一下使用service worker做缓存版本控制。1. 基础生命周期installing -> activated -> fech/message需要关注的生命周期阶段以下代码以使用indexedDB为例，后面提供使用service worker自带的cache的版本 install：首次缓存self.addEventListener('install', function(e){ c
2016-12-02 18:19:21
6276
原创 HTML5-indexedDB使用总结
1. 特点IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。特点如下： * 支持事务、游标、索引等数据库操作 * 一般浏览器会分配50M-250M不等的内存 * 持久化存储，清除浏览器缓存不会被删除（localStorage是会被删除的） * 支持多种数据格式：arrayBuffer、String、Object、Array、File、Blob、ImageData都ok
2016-12-02 16:30:05
8449
原创 HTML5-indexedDB使用常见错误总结
indexedDB使用过程中常常会出现以下错误: Failed to execute ‘createObjectStore’ on ‘IDBDatabase’: The database is not running a version change transaction.这是由于你在success事件的回调中调用createObjectStore方法，该方法应该在upgradeneeded
2016-11-21 19:56:23
24846
1
原创 JavaScript-前端加密（广义），防止js篡改
好久没有写博客了，不是没有在学习新东西，是最近比较忙，没有总结。 今天聊的话题是防止js篡改。javascript代码和需要编译的代码有一点不同是，网页上会直接请求js文件源码，而编译的语言运行时使用的是编译后的文件。即使这样，很多编译语言（比如java）都会做源码混淆（obfuscation），前端这样的纯文本应用，更需要做点什么保护我们的逻辑代码不被篡改和窥探。 防止js篡改的原理也很简单，
2016-09-16 13:53:57
22361
2
原创 React-组件渲染和更新的实现
最近一直写React，慢慢就对里面的一些实现很好奇。最好奇的就是自定义标签的实现和this.setState的实现。这里不分析JSX是如何解析的，所有组件都用ES5方式编写。组件渲染渲染时候，我们会调用render方法。
2016-08-16 16:35:47
17049
1
原创 ES6-深入理解Generator yield & Koa中间件执行顺序
几个月前写过一篇博客，讲Generator，比较基础。最近总在写ES6，想深入讲讲yield的执行顺序。你可能想问，Generator执行顺序很简单啊，就是调用next()就执行下一个yield后面的代码。很多问题，如果你认为很简单，很可能是你理解不深刻，就像我当初也认为Generator很简单。如果你关心koa中间件的执行顺序也可以接着看看。yield与yield*关于这个话题，你只需要知道四点：
2016-07-15 22:05:08
8491
原创 Co-实现原理分析
generator函数可以理解成一个异步操作的容器，它装着一些异步操作，但并不会在实例化以后立即执行。而co的思想是在恰当的时候执行这些异步操作。那么就需要一种机制，在一个异步操作执行完毕以后通知下一个异步操作开始执行。额，这句话听起来就有点耳熟了。这不就是回调函数或者promise干的事么。确实，co要求generator里yield的是thunk或者promise就是这个道理。thunk就是一种
2016-07-10 20:55:17
3604
原创 Co-使用co自动化执行Generator函数
co是如何工作的co是用来自动执行generator函数的工具。那么，首先你需要知道generator。Generator的好处是可以在定义函数时候就打上“断点”，调用函数时候可以在断点的地方暂停函数的执行。Generator带来的问题是如何控制什么时候进行下一步调用。co就是解决这个问题的。 下面所有代码可以到github上查看源代码。fs = require('fs');co = req
2016-07-09 23:06:04
2726
原创 Redux-Provider与connect
Redux使用的基本思路1）定义actions.js，其中包括actions type（字符串常量）、actions creators（返回一个json的函数，返回的这个json就是actions）2）定义reducers.js，包含多个reducer（就是一个函数）：(state, action)=>{……return newState}；最后通过 combineReducers()将多个red
2016-07-05 13:37:48
6296
2
原创 JavaScript-二进制与二进制数组
在ES5中引入了Blob用于处理二进制。在ES6中引入了ArrayBuffer、TypedArray、DataView用于处理二进制数组。常规的前端操作用，用到二进制的地方不多。但是，当我想处理文件的传输时候，使用二进制进行传输可以更快。在进行异步数据传输（AJAX）时，很可能出现这种场景。BlobBlob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他
2016-07-03 18:09:40
13349
原创 React-为什么要使用虚拟DOM
什么是虚拟DOM（Virtual DOM）首先，解释下虚拟DOM。虚拟DOM保存了真实DOM的层次关系和一些基本属性，与真实DOM一一对应。虚拟DOM的工作原理是：数据 -> 全新的虚拟DOM -> 与上一个状态的虚拟DOM进行diff算法比较，得到一个Patch -> 把这个Patch打到浏览器的DOM上。所以虚拟DOM叫的挺高端，其实就有点类似DocumentFragment，把多次DOM操作做
2016-07-01 20:42:10
6183
1
原创 JavaScript-mixin实现多继承
mixin简单通俗的讲就是把一个对象的方法和属性拷贝到另一个对象上，注意这个继承还是有区别的。js是一种只支持单继承的语言，毕竟一个对象只有一个原型，如果想实现多继承，那就简单暴力的把需要继承的父类的所有属性都拷贝到子类上，就是使用mixin啦。
2016-06-26 13:30:12
10336
转载 HTTP-服务器端CooKie与浏览器端Cookie
Cookie的来源由于HTTP协议是无状态的，而服务器端的业务必须是要有状态的。Cookie诞生的最初目的是为了存储web中的状态信息，以方便服务器端使用。比如判断用户是否是第一次访问网站。目前最新的规范是RFC 6265，它是一个由浏览器服务器共同协作实现的规范。 Cookie的处理分为：服务器像客户端发送cookie浏览器将cookie保存之后每次http请求浏览器都会将cookie发送
2016-06-25 21:57:55
59867
1
原创 Nodejs-Koa是一个干净的框架
1. 关于koa今天学习了plover的底层框架koa。nodejs框架用的最多的是express，社区也最大、资料比较全，简单易上手，所以在我自己写的一个音乐分享的网站中后台框架用的是express。之前就听说过koa是一个优雅的后台框架，小而美，今天读了读相关介绍，搭了个最简单的服务器，有点体会到为什么形容一个框架“优雅”、“美”。装饰器（Decorator）书里这么说：装饰器用于给对象在运行期
2016-06-20 23:35:02
5298
原创 CSS-合理使用z-index控制盒子视轴高度，解决z-index失效
z-index只控制某些特殊盒子，比如绝对定位的盒子。不管特殊盒子还是普通盒子，它们都有z轴高度（视轴高度），那么当这些盒子重合排列时，哪个盒子在上哪个盒子在下呢，z-index又是如何影响盒子的上下排列的，为什么有时候z-index会“失效”呢。这些都是需要我们理解z-index原理，合理使用。
2016-06-18 14:32:39
6776
3
原创 HTML5-Service Worker实现离线页面访问
如果提到HTML5的新API，WebSocket ，Web Workers大家应该比较熟悉。WebSocket是用于简述请求数量的新协议，Web Workers是用于实现浏览器的多线程。而今天要介绍的Service Worker是用于页面离线缓存，提供类似App的服务。注意，这和浏览器缓存不是一回事。 下面所有代码请查看github下载完整版本1. Service Worker 介绍试想，当你
2016-06-10 23:27:38
6505
1
原创 JavaScript-性能优化，函数节流（throttle）与函数去抖（debounce）
我在写一个类似百度搜索框的自动提示功能时候，使用了AJAX+keydown事件。调试时候我发现，当在搜索框中输入文字的时候，控制台在不停发送AJAX。这在本地服务器测试还好，如果我把它拿到运行环境，很可能出现提示功能卡顿，甚至没等提示出现用户就输入完毕的现象。毕竟大家现在打字都很快啊。于是我找到了一个新技能，函数节流 & 函数去抖。 throttle 和 debounce 是解决请求和响应速度不匹
2016-06-04 14:34:18
7006
3
原创 移动端开发-touch事件及其相关属性
1. 为什么移动端使用touch事件习惯在电脑上写js代码的同学可能想问一个问题：为什么移动端要使用touch事件，mouse事件和click事件在手机上不能触发么？其实这个问题很容易解决。首先，这两类事件在移动端也可以触发，但分别有一些问题：移动端会多点触屏，不适合mouse ，而click事件在手机上有 300ms延迟（不是bug）。因此，在移动端绑定事件，最好使用专门为移动端设计的touch事
2016-06-04 14:11:53
3940
原创 移动端开发-viewport实现响应式设计
1. 不使用viewport出现的问题提到响应式设计，大家首先想到的可能是 Bootstrap ， @media 。前者是一个响应式UI库，风格比较扁平化，类似的还有雅虎的Pure。@media是CSS3的属性，利用它可以在不依赖其他库的情况下实现响应式设计。如果你使用过媒体查询，应该熟悉下面的代码： 可查看github下载实例代码 @media screen and (min-
2016-05-30 17:22:50
2363
原创 JavaScript-可维护代码编写，函数式编程与纯函数
JavaScript-可维护代码编写，函数式编程与纯函数JavaScript是函数式编程与面向对象编程的混合编程语言，加上本身一些可扩展性（比如：函数参数个数及类型的不确定），使得JavaScript非常灵活，当然也可以说非常不可控。正是这个特点，使得一个团队维护一个共同的前端项目时，JavaScript代码可能非常难以读懂。试想，你新加入一个团队，让你去读别人的代码本身就不太容易，如果团队的注释习
2016-05-26 21:02:59
2496
原创 JavaScript-父子dom同时绑定两个点击事件，一个用捕获，一个用冒泡时执行顺序
JavaScript-在父元素与子元素都绑定多个事件时执行顺序事件的执行顺序绝对是让人头疼的问题。当父元素与子元素都绑定了多个事件，且有的绑定在冒泡阶段、有的绑定在捕获阶段时，事件的触发顺序如何？如果你只关心这个问题，请直接下滑到3. 绑定多个事件，且由用户行为触发。如果你想细致了解JavaScript中的事件发生，请慢慢阅读。1. 原生事件的发生顺序一般来讲，当为一个a标签添加click事件以后，
2016-05-12 20:18:49
18890
3
原创 HTTP-URL编码函数
HTTP-URL编码函数一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。比如，世界上有英文字母的网址 “h ttp://www.haorooms.com”， 但是没有希腊字母的网址“h ttp://www.aβγ.com” （读作阿尔法-贝塔-伽玛.com）。这是因为网络标准RFC 1738做了硬性规定： Only alphanumerics [0-9a-zA
2016-05-10 21:53:58
1736
原创 HTTP-URL中查询字符串格式化
HTTP-URL中查询字符串格式化GET请求是最常见的请求类型，常用语向服务器查询某些信息。必要时，需要将查询字符串追加到URL末尾。有的时候为了根据URL中查询字符串的不同渲染不同的页面也需要读取URL中的查询字符串。如何避免在URL写入查询字符串时报出格式错误 及 如何更快捷读出URL中查询字符串就是这篇博客要解决的问题。 https://www.baidu.com/baidu?wd=%C6
2016-05-10 21:15:38
6835
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人