• 移除注释的完善思路:真的可以用正则实现?

    Posted by : lon.y@qq.com on 2018年7月22日

    导语 网上有很多自称能实现移除JS注释的正则表达式,实际上存在种种缺陷。这使人多少有些愕然,也不禁疑惑到:真的可以用正则实现吗?而本篇文章以使用正则移除JS注释为目标,通过实践,由浅及深,遇到问题解决问题,一步步看看到底能否用正则实现! 移除注释的完善思路:真的可以用正则实现? 1 单行注释 单行注释要么占据一整行,要么处于某一行的最后。 正常情况下不难,直接通过正则匹配,再用replace方法移除便可。 let codes = ` let name =

    阅读全文...

  • 5 分钟撸一个前端性能监控工具

    Posted by : lon.y@qq.com on 2018年7月22日

    编者按:本文作者是来自360奇舞团的前端开发工程师刘宇晨,同时也是W3C 性能工作组成员。跟着他一起学习一下前端性能监控吧~ 用(上)户(帝)说,这个页面怎么这么慢,还有没有人管了?! 为什么监控 简单而言,有三点原因: 关注性能是工程师的本性 + 本分; 页面性能对用户体验而言十分关键。每次重构对页面性能的提升,仅靠工程师开发设备的测试数据是没有说服力的,需要有大量的真实数据用于验证; 资源挂了、加载出现异常,不能总靠用户投诉才后知后觉,需要主动报警。

    阅读全文...

  • Javascript 将html转成pdf,下载,支持多页哦(html2canv…

    Posted by : lon.y@qq.com on 2018年7月22日

    最近碰到个需求,需要把当前页面生成pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :) 项目源码地址:https://github.com/linwalker/… html2canvas 简介 我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。 由于html2canvas只能将它能处理的生成can

    阅读全文...

  • 关于 Vue.js:那些好的,不怎么样的和糟糕的

    Posted by : lon.y@qq.com on 2018年7月22日

    使用新的框架和库总是会让人兴奋,但也有压力。即使经过一些评估,你也永远不会知道你将会碰到什么样的意外情况。 在几乎每天使用 Vue 大约两年后,我和它的蜜月期结束了,我终于可以从一些角度来写点什么了。 Tips:以下纯属个人观点。 好的方面 响应性(Reactivity) 数据绑定在前端领域是个大问题。现在我们更专注于数据,而不像使用 jQuery 一样对 DOM 进行微观管理。Vue 通过双向响应数据绑定系统巧妙地处理这个问题。 为实现这种响应性,Vue

    阅读全文...

  • 震惊! 滑动验证码竟然能这样破解

    Posted by : lon.y@qq.com on 2018年7月22日

    最近西部世界第二季很火, 小编经常分不清谁是机器人谁是真人 为了区分人类和机器, 有个人发明了一种测试, 他叫图灵~ 验证码就是一个典型的图灵测试, 英文名 captcha, 全称如下 Completely Automated Public Turing test to tell Computers and Humans Apart 全自动区分计算机和人类的图灵测试 目前主流的验证码有 图形验证码 短信验证码 滑块验证码 图中点选验证码 但现在的人工智能过

    阅读全文...

  • 基于React+Redux的SSR实现

    Posted by : lon.y@qq.com on 2018年7月22日

    为什么要实现服务端渲染(SSR) 总结下来有以下几点: SEO,让搜索引擎更容易读取页面内容 首屏渲染速度更快(重点),无需等待js文件下载执行的过程 代码同构,服务端和客户端可以共享某些代码 今天我们将构建一个使用Redux的简单的React应用程序,实现服务端渲染(SSR)。该示例包括异步数据抓取,这使得任务变得更有趣。 如果您想使用本文中讨论的代码,请查看GitHub: answer518/react-redux-ssr 安装环境 在开始编写应用之前

    阅读全文...

  • 洞察 video 超能力系列——玩转 mp4

    Posted by : lon.y@qq.com on 2018年7月22日

    前言 只要在 HTML5 中使用过视频播放的同学对 video 标签一定不会陌生,不过很多同学只使用了 video 的基础功能,实际上 video 拥有强大潜能的,只要姿势正确就能让其拥有超能力。不妨从下面几个场景来逐渐了解下video 未曾被发掘的神秘空间: * 清晰度无缝切换 * 节省视频流量 清晰度无缝切换 点播领域里 mp4 是最普遍、兼容性最好的视频容器,不过 mp4 也有它的局限性,比如常见的清晰度切换,我们是无法像youtube那样做到无缝切

    阅读全文...

  • 喂,快给我打一个小程序预览码

    Posted by : lon.y@qq.com on 2018年7月22日

    需求 开发小程序的朋友们随时都会听到一句话:“喂,快给我打一个xxx环境的预览码”,无论你正在干什么,都得赶紧地回一句:“稍等,这就给你打码……” 然后苦逼的你build了一个xxx环境的包,打开了微信开发者工具,点了一下预览,等了一下,预览码出来了,你复制丢给你的爸爸们。 终于有一天,你正在专心致志做一些不可描述的事情时,“喂,快给我打一个xxx环境的预览码”,这时你内心怒吼了一句:“老子不给你打码!你自己打去!” 于是就有了这个需求,要搞个东西让爸爸们

    阅读全文...

  • Web Worker 使用教程

    Posted by : lon.y@qq.com on 2018年7月22日

    一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。 Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。

    阅读全文...

  • 揭开JS无埋点技术的神秘面纱

    Posted by : lon.y@qq.com on 2018年7月22日

    一、背景 相信很多人都接触过“埋点”这个概念,无论是前端还是后端开发,我们都可以使用这门技术来生产出一些运营性质的原始数据(接口耗时、程序安装/启动、用户交互行为等等),然后分析它们得到一些抽象指标(例如留存率、转化率),进而决定产品运营或者代码优化的方向。现在业界有许多比较知名数据平台,比如Google Analytics、Facebook Pixel、Mixpanel、GrowingIO、诸葛IO、TalkingData、神策数据等数不胜数一大票,这些

    阅读全文...