定义 Progressive Web Apps are experiences that combine the best of the web and the best of apps.They are useful to users from the very first visit in a browser tab, no install required.As the user prog
前言 移动端适配是一个十分重要的问题。在移动端页面中，其布局和交互方式可能相比于PC端少一些，但是由于设备的多样化，其适配问题就必须多加关注。设备情况种类繁多复杂，从网上的几张图中足以看出： 基本概念物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。 设备独立像素(density-inde
本文是客户端代理配置的几种常见方式的一部分内容，主要针对SwitchyOmega和Charles两种工具。 前言 代理服务器是开发过程中的常用工具。通过配置代理，可以统一线上线下环境，在开发阶段也访问线上地址，只不过将请求流量代理到本地服务器，这样便于调试。 Chrome插件SwitchyOmega 该插件可以通过Chrome应用商店进行下载，典型的配置过程如下：1.新建情景模式，选择
前言 本篇简单对Dva.js项目的工程结构进行说明，具体的概念，设计，文档，详见Dva.js官网 项目结构 mock属于前后端分离的一种实践，在后端接口未完全实现时，前端可通过mock数据的方式自测。 node_modules项目依赖采用npm管理，所以来包均在此目录。 srcassets项目静态资源目录（图片等） components无状态组件目录。根据react组件化的要求，该目录下
背景 对提升网页性能，提高加载速度和用户体验的不断重视。 定义与优势 DNS Prefetch，即DNS预获取，是前端优化的一部分。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。一般来说，在前端优化中与 DNS 有关的有两点： 减少DNS的请求次数 进行DNS预获取 现在大多数
前言 本篇结合在使用dva框架进行React应用开发过程中遇到的问题，简要分析React中state的机制和Redux对state的状态管理。 使用dva框架开发时遇到的一个问题 关于dva框架的基本结构和开发模式，在之前的文章中已经有所提及，见React开发框架Dva.js项目结构简单小结。下面的描述直接基于框架中的概念。 问题现象描述确定接口所需数据结构 在进行一个应用模块的开发，与
前言 webpack是一款极为灵活的前端模块打包构建工具。其诞生和流行主要是由于以下这几个发展趋势： 为了完成更加复杂的交互逻辑，一个网页中使用的js代码数量越来越多； 即便有了更多代码，却要求使用中有更少的整页面重新加载； 现代浏览器提供了更多的API接口。 基于这样的情况，大量代码就需要能够被良好地管理起来，像webpack这样的模块系统就为我们将代码切分为若干模块提供了很好的选择
前言 路由是单页应用中十分重要的概念。具体在react中，react-router为我们提供了一套完整的路由机制。 概述 项目history相关文档主页：Histories。文档的讲解十分详细。本文只是通过在实际项目中history的状态变化进行简单小结。以dva应用为例，经过这样的配置后，容器组件可以在props中拿到history对象和相关参数。 表现如上所示，history中包含了一
PAC文件 PAC文件是一些简单的javascript程序，可以在运行过程中计算代理设置，是一种动态方案。配置方案示例如下（以登录内部局域网为例）：在IE浏览器Internet选项做如下配置，填写的地址是目标服务器上的代理配置文件根据已有信息访问代理进行登录后可以使用。 PAC文件结构如下： Chrome插件SwitchyOmegaCharles Web Debugging Proxy注：以上
预加载目的 增强用户的体验，当用户需要查看时可直接从本地缓存中渲染。。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且，如果不设置预加载，那么当需要渲染十分大的图片时，可能就会有“逐行扫描渲染”的感觉，用户体验不好。使用预加载的话，我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示，而当图片数据完全获取后一次
前言 在web开发的各种业务场景中，http请求无疑是家常便饭，任何前后端交互数据都需要通过http请求进行传输。同时我们知道，HTTP响应有很多状态码，对应着很多种不同的服务处理结果。在这种情况下，如果项目中每一处http请求中我们都要对各种响应结果做以判断的话，那么整个工程中就会出现大量重复代码，这样做会带来不少问题，比如：重复劳动，代码结构不清晰、核心逻辑不明确，一旦对错误处理的需求变更
前言 这个问题描述的背景，是基于访问本地前端项目的nodejs服务器，但是却请求线上API数据接口的场景。如果能做到统一本地线上环境是更好的，有利于维护和调试，具体做法可以参考：使用SwitchyOmega和Charles配置统一的开发和生产环境、客户端代理配置的几种常见方式 概述 根据前后端分离的原则，前端独立进行功能的开发，在与后端真实接口进行对接之前，可以自己通过mock数据的方式进行
简介demo基于csv等格式的数据处理结果文件，对数据进行可视化展现。 模块划分 目标区域驻留人数统计 高铁到发站人流量统计 地铁到发站人流量统计 行政区客流量分析 城市职住分布 交互方式及效果呈现 demo源码托管于github，详见Github gcidea/data-visualization 下载完整的文件目录，浏览器（推荐Chrome）打开根目录下index.html即可。五个模块
简介 demo，在web端通过拖拽编排的方式快速定制活动H5页面，初步阶段完成。 交互方式及效果呈现 demo源码托管于github，详见Github gcidea/html5-draggable 使用流程1.拖拽页面布局至手机预览区2.根据不同类型的布局，点击可以编辑不同参数3.布局定制完成后可以向布局中拖拽添加素材4.页面定制完成后可以分享页面（TODO） 改进作为demo，目前还有