Web 开发技术分析，前端开发学习历程。
277 篇文章我们现在已经非常习惯使用 Webpack 进行 JS 模块的打包处理。当然有的时候我们在优化代码的时候需要对所引用的模块进行体积分析，从而进行代码优化。当然这些工具有很多了，今天主要说下 webpack-visualizer。 webpack-visualizer 是一款 webpack模块分析插件，使用非常简单，你只需要： npm install webpack-visualizer-plugin --save-dev 然后编辑你的 webpack 配置文件： var Visualizer = require('webpack-visualizer-plugin'); //... plugins: [new Visualizer({ filename: './statistics.html' })], //... 然后打包的时候会在 打包目录下生产一个静态网页 statistics.html.打开你就可以看到各个模块的百分比，以及压缩包大小了。 详情 »
尽管现在很多大多数现代浏览器对 CSS3 的诸多特性已经开始支持了，但是有的时候我们还是避免不了对低版本的 IE 浏览器进行兼容性的样式写法。常见的思路无疑是写注释性语法: <head> <!--[if gt IE 9]><!--> <style> // your style rule </style> <!--<![endif]--> </head> 关于IE 注释性语句可以看 这里 当然你也可以通过 JS 进行 UA 测判断，然后在 body 加上 ie的 class ，然后在样式里进行限制。 .ie .container{ .... } 当然今天得重点是通过 media 详情 »
解决新版本 Chrome 提示 DOMException: The play() request was interrupted 解决新版本 Chrome 提示 DOMException: The play() request was interrupted 大概在一些新版本的浏览器中，我们是用 audio 或者 video 进行媒体资源播放的时候，可能会在控制台看到这个输出: Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). Or Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 如何触发？ < 详情 »
我们知道在 video 的标签中支持 preload的属性， 它表示可以 用于定义视频对于媒体资源的预加载从而达到更好的播放体验。它可以设置下面属性值： auto 表示整个视频都会进行下载，即使用户并不打算播放它。 metadata 只请求视频信息的 metadata 数据，比如长度。 none 不停止视频资源预加载。 测试表现 Chrome *版本： 61 * 我们测试Chrome设置为 auto 的时候加载数据大约为 (3.6M / 20.1M) Preload Size auto 3.6M / 20.1M none 0 M / 20.1 M metadata 896 KB / 20.1 M Safari 版本： 11.0 Preload Size auto 20.1M 详情 »
前些天 Apple 正式向用户推送了他们的新一代 Mac OS MacOS High Sierra 。这次带来了新的 Safari 浏览器，然而一个不好的消息，是 safari 重新制定了新的限播策略。点击这里 了解上个版本的播放限制策略调整。 现在网页用包含 video 或者 audio 的标签，如果涉及了 autoplay 属性，浏览器现在不再进行自动播放，而用户需要在 url 的状态栏进行设置（右击就好）： 里面会有三个选项： 允许自动播放 永不自动播放 停止播放含有声音的媒体 官方也给了建议，你可以通过代码来监听是否自动播放： var promise = document.querySelector('video').play(); if (promise !== undefined) { promise.catch(error => { // Auto-play was prevented // Show a UI element 详情 »
最近遇到了个平时很少遇到的 Bug，理论上代码压缩混淆后大多数都不会存在问题(之前确实没有遇到)，但是最近却不小心给遇到了。 大概在测试的时候，没有混淆前，代码是可以正确执行的，但是混淆后，代码就出现部分 JS 未顺利执行的情况。然后通过代码一步步调试，发现，在进行混淆的时候，会把一些变量命名转化成类似字幕 a, b, c等这样。然后这次在组件注册的时候，比较偷懒，用了 Function.name 来代表注册组件的名称，而不是独立命名。 自己在 ES6 偷懒这样写了： import PlayComponent from './play-component'; // ... ui.register(PlayComponent); // register 的实现 ui.register = function(func) { const name = func.name; } 这样就导致在压缩的时候的 传入的参数会变成 t 这样就会知道命名失效，始终都是 t 。 所以在实现的时候尽量少用 Function.name 详情 »
我们经常通过事件代理会取到一些元素，大概我们第一个想到的 tagName 来判断，但是这样的确需要写过 map 来判断。我们可以有个快捷的方法： const el = document.querySelector('.svg-inner'); el.ownerSVGElement // true 则表示式 svg 元素 如果 false 则不是 参考: https://stackoverflow.com/questions/20748836/how-do-i-tell-if-a-dom-element-is-html-or-svg#= 详情 »
caniuse caniuse 是一个在线查看浏览器的对某些特性的支持情况，如果你需要查看某些语法比如新的 ES6 语法 或者 H5 中一些新的 API （web worker, mediaSource等。作者还提供了一些开放的 API 让你将它嵌入到你的页面中。自己之前写过 《在自己的网站或者博客嵌入浏览器支持情况》 有兴趣的可以阅读下。 在线地址 icomoon.io icomoon.io 是一款在线生成 iconfont 或者 SVG sprite 的网站。你可以选择免费或者付费的字体图标（海量），然后会自动生成字体或者 SVG 代码，然后你可以打包下载，非常方便使用，比如自己的网站就采用了它生成的 SVG 图标。 在线地址 uigradients uigradients 是一款在线的编辑或者选择渐变的网站，你可以自定义渐变的色彩也可以从比较流行的渐变中选择一种，你可以获取到它的颜色值以及 css 代码片段。 base64-image base64-image 这个不必多说了，图片进行 Base64 压缩的网站，支持多种格式，包括 详情 »
Last year, I have tried to finish an interesting react-native project on my GitHub. React-native-percentage-circle is a component which supports you to define your percent data and draw a circle. And also you can use it as a progress bar and show some data in the circle. It does make a difference to my life. Opearation 详情 »
平常我们使用制作进度条的时候都是想的用 div 去模拟，在 html5 后，我们可以使用 input range 来实现这样的效果。 默认的效果如图: 你可以设置它的值得范围(min, max) 以及它的步长(step)。 这里的重点是设置它的样式啦: 取消掉默认的样式 在 chrome 和 safari 下我们可以通过声明: -webkit-appearance: none; 取消掉默认的样式，这时候效果如图: 这个时候我们可以设置它的 border 或者 background 等信息。 如果是 chrome 或者 safari 浏览器，以及其他支持设置 设置控制条轨迹的样式的浏览器可以使用伪类 -webkit-slider-runnable-track 来设置控制条轨迹的背景和边框样式; input[type='range']::-webkit-slider-runnable-track{ background-color: #eee; } 而 firefox 则需要使用 ::-moz-range-track: input[type='range']::-moz-range-track{ background-color: 详情 »
