FIS前端构建工具之初体验

在今年一月份的时候我在博文中介绍了自动化构建工具Grunt,工作开发期间也一直结合Grunt来开发。直到最近因为换了新工作,结果被告知项目中是通过FIS进行前端构建,为了尽快融入工作中,学吧!

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署开发流程等问题的前端工程化构建工具,FIS是由百度FEX团队开发一款开源项目,github地址为https://github.com/fex-team/fis

本篇文章是FIS的初体验,即介绍FIS的安装与常用功能,这些功能包含使用它来进行资源压缩、添加文件版本,资源合并等。如果你掌握了它,那么开发效率会极大提升,事实上,有时真觉得它比Grunt好用。好吧!不扯了,我们开始进入主题:

全文»

使用postMessage进行跨域通信

我们知道两个域名不同,或同一域名中协议、子域名、端口号其中一个不同时都属于跨域,无论是在平时的开发中,还是在面试里,我们会经常遇见跨域的问题。而针对跨域的解决方案,我们可以使用jsonp,也可以设置window.name,还可以通过iframe等,但这些都不是本篇重点,本篇的重点是postMessage。

window.postMessage方法提供了一套规避跨域的控制机制。当 window.postMessage 被调用时,会给目标页面发送消息,然后在目标页面触发message事件,目标页面再获取消息,然后进行相应的DOM或其他操作,当然我们也可以反向操作。好了,我们先看下他们的语法。

对于发送消息的方法有:

全文»

html5消息和震动api

在html5中提供了越来越多的API,一些是专门针对移动端的,比如手机的倾斜和旋转、还有桌面提示和机体震动。这些功能都和我们日常使用手机息息相关,移动端页面开发中我们可以把它们作为一种通知用户的形式。本文就来说下这两个API。

全文»

使用weinre进行跨终端调试

记得去年11月份我写过一篇名为 《chrome开发工具中emulation的详解》 的文章,介绍了pc端chrome浏览器下开发工具的emulation,它可以模拟终端设备各种特性,这使得我们可以在开发手机页面时用它来模拟页面在手机上的展示情况。尽管emulation做的很不错了,但毕竟是模拟,当测试拿着在终端有bug页面来问你时,你知道仅仅用emulation还是不够的。

如你所知,跨终端调试是非常繁琐的一个过程。起初为了快速开发,只是将页面边开发边放在emulation里测试,如果展示没有问题就交给了开发。但事后总会有测试跑到你面前来对你说,“这个页面在我的手机上好像有点问题哎”。

或许你会说,“是嘛?可是我用电脑模拟手机测试了页面没问题啊!?”可是你知道,bug终究还是要解决的。

全文»

css混合模式之background-blend-mode

我们在对图片进行色彩处理时,通常会用ps里的蒙版加色彩模式(如图),我们可以通过下拉去选择不同的模式种类,从而形成一张图片的不同效果。而如今随着css3的发展,这种只有在软件中的色彩模式也被应用到了css3的属性中,即background-blend-mode。

全文»