hezz and gonng

场景旧有项目出于各种原因，不能进行大改版，但由于视觉提升或者业务兼容，又必须对原产品进行重构。需要接入新功能，但又不想增大旧项目体积，所以必须要通过引包来管理。市面上常见的包管理方式有npm，yarn，brew等等。但是今天说的都不是这些。...

requestIdleCallback 和 requestAnimationFrame如何使用requestIdleCallback原理使用方式演示效果requestAnimationFrame原理使用方式演示效果requestIdleCallback原理将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。函数一般会按先进先调用的顺序执行，然而，如果回调函数指定了执行超时时间timeout，则有可能为了在超时前执行函数而打

如你所知，npm作为一个包管理工具，能做到开箱即用，模块化可以说是其思想支撑。最近做了一个地图相关的项目，地图上四种元素，每种元素里面都有一个数据可视化模块(图表)。最开始写这个项目的时候，地图上只有一种元素：灯。在灯的图表上面加了一堆的东西，比如：chart，拖拽，消息处理，打印等等。后来发现修改过于复杂，于是进行模块化整理，无疑对代码可读性有较大的提升。之后灯连成组，再加上电表以及...

QQ, 360, 搜狗(都是极速模式下)QQ浏览器: navigator.userAgent.indexOf("QQBrowser")>-1360浏览器(这个最恶心, UA根本无法区分, 所幸在GitHub找到解决方案): window.showModalDialog && window.chrome搜狗浏览器: navigator.userAgent.indexOf("MetaSr")>-1

续前缘 … 循环定时器的写法, 很多人应该熟悉/* *func 回调 *interval 间隔时间*/setInterval(func, interval)大部分人(包括之前的我)都将循环定时器理解为: 每间隔一段时间就执行一次回调. 其实这种说法并不准确. 如果强行这么理解, 那就要加上两个条件: JS进程永远处于空闲状态; 回调函数执行时间小于间隔时间. 可以做个试验:setInt

JS中关于定时器, 有两种: setTimeout和setInterval,区别在于单次与循环. 众所周知, JS运行在单线程的环境中, 也就没有什么并行处理的说法. 既然是单线程, 那么肯定有个队列(FIFO)来排列代码的执行顺序, 要不然一拥而上去抢购, 那程序肯定 crash. 先来看一段代码:for(var i=0; i<5; i++){ setTimeout(function(

先解释下事件捕获和冒泡: 捕获—事件从最上一级标签开始往下查找，直到捕获到事件目标(target) 冒泡—事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。在嵌套很多层的情况下, 如下:html<div class="div1" onclick="outer();"> <div class="div2" onclick="middle();"> <di

队列: 遵循先进先出(FIFO)原则. 比如火车过隧道, 在入口, 车头先进去; 在出口, 车头先出去. 栈: 遵循先进后出(FILO)原则. 比如圆筒状的硬包装薯片, 不想吃, 就把薯片A放回去(肯定是放到离开口最近的地方); 过了一会, 又想吃了, 就拿出距开口最近的薯片A. JS中, 栈和队列的界限不是那么明显, 所以也无法准确了解他们之间的区别. 接下来, 我会用数组来详述栈和队列的不

我是小白 学过nodeJS的人, 对eventEmmit这个包应该很熟悉吧…它采用的是事件发布和订阅模式. eventEmmit可以自定义事件名, 并跟某些特定的元素绑定. 而本文抛弃nodeJS包, 尝试从自己的角度剖析这个神器的内在. 原生JS有一个createEvent方法, 跟createElement类似, 不过前者是用来创建自定义事件的. 如下:// createEvent的参数最好是

想必前端同学对这个很熟悉, 造成这个错误的原因, 大多数情况下是JS语法不规范—即只有开始的符号, 没有结束的符号. 很可惜, 我不是一小部分人, 所以, 我也遇到了这个问题, 并且被它困扰了三个月. 当然, 于我而言, 错误的原因跟其他人不一样. 我不知道有多少同学知道SSO(单点登录)的概念, 如果不清楚, 请点击链接. 首先说一下我遇到的情形: 上线大半年了, 页面突然之间崩了(包括样式

对于”http%3A%2F%2Fwww.baidu.com%2Fasd%3Fa%3D123”这种特殊字符被转义成16进制的字符串, 虽然知道”%3A”表示冒号(百分号”%”是转义符, 相当于正则当中的反斜杠”/”), 但是很少人会采用这种匹配字符串的方法来强行转义, 因为这种匹配不仅不准确, 而且效率很低. 对于前端的”首屏加载”而言, 实在过于痛苦. 而JS当中早就有了这种方法, encode

犹记得高中时的语文, 说是读书, 不妨说成是读心–作者的心情。肄业后, 本以为此后不再分析作者的想法; 凡事就怕一个但是, 如今看源码, 仍然要分析作者的想法。 —————————————————————————————————————merge: function(a, b) { for(var c = +b.length, d = 0, e = a.length; c

说到跨域,就必须要知道同源策略.以下是来自百度百科的解释:同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响; 可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。 同源意味着域名, 端口, 协议必须保持完全一致, 否则无法通信. 好了, 问题来了. web前端愈加复杂的今天

正常浏览器环境下, 如果在不加载babel等转义文件的前提下, 开发者如果在准备就绪函数中(如:onload() 或者 $.jQuery.ready())注册函数(fn), 那么调用的时候可能找不到(实例化对象除外).原因就在于, 事件和函数的绑定关系. DOM渲染完毕之前, JS的onload和ready方法肯定没有运行; 但是渲染的时候就已经在JS中寻找已经注册过的函数,去和DOM绑定在一起.

…….续前缘前文说到的jsonp, 正在向前端靠拢. 而本文所说的postMessage, 跟后台已经没有任何关系了. 因为用的是HTML5 新API: canvas, video, audio, history, postMessage. 百度百科对它的解释如下: PostMessage是Windows API(应用程序接口) 中的一个常用函数，用于将一条消息放入到消息队列中。 战前准备: 两

…….续前缘……. 前文讲到, 用类似爬虫的方式抓取数据; 本篇则讲解使用jsonp解决同源问题. jsonp原理如下: 利用script标签的跨域性, 在地址后面携带参数, 被请求方则根据参数来处理请求. 需要后台和前端一起合作才能完成. 战前准备工作: 两个**非同源**webSite(必须). 楼主用的是本机(localhost)模拟非同源网站, 一个是wamp(localhost

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl