做有态度的前端团队

网易FEG前端团队

xiaojiecong 发布的文章

  • 移动端视频转序列图片播放

    页面使用视频嵌入的问题: 1.微信支持视频内嵌播放,支持自动播放 2.IOS 10以下safari不支持视频内嵌及自动播放 3.IOS 10及以上safari支持视频内嵌及无音轨视频的自动播放 4.安卓下原生浏览器播放控制栏规范不统一,部分机型无法隐藏,内嵌播放及自动播放规范不统一 5.安卓和IOS的第三方浏览器会弹出小窗口播放视频,无法内嵌显示 解决方案 将视频转化成序列帧,用JS控制img的src进行切换,视觉上达到和播放视频一样的效果。这种方式也是有局限性的,视频不能太大,建议控制在5s以内,本次项目就是5s的视频导出的base64 js达到了3.5M,勉强可以用。所以3s视......

    其他

  • Fiddler调试总结

    前言 Fiddler无疑是一个很强大的工具,日常工作中着实帮了不少忙,这里总结下它的用处。 请求重定向至本地文件 由于我们早期的一些老旧页面,没有托管在我们的Gitlab上,而是直接存放在FTP,所以修改就没那么方便。有时修改这些页面的js或者css,就用了Fiddler的这个线上调试功能,挺实用的。 打开你要调试的页面,如图左侧,你会看到有各种请求,然后右侧工具栏切换到AutoResponder选项。 选中你要调试的文件(一般是JS,CSS),然后拖拽到如图位置 找到 Find a file选项,选择你要用于线上调试的本地文件,然后点save保存,就可以在本地调试线上......

    总结

  • 如何更好地对hexo博客管理

    很久没搞点事情了,最近一时兴起用Hexo+Github搭建了个人博客。本文就不详细介绍这个搭建的过程了,主要写下如何对Hexo博客做版本控制与持续集成。 Hexo 安装好hexo之后,hexo init得到如下文件,这些就是博客最原始的源文件。 --- |--node_modules |--scaffolds |--source |--themes |--.gitignore |--_config.yml |--package.json source文件夹存放的是md文件,也就是平时我们用markdown语法写的文章。themes文件夹存放的是主题相关的文件,默认的hexo主......

    总结

  • 基于NodeJs的自定义命令行图片压缩工具制作

    前言 目前,我们小组用的fis已经集成了图片压缩这个功能,通过一行简单的命令,就可以完成对图片的批处理,非常方便。我这里把核心代码抽出来,做了一些修改和扩展,制作成一个独立的工具。 较小组使用的压缩工具,新增了压缩单个或多个文件功能,由于我经常给官网换版头,有时一次就是替换1张,或者2张图而已,所以感觉没必要把所有图片压缩一遍。另外还新增了图片等比缩放功能,这也是源自一次需求,虽然少见。有一次,需求方丢来了20张大概是4000*3000这种尺寸的图片,最大的达到了10M,就算压缩后仍然很大,所以有必要缩小一下图片尺寸。虽然PS可以做批处理缩放,大概就是新建一个“动作”,然后让它重复......

    工具

  • 使用PhantomJS对网页截屏

    PhantomJS 可以看做是一个没有UI界面的webkit浏览器,这个东西用途很广泛,可以用来做网络监控,网页截屏,自动化测试等等,这里抛砖引玉,做个简单的介绍,就主要介绍下它截图的这功能。 1.安装 到官网下载phantomjs.exe,然后复制文件所在路径D:\chrome download\phantomjs-2.1.1-windows\bin(这个是我的路径) ,在环境变量的系统变量中找到path,添加即可,这样就可以在任意地方执行CMD命令操作PhantomJS了。 2.使用 demo.js var page = require('webpage').create(......

    工具

  • 写了一个Chrome扩展,方便查看NBA赛况

    前言 最近写了个Chrome扩展,在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序,可以看看这篇文章,里面有一些介绍:chrome工具优化的学习小结...当然我写的这个比较简单,没那么多复杂的功能。这个其实和我们平常写web页面差不多,所以我们前端可以写,于是我也来试试这个东西~ 先来看看效果图: 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......

    工具

  • 快速搭建一个本地服务器

    我们都知道,有些情况本地直接点开HTML文件是不行的,需要在服务器环境才能正常访问。我们可以通过搭建本地服务器进行访问,比如我们用的fis本身内置了这个,这次介绍node的一个小模块http-server,可以快速地搭建一个本地服务器。 安装 npm install http-server -g 使用 使用非常简单,进入当前目录,输入http-server 即可,还可以加上其他的一些参数,比如http-server -p 3000 -o,-p指定端口,-o启动服务后自动打开浏览器,更多参数,请查看文档 小结 这个是我平时有些时候会使用到的一个小东西,非常便捷。比如做个小d......

    工具

  • 关于函数声明与函数表达式的一些理解

    通常我们定义函数会用下面两种写法: 1、函数声明 function test(){ //... } 2、函数表达式 var test = function(){ //... }; 表面上看没什么区别,实际上解析器会在执行任何代码前先读取声明,而函数表达式要等到解析器执行到它所在的代码行才会真正被执行。下面举个例子: var test = function() { console.log(2) }; function test() { //这个是函数声明,将会被提升 console.log(1); } test() 结果是输出2,这个代码片段会被......

    JavaScript

  • JavaScript逗号运算符知多少

    前不久看到一道挺有意思的题目,这次就围绕这个来写点东西~ 首先来看下这个东西~ var a = (1,2,3); console.log(a) 答案是什么?为什么?答对了么?第一次看到这个,会以为是报错,因为一直没见过这种写法,而且实际项目中几乎也没人这样写吧,也看不出有啥实际用途。结果这个出乎意料输出了一个数字 3。心想这就奇怪了,于是多试了几个例子,比如 a = (1,2,3,"s",5,"4"),初步得到结论是:这种写法是合法的,而且总会返回最后一个操作数的值。 然后,网上查资料,得知了一个关键词 —— “逗号运算符”。 先来看个......

    其他

  • 写个简单的基于jq的轮播图插件

    感觉自己一向都挺依赖插件的,基础也比较差,很少自己尝试写点什么,于是这次就写了这个,逻辑比较简单,功能比较单一,还有待改进~ 查看demo>> 1、首先写个面向过程的程序,后面再逐步改写成面向对象程序 css .slide{width: 582px;height: 248px;position: relative;margin:20px auto 0;overflow: hidden;} .slide .banner{overflow: hidden;position: absolute;width: 582px;height: 248px;left: 0;} .s......

    JavaScript

  • Weinre+Gulp+BrowserSync结合实现远程调试

    weinre,大家可能都听过,是一个远程调试工具。继上次学习了gulp,这次突发奇想把它们结合起来做一些事情。虽然在Chrome下可以模拟移动端,但毕竟会有偏差。这次我想达到的目的是,在PC端开发移动端项目,然后可以在移动设备上实时看到效果,这是一种很棒的体验。 1、安装和启动weinre 全局安装weinre npm install weinre -g 我的node版本是v0.12.6,一开始安装报了个错。原因是npm安装的时候无法匹配到weinre插件所对应安装的版本。安装的时候指定它的版本为 2.0.0-pre-I0Z7U9OV 就可以了。如 npm install ......

    工具

  • 记第一次使用gulp

    最近接触了一下gulp,入门还是比较简单的,有兴趣的同学可以了解下~ gulp,和我们项目使用的FIS一样,是自动化构建工具的一种,帮助我们处理一些重复,繁琐的事情,比如压缩,合并,刷新页面等等,有利于提高我们的工作效率,也会避免一些由于我人工手动去做出现的错误。下面做个简单的介绍。 1、全局安装gulp(都懂的,先要安装node) npm install -g gulp 如果安装比较慢可以使用淘宝NPM镜像 ,如 npm install -g gulp --registry=https://registry.npm.taobao.org 2、创建配置文件package.js......

    工具