做有态度的前端团队

网易FEG前端团队

xiaojiecong 发布的文章

  • 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"),初步得到结论是:这种写法是合法的,而且总会返回最后一个操作数的值。 然后,网上查资料,得知了一个关键词 —— “逗号运算符”。 先来看个......

    其他

  • JS面向对象相关知识的一些学习笔记

    最近在看《Javascript高级程序设计》第6章面向对象的程序设计,结合自己的一些理解,以此文做个笔记吧,可能会写得比较零散。 1、理解prototype 我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。前面抄了《Javascrpt高级程序设计》里的一段话,概念我就不说太多了,说了可能也不太严谨,我喜欢通过写一些例子去慢慢理解它。下面举这个例子看看这个prototype......

    JavaScript

  • 写个简单的基于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......

    工具

  • 浅谈cookie、localStorage、sessionStorage的使用

    本文主要介绍cookie、localStorage、sessionStorage这三者的区别和基本的应用,不对的地方欢迎大家多多指教~ 一、cookie 1、cookie是什么 简单地说,cookie就是页面用于保存信息的,比如常见的保存用户登录的用户名和密码。 2、cookie的特性 大小有限,大概4K ; 数量有限,大概50条(因浏览器而异) 兼容性好 同域可共享一套cookie 有期限(会过期) 会伴随着http请求 ... 3、cookie的基本用法 调试cookie的时候直接点开本地的html文件是不行的(firefox可以),文件需要在服务器环境(或loca......

    其他

  • PNG半透明图片淡入淡出切换效果在低版本IE下的BUG

    问题描述: PNG半透明图片淡入淡出切换的时候在IE7、IE8会有问题,图片周围会出现黑块 图片淡入淡出切换是很常见的交互,用户体验也比直接显示隐藏,没有过渡要好。但在用PNG半透明图片做的时候,问题来了,我们会在低版本IE下看到PNG图片周围会出现黑块,非常难看。第一次遇到这个问题是,去年做的一个嵌入到“网易游戏助手”应用程序的一个轮播图,需求方甚至要求兼容IE6。我们知道,IE6是完全不支持PNG的,这次项目用到的就是PNG图片,最初以为只要兼容IE6,使它支持PNG透明就没啥事了,很简单。后面做交互的时候,就碰壁了,就是前面说的黑块。今天特意去看看线上项目相似的案例,发现......

    其他