当前位置:首页 > java知识学习_java技术文章 > 正文

yepnope.js技术应用与示例详解(超详细)

浏览140+

yepnope

一、前端技术yepnope.js介绍

前端时间映入眼帘了一个前端选择性技术,它可以实现动态的异步加载所需的js文件,按需加载,用什么资源时再加载什么资源,不用一次性的全部加载所有资源,非常方便,效率非常高,可选择性非常强,该技术叫做yepnope.js

yepnope技术不是一个新的技术,已经出来了很久,只是用的人比较少而已,但是这个技术,目前好像已经弃用了,但是只有一些老的项目中才会运用了该技术。

我们在新项目中使用该技术的时候,一定要谨慎按需使用,因为该技术貌似不在提供版本更新了,社区也没什么活跃度,出现了bug也没人修复。该技术可以根据输入的条件,选择性的加载异步JS文件,并且还能够随意的控制JS文件的加载顺序。

二、该技术的优缺点概述

yepnope.js的缺点概述:

1)该技术在使用的时候,需要设置缓存头才能够应用,也就是说,在一定程度上并不一定就能够完全的实现快速加载,需要统筹的考虑根据实际情况测试加载运行速度。

2)目前的前端技术来讲,用其他的技术经过优化后其速度也未必就一定会比yepnope慢。

3)该技术API比较简单,也没有那种自动生成类库的生成工具,形式比较单一,只是实现了基本加载的功能。

4)由于该技术按顺序执行JS文件,就单单按顺序加载这一点,有可能会影响加载速度,这点还需要在以后的实际应用中慢慢的去体会去验证。

该技术的优点概述:

1)首先就是yepnope技术能够按条件按选择的加载js文件,在实际应用中实在是太方便了,该技术能够控制资源的加载顺序和执行顺序,我们工作中如果有这方面的需求的话,刚好可以满足这类的功能的开发。

2)能够兼容目前主流的所有浏览器,前端兼容性这一块儿非常完美。

3)提供了比较简便的API,上手比较容易,应用在项目中也比较简单。

4)该技术提供了后续的扩展功能,模块化设计与布置,我们可以根据自己的工作情况扩展其相应的功能。

5)该技术文件压缩后比较轻量,前端资源越轻量加载速度越快。

三、代码入门案例

该技术提供的按照满足条件与否决定加载哪个资源文件的入门代码案例如下展示:

yepnope([
  {
    test : Modernizr.indexeddb,
    yep  : ['/js/indexeddb-wrapper.js', '/css/coolbrowser.css'],
    nope : ['/js/polyfills/lawnchair.js', '/js/cookies.js', '/css/oldbrowser.css']
  }
]);

上面的代码是yepnope的入门语法,意思为:如果test后面的代码结果为true的话,则加载yep变量后面引入的js和css文件,如果test的结果为false的话,则加载nope后面引入的两个js文件和oldbrowser.css文件。

四、Api语法剖析

学习一个新的技术,最重要的是除了了解其基本的使用之外,还要熟读和掌握其API的应用,所以接下来我们学习一下yepnope技术有哪些语法和api可供使用。

yepnope的语法和api一览

上图是yepnope的语法定义,我们在使用的时候必须严格按照语法书写浏览器方能正确解析,test变量后面跟的是判断条件,给变量的返回值是boolean类型,返回true或false。

nope变量定义的是test值为false时加载的资源文件,yep是test返回值为true时需要加载的js和css等文件。

both和load变量后面定义的是基本的资源文件,意思是必须加载的文件,无关test值的真假。

callback是做回调时执行该变量后面定义的函数和方法,complete则是所有文件加载完成后再执行该变量定义的方法。

五、其它变种的特殊用法

上面yepnope的语法中定义的所有变量并不是必须全部都要写上的,有时候可以按照自己的需求只写其中的几个变量使用也是可以的,下面是该技术的其他的一些变种的用法介绍。

不写变量直接引入js文件的用法:

yepnope( '/url/to/your/script.js' );

当我们应用该技术时,如果不想要使用按需加载的功能,则可以按照上面代码实例,直接引入一个js字符串地址即可。

定义一个变量的变种用法:

yepnope( {
            load : '/url/to/your/script.js'
          } );

上面是在语法定义中只引用了一个load变量,以键值对的形式出现,类似一个json对象。

回调函数与complete函数的用法:

yepnope函数应用代码一览

上图代码案例中使用了回调函数与complete函数,回调函数的function方法中url代表加载的资源文件名,result代表测试参数的结果,key 键表示使用键映射时的文件名缩写。

complete函数就比较简单了,该function中没有任何传入的参数,该函数的用意就是当所有资源文件加载完成后可以让浏览器或者js脚本操作dom文件做一下其它的事情。

 

相关文章推荐

yepnope.js教程

http://yepnopejs.com/

yepnope.js 异步加载资源文件

yepnope.js使用详解及示例分享

JavaScript中文网

yepnope.js 异步加载资源文件

异步资源加载 Yepnope.js

yepnope初体验

责任声明:文章信息由IT教程屋小编精心整理总结编排而成,倾注了心血和汗水,转载时请遵循行业规范务必注明文章作者、来源及本页链接,谢谢合作!
本篇文章标题:yepnope.js技术应用与示例详解(超详细)
本篇文章url地址:http://www.itjcw123.cn/2728.html