随着功能不断增加，不断迭代更新，React应用会越来越臃肿了，性能也将随之下降。本文从打包和运行两个方面着手，谈谈React应用改如何优化。
一、webpack打包优化1、缓存node_moduels我公司的项目每次上线部署的时候，虽然说都要要Jenkins上，但项目越来越多，每个项目部署占用时间都很长，导致每次部署完一个环境的所有项目耗费很多时间。
如果将同一项目的node_mudules在每次打包完毕后缓存起来，下次打包前先判断是否与上次node_moduels相同。若相同，则直接使用上次缓存的node_modules,否则才重新安装依赖包。
那该如何实现上面所说的逻辑？
检查packages.json的 md5；
打包完成后以该次packages.json的md5值作为文件名，压缩node_modules并缓存到指定位置；
下次打包前，同样先检查当次packages.json的 md5，若相同直接使用上次的node_moduels;
具体的SHELL如下：
1234567891011121314151617181920212223242526272829303132333 ...
现在前后端分离是比较流行的开发方案，在 SPA 的开发过程中难免需要存储一些数据到浏览器，比如认证判断的 Token 。现代常用浏览器的本地持久存储方案基本分为Cookie、 LocalStorage（sessionStorage）和IndexedDB。本文就不讨论 Cookie了。
一、LocalStorage(sessionStorage) 的概念LocalStorage 是 HTML5加入的一个新特性，从命名就知道其目的是作为本地存储来使用，解决了 Cookie 存储空间不足的问题，一般 LocalStorage 在浏览器的存储空间是5MB,而 Cookie中每条 cookie 大约是4KB。SessionStorage 与 LocalStorage 唯一的区别是：SessionStorage 在会话结束时就会被 清空数据，而LocalStorage 可以持久存储。
LocalStorage的优劣1、LocalStorage存储空间明显提升，可以存储较多的数据；
2、LocalStorage可以长久存储数据，只要存储一次就可以长久保留在本地，除非主动清空数据；
3、Loca ...
从2017年9月开始我转为前端开发，当时公司没有一个单纯专注前端的开发人员，我接到任务后首先是考虑的是应该使用哪种前端技术（框架）。在简单对比Angular、Vue 和 React 后，我选择了 React。因为我曾经花了时间了解过，而且我特别喜欢 React 的 JSX 语法和单向数据流绑定方式。本文就简单总结一下这一年我使用 React 的实际经验。
一、必须关注React 动态我开始使用 React时的版本是16.0.0，到现在16.5.0，我感受到最大的变化是：1、 新增了Context，翻译为：上下文。有了这个 API 我们可以简单的共享组件间的数据。比如：在向多级子组件传 props 时无需每一级组件都要传递 props。在顶级组件创建了Context.Provider,在任何子组件中使用Context.Consumer就可以获取到顶级组件的props。
2、 多种ref的创建方式。在最初，要访问 DOM ，需要在组件增加ref={myRef}，而且 ref 的值只能是string。到现在，我们不仅可以利用原来的方式创建（旧不被官方推荐），还可以 ...
在上一篇的文章中，学习了 TypeScript 的基本知识，以及 TS 在 React中的基本使用方法。在本文中，我们深入了解 TS在 React 中的实践。本文将采用 ant-design 作为基础的 UI 框架。
一、用 TS 创建 React 的 SFC(无状态组件)在本次实践中，我们基于 antd 创建一个统一的 Input Form组件。该组件可以同时支持基本 Input、InputNumber和 Input.Text,我们将定义 elementTypeEnum来判断该使用哪个输入组件。
1、引入 antd 的 Form, Input, InputNumber组件（HXInputItem）
1234import { Form, Input, InputNumber } from "antd";
2、定义输入类型的枚举
123456enum elementTypeEnum { normal = "normal",//普通的字符串输入 number = "number",/ ...
最近开发工作缓下来了， 就抽时间看看传说中的神器 TypeScript。主要描述一些 TypeScript 在 React 项目中的一些使用方法。
一、TypeScript 是什么TypeScript 是 JavaScript 类型的超集，它可以编译成纯 JavaScipt。TypeScript可以在任何浏览器、任何计算机和任何操作系统中运行， 并且它是开源 的。
二、 TypeScript 的基础知识1、 TypeScript 的基本类型：TypeScript支持与JavaScript几乎相同的数据类型，此外还提供了实用的元组、枚举类型方便我们使用。如：let exist: boolean = false
2、TypeScript 的变量声明：let和const是JavaScript里相对较新的变量声明方式。 像我们之前提到过的， let在很多方面与var是相似的，但是可以帮助大家避免在JavaScript里常见一些问题。 const是对let的一个增强，它能阻止对一个变量再次赋值。这跟 JavaScript 的其他变量用法几乎一模一样。
3、 TypeScript 的接口：Ty ...
在日常开发工作中， 一个项目不止一个开发者， 但是每个人的代码质量、风格、格式规范肯定不一致，带来的影响是整个项目看上去比较零散、奇怪。那有没有方法使得所有人写出来的代码质量、风格一致呢？那就要使用 ESLint 进行质量检查和修复；使用 Prettier 进行美化、格式化，比如缩进、行的最大长度等等；在样式的编写中，大量的css和scss代码书写中，或多或少会出现问题，可以使用 StyleLint对样式代码进行格式化。以上俗称：静态代码分析。
一、ESlint 基本知识1、概念ESLint是一个插件化的javascript代码检测工具，它可以用于检查常见的JavaScript代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套ESLint配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。
2、使用方法在开始使用ESLint之前，我们需要通过NPM来安装它：
12npm install -g eslint
创建一个 js 文件，如：test.js, 内容随意，但要能正常运行。
用 ESLint检查上述文件：
12eslint ...
今天来聊聊SVG技术。本文先简单阐述svg的概念和一些特性， 再分享一些我在项目实战中用到的svg例子。
一、入门概念Scalable Vector Graphics (SVG) 可扩展矢量绘图，是一种用来描述二维矢量图形的XML标记语言。
特性SVG 可被非常多的工具读取和修改（比如记事本）SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下被高质量地打印SVG 可在图像质量不下降的情况下被放大SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）SVG 可以与 Java 技术一起运行SVG 是开放的标准SVG 文件是纯粹的 XMLSVG 的主要竞争者是 Flash。与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。
基础形状矩形 <rect>圆形 <circle>椭圆 <ellipse>线 <line>折线 <polyline>多边形 <polygon>路 ...
最近公司的业务系统和几个对外应用Web端进入了最后测试阶段，随之带来的问题是每次出现问题都要测试人员主动联系我们开发者，但有时又无法重现， 既浪费时间， 又无法及时有效解决异常。因此，我觉得搭建一个前端异常监控系统， 用来实时收集前端异常， 及时解决前端异常。
一、开源监控服务的优劣在日常的工作中，我们在开发某个功能或者应用之前， 都会先搜寻一下是否有相似的开源项目，以此来提高开发效率。在前端监控系统这类项目中， 我比较喜欢Sentry这个项目：
1、功能齐全，包括多项目管理， 团队与成员的管理，可视化统计分析，issues分配等等。2、SDK丰富， 包括了JavaScript， Nodejs， Java等等收集工具。3、可以采用Docker安装，容器化管理数据。4、项目一直在维护更新。但功能齐全的背后带来的问题就是，每个公司都会有客制化的需求， 而要想在如此庞大的项目中二次开发是十分吃力的。对于我们公司目前的开发力量开始， 暂时无法分配人员专门客制化Sentry。
二、收集日志的方法收集日志的手段，基本是两种，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径， ...
最近针对日常业务需求使用react封装了一套基于 ant-design 的[业务组件库], 大概记录下整个开发过程中的心得，在这里只对开发过程中的选型和打包等进行讨论，后续再对具体组件的封装进行讨论。
概述随着公司的 React 应用越来越多， 在编写每个应用时都会封装各自的组件， 但久而久之会发现， 有些组件是每个应用都可以使用的。 然而，在每个应用内维护相同的功能组件， 既浪费时间， 组件功能和样式又得不到同步。于是我就在想能不能把这些通用组件抽取出来， 创建一个企业内部的业务组件库， 打包发布到 npm 内部管理服务器。
由于目前公司采用的组件库是 ant-design ，本次的内部组件库是对 ant-design 的二次封装，以便满足公司的业务。虽然 antd-pro是基于 ant-desgin 的中后台业务组件库， 但也无法完全满足公司的业务逻辑， 所以还是自己做一些功夫， 定制自己业务组件库，暂且命名为 hx-react-components
搭建 npm 私服npm 私服有几个选择：
sinopia 已停止维护和升级
Verdaccio 一个sinopia的for ...
最近项目中需要在网页上预览 PDF，目前了解到 有<iframe>、<object>、<embed>标签 和 pdf.js、pdfObject等几种第三方解决方案， 但还有一些注意事项。
一、<iframe> 预览 PDF在 PDF 预览中<iframe> 算是一种古老但高效的解决方案。现在所有浏览器都支持 < iframe > 标签，直接将src设置为指定的PDF文件就可以预览了。src可以是url、bolb 或者 base64,一切问题都容易解决， 关键是要标记 资源类型type=“application/pdf”
二、<embed>预览 PDF< embed > 标签定义嵌入的内容，比如插件。但是这个标签没有提供回退方案，与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到，经测试在 Safari 下无法预览。用法如下：
12<embed src=" ...
通过上篇的准备工作， 我们基本掌握整个爬虫的工作流程。接下来我们就要实现该爬虫系统了。在程序语言上有了改动， 因为最近基本是 JavaScript开发， 所以我们采用 Nodejs 作为开发语言， 而不是 PHP。毕竟， 一个程序的好坏跟程序语言没有必然联系。
一、搭建框架1、使用 package.json初始化。2、构建目录结构，目前的目录结构如图。
解释：
src
dev.js spider.js index.js 根据部署环境调用不同文件作为入口。
config 数据库和 程序参数等基本设置
constants 一些种子网站列表和 api 等定义。
core 核心的爬虫类， 定义播放表获取、下 html 代码 html解析类和 transmissiorpc 连接类等核心类库。
storage 数据库 Schema 定义和 CRUD 的基本服务类。
3、定义 Mongoose Schema这里我们使用 Mongoose 来操作MongoDB，首先需要定义Schema。
1、 播放表 Schema，用了存储从字幕组 APP 获取的美剧播放表。
123456789 ...
从今天开始我们来写一个美剧自动嗅探下载器， 名为 TVDragon， 为我们提供美剧‘一条龙服务’。 其工作原理是根据已订阅的美剧名称（英文名），自动搜索当天的美剧播放表， 从种子网站搜索 torrent 列表， 筛选，自动下载该种子，接着上传torrent到树莓派的 transmission 上进行bt下载。
一、背景本人是个美剧爱好者，平时几乎每天都有一部美剧更新，而我每天我要做的事情是上 <zimuzu.tv> 去查看当天的美剧播放表， 然后到<torrentz2.eu>搜索所追美剧的种子， 然后根据清晰度筛选，下载，上传后 transmission 进行资源下载。整个过程虽耗时不长， 但有时当天的美剧有好几部， 而且不一定资源已上传， 这就需要重复上述的步骤了。有时之后就会忘记了， 因此造成晚上下班后才去下载，不能好好的享用“美剧大餐”了。这就是 TVDragon 诞生的背景了。
二、必备条件(材料)若要TVDragon 成功运行， 需要满足以下条件
7x24小时运行的Linux服务器（树莓派）
宽带网络
transmission 软件
PHP7. ...
最近几乎所有精力都投入到 React 的开发中，可以说对 JS 的理解更深入了， 使用起来也得心应手了。但对于 PHP, 我还是想找点东西捣鼓下的。这次我们就用 PHP 的爬虫框架 Goutte 来爬取多个 代理IP，实现一个简单的自动投票系统， 该系统可以切换 IP，从而避免被封禁。当然，这里只是抛砖引玉， Goutte 的强大之处远不在于此。
一、关于 GoutteGoutte 是一个 PHP 爬虫框架，提供了优雅的 API 进行链接抓取，和解析 HTML 文档。Goutte 主要使用以下 PHP 类库：
页面解析：Symfony 的 BrowserKit ， CssSelector 和 DomCrawler；
HTTP 请求： Guzzle
相信各位 PHPer 对Guzzle这个库很熟悉吧，这里不展开讨论了。简单来说， 利用 Goutte 可以快速的爬取和解析 Html、xml 的文档， 得到我们的目标数据。
准备工作 既然 Goutte 是解析 HTML 结构的， 那解析规则必须已经设置好，分析目标网站的 DOM 结构是我们的首要工作。
这里我使用的是https:/ ...
经过一个月的开发，公司的 React 项目基本进入测试阶段，最开始是手动打包并传送到目标服务器，效率十分低下。w闻将介绍如何用 Jenkins 实现 React 项目的自动打包和部署。
安装Java 和 Jenkins1、略过安装 Java2、下载 Jenkins 的 war包3、根据提示安装 Jenkinswar包启动方式：java -jar jenkins.war –httpPort=8080,端口可自定义，然后访问http://ip:8080
4、插件管理点开系统设置的插件管理页面，如果可选插件列表为空，点击高级标签页，替换升级站点的URL为：http://mirror.xmission.com/jenkins/updates/update-center.json并且点击提交和立即获取
5、返回可选插件，选择如下插件安装（如果已安装，请忽略）1).Publish Over SSH2).GitLab Plugin3).Email Extension Plugin
插件配置配置Publish Over SSH在Publish over SSH处点击增加，添加SSH server ...
由于公司产品需要，最近一个月开始了 web 前端开发，技术栈是 webpack+react+mobx 的 react 全家桶架构。
什么是 react文章的开始还是有必要介绍一下 react 的概念。react.js 是 FaceBook 研发的前端 JS 框架，主要 特色是使用虚拟 DOM，性能卓越。其本质还是使用 javascript 作为开发语言。但需要注意的是现在一般使用 ES6的新特性作为主流开发。这里不详细阐述各个概念了，可以自行查看相关资料。
应用框架结构设计这次的 react 开发应该算是我真正第一次独自负责，距离上一次的 react学习以及过去几个月的时间，当时react的版本 已经到了v15.6(现在 v16已经发布)，每个大版本的特性还是不大一样。尤其是 react-router4和 router3的区别很大，所以重新阅读最新的 react 开发文档是最稳妥的。由于这次的应用是对之前用传统 jquery 开发的系统进行重构，所以在应用目录结构上是未知数。所有东西都是我自己去把握和决定。在开始的时候，使用了 koa2作为开发服务器，当时是基于这样的考虑：上线后 ...
Vagrant 是一款用来构建虚拟开发环境的工具，非常适合 php/python/ruby/java 这类语言开发 web 应用，“代码在我机子上运行没有问题”这种说辞将成为历史。本文通过安装php开发环境homestead来说明 Vagrant 的安装使用与优点。
我们可以通过 Vagrant 封装一个 Linux 的开发环境，分发给团队成员。成员可以在自己喜欢的桌面系统（Mac/Windows/Linux）上开发,这样不仅保证代码运行环境一致，还可以节省部署开发环境带来的不必要时间开销，让团队新成员快速投入开发工作中。
安装步骤1、安装VirtualBox下载地址：https://www.virtualbox.org/wiki/Downloads;虽然 Vagrant 也支持 VMware，但是VMware 对应的 Vagrant 版本也是收费的。
2、安装 VagrantVagrant 的下载地址https://www.vagrantup.com/downloads.html;下载好后，打开 Vagrant镜像一步一步 ...
上一篇文章中主要讲述一个完整的HTTP请求过程，了解一个连接是如何建立的。那么，这里再来聊聊web 中常用的几种通信方式，主要讲述其概念和应用场景或实现方式。概况一下，主要有四种方式，它们分别是短轮询、长轮询(comet)、长连接(SSE)、WebSocket。它们大体可以分为两类，一种是在HTTP基础上实现的，包括短轮询、comet和SSE；另一种不是在HTTP基础上实现是，即WebSocket。
Ajax 轮询1、原理（1）、客户端向服务器端发起请求，和上面最基本的请求原理是一样(2)、不同的是该请求方式是通过Ajax实现，设定一定的间隔时间对服务器发送请求(比如1 秒)，通过setInterval()方法，实现每隔一段时间向服务器发送请求的功能。(3)、服务器端返回结果到客户端
2、实现（1）、前端实现
1234567891011121314151617181920212223242526272829303132<html><head><meta charset="utf-8"><title>短轮询aj ...
现在大多数情况都需要使用计算机，而大部分计算机都会联网。那么在联网的过程中计算机和其他网络设备需要做哪些操作才开确保网络请求成功并返回需要的数据呢？ 本文着重阐述 http请求过程中，即从浏览器请求开始到成功显示返回数据的过程， 会有哪些操作呢？
完整的http 请求过程概括为0、浏览器本地缓存匹配；
1、本地hosts映射对比;
2、本地dns缓存解析；
3、远程(运营商）dns解析获得服务器ip地址；
4、浏览器发送tcp连接请求包(syn)；
5、TCP/IP连接建立起来后，浏览器就可以向服务器发送HTTP请求了；
6、服务器端接收到请求，根据路径参数，经过处理（包括数据库操作， 计算操作等等），把处理后的一个结果的数据返回给浏览器；
7、浏览器收到结果后， 进行 html 解析， 渲染页面， 把页面呈现给用户；
关键概念HTTP连接 HTTP协议即超文本传送协议(Hypertext Transfer Protocol)，是Web联网的基础，也是手机联网常用的协议之一，HTTP协议是建立在TCP协议之上的一种应用。HTTP连接最显著的特点是客户端发送的每次请求 ...
最近做个人微信机器人挺热门的， 同时很多人也用来对自己的微信好友做分析和统计， 比如：简单的就是利用微信好友的头像做成一张大图， 让朋友圈的好友都看到彼此， 觉得蛮有意思的! 网上已经有 Python 或 Nodejs 的实现了， 我就想用 PHP 来实现一下。
1、如何选一个微信爬虫。所谓的微信爬虫就是利用微信的 web api 做一些自动化的事情，这里强烈推荐由 PHP7实现的vbot, 所有的东西都可以在 vbot 的文档里找到， 在微信 web api 的范围内你都可以为所欲为了。注意： 本文所有的微信数据都基于 vbot 获取的。2、如何爬取微信好友的头像。首先要获取的是你的微信好友列表， 在 vbot 的基础上我们可以这样做：1File::saveTo(__DIR__.'/contacts.json', $contacts['friends']);
把微信好友列表写入到一个文件中。然后对这个文件进行处理， 提取微信好友的头像链接和下载。123456$contactAmount = $friends->count(); ...
PHP7已经发布有段时间了，其最大的特点是快。其性能高于 HHVM， 是 PHP5.6的两倍。本人就整理一些PHP7.0.x的新特性，也当做自己学习和复习PHP7。
0、可变参数PHP7允许传入可变个数的同类型参数12345678<?php function sum(int ...$ints){ return array_sum($ints);}var_dump(sum(4, 5, 6, 7));
输出1int(22)
1、标量类型声明标量类型声明 有两种模式: 强制 (默认) 和 严格模式。 现在可以使用下列类型参数（无论用强制模式还是严格模式）： 字符串(string), 整数 (int), 浮点数 (float), 以及布尔值 (bool)。它们扩充了PHP5中引入的其他类型：类名，接口，数组和 回调类型。12345678<?php// 强制模式function sum(int ...$ints){ return array_sum($ints);}var_dump(sum(4, '5' ...
