imgbox

移动开发Javascript框架Zepto.js

目前流行的Javascript框架是比较臃肿的,只需要看看jQuery就知道了。而当你面对的是移动开发,以及只针对现代浏览器的开发,一个灵活、精简的框架会更加适一些。

今天主要介绍的就是一款这样的框架,那就是Zepto.js

使用混合了支持桌面版和移动版开发的框架目前主要存在以下问题:

处理关于兼容性的问题,保证了接口的显示和使用效果,但却大大的增加了文件的大小,下面是一段jQuery源码中的代码片段:

或者是类似这样的代码:

如果你开发的目标是针对现代浏览器,不管是桌面端或者移动端,这些判断完全是没必要的,如果能够精简掉这些代码,那将大大的节省流量以及页面加载效果。

好吧,这就是推荐使用Zepto.js的最重要的原因,众所周知近两年来发展速度最快的莫属于移动设备的增加了,而作为开发者而言,如果仍然使用那些“古老的”代码框架,将严重影响到移动端的加载速度以及展示效果,因此移动端的开发人员亟需更改开发方式和代码架构。

另外值得称赞的一点是,Zepto.js的API接口与jQuery是兼容的!是的,你没有看错,也就是说如果你以前使用过jQuery框架,那么上手Zepto.js对你来说绝对是小菜一碟!

下面来举几个例子说明一下:

看起来是不是特别的熟悉?对,这些用法和jQuery完全相同,虽然Zepto.js不是支持了所有的jQuery方法,但却集成了jQuery强大的DOM处理能力,并在此基础上增加常用的方法,比如animate,ajax等。

遗憾的是,当你习惯了使用jQuery plugin在页面中去增加展示效果的网站,那基本上是不能用Zepto.js取代jQuery框架的了,这可能是唯一的美中不足了。

另外值得一提的是,Zepto.js增加了一些针对触摸屏幕的事件,解析来简单的介绍一下:

swipe:处理典型的滑动手势,同时有独立的事件处理不同的方向,如swipeLeft

tap:响应一般的触摸动作

doubleTap:很显然,用来触发双击事件

longTap:长点击时间,在点击元素超过750ms后被触发,好像没有明确的接口来改变这个响应时间

以上内容简单的对移动开发Javascript框架Zepto.js进行了介绍,虽然对于插件的支持不是太好,不管怎么样,也真的需要在你的项目中进行尝试,当然,首先考虑情况面对的主要目标用户和设备情况,我相信你会爱上它的。

Linux Apache Vhost文件数量的问题排查总结

服务器配置情况:Centos 6.4,PHP 3.5.3,Mysql 5.1.73,服务器通过加载vhost文件夹所有文件进行站点的建立。

就在那一刻,突然所有的网站都不能正常打开,开始显示空白页。接到通知提示后,紧急进行排查。

1)打开php.ini中display_error为On,页面中正常显示出来错误提示;

出现require不能正常加载controller文件和timezone错误,以为找到了问题的原因,遂根据代码位置进行追踪排查。无奈,使用存在文件存在,timezone设置正常。

2)考虑到可能由于服务器include_path的问题,导致不能正常加载文件;

由于对Linux的包含路径配置不熟悉,参考其他Linxu服务器进行比对,确认此环节没问题。

3)沟通使用熟悉此框架的骚年们,有提出环境配置错误的(范围太大,无法断定),有提出断点调试截图的(无法得出问题原因结论)

4)无奈的对VPS进行还原;

5)逐步个添加新增的网站(已备份),发现当vhosts文件夹中文件数量超过509时,就出现页面打不开变成空白状态。经过再三测试,如转移其中某vhost文件,新增备份的文件,没问题。

最终确定问题原因:Linux默认设置一次性读取的文件数量有限制,当一次性读取的文件数量超过509(根据网上查询存在508)的情况下,就会出现问题。

修改方法如下:

以上配置文件修改,由某非著名Linux管理员贡献。

同时,附上排查过程中使用的批量处理Shell Snippet

以上为处理Apache vhosts加载文件数量509限制的全过程,记录总结以作参考。

关于一个表单form包含多个提交动作submit的解决方法

在开发工作共我们往往会遇到一个表单需要包含多个action不同的提交动作,这时候就不能在使用submit按钮来进行提交了,下面提供通过js来实现这一功能的方法

form表单一定要添加上name属性,以通过document定位访问表单,不要写action属性了

head标签中的title,link,meta等的标签异常错位到body里面去了的解决方法

自己也是偶然遇到这个问题的,页面显示异常,head标签中的title,link,meta等的元素无故错位显示到body里面去了

134303_x4DH_252076

问题展现就像上图所示,head中什么都没有,head中的标签全部错位到body中显示,在页面的直观表现就是无故多处一行空白,很多人觉得这是编码者没有写好闭合标签的问题,嗯,是有可能,但不说现在的浏览器大都能自动补全未闭合标签,未写闭合标签也不至于让head中的内容完全移步到body中去吧….

解决方法:
这个问题其实是由编码格式引起的,没错,就是BOM的问题,选一个比较高级的编辑器,个人推荐Notepad++,打开后选择 格式 选择以无BOM格式编码保存文档,然后就可以了。

135352_G6sP_252076

问题得到完美解决。

backtop