我正在寻求建立一个新的网站,并希望采取负责任的“移动优先”的方法.这种方法的一个原则是只加载你需要的东西,并避免包含大量浪费的库和框架,直到你真正需要它们为止.
为此,我打算使用modernizr2来测试功能,然后只加载所需的文件和库.
在javascript方面,我真的很感兴趣使用类似zepto.js(http://zeptojs.com/)的东西,这是一个微小的javascript库(2-5k),针对移动webkit(和单独的移动webkit)进行了优化,同时保持了jquery兼容语法.它也被设计为具有全开jquery的“热插拔”.所以我的策略是(伪代码)：
>测试移动webkit
>如果(true)加载zepto.js
> if(false)加载jquery
但现在我的问题是：你们建议用什么(未来证明)技术来检测移动webkit,最好是以纯粹的javascript方式(不使用jquery,插件或其他库)并且可以与modernizr’s testing API集成？
解决方法
好吧,所以我猜我的问题措辞不好或者其他什么东西,但是有点挖掘,我找到了一个可以接受的解决方案,与我的用例一起使用.
// Webkit detection script
Modernizr.addTest('webkit',function(){
return RegExp(" AppleWebKit/").test(navigator.userAgent);
});
// Mobile Webkit
Modernizr.addTest('mobile',function(){
return RegExp(" Mobile/").test(navigator.userAgent);
});
这两个测试会将’webkit’和’mobile’类添加到你的html标签(或’no-webkit’和’no-mobile’,如果为false),但也允许你有条件地加载你喜欢的javascript库,具体取决于情况.
在我的情况下,要么在JQuery或Zepto.js之间切换：
Modernizr.load([
// test mobile webkit (zepto or jquery?)
{
test: Modernizr.webkit && Modernizr.mobile,nope: ['//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'],yep: [baseURL + 'js/lib/zepto.min.js']
}]);
因此,当我检测到访问者正在使用移动webkit浏览器(可能就像100％的iOS或Android设备那样)时,我可以节省大量开销,并在必要时为其他人加载常规JQuery.由于语法非常相似,无论最终加载哪个框架,插件和其他脚本都可能仍然有效.
