最近一个小应用需要做播放器,当然首选jplayer,由于是手机应用,还是用zepto代替了jquery,昨晚折腾了很晚,也没找到为何出错了,比较晚耐心也不好,最终放到了今天。
官方文档,硬是把使用zepto代替jquery的说明拆成了几段,一不小心就跳过了重点

//如果使用了AMD module需要修改下面的代码
//替换define(['jquery'], factory); 为
define(['zepto'], factory);

那么zepto源码中是没有amd加载支持,这个时候我们需要补充一下

define("zepto", [], function(){return Zepto;});

但发现其实还是使用不了,设置如下可以使jplayer打印出错误日志

my_jPlayer.jPlayer({
    errorAlerts: true //显示错误信息
})

发现错误日志如下:

jPlayer 2.9.2 : id=’jquery_jplayer’ : Error!
Attempt to issue media playback commands, while no media url is set.
Use setMedia() to set the media URL.
Context: play

那么就是setMedia没有调用到,跟一下源码,在第57行代码var instance = $(this).data(name);得到的结果是”[object Object]”,一看zepto不支持data为object,然后我再看官方文档,重点来了

Zepto
Compatibility verified with:
Zepto 1.0 compiled with Data module

整个人都很难受,为何不仔细看文档,为何不仔细看文档

04 / 01 / 2015 buling

      之前看过很多去jquery开发的文章,前几天又看到,可惜没有了文章地址,大抵是说jQuery封装的实在太好以至于让我们变的越来越懒越来越愚钝。一直打算去jquery开发,但后来很多次都是迫于开发效率,还是使用了jquery来开发,最近又打算尝试去jquery化,刚开始使用工具库的方式提供大堆的工具函数,尤其是在对dom操作时,函数总是需要传入dom,显得很繁冗,最后就尝试向jquery靠拢,但后来写着写着就发现,其实去jquery的意义在于再建一个mini-jquery库而已,越开发越觉得没有意义,唯一的意义在于对底层的js更熟悉,兼容方法总结。下面来给之前还未写完的一些测试案例:

//test select
var itembox = $('div ul,.item-box', document.body)[0],
    lis = $('.item', itembox);
debug('selector > get dom length:'+lis.length, 'info');
//test json
var jsonobj = {name : 'hehe', age:12},
    jsonstr = $.stringify(jsonobj),
    njsonobj = $.parseJSON(jsonstr);
debug('json > parse get name:'+njsonobj.name, 'info');
//test each
$.each(lis, function(dom, i){
    debug('each > '+i+':'+dom.tagName, 'info');
});
//test extend
var nobj = $.extend(jsonobj, {desc: 'hello!'});
debug('extend > parse new object:'+$.stringify(nobj), 'info');
//test css
debug('css > get item-box height:'+$(itembox).css('height')+'; after 2 seconds change backgrund', 'info');
setTimeout(function(){
    $(lis).css({
        'background' : '#ff0',
        'color' : '#f00'
    });
    debug('css > get item-box color:'+$(lis).css('color')+';', 'info');
    $(itembox).fadeOut(function(){
        $(itembox).fadeIn(function(){
            //add class
            $(lis[0]).removeClass('item').addClass('bold');
        });
    });
}, 2000);
//test ajax
$.ajax({
    url : './ajax-api.php',
    timeout : 3500,
    method : 'post',
    data : {name:'hello', age:12},
    success : function(content, xhr){
        debug('json > get resonse header:'+xhr.getAllResponseHeaders());
        debug('json > get callback:'+content);
        var jobj = $.parseJSON(content);
        debug('json > get code:'+jobj.code);
    },
    error : function(info, xhr){
        debug('json > error callback:'+$.stringify(info), 'error');
    }
});
//test animat
//animate(callback, executeTime, intervalTime)
$.animate(function(percent, curtime){
    debug(percent);
}, 400, 200);

具体js代码如下,访问地址:http://mjix.com/code/varcom/
; 源码地址: http://mjix.com/code/varcom/uquery.src.js
昨晚睡觉前又看了一下:Javascript之旅系列 以及 《JavaScript高级程序设计》读书笔记,我也在看这本书,只是书中写的实在太细,没有能像这位整理的这么好,之后需要再把类继承章节重新阅读一次才行。