强子的专栏

前端性能优化之----静态文件客户端离线缓存1. 前言上次的文章给大家分享了怎么在webpack打包阶段去将自己的项目优化到极致。文章链接：将webpack打包优化到极致_20180619前端优化是无止境的，这篇文章主要介绍我在前端工程化方面对项目优化的一些探索和经验总结。2. 探究业务的瓶颈H5页面的性能瓶颈，网络因素几乎可以占到80%。不管是减小产出文件体积，还是使用HTTP2.0或...

前言：看了下博客的更新时间，发现9月份一篇也没有更新。一直想着都要抽时间写一篇的，不然今年的更新记录就会断在了9月份。但是还是应为各种各样的事情给耽搁了。当内心突然涌起一股必须写点什么的时候，突然发现自己把写博客的“套路”都忘了。(●´ω｀●)φ一直认为自己还是一个比较热爱思考的人。最近一直在思考两个问题：自己做技术的初衷；自己的技术成长之路；当然这两篇文章自己也在润色之中，相信很快会跟大家见面。

原文地址：http://stackoverflow.com/questions/37367200/what-is-the-deferred-long-running-timer-tasks-warning-in-the-chrome-devtools在开发过程中遇到了题目描述的问题，使用 Google 搜索，中文答案很少，而且没有令人满意的。就在segmentfault上提了一个问题，而且很快我就发

引子：1.JavaScript 中的变量类型和类型检测1.1原始类型1.2引用类型1.3內建类型的实例化1.4函数的字面形式1.5正则表达式的字面形式1.6类型检测1.6.1原始类型的检测1.6.2鉴别引用类型1.6.3鉴别数组1.6.4原始封装类型2.JavaScript 中的函数2.1定义函数的两种方式2.1.1函数声明2.1.2函数表达式2.2JavaScript函数的参数2.3函数的重载2

声明：这个系列为阅读《JavaScript设计模式与开发实践》 ----曾探@著一书的读书笔记1.职责链模式的定义使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象处理它为止。2.2.1 简单职责链模式故事背景：用户可以支付定金购买手机，并且可以获得优惠券。没有支付定金的就是普通用户，进入普通购买模式，没有优惠券，且

声明：这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.策略模式的定义将不变的部分和变化的部分隔开是每个设计模式的主题。 定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。2.策略模式的目的将算法的使用与算法的实现分离开来。3.传统语言中的策略模式和JavaScript中的策略模式对比3.1.传统语言中的策略模式使用策略模式来实现计算奖金v

引子：最近公司项目有个需求，微博客户端中， h5 的页面上的某个按钮能够与native 交互呼起摄像头，扫描二维码并且解析。在非微博客户端中（微信或者是原生浏览器，如：safari）呼起系统的拍照或者上传图片按钮，通过拍照或者上传图片解析二维码。第二种方案需要在前端 js 解析二维码。这样依赖一个第三方的解析库jsqrcode。这个库已经支持在浏览器端呼起摄像头的操作了，但是依赖一个叫getUse

