本例使用一个滚动的jquery框架,带有滚动动画,只需传递要滚动到的elem的id和time即可,time控制滚动动画速度。
共编写3个步骤的函数:
1.js动态加载函数(LoadJs)、
2.动态执行入口函数(ExecuteJs)、
3.对某个框架的调用封装(ScrollTo)
调用顺序为 3->2->1 ,理论上来讲1是不需要任何人直接使用的,应该是通过2来执行某个js框架的功能,所以动态加载一个js并执行他的函数,只需要编写3这一步骤的函数和在要加载的js文件末尾加声明一个变量(用于判断这个js是否已经加载完成)
这种调用方式测试可行,但具体项目中未使用过,不保证稳定性和兼容性,仅供学习。
代码如下:
// 动态加载js调用,callback是当js文件加载完成后执行
LoadJs: function(url, callback) {
var _doc = document.getElementsByTagName('head')[0];
var elem = this.CreateElement("script", { type: 'text/javascript', src: url });
_doc.appendChild(elem);
elem.onload = elem.onreadystatechange = function() {
if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
callback && callback();
}
}
},
//参数分别为:检查js是否加载,要执行的函数,js文件的url,加载失败后执行的函数
ExecuteJs: function(checkFun, exeFun, url, failFun) {
if (checkFun()) {
var file = url;
this.LoadJs(file, function() {
if (checkFun()) {
failFun && failFun();
return;
}
exeFun && exeFun();
});
} else {
exeFun && exeFun();
}
},
//滚动到指定位置,id是标签id,time是动画时间
ScrollTo: function(id, time) {
var file = base._JsFileUrl.scrollto; //'Scripts/ScrollTo.js' 这是一个scrollTo的框架,自带滚动动画,很不错,但是也许我们一开始不希望页面加载时下载这个文件
this.ExecuteJs(
function() { return (!base.JsLoderFlag.ScrollTo_Loaded); },//检查页面是否已经加载这个js文件(我的做法是在Scripts/ScrollTo.js文件末尾定义一个变量,判断这个变量是否存在即可)
function() { $.scrollTo("#" + id, time); },//js已经加载的话执行这个函数
file,// js的url,用于如果没有就从这个url去加载
function() { document.getElementById(id).scrollIntoView(); }// 加载js文件失败时就用普通的滚动,这种滚动没有动画,但是具有滚动的功能
);
}