自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

胖猫的博客

无他,唯手熟尔

  • 博客(29)
  • 收藏
  • 关注

原创 Redux源码浅析系列(四):`applyMiddleware`

前面主要介绍了createStore,combineReducers,compose的实现原理,下面,我们看一下 redux中最有意思的中间件部分applyMiddleware。 applyMiddleware代码很简洁,但是含义很广泛。我们来一起看一下:首先,我们先来重温一下中间件的使用方法:调用中间件 来看一下createStore的源码if (typeof prelo...

2018-02-10 14:19:41 606 3

原创 Redux源码浅析系列(三):`compose `

compose实际上是一个函数式编程中的写法,表示从右向左组合多个函数。为了方便,被放到了redux里面来。当我们需要将多个storeEnhancers依次执行的时候,就需要用到它。下面,我们来看一下它的用法: compose(...funcs)funcs 表示 需要合成的多个函数。预计每个函数都接收一个参数。它的返回值将作为一个参数提供给它左边的函数,以此类推。最右边的参数可以接受...

2018-02-10 13:11:14 376

原创 Redux源码浅析系列(二):`combineReducer`

上一章,我们讲解了createStore。下面,我们来看一下combineReducer。 在redux中,我们禁止在应用中创建多个store(我们这里默认讨论的都是客户端应用,同构应用不适用这条规则)。然而,随着应用变得越来越复杂,需要对 reducer 函数 进行拆分,拆分后的每一块独立负责管理 state 的一部分。combineReducer就是将一个由多个reducer函数作为...

2018-02-10 12:44:46 2415

原创 Redux源码浅析系列(一):`CreateStore`

使用react+redux开发有一段时间了,刚开始使用并没有深入了解其源码,最近静下心来,阅读了一下,感触颇深。 本系列主要从createStore,combineReducer,compose,applyMiddleware几个方面进行讲解。本系列不会详细讲解redux的用法,因此可能更适合有redux使用经验的小伙伴们阅读。store是redux中用来存储所有state树的一个对象,改变...

2018-02-10 12:22:40 779

原创 IIS 8 开启 GZIP压缩来减少网络请求的消耗

什么是gzipgzip是GUNzip的缩写,最早应用于unix系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器端和客户端必须同时支持gzip。目前主流的浏览器都支持该协议,常见的服务器Apache,Nginx,IIS也都支持gzip。 gzip通过对文件中相似的部分进行替换压缩,压缩比率通常在3到10倍左右,可以大大的减少服务器的带宽。在实际应...

2018-01-30 21:25:13 4612

原创 webpack打包之后的文件过大的解决方法

以前一直使用create-react-app这个脚手架进行react开发,后面因为一些自定义的配置,转而使用webpack搭建一套自己的脚手架。但是在使用webpack打包之后发现,纳尼?怎么文件这么大??? 于是研究了一下如何处理webpack打包之后文件太大的情况,简单记录下来。首先配置全局变量首先,通过指定环境,告诉webpack我们当前处于production环境中,要按照p

2018-01-30 20:47:32 19303 1

原创 深入浅出React之第七章:使用React-Router实现多页面应用

现实中,应用往往包含很多功能,这些功能无法通过一个页面展示,所以应用往往是‘多页面应用’。而且,用户在这些页面之间来回切换,开发者要做的就是保证用户的操作顺畅。最好的解决办法就是虽然逻辑上是‘多页面应用’,但是页面之间的切换并不引起页面刷新,实际上是‘单页面应用’。1. 传统的多页面实现方式如果使用传统的多页面实现方式,那么每次页面切换都是一次网页刷新,每次页面切换都遵循以下步骤:浏览器的地址栏发

2017-10-09 00:44:15 13003 1

原创 深入浅出React之第六章:Redux和服务器通信

无论是React还是Redux,工作方式都是依靠数据驱动,在开发过程中,应用数据往往存储在数据库中,通过一个api服务器暴露出来,网页应用要获取数据,就需要与服务器进行通信。1.React组件访问服务器我们先来看一下一些比较简单的场景,在一些比较简单的应用中,我们可能只需要使用react,而不使用redux之类的数据管理框架,这时候react组件自身也可以担当起和服务器通信的职责。有很多JavaSc

2017-10-09 00:42:43 2694 2

原创 深入浅出React之第五章:React组件的性能优化

1.单个React组件的性能优化react是通过Virtual DOM来提高渲染性能,虽然每一次页面更新都是对组件的重新渲染,但是并不是将之前渲染的内容全部抛弃重来,而是通过借助Virtual DOM,计算出对DOM树的最小修改。这就是为什么React在默认情况下渲染都很快速的原因。不过,虽然Virtual DOM能够将每次DOM的修改量减少到最少,但是计算和比较Virtual DOM依然是一个很复

2017-10-09 00:38:53 783

原创 深入浅出React之第四章:推荐的Redux目录结构

1.传统的MVC目录结构在MVC中,应用代码分为Controller,Model,View,分别代表三种模块角色,就是把所有的Controller代码放在controller文件夹下,把所有的Model代码放在model文件夹下,把View代码放在view文件夹下。 如下所示:src/ controllers todoController.js filte

2017-10-09 00:36:08 4499

原创 深入浅出React之第三章:使用redux管理应用状态

Redux在前面,我们已经介绍了完全使用react来管理应用数据的麻烦,下面我们将要介绍redux这种管理应用状态的框架。 1. Reduxredux的三大基本原则:唯一数据源保持状态只读数据改变只能通过纯函数来完成下面,我们来具体看一下这个三个基本原则。唯一数据源唯一数据源指的是应用的状态数据应该只存储在唯一的一个store上。这个唯一store上的状态,是一个树形的对象,每个组件往往只

2017-10-09 00:34:53 3010

原创 深入浅出React之第二章:如何设计高质量的react组件

如何设计高质量的react组件?易于维护的高质量组件的设计要素一个组件最好只做一件事,并做好组件的prop和statereact组件的数据分为两种,prop和state。无论哪一个属性改变都会引起组件的重新渲染。那么,在设计一个组件的时候,什么时候选用prop,什么时候选用state呢?原则很简单:prop是对外的接口,state是组件的内部状态。2.1 react的prop在react中,pr

2017-10-09 00:32:15 613

原创 深入浅出React之第一章:DOM,也许不是答案

react,新的前端思维方式react的首要思想是通过组件来开发应用。所谓组件,简单的来说就是能完成某个特定功能的、独立的、可重用的代码。通过基于组件的开发模式,把一个大的应用分解成若干小的组件,每个组件只关注于某个小范围的特定功能,但是把组件组合起来,就能够构成一个功能庞大的应用。如果分解功能的过程做的十分巧妙,那么每个组件都可以在不同的场景下面重用,那样不仅可以构建出一个庞大的应用,还可以构建

2017-10-09 00:29:04 622

原创 react diff算法浅析

diff算法作为Virtual DOM的加速器,其算法的改进优化是React整个界面渲染的基础和性能的保障,同时也是React源码中最神秘的,最不可思议的部分1.传统diff算法计算一棵树形结构转换为另一棵树形结构需要最少步骤,如果使用传统的diff算法通过循环递归遍历节点进行对比,其复杂度要达到O(n^3),其中n是节点总数,效率十分低下,假设我们要展示1000个节点,那么我们就要依次执行上十亿次

2017-09-26 22:07:00 19975

原创 使用react加载leaflet瓦片乱序或者加载不完全

问题:使用react配合webpack加载leaflet瓦片显示乱序或者加载不完全 环境:react+webpack+react-leaflet/leaflet 描述: 如图所示: 解决办法: 在index.html中引入leaflet.css 或者在调用地图的组件中手动import css.

2017-08-28 10:02:28 1594

原创 Cesium 3d tiles格式介绍

这是一个3d tiles的格式文件{ "asset": { "version" : "0.0" }, //Asset是一个包含了整体tileset元数据属性的对象。其中version属性是定义3D Tiles版本的字符串。版本号定义了tileset.json的JSON格式和瓦片格式的基础设定。tilesetVersion属性是一个选填的字符串,用于定义特定应用中tileset的版本,

2017-07-27 09:21:38 14422

原创 ArcGISServer 10.1 动态图层

ArcGISServer将GIS资源以服务的方式发布,能够让更多的人在Web上浏览、使用。不过,诸如气象、环保等方面的信息是实时变化的,按照之前常规的方法,我们先要将最新获得的信息组织成地图文档后再对外发布服务;这样一来只要有更新的信息就要重复前面的工作,不仅地图服务维护的工作量比较大,而且无法让公众在第一时间了解这些信息。随着ArcGIS10.1发布,服务器端产品ArcGISServer新增了动态

2017-07-27 09:18:58 554

原创 一致性hash算法原理及其在分布式中的应用

摘要 本文将会从实际应用场景出发,介绍一致性哈希算法(Consistent Hashing)及其在分布式系统中的应用。首先本文会描述一个在日常开发中经常会遇到的问题场景,借此介绍一致性哈希算法以及这个算法如何解决此问题;接下来会对这个算法进行相对详细的描述,并讨论一些如虚拟节点等与此算法应用相关的话题。分布式缓存问题假设我们有一个网站,最近发现随着流量增加,服务器压力越来越大,之前直接读写数据库的方

2017-03-20 16:40:25 577

原创 webkit技术浅析系列---DNS

前言:对于web开发者而言,特别是使用HTML5技术来编写网页或者web应用,了解其背后的工作原理是写出高效代码的有效捷径,结合最近在看的webkit以及chromium,感触颇深,希望能够通过webkit技术浅析这一系列向大家分享一些学习心得。域名解析(DNS)1.什么是域名解析?通常情况下,人们都是使用域名来访问网络资源的,所以在建立TCP连接前需要解析域名,而域名解析就是把域名指向网站空间IP

2017-03-20 01:59:58 959

原创 Heritrix参数解释及配置

可以说 crawler-beans.cxml 可以主导整个Heritrix的抓取,采用spring来管理.里面的配置都是一个个bean,通过修改配置文件 crawler-beans.cxml 即可完成几乎所有的需求。 1. 修改任务元数据 <bean id="simpleOverrides" class="org.springframework.beans.factory.config.Prope

2017-03-08 11:15:52 931

原创 Heritrix web界面功能介绍

一、安装heritrix访问GitHub地址:https://github.com/internetarchive/heritrix3 我这里采用Clone的方式,使用的IDE是IntelliJ IDEA 导入完成后的结果如下: 二、启动Heritrixhttps://webarchive.jira.com/wiki/display/Heritrix/Running+Heritrix+

2017-03-08 10:51:21 3865

原创 Seajs源码解析系列(四)

前言:前三章对Seajs的基础应用,核心模块以及路径解析功能都做了介绍,这一章则对Seajs剩下的几项功能做一个综合的介绍。主要包括Seajs事件机制,脚本加载以及模块依赖。 代码解析:一、Seajs事件机制:Seajs内部提供了以下几种事件类型:seajs.on seajs.on(event, callback) 用来添加事件回调。// 给 fetch 事件添加一个回调seajs.on('

2016-11-22 16:06:12 921

原创 Seajs源码解析系列(三)

前言:这一章主要对util-path.js部分的源码进行解析。path部分主要介绍seajs中有关路径处理、路径转换等功能的实现,通过本章的学习,我们将会了解到Seajs是如何实现一个模块的最终url路径的。 本章大部分的代码都和正则表达式有关,像许多JavaScript库一样,路径匹配的实现大都是通过正则表达式去匹配的。 分析: 因为本章大部分的内容都与正则表达式有关,所以这里先来介绍一下正

2016-11-22 00:54:50 485

原创 Seajs源码解析系列(二)

前言:上一篇对Seajs及其使用做了简单的介绍,这一章开始正式接触Seajs的源码。 Sea.js 的所有代码都通过 GitHub 管理,项目地址:https://github.com/seajs/seajs 其源码放在src目录下。 目录结构:scr目录结构:-------------------------intro.js -- 全局闭包头部sea.js

2016-11-17 15:31:33 876

原创 Seajs源码解析系列(一)

前言:以前在做webgis开发的时候,就对dojo的模块化加载方式很好奇,一直想弄清楚它的实现原理,奈何其框架过于庞大,加上自己也懒,就一直没有深入进行研究。这段时间接触了Sea.js,淘宝前端大牛玉伯写的。它遵循的是CMD的加载规范,据说可以像Node一样书写模块代码。好奇看了一下源码,嗯~,才1000来行,加上最近时间也不是太忙,就想深入研究一下。Seajs简介: Seajs可以理解为是一种模

2016-11-17 12:46:41 1181

原创 百度坐标转换成WGS84坐标

需求:将百度坐标转换成WGS84坐标 实现: 首先介绍一下国内诸多繁杂的坐标系,众所周知,美国GPS使用的是WGS84坐标,但是在中国,国家出于安全的考虑,在地图发布和出版的时候,对84坐标进行了一次非线性加偏,得到的坐标我们称之为GCJ02坐标系,俗称火星坐标。另外,国内许多地图公司,可能是由于业务的需求,或者是商业竞争的某些原因,在火星坐标的基础上又进行了一次非线性加偏,得到

2016-10-13 16:23:13 67587 1

原创 Arcgis API for Javascript入门(二)

需求:以天地图作为底图,然后实现鹰眼功能; 概述:在3.4版本之后,鹰眼图控件支持了WebTiledLayer作为底图显示。我们可以使用WebTiledLayer访问天地图的地图服务,并将其用作地图底图,实现鹰眼功能;1、 使用WebTiledLayer加载天地图服务(1)、打开天地图·南京首页,选择电子地图 (2)、按F12打开开发者工具,选择Network,复制request UR

2016-10-13 16:09:19 1274

原创 Arcgis API for Javascript入门(一)

1、ArcGIS JS API涉及知识快速了解:1.1REST API:目前我们在开发过程中使用最多的就是REST服务接口了,REST是一种轻量级的Web Service架构风格,其实现和操作较为简洁,可以完全通过http协议实现。下面是关于REST的一些基础知识: (1)、在REST中,一切的一切都被认为是一种资源,每个资源由URI标识; (2)、对资源的操作包括获取、创建、修改和删除资源,这

2016-10-13 15:50:19 3496 1

转载 GPS坐标换算为百度坐标

GPS坐标换算为百度坐标说明:非原创,是转的  最近在做一个关于手机定位的小应用,需求是这样的,用户通过手机(Wp8)进行二维码扫描操作并且记录用户的当前位置,在PC上可以查看用户所在地图的位置,做法就是在用户扫描条码时,通过手机GPS获取当前在地图上的位置(采用百度静态地图,根据坐标直接生成图片)并将图片保存到数据库,PC端直接从数据库中读取并展示图片。问题是:生成的图片所呈现的

2016-04-20 14:37:45 2952

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除