Category Archives: 前端开发
IN：前端开发 标签： baidu, codesearch, js, tangram, 定制, 开源, 框架 评论: 1
tangram是什么
tangram是百度前端开发团队开发的一款JS框架，该框架具有一下特点：
- 可通过定制创建最适合的轻量级版本
- 多种机制实现扩展，良好的插件支持
- 丰富的中文文档以及案例，容易上手
- 全浏览器跨平台兼容
- 平滑的版本升级体验
tangram codesearch
tangram codesearch是一个tangram方法定制的工具，他可以定制你需要的tangram方法，将没使用到的方法去除，从而减少文件的大小，提升加载速度。
但在真正开发和使用这个工具的时候，你会发现这个工具很鸡肋，为什么呢？主要有下面几个原因：
- 项目之初你可能根本不知道你要用到哪些方法，可能只能将一些最基本的方法选定，待开发过程中慢慢去重新定制。这种方式非常耗费时间。
- 项目之初使用全部的tangram，项目完成时统计使用到哪些方法，然后将这些方法打包。首先统计需要耗费一定的时间，其次升级时都要做这个事情很麻烦。如果有哪个方法不在使用了，可能并不会删除。
由于上面2种定制方式都带来很多问题，所以一般情况下直接使用全量的tangram，不再考虑使用定制的tangram了。
有没有办法解决这个问题呢？
如果有一种工具，可以自动分析开发的代码中使用到哪些tangram方法，然后将这些方法打包，那就可以很好的解决这个问题了。
继续阅读 » IN：前端开发 标签： github, pjax, qwrap 评论: 0
之前在制作gplus主题的时候，使用到了ajax+history.pushState，并且把这个功能封装成了pjax，由于当时使用的JS框架是jquery，所以pjax是基于jquery写的。
最近决定写一个基于qwrap的pjax，之前一直没时间弄，昨天终于给弄好了。由于qwrap支持retouch，所以使用上和jquery区别不是很大，拿之前的代码稍微改改就可以了。
下载和使用方式
源代码地址：https://github.com/welefen/pjax
由于pjax里使用了ajax组件，qwrap核心库里是不包含ajax组件，所以需要将ajax打包进来。ajax组件可以使用https://github.com/welefen/qwrap/tree/master/resource/js/wagang/ajax，或者你也可以直接引用这个JS http://www.welefen.com/wp-content/themes/gplus/js/qwrap.js。
由于qwrap里不支持live模式和核心包里没有动画组件，所以pjax for qwrap版本默认不支持动画，并且使用方式和jquery版本稍微有些差别，具体如下：
QW.pjax(selector, { //selector一般为a[href="^http://domain"]
filter: function(){}, //filter函数，将不符合条件的a过滤掉
container: '#container',
cache: true,
storage: true
})
其他使用方式（包括服务端判断方式）都和jquery版本的一样
IN：前端开发 标签： compiler, compressor, fl, html压缩, java, yui 评论: 1
之前为了编译平台写过一个前端语言的分析、检查、压缩工具FL，实际使用中主要用它的检查和支持模版语法的HTML压缩功能。集成在编译平台里一直运行的很好。现在把剥离出来，形成一个单独的JS/css/HTML压缩工具。
javascript/css/html压缩工具地址： http://www.welefen.com/lab/compressor/index.html
目前支持的功能有：
1、使用YUI Compressor或者Google Compiler压缩javascript
2、使用YUI Compressor或者FL压缩css
3、使用FL压缩html。虽然HTML压缩是支持模版语法的，但目录没有开启。如果有人需要的话可以将这个功能开启。
继续阅读 »
IN：前端开发 标签： d2, d2沙龙, 编译平台 评论: 8
9.25有幸被邀请到d2沙龙（北京）给大家做前端编译平台的交流，由于时间很短，讲的很快，很多地方都是一带而过。
大家如果还有什么疑问，欢迎评论，我会一一解答。
IN：Chrome扩展, 前端开发 标签： 排行榜, 豆瓣电台, 音乐电台 评论: 2
之前写过一个音乐电台的插件，目前已经有1500名安装用户了，可以参见这里。并且给一些操作加了统计，从统计数据上来看，各个电台的使用率差别还是挺大的。下面大致介绍下各个电台的使用比率。
一个月(08.20 – 09.20)电台使用比率
继续阅读 »
IN：PHP, 前端开发 标签： baidu, 服务, 百度, 编译平台 评论: 3
之前写过如何减少代码上线过程中对线上服务的影响，文中提到的方法是将所有的代码上到服务器的一个临时目录，然后一起操作cp到目标目录。这种方式虽然可以大大的减少上线过程中对线上服务的影响，可以影响时间缩短到2分钟以内。但对于0故障的服务来说，2分钟的服务故障还是非常不能接受的（比如：百度新首页）。
由于静态文件和模版是上到不同的服务器，静态文件还部署到CDN。模版是和后端代码放在一起。这样如果还是原文件名的不能彻底解决问题。
我们知道，任何的静态文件最开始都是在模版里引用了才生效，比如：在模版里有个link，或者有个外链的script。
通过分析，如果上线的时候，将静态文件先上，并且将有改动的静态文件全部重命名的话就可以彻底解决这个问题。一方面静态文件重命名后不会干扰线上正在使用的静态文件，另一方面模版还没上的时候，这部分新的静态文件将不会引用，待模版上线后就会全面切到新的静态文件模式下。
继续阅读 »
IN：Chrome扩展, 前端开发 标签： chrome, google, music, web store, 人人, 开源, 电台, 虾米, 豆瓣, 音乐 评论: 49
音乐电台是一款支持百度听、豆瓣电台、酷狗电台、虾米电台、酷我电台、乐酷电台、多米音乐、音悦电台、亦歌电台、人人电台、一首歌电台、百度音乐盒、搜狗音乐盒、Google音乐盒等14种电台的chrome插件，该插件已经放到chrome web store里，目前已经有700名安装用户。
通过收集大家的一些反馈，发现播放模式和选项不是太好用。最近对这块进行了重新的规划，周末在家将代码进行了完整的重构和升级，将版本升级到2.0。升级的功能如下：
继续阅读 »
IN：前端开发 标签： ajax, chrome, google, gzip, pushstate, sdch 评论: 3
概述
我们知道，为了加快网络传输，一般都使用gzip对文本进行压缩。如果你现在用最新版的chrome去访问页面，然后打开network控制面板，查看http headers，细心的你会发现在Request Headers里的Accept-Encoding不再是gzip,deflate，而是多了个sdch，变成了gzip,deflate,sdch。如图：
继续阅读 »
IN：前端开发 标签： ajax, chrome, firefox, jquery, onpopstate, pjax, pushstate, qwrap, replacestate, tangram 评论: 8
上篇文章讲到如何使用ajax+pushState打造无刷新改变URL的方式。虽然这种方式是将ajax、history.pushState、history.replaceStatte、window.onpopstate等几个技术点结合，但在具体使用中还是要考虑到很多情况的，如：
1、改变内容的时候也要改变title
2、不支持的浏览器如何处理
3、事件如何绑定，是否使用了delegate模式
4、ajax异常处理
5、ajax前后的自定义事件等
介于有上面等多的疑问，将ajax和pushState封装下，供后面使用还是非常有帮助的。本文就是对pjax(ajax+pushState)的一个介绍
继续阅读 »
IN：前端开发 标签： ajax, api, google, hash, html5, jquery, onhashchange, onpopstate, pjax, pushstate, replacestate, twitter 评论: 7
表现
如果你使用chrome或者firefox等浏览器访问本博客、github.com、plus.google.com等网站时，细心的你会发现页面之间的点击是通过ajax异步请求的，同时页面的URL发生了了改变。并且能够很好的支持浏览器前进和后退。
是什么有这么强大的功能呢？
HTML5里引用了新的API，history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的。
继续阅读 »