声明：这个系列为阅读《JavaScript设计模式与开发实践》 —-曾探@著一书的读书笔记1.单例模式的特点和定义 保证一个类仅有一个实例，并且提供一个访问它的全局访问点。2.传统面向对象语言的单例模式2.1传统语言描述的单例模式JavaScript实现var Singleton = function(name) { this.name = name; this.instanc

装饰者模式的定义：装饰者(decorator)模式能够在不改变对象自身的基础上，在程序运行期间给对像动态的添加职责。与继承相比，装饰者是一种更轻便灵活的做法。装饰者模式的特点：可以动态的给某个对象添加额外的职责，而不会影响从这个类中派生的其它对象；继承的一些缺点：继承会导致超类和子类之间存在强耦合性，当超类改变时，子类也会随之改变；超类的内部细节对于子类是可见的，继承常常被认为破坏了封装性；传

1.改变页面标题的内容有时候我们开发 h5页面的时候需要动态的去更新title 的名字，这个时候使用 document.titile='修改后的名字';就可以解决我们的问题。或者使用 //当前firefox对 title 参数不支持 history.pushstate(state,title,url);这种方法不仅能够修改 title 而且能够修改 url 的值，并且将这些信息存

关于微信小程序之前只是听说，并没有引起我太大的兴趣。周一被小程序刷屏，然后就顺手搜索了解了一下。发现小程序已经火遍了整个程序员圈子。刚好团队内部有个需求需要微信小程序。就紧急对微信小程序进行了调研，阅读过开发者文档后总结了以下的几个开发者比较关心的问题：微信小程序提供给开发者的能力有哪些；在微信小程序易忽略的知识点和代码安全问题；PassFE和PassRD的学习和开发成本；注意：这篇文章删除

背景因为 Team 本身工作性质的问题，平时需要值班。值班数据可以导出为本地的Excel文件。之后需要对Excel中的结果数据做分析，并且制作图表写周报发给老大。对于我这种对word都玩不转的人，别说用Excel中强大的公式分析数据了��。轮到我值班的时候就用nodejs写了一个脚本自动处理Excel中的数据，并且将数据再写入Excel文件。后来分享给同事，得到了老大的夸奖，自信心爆棚 ��之前仅

微信小程序开发知识点总结1.微信小程序的目录结构1.外联公共样式的方法根据微信的官方文档，是支持@import的方式一如外联的公共样式的 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html但是在

基于Nodejs的前端灰度发布方案1. 灰度发布和A/B测试简介灰度发布将某个功能灰度发布（逐渐放量）给特定线上人群，避免新功能全量上线带来的风险。上面的图可以通过两个方面来理解：蓝色实线和蓝色虚线访问Nginx服务器，nginx通过负载均衡将流量分摊到后端服务器。黄色的线是应用了灰度的流量（配置Nginx规则）可以将特定流量分发到特定的机房，以达到对特定用户应用产品新功能；...

背景我们团队有个项目由于开发时间较长，且是前后端杂糅的开发方式，维护成本很高，在线上暴露的问题很多。而且因为对接了公司一百多条产品线，每天都会接到大量的客诉和产品线反馈的问题。2017年11月份以产品为主导，从产品层面对流程进行重新设计，对该项目进行了前后端的重构。作为前端的负责人我用这篇文章分享下，整个过程从技术选型，开发，上线的一些经验。技术选型的思考首先我们先看下下面我们项目

概要最近的一个项目中使用了axios来代替XMLHttpRequest来发送请求。也是遇到了一些问题。这里做下简单的记录。GET请求不同方式结果不同官方文档我们可以看到的示例demo如下：// 直接在请求理解里面拼接参数get参数axios.get('/user?ID=12345') .then(function (response) { console.log(response);

事件原因：之前使用Nodejs开发的一个网站。在网站上有一个页面有个功能，允许用户上传图片或者粘贴一张图片链接。服务端读取用户上传的图片信息或者是请求用户填写的图片链接获取图片信息。如果是用户使用上传功能，前端可以在input控件上做下限制上传文件的类型，后端再做下校验，以保障获取图片文件的合法（或者是安全）。如果是用户填写的图片链接，其中隐藏的安全隐患就比较大了。如果用户填写不是正常的http、h

前言：虽然说是记录fis3+react的一次开发经历。但是在项目的上线前几天收到公司TC委员会的邮件，因为react的开源协议让找到react的替代方案，并且逐步下线线上的react项目。真的是可以用“出师未捷身先死”来形容这次开发了。不过经过调研以后发现在业界已经有了一些开源方案来替代react 。最有名的就是preact的了吧。而且按照官网的方案来做迁移的话，迁移的成本也挺小的。后续会介绍下迁移

背景：前段时间大部门下新成立了一个推广百度OCR、文字识别、图像识别等科技能力在金融领域应用的子部门。因为部门刚成立，基础设施和人力都是欠缺的。当时分到我们部门的任务是抽调一个人做新部门主站前端开发工作。本来说的是只负责页面的开发工作。当我参加过需求品审会后，了解到新部门人力不足，而我今年主要任务又是在我们部门做基于Nodejs的前端后端分离的架构升级工作。在这之前就是用Nodejs写了两个内部系统

MDN社区（即Mozilla开发者社区）具有很多高质量中英文文档。它是我开发时遇到概念模糊的地方经常访问的网站。因为默认搜索一些代码，优先显示的都是英文。但是恰恰这些显示的英文文档是有中文的。每次都是自己手动切换下中文显示。所以就想着在点击英文链接的时候，能够自动跳到中文链接。需求分析点击英文的搜索结果自动跳转到中文文档地址。问题分析其实在MDN的每篇文档的页面上都提供了一个select表单供用

前言较早的Nodejs开发者为了实现程序的同步都会使用几个“工具”，回调，promise，co，或者是generator。记得写过一个递归删除目录下文件和文件夹的需求，用以上方法都是各种不爽（关键我就是想简单的写个递归啊）。就在前几天Nodejs发布了v7.6.0版本。Nodejs开发者终于不用使用第三方模块就可以使用async和await让自己的程序在不需要异步的地方保持同步的特性了。就在Node

事件绑定函数的demo如下：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <meta charset="UTF-8"/> <title>测试事件绑定函数</title> <s

1.a标签的相互嵌套很多时候我们会有下面的场景，如下图中所显示的那样。点击1区域（从图上看1区域包含2区域）和2区域跳转不同的链接。正常的代码结构应该是：<ul> <li> <a href="#1"> <div>内容1区域 <a href="#2"> <div>按钮2</div>

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，访问者便可顺利地在你的网站上冲浪，并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览你网站内容时获得更好的用户体验。本文将分享三个不同的预加载技术，来增强网站的性能与可用性。方法一：用CSS和JavaScript实现预加载实现预加载图片有很多方法，包括使用CSS、

引子：最近遇到一个问题，就是在each()函数中怎么模拟for循环中的break和continue的操作。所以就查看了jQuery关于这个函数的文档，并且总结一下。演示代码如下：<div> <ul> <li>你是第1个</li> <li>你是第2个</li> <li>你是第3个</li>

1.js对象浅拷贝简单的赋值就是浅拷贝。因为对象和数组在赋值的时候都是引用传递。赋值的时候只是传递一个指针。看下面的实例代码：var a = [1,2,3];var b =a ;var test = {name:'xiaohong', age:15};var c = test;console.log(a);console.log(b);console.log(test);console.

原文地址：http://caibaojian.com/js-name.htmlJS中获取各种宽度和距离，常常让我们混淆，各种浏览器的不兼容让我们很头疼，现在就在说说js中有哪些宽度和距离。1、名词解释screen：屏幕。这一类取到的是关于屏幕的宽度和距离，与浏览器无关，应该是获取window对象的属性。client：使用区、客户区。指的是客户区，当然是指浏览器区域。offset：偏移。指的是目标甲

1.js中函数表达式的定义 表达式（expression）JavaScript中的一个短语，javascript会将其计算（evaluate）出一个结果。程序中的常量是一个最简单的表达式。变量名也是一种简单的表达式，它的值就是赋值给变量的值。复杂表达式是由简单表达式组成。 ——摘自《javascript权威指南》一个经典的函数表达式的定义方法：//函数表达式的

javascript闭包获取table中tr的索引<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en">

addEventListener共有3个参数，如下所示：element.addEventListener(type,listener,useCapture);参数参数说明element要绑定事件的对象，及HTML节点。type事件名称，注意去掉事件前边的“on”，比如“onclick”要写成“click”，“onmouseover”要写成“mouseover”。listener要绑定的事件监听函数

之前看到一段代码，很是不能理解，然后就查找资料并且找网络上得大牛请教，最后弄懂了这段代码，然后就拿出来总结一下。1.挖坑先来看一段代码：var arrTest = [];for (var i = 0; i < 3; i++) { //注意函数没有传参数进入函数体 arrTest.push(function () { console.log('>>>' + i);

因为公司内部一个纯后端团队要做一些适合自己团队的web页面，所以就有了这次分享。知识都是很基础，有的知识也只是做了解简单介绍。主要是想让大家对前端有一个基本的了解。现在做一个总结。欢迎大家拍砖。

现在最流行的获取后端的（浏览器从服务器）数据的方式就是通过Ajax了吧。今天就来详细的来学习下这个知识吧。如果使用ajax来访问后段的数据，浏览器和浏览器端的js做了那些工作呢？我做了一个图，请大家看一下：1.原生js的Ajax请求的方式由上面的图我们大致的知道了ajax访问后端数据的一个过程。最重要的就是检测浏览器，创建XMLHttpRequest对象的过程： 代码如下：/* 判断是否支持XM

其实在平时的代码开发中这并没有什么问题，但是很多的时候我们都希望自己的代码能够变的优雅和简单易懂，并且尽可能少的减少重复的代码。对于以上的问题，在js中存在一个`switch`来代替这样的多`if`语句判断。

myslide 插件开发知识点总结和 css3 动画性能问题的研究这篇文章主要是总结最近开发过程中遇到的问题。有几个问题又是不容易发现原因的问题，但是最后的结果又是很简单的。1.手机端的 slider 插件是否有必要集成点按操作对于我自己开发的版本来说还是集成了这个操作的。但是参考了京东，天猫，淘宝电商网站首页的 slider 图片轮播插件都没有支持点按操作。那么是为什么呢？我想到的答案可能如下：

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。 这篇文章主要就是结合上篇《“瀑布流式”图片懒加载代码示例》再来看看图片“懒加载”的一些知识。图片“懒加载”的主旨： 按照需要加载图片，也就是说需要显示的时候再加载图片显示，减少一次性加载的网络带宽开销。先来看一段代码： var conf = { 'loa

最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候，也顺便把自己的代码重构了一下。 这里主要是来写写自己的优化过程。俗话说： 一个程序猿的进步是从对自己的代码不满意开始的。开始之前先来看上篇文章遗漏的两个问题和几个知识点，是自己重构的过程中需要用到的：1.移动端1px像

既然是要编写插件。肯定会有一些功能的需求。 功能需求： 1.能够控制灯的自动播放 2.灯的旋转方向 3.灯的旋转速度 4.奖品的旋转速度

rem 单位在做移动端的h5开发的时候是最经常使用的单位。为解决自适应的问题，我们需要动态的给文档的更节点添加font-size 值。使用mediaquery 可以解决这个问题，但是每一个文件都引用一大串的font-size 值很繁琐，而且值也不能达到连续的效果。就使用js动态计算给文档的fopnt-size 动态赋值解决问题。/** * [以iPhone6的设计稿为例js动态设置文档 rem

移动端使用 zepto 做一些基于触摸的动画的时候，需要开发一个函数库。功能：实例化对象以后能够，触发相应的事件，能够返回给我，当前的移动方向和 X 轴 或者 Y 轴 的移动位移。var TouchDirection = function(e) { var startThat = {}, moveThat = {}; this.touchStartEven = f