做有态度的前端团队

网易FEG前端团队

  • 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 ......

    工具

  • 自定义命令行工具基于Nodejs

    每个人都会做一些简单的小工具去方便自己平时的工作,比如批处理文件。写个有界面的工具吧,有点费劲和没必要;如果能在命令行里面敲几个简单命令就能完成,就方便很多了,而我们又是前端开发,基于nodejs,学习的门槛就更低了 一、前期准备 需要下载两个node的插件 liftoff (执行命令行插件) minimist (读取命令行参数插件) 二、文件夹结构 需要将文件内容保存在指定文件夹才有效:windows用户一般为在C:\Users\用户名\AppData\Roaming\npm npm |--hello.cwd //windows下的命令入口文件(自定......

    JavaScript工具其他

  • 关于“新闻发布系统”旧模板,产生“业务异常”提示弹窗情况

    项目过程中,新闻文发布系统(用旧模板)操作时,遇到过两次,业务异常提示弹窗情况,这里简单列一下。 1、模板代码出现特殊字符 比如:如下代码,移动端底部通用的公众号弹窗代码,含有特殊字符&#xa0002;与&#xa0005;,导致保存模板的时候提示”业务异常“而无法保存。(这里有个疑惑,为什么他人建这个模板的时候,能保存成功。我在这个模板的基础修改,因特殊字符-(模板原有的)导致提示异常弹窗。知道原因的小伙伴扣下我哈) <!-- 公众号弹窗--> <div class="mask" id="md_attention&......

    工具其他

  • 关于代码结构的一些总结

    前段时间做图库,因为算是一个小的项目了,所以在做之前就考虑要周到一些,不能像做单页面一样,代码堆砌也可以正常运行。功能稍微复杂一些,就要考虑可维护性与可扩展性了,我就自己在做的过程中遇到的一些问题做一些总结吧。没有大片的代码贴,只是写一些体会而已。 数据分离 我们很早就会听说MVC之类的设计模式,目的也是为了实现代码的拆分,加强代码的可读性可维护性。图库的接口比较多,在开发以及维护过程中,为了方便适应接口的频繁更改(你懂的),组长很久以前提醒过我要把接口集中放在一个文件里面(当时我并没听进去,因为懒 T0T,但是我记住了),这时就派上用场了,如下: var HOST = &qu......

    总结

  • 记使用新模板语言踩的坑

    最近有个项目是用新cms语言来做的,因为是第一次使用,所以总会遇到一些小问题,在这里跟大家分享下。链接在此; 1、在使用新CMS模板语言之前记得安装cms插件 2、在发布系统添加新项目时,CMS类型记得勾选“是”,否则该项目就是普通项目,不会同步东西到CMS那边; 3、在项目中,include要用相对路径(否则在发布系统发布不了,会报错)。比如: global_include/config.html 4、使用新CMS模板语言的项目在发布系统发布后,会在六马系统自动生成相对应的模板和相对应的页面。 在项目中,我们需要在cms_config.js这个文件配置相对应的页面信息。如下......

    其他

  • 记第一次使用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......

    工具

  • 即时监听输入框值的变化

    最近做项目涉及到textarea限制输入长度的问题,搜集整理下跟大家分享: 如果需要即时监听输入框值的变化,建议使用onpropertychange事件! onpropertychange事件,顾名思义,就是property(属性)change(改变)的时候,触发事件。这是IE专有的!如果想兼容其它浏览器,有个类似的事件,oninput! JS写法: function immediately() { var element = document.getElementById("mytext"); if (/msie/i.test(naviga......

    JavaScript

  • 这片云加了特效,Duang Duang Duang

    首先,看下效果页面,感受一下。点我 是不是有点炫咧,这就是运用WebGL简单实现的效果,下面我们一起来看看代码吧。 Three.js 一个优秀的WebGL开源框架,官网地址https://github.com/mrdoob/three.js。点进去你会发现有好多酷炫的效果,而且基于这个库可以快速地写出3d程序。上面的镇魔曲手游官网的云海效果就是基于three.js实现的。 刚开始接触到Three.js,好多东西都是一头雾水的,然后官网的文档说明又是英文,阅读起来实在困难。在此强烈推荐一个中文基础教程,个人觉得对各种术语以及图形的构造和渲染理解起来相对简单些。英语厉害的同学可以忽略。......

    其他

  • 分享到qq好友的问题

    我们的分享组件,有一个很少用的分享按钮——分享给qq好友,如下图: 非常少用,一用就有坑。 设置分享信息问题 qq官方文档里面提到是可以自定义分享信息的,而我们组件也有设置的,但是实际测试发现有点问题: 分享弹窗时信息是正确的,如下图: 但真正分享后,显示在聊天窗口的是这样的: 测试地址体验: 第一个测试地址可以通过第二个例子体验,因为其它例子都是没有设置自定义分享信息的: 测试DEMO1》》 测试DEMO2》》 注意,这种分享测试是有缓存的,建议每次测试,地址加上不同的参数 如何解决 测试大半天,发现除了分享图片成功设置外,分享标题和分享描述都无法真正设置成功。 但是......

    其他

  • 移动端300ms点击延迟和点击穿透问题

    闲暇中get到一点小知识,整理一下与大伙分享。 一、移动端300ms点击延迟 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟。也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果。 原因 早些时候为了应对小屏幕浏览桌面端站点的问题,于是有了双击缩放,也是上述300 毫秒延迟的主要原因。 双击缩放与300ms延迟的联系: 假定这么一个场景。用户在移动端浏览器点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作,当用户一次点击屏幕之后,浏览器并不能立刻判断用户是确实要打开这个链接,还......

    其他

  • bootstrap3入门运用

    相信大家对于bootstrap并不陌生,但是对于传说中优先兼容移动端的bootstrap3,则不一定很熟悉。对此我进行了一番入门实践。 引用的文件如下: <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js&quo......

    其他

  • 关于图片垂直居中的几个方法

    偶尔会有这样的需求:在不知道图片宽和高情况下,需要让图片水平和垂直居中在某个容器下,而且,如果图片宽或者高超出容器,需要按照比例进行缩放,下面介绍几个常见的方式 Javascript篇 用JS的方式处理解决图片,思路就是预加载图片,然后取宽和高,计算位置,设置margin值,达到目的 //计算图片居中位置的信息 function getImgSize(img,maxWidth,maxHeight){ var ratio, picW = img.width, picH = img.......

    JavaScriptCSS

  • 浅谈跨域的几种方式

    跨域,在平常工作中经常遇到,也经常被一些人问到跨域的处理方式。虽然处理跨域的几种方式都有用过,但是每次提到跨域的时候经常晕乎一下先,所以在这里总结一下平时用过的几种跨域方式 1、通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据是不可以的,而在html中,能够实现跨域的就几种: link属性(css) href属性(a标签) src(img标签、script标签) 为了解决跨域的问题,结合script能够发起跨域请求的原理,产生了jsonp,即:动态的创建script标签,跨域的地址加上需要传送的数据和回调函数为script标签的src地......

    其他

  • 简单梳理下最近项目遇到的某些bug或者事件不支持情况,和解决方法。

    1、JQ监听输入框value值改变事件(propertychange),浏览器之间的差异。 a:js赋值给输入框时,google浏览器不触发propertychange,IE可以触发,所以这里处理下 解决:加下判断浏览器,js赋值不触发时,使用trigger("propertychange")触发 js代码: $('.dj input').bind('input propertychange', function() { if(val > 70){ alert("最大值是70,不能超过最大值"); ......

    JavaScript

  • 上传图片样式统一及注意事项小结

    本文主要介绍上传图片样式统一及注意事项 参考页面:梦幻西游手游广州见面会专题 前言: 首先我们了解一下各浏览器的浏览按钮的样式是不一样的,以下借用网上常用浏览器下上传文件样式的各种截图。 但是他们有以下几点共同特性: 1.都可以设置整体的宽度和高度,但在IE,火狐,opera中设置宽度是不影响浏览按钮的宽度。 2.谷歌中只要是input的区域都可以单击弹出窗口;IE中,单击浏览按钮可以弹出。 3、设置input字体大小,IE、火狐、Opera的浏览按钮都变大了(宽与高)(这点很重要)。 实现上传图片样式统一具体步骤: 效果预览图: 以下是实现的html代码: <a......

    其他