Web 开发技术分析，前端开发学习历程。
277 篇文章终于有时间写这篇文章了, ES2015 推出了JS 的 Promise ，而在没有原生支持的时候，我们也可以使用诸如 Promises/A+ 的库的帮助，在我们的代码里实现Promise 的支持； 如何使用 Promise 在讲具体实现之前我们还是先了解下我们如何使用 Promise 在我们的代码中。 function getData() { return new Promise((resolve, reject)=>{ request( your_url, (error, res, movieData)=>{ if (error) reject(error); else resolve(movieData); }); }); } // 使用 getData getData().then(data => console.log(data)) .catch(error => console.log(error)); 例子我们需要使用 request 详情 »
最近在项目里遇到了这种问题，大概就简单写下解题思路吧。 给出指定长度 n 然后创建一个该长度的的空字符串数组。比如 n=3; 输出应该是 ['', '', ''];比如 n = 2; 输出应该是 ['', '']; 使用 for 大概这个思路，就是最简单的也很容易让人作为垫底方案的实现； var a = []; for (let i=0; i < 3;i++) { a.push(''); } 使用字符串的分割 充分利用 join 方法 Array(3).join('.').split('.'); 使用 Array.prototype.fill() Array.fill 是 ES6 新增的方法， 详情 »
最近在团队内分享了关于集成测试这一块，大概从集成测试，到JS的单元测试，以及现有框架都有所涉及，希望帮助大家梳理下思路。 扩展阅读 持续集成系统的演进之路 不可错过的「持续集成」进阶指南 avajs/ava Sinon 入门,看这篇文章就够了 travis ic documents 详情 »
在前端工程中，可能我们在最开始开始的时候，需要集中进行很多模块的同步开发，虽然我们可以用 npm link 来进行，但是这个时候我们需要进行不同的 repository 管理，这个时候 lerna 可能是您的新选择。 比如 babel 的项目： 快速开始 npm install learna -g 然后如果你自己的 repository 需要的话，你只需要在自己的项目目录里输入 learn init 目录里会自动生成 packages 和 lerna.json。 /packages lerna.json package.json 这个时候你可以在package 下添加自己的 需要发布的模块包。 弄完之后，你可以输入进行启动。 lerna bootstrap bootstrap 会安装 package 的依赖，并且进行 link。这样你就可以在自己开发的模块中进行 引入了。 弄完之后，我们就需要发布了。 learn publish 详情 »
目前我们很多项目都开始使用的是 ES6 进行开发，但是我们在测试的时候都是需要转换到 ES5 才能运行我们的测试，但是我们又需要代码的测试覆盖率。下面将一步步的帮助您完成基于 ES6 源码的代码覆盖率报告的生成。 开始 我们先初始化项目，确保项目支出 ES6的环境，如果没有可以复制下面的依赖，然后 npm install。 "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-istanbul": "^4.1.5", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-1" 详情 »
这一篇主要分析一些辅助类函数的代码实现，扩展一些对 buffer 操作，web worker 等内容的学习。 performance 在 playlist-loader.js 中我们可以看到这行代码 stats.tload = performance.now(); performance 提供了一个高精度的时间访问 API。它能够查看到 Navigation Timing，Resource Timing这些准确的时间结果。 Navigation Timing API能够帮助网站开发者检测真实用户数据（RUM），例如带宽、延迟或主页的整体页面加载时间。 其中 performance.now()可以得到距离页面开始请求到现在相差的毫秒数。 web worker Web worker, Javascript是单线程的，所以如果页面中的Javascript有大量计算的话，很容易阻塞页面的动画或者交互响应。HTML5中的Web Worker就使Javascript的多线程编程成为可能。 在 demux/demuxer.js 中我们可以看到这么一段代码: import work from 'webworkify-webpack'; //... const vendor = navigator.vendor; 详情 »
上一篇 我们分析了 hls.js 的基本目录架构和代码执行流程，这一篇将主要分析 主链路实现代码的分析。 源码分析会点出核心的调用流程，其中一些不常用的方法或者比较容易理解的不做详细的注释。 hls.js 是模块打包的入口 import URLToolkit from 'url-toolkit'; import Event from './events'; import {ErrorTypes, ErrorDetails} from './errors'; import PlaylistLoader from './loader/playlist-loader'; import FragmentLoader from './loader/fragment-loader'; import KeyLoader from './loader/key-loader'; import StreamController from './controller/stream-controller'; import LevelController from './controller/ 详情 »
原文地址 ： http://blog.csdn.net/x_iya/article/details/52495824 @ N3verL4nd 视频 视频的播放过程可以简单理解为一帧一帧的画面按照时间顺序呈现出来的过程，就像在一个本子的每一页画上画，然后快速翻动的感觉。 image 但是在实际应用中，并不是每一帧都是完整的画面，因为如果每一帧画面都是完整的图片，那么一个视频的体积就会很大，这样对于网络传输或者视频数据存储来说成本太高，所以通常会对视频流中的一部分画面进行压缩（编码）处理。由于压缩处理的方式不同，视频中的画面帧就分为了不同的类别，其中包括：I 帧、P 帧、B 帧。 I、P、B 帧 I 帧、P 帧、B 帧的区别在于： I 帧（Intra coded frames）：I 帧图像采用帧内编码方式，即只利用了单帧图像内的空间相关性，而没有利用时间相关性。I 帧使用帧内压缩，不使用运动补偿，由于 详情 »
书的内容不多，也就190多页的样子。这是一本偏项目管理书籍,没有涉及多么技术细节的地方。 实际上现在项目开发都离不开科学，科学的技术实现，以及科学的项目管理。 项目管理一定是有序的推进的，合理的组织，合理的需求计划，确保小版本迭代，确保最小可完成性，注重测试跟进。其实大家看了很多软件项目管理的书籍，大同小异，最终还是要落到管理者手中。他们如何确保一个项目健康的发展，才能更好的推进项目朝着合理的方向前进。 其实于每个开发者而言，也真的非常有必要读一读。因为我们作为参与者的一员，我们需要去理解每个单元目标，对于不合理的需求和组织调配，我们需要有自己的想法。敏捷开发说白了，就是让目标足够系列化，我们将目标细分到一个可预期的时间完成。小目标也有利于测试更近，防止超出预期的缺陷产生。 事实有的时候过多测试并不是意见坏事情， TDD会让开发者可产生的缺陷趋于非常小的数值，事实有过项目开发的经验，我们会发现后期进行密集功能性测试，爆出来的 bug 所给人的数量级是完全不可预估，最终造成项目时间的延迟。测试一定是便随着我们开发的，它永远不是独立于我们开发之外的。 最后给出： ⭐️⭐️⭐️⭐️⭐️ 推荐。 详情 »
hls.js 是一款基于 Media Source Extensions 开发的，用于实现 HTTP Live Streaming 开源JavaScript类库。它可以实现将MPEG-2 和 AAC/MP3码流变成自制的 MP4的分片。并且可以直接绑定在Video 上，实现播放。 文章主要是通过解读源码，希望读者可以了解实现基本的前端 HLS 的主要流程，同事也可以扩展读者对 Media Source Extensions 和 video api 以及 视频编解码的相关知识有更进一部的了解。 第一篇文章可能会从整体方面，让大家理解一下调用的 整体流程，让大家对真个项目的基本代码架构有个基础的认识。 目录指南 只对和项目相关的文件进行说明 dist // 打包后的文件目录， src + cotroler - abr-controller.js // 用于分片筛选 - audio-stream-controller.js - audio-track-controller.js - buffer-controler.js 详情 »
