TechFE-优快云博客

原创使用React+Three.js 封装一个三维地球

良久没有写过博客了，最近忙的焦头烂额，忽略了博客，罪过罪过。今天补充一篇，前一段时间研究过的技术，使用React+Three.js 封装一个三维地球，支持鼠标的交互行为。其实也实现了对有坐标的json数据展示在地球上的功能，以后会有补充。github仓库地址: https://github.com/zrysmt/react-threejs-app整体做完之后的效果图：废话少说，直接上环

2017-09-23 18:52:42 16430 6

原创基于WebGL的大数据二三维可视化--uber的deck.gl介绍

deck.gl是由uber开发并开源出来的基于WebGL的大数据量可视化框架。它具有提供不同类型可视化图层，GPU渲染的高性能，React和Mapbox GL集成，结合地理信息数据（GPS）的特点。下面我们就举两个例子探索一下这个神奇的库。1.第一站：将源码的例子跑起来源码在github里，首先克隆出来。npm 下载，在项目根目录下npm install(友情提醒，如果npm下载速度比较慢，可以使用

2017-06-02 18:38:10 22977 1

原创 leaflet可视化平台搭建

leaflet-vizLeaflet可视化平台leaflet是一个开源的前端地图交互类库，比较轻量级，支持移动端。而且有丰富的插件资源可供我们使用。Echarts是百度开源的前端可视化类库，提供丰富的前端可视化图表，平台中重要的一部分是我们要将leaflet和Echarts结合在一起。该平台是基于leaflet及其插件搭建的一个方便可用的可视化平台。详细参见[示例Demo]。(https://zry

2017-05-22 20:29:00 12615 1

原创 2017阿里实习校招-前端技术视频面试体会

快要秋招找工作了，预约的暑期实习面试，也是为了秋招攒点经验。约的时间是15:15 - 16:00，焦急又必须有耐心的等待后，终于在下午四点左右接通了视频，紧张ing。首先面试官介绍了自己的花名，心里紧张没记下来，现在想想挺后悔的。但是谁让我紧张了呢？然后是我的自我介绍，简单的介绍了一下我的基本情况，把技能和项目都介绍了介绍。面试官态度挺好的，平易近人的感觉，慢慢的也就不紧张了，后面面试官一路

2017-05-22 16:03:29 3045

原创 WebGL基础简明教程2-基础知识

上一篇我们介绍了使用WebGL的基础，包括顶点着色器、片元着色器、初始化WebGL，初始化着色器以及变换、动画、颜色、纹理等，这一部分的内容我们就来进入三维的世界。和上一篇文章一样，我们的这篇只做个大概的介绍，详细的内容部分请参阅《WebGL编程指南》一书。代码存储在我的GitHub中。 https://github.com/zrysmt/data-viz/tree/master/webgl/d

2017-05-17 13:23:18 960

原创 WebGL基础简明教程1-简介

我也是个初学WebGL的人，这部分的内容是我在看完《WebGL编程指南》一书后的精简教程。看完之后我对三维世界重建了一些观念，这篇文章是尽量在有限的内容中，一下介绍几个重要的基本的概念，后面我会分几篇再详细介绍几个重要的概念。WebGL是利用HTML5的canvas绘制和渲染三维图形，再现代的浏览器中均支持。WebGL是从OpenGL ES中继承过来的。代码存储在我的GitHub中。 https

2017-05-17 13:22:23 1654

原创使用leaflet或者openlayers 3 调用MapServer服务最佳实践完整说明

最近尝试了很多次，看到网上的很多教程都是版本比较老旧，会出现很多问题。经过数天的实践，现在可以调用成功，遂将步骤记录在此。为避免以后使用的软件不兼容，首先给出基于window 10的软件版本： - MapServer服务器 3.2.1 ms4w-3.2.1-setup.exe http://www.ms4w.com/QGIS 2.18 osgeo4w-setup-x86_64.exe

2017-05-04 20:57:49 5415

原创阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由

阿里巴巴校招2017前端笔试题目： 1）路由有什么缺点？ 2）原生js/html5 实现一个路由缺点: * 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存 * 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置路由的概念： * 路由是根据不同的 url 地址展示不同的内容或页面 * 前端路由就是把不同路由对应不同的内容或页面的任务交给前端

2017-04-28 10:36:32 1202

原创 openlayers 3扩展，调用百度地图、高德地图、天地图服务

调用这三个商业地图服务，我们使用的都是切片（Tile）地图服务，关于切片地图的含义这里做简单的介绍：切片地图就是指将显示的地图切成一块一块的(256 * 256)分别显示加载。openlayers 3中有这样图层加载类，ol.layer.Tile,对应的source类有ol.source.TileImage,ol.source.XYZ,这两者的关系通过源码可以看到 ol.inherits(ol

2017-03-28 11:45:23 18140 13

原创 Openlayers 3 使用React 组件化+wepack+ES6实践记录笔记

本博文不作深入研究内容，只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题，本博文作为开篇，所以只是简单的demo案例说明。后面还会有其他的一些博文分享我在项目中遇到的问题和总结的经验。大约一年前我写过一个系列的Openlayers 3的简单的源码结构的分析，代码以及说明在我的github中有，需要的同学出门右转。 Openlayers 3的

2017-03-10 20:38:08 8196

原创 ECharts 3.0源码简要分析1-总体架构

百度的Echarts 3.0作为前端领域可视化重要的开源库，是我们在日常工作生活中经常使用的，所以有必要一起来了解下Echarts的源码。我打算用一个系列介绍下Echarts 3.x的使用和源码，一些demo和没有在博客中介绍的源码请进我的github仓库。 https://github.com/zrysmt/echarts3/tree/master/echarts本博文Echarts版本基于

2017-03-09 11:26:04 19720

原创 ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）

这一篇，介绍下Handler处理机制。Handler负责事件处理,包括’click’, ‘dblclick’, ‘mousewheel’, ‘mouseout’, ‘mouseup’, ‘mousedown’, ‘mousemove’, ‘contextmenu’等。我们知道canvas API没有提供监听每个元素的机制，这就需要一些处理。处理的思路是：监听事件的作用坐标（如点击时候的

2017-01-11 10:48:15 4212 3

原创 ECharts 3.0底层zrender 3.x源码分析2-Painter（V层）

上一篇介绍了zrender的总体结构，这一篇我们就详细介绍View层–Painter(Painter.js)。一些demo和没有在博客中介绍的源码请进我的github仓库。 https://github.com/zrysmt/echarts3/tree/master/zrenderPainter利用canvas负责真正的绘图操作。 * 1.负责canvas及其周边DOM元素的创建与处理

2017-01-11 10:45:36 11009

原创 ECharts 3.0底层zrender 3.x源码分析1-总体架构

zrender是一个轻量级的Canvas类库，作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档，包括官网文档都还停留在2.x时代，我打算用一个系列介绍下zrender 3.x的使用和源码，一些demo和没有在博客中介绍的源码请进我的github仓库。 https://github.com/zrysmt/echarts3/tree/master/zrender基于

2017-01-11 10:41:23 20994

原创 javascript设计模式使用ES6语法

参考《javascript设计模式》[美]Addy Osmani一书，下面介绍使用javascript经常会使用的主要设计模式。本博文为ES6语法的博客，还有使用ES5语法的【上】【下】两篇。主要是以下几个设计模式：Constructor Pattern 构造模式Module Pattern 模块化模式Revealing Module Pattern 揭露模块化模式 Singleton

2017-01-03 10:26:45 6344

原创 javascript设计模式【下】

参考《javascript设计模式》[美]Addy Osmani一书，下面介绍使用javascript经常会使用的主要设计模式。本博文是使用ES5语法的【下】篇，还有一个【上】篇，ES6语法会单独写个博客。主要是以下几个设计模式：Constructor Pattern 构造模式Module Pattern 模块化模式Revealing Module Pattern 揭露模块化模式 Sin

2017-01-03 10:25:53 1057

原创 javascript设计模式【上】

参考《javascript设计模式》[美]Addy Osmani一书，下面介绍使用javascript经常会使用的主要设计模式。本博文是使用ES5语法的【上】篇，还有一个【下】篇，ES6语法会单独写个博客。主要是以下几个设计模式：Constructor Pattern 构造模式Module Pattern 模块化模式Revealing Module Pattern 揭露模块化模式 Sin

2017-01-03 10:25:08 2070

原创动手DIY一个underscorejs库及underscorejs源码分析3

所有代码挂在我的github上,例子是demo6.html，DIY/4/_underscore.js.欢迎fork，star。 https://github.com/zrysmt/DIY-underscorejs这一部分来DIY两个经常被使用的函数（或者说分析其源码），分别是throttle(节流函数)和debounce(防反跳函数)。这两个函数特别适合一些场景：事件频繁被触发，会导致频繁执

2016-12-28 12:03:31 674

原创一步一步DIY zepto库，研究zepto源码8 -- touch模块

移动事件提供了touchstart、touchmove、touchend，却没有提供对tap的支持。许多主流框架都是自定义实现了tap事件，消除300ms的延迟，当然包括Zepto.js.一步一步DIY zepto库，研究zepto源码8 -- touch模块

2016-12-05 11:36:19 1846

原创一步一步DIY zepto库，研究zepto源码7 -- 动画模块（fx，fx_method）

代码挂在我的github上，对应文件夹v0.7.1。 https://github.com/zrysmt/DIY-zepto注：要在github源代码中自己编译的话，要在基础包命令：npm run dist上要进行扩展了，输入命令：MODULES="zepto event fx fx_methods" npm run dist# on Windows> SET MODULES=zepto

2016-12-05 11:34:59 1674

原创一步一步DIY zepto库，研究zepto源码6 -- deferred模块

接下来我们来DIY另外一个重要的模块defrred延迟对象，这当然与源码有些许的不同，然而这并不重要。基础包上要进行扩展了，输入命令：MODULES="zepto event ajax deferred callbacks" npm run dist 代码挂在我的github上，对应文件夹v0.6.1。 https://github.com/zrysmt/DIY-zepto1.示例Dem

2016-12-05 11:34:07 1179

原创一步一步DIY zepto库，研究zepto源码5-- callbacks

Callbacks API用来管理回调函数，也作为deferred延迟对象的基础部分，今天就一起来探寻它的源码（对应src下的callbacks.js）。代码挂在我的github上，对应文件夹v0.5.1。 https://github.com/zrysmt/DIY-zepto注：要在github源代码中自己编译的话，要在基础包命令：npm run dist上要进行扩展了，输入命令：M

2016-12-05 11:33:01 1036

原创一步一步DIY zepto库，研究zepto源码4 -- ajax模块

上面的博文介绍的都是源码src下的基础模块zepto.js文件和事件模块event.js，下面接着看另外一个独立的模块–ajax模块ajax.js 代码挂在我的github上，对应文件夹v0.4.1。 https://github.com/zrysmt/DIY-zepto1.ajax的过程当global: true时。在Ajax请求生命周期内，以下这些事件将被触发。ajaxStart

2016-12-05 11:31:56 1526

原创一步一步DIY zepto库，研究zepto源码3 -- event模块

上面的博文介绍的都是源码src下的zepto.js文件，接着我们来看看zepto的事件模块，对应文件是event.js 代码挂在我的github上，对应文件夹v0.3.2（只实现on），v0.3.3(完整实现)。 https://github.com/zrysmt/DIY-zepto1.绑定事件实例Demo <div id="foo1">foo1</div> <div id

2016-11-30 10:08:51 975

原创一步一步DIY zepto库，研究zepto源码2 -- selector选择符

我们接着上一篇博客继续完成zepto.init的其余内容。基于Zepto 1.2.0版本。代码挂在我的github上，第一篇博客对应文件夹v0.2。 https://github.com/zrysmt/DIY-zepto整体的流程是： * 有传入context，回调自身：$(context).find(selector) * selector参数为空，直接调用$.zepto

2016-11-30 10:07:38 860

原创一步一步DIY zepto库，研究zepto源码1--基础模块

我在之前写了《一步一步一步DIY zepto库，研究zepto源码1.md一步DIY jQuery库》系列文章，然后发现再往下进行研究jQuery库的时候，由于jQuery库做了很多兼容IE6-8的内容，使其看起来比较繁琐，这也造成了jQuery源码的不宜读性。所幸作为移动端的jQuery库替代品-Zepto,是一个轻量级的针对现代高级浏览器的JavaScript库，它与jquery有着类似的ap

2016-11-21 16:34:21 1496

原创前端CSS&JS动画总结

使用CSS3，我们可以很方便快捷的改变元素的宽度、高度，方位，角度，透明度等基本信息，但是这些不能满足我们的需求，而且浏览器对于CSS3的兼容性不好，所以这时候就需要拓展更多的js动画。1.CSS3动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 动画</title> <s

2016-11-10 20:36:15 1841

原创 domReady机制探究及DOMContentLoaded研究

domReady机制是很多框架和库都具有的种子模块，使用了在DOM树解析完成后就立即响应，不用等待图片等资源下载完成（onload执行时候表示这些资源完全下载完成）的一种机制，那怎么实现呢。1）支持DOMContentLoaded事件的，就使用DOMContentLoaded事件； 2）不支持的，就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是，通过IE中的document

2016-11-10 20:16:20 1236

原创写给前端er的TCP/IP知识及《图解TCP/IP》读书笔记

1.分层OSI参考模型分为7层，TCP/IP分为四层。 2.物理设备介绍3.传输过程4.分层介绍4.1 数据链路层几个关键的相关技术 - MAC地址：用于识别数据链路层中互连的节点，在使用网卡（NIC）的情况下，MAC地址会烧入在ROM中 - 以太网（Ethernet）以太网帧式，前端是前导码部分，后面是帧的本体帧尾叫做FCS，用来检测帧信息是否完整4.2 网路层4.2.1

2016-11-08 13:04:40 2213

原创 React Router的一个完整示例

本博文提供一个单网页结构网页（SPA）使用React Router路由控制跳转的完整例子。关于配置可以查看我之前的一篇博客：[一步一步进入React的世界（React+Webpack+ES6组合配置）]

2016-11-04 16:46:35 33948

原创一步一步进入React的世界（React+Webpack+ES6组合配置）

看了很多博客，大都是把配置文件一笔带过，或者干脆不给出配置文件，然而环境搭建对于新手来说是既困难又重要，显然网络上的博客不利于新手开始学习。 BZ打算从从头开始，一步一步配置webpack，能够使用ES6+React组合开发，废话少说让我们一起来开始Webpack+ES6+React之旅。可以在我的github 中clone或者fork，本博文对应demo01 https://gi

2016-11-04 16:44:18 8480

原创动手DIY一个underscorejs库及underscorejs源码分析2

接着第一篇《动手DIY一个underscorejs库及underscorejs源码分析1》所有代码挂在我的github上。1.兼容requirejs和seajs模块化requirejs 最后加上 if (typeof define == 'function' && define.amd) { //定义一个模块并且起个名字 define('_unde

2016-10-27 12:38:03 524

原创动手DIY一个underscorejs库及underscorejs源码分析1

Underscore 是一个 JavaScript 工具库,它提供一整套函数编程的实用功能。他弥补了 jQuery 没有实现的功能，同时又是Backbone 必不可少的部分。underscore.js源码加上注释也就1千多行，用underscore.js作为阅读源码的开始是一个不错的开始，当然阅读源码的同时，手也不能停下来。下面我会写几篇博客，一边分析源码，一边根据源码重新DIY一份（_unders

2016-10-26 16:06:56 1420

原创前端自动化测试工具--使用karma进行javascript单元测试

前面我写了一篇博客是《前端自动化测试工具PhantomJS+CasperJS结合使用教程》其中使用CasperJS不仅可以进行单元测试，还可以进行浏览器测试，是个很不错的工具，今天介绍的工具是Karma+Jasmine+PhantomJS组合的前端javascript单元测试工具。1.介绍Karma是由Google团队开发的一套前端测试运行框架，karma会启动一个web服务器，将js源代码和测试脚

2016-10-14 14:21:58 12494

原创前端自动化测试工具PhantomJS+CasperJS结合使用教程

下面的安装测试基于window系统（win10）1.PhantomJSPhantomJS 是一个基于 WebKit 的服务器端JavaScript API,它全面支持web而不需浏览器支持，其快速，原生支持各种Web标准： DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于页面自动化，网络监测，网页截屏，以及无界面测试等1.1 安

2016-10-14 14:21:22 4810

原创 PHP爬虫最全总结2-phpQuery，PHPcrawer，snoopy框架中文介绍

第一篇文章介绍了使用原生的PHP和PHP的扩展库实现了爬虫技术。本文尝试使用PHP爬虫框架来写，首先对三种爬虫技术phpQuery，PHPcrawer， snoopy进行对比，然后分析模拟浏览器行为的方式，重点介绍下snoopy 所有代码挂在我的github上1.几种常用的PHP爬虫框架对比1.1 phpQuery优势：类似jquery的强大搜索DOM的能力。 pq()是一个功能强大的搜索D

2016-10-13 10:08:30 26691

原创 PHP爬虫最全总结1

爬虫是我一直以来跃跃欲试的技术，现在的爬虫框架很多，比较流行的是基于python，nodejs，java，C#，PHP的的框架，其中又以基于python的爬虫流行最为广泛，还有的已经是一套傻瓜式的软件操作，如八爪鱼，火车头等软件。　今天我们首先尝试的是使用PHP实现一个爬虫程序，首先在不使用爬虫框架的基础上实践也是为了理解爬虫的原理，然后再利用PHP的lib，框架和扩展进行实践。所有代码挂在我

2016-10-10 20:04:28 22354

原创 jqprint插件使用教程与源码实现分析

jqprint 是可以实现局部打印的一个轻量型的，并且基于jquery的js插件。博客从jqprint的使用教程和源码解析两个方面介绍这个小插件。1.jqprint使用教程全解1.1 jqrint基本使用教程1.2 jqprint打印的div中有input或者textarea等1.3 jqprint如何引入外部css2.源码分析

2016-10-10 19:46:35 8614

原创 javascript数据结构9-排序

排序算法 1. 基本排序 - 冒泡排序 - 选择排序 - 插入排序 2. 高级排序 - 希尔排序 - 归并排序 - 快速排序 - 基数排序（见【Javascript】四、JS数据结构-队列2-基数排序）注释：完整例子在最后，可以copy运行。测试数据平台： //数组平台 function

2016-10-09 11:35:30 988

原创 javascript数据结构8-图（Graph）

图（graph）图由边的集合及顶点的集合组成有向图：无向图：代码： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Graph</title></head><body><script> function Graph(v){ this.vert

2016-10-09 11:34:58 2006

遥感影像处理笔记

空空如也