各类框架、插件
...大约 3 分钟
各类框架、插件
主要记录一些记不住名字的插件包,做备份之用
可以CDNJS引用/npm下载/官方引用等多种方式
框架
插件包
jquery-migrate
转移,过渡,解决jquery新旧版本代码不兼容问题
holder
图像占位符,暂时没理解是什么意思及具体用途
AOS
和WOW.js是同样的用途,AOS相对更好一点
hammer
用于检测触摸手势的 JavaScript 库。
Swiper
提供各式各样轮播图的插件
WOW
WOW.js 实现了在网页滚动时的动画效果。需要 Animate项目的支持。
Animate
强大的跨平台的预设css3动画库,内置了很多典型的css3动画,兼容性好使用方便
font-awesome
提供可缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。
Include
文件引入,加载器、Include.js 是一个很小的(1,3ko 压缩和 gzip 压缩)Javascript 加载器。它可以加载普通的 javascript 文件或 css,但使用 web 模块更有效。
如果可能,它将使用异步加载来加速您的页面并确保脚本的良好执行。它支持嵌套依赖项,这是创建干净灵活的 javascript 应用程序的有用功能。
- Includ
和Include
功能一样,俩个名字一字之差,暂时不清楚俩个文件有何关联
在多数本地静态文件中,includ会更友好一点,操作很简易
文件官方来源暂时不清楚,没有找到,可直接拷贝代码 并命名为includ.js
(function(window, document, undefined) {
var Include39485748323 = function() {}
Include39485748323.prototype = {
//倒序循环
forEach: function(array, callback) {
var size = array.length;
for(var i = size - 1; i >= 0; i--){
callback.apply(array[i], [i]);
}
},
getFilePath: function() {
var curWwwPath=window.document.location.href;
var pathName=window.document.location.pathname;
var localhostPaht=curWwwPath.substring(0,curWwwPath.indexOf(pathName));
var projectName=pathName.substring(0,pathName.substr(1).lastIndexOf('/')+1);
return localhostPaht+projectName;
},
//获取文件内容
getFileContent: function(url) {
var ie = navigator.userAgent.indexOf('MSIE') > 0;
var o = ie ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest();
o.open('get', url, false);
o.send(null);
return o.responseText;
},
parseNode: function(content) {
var objE = document.createElement("div");
objE.innerHTML = content;
return objE.childNodes;
},
executeScript: function(content) {
var mac = /<script type="text\/javascript">([\s\S]*?)<\/script>/g;
var r = "";
while(r = mac.exec(content)) {
console.log('r',r)
if(window.execScript){
window.execScript(r[1]);
}else if(window.eval){
window.eval(r[1]);
}else{
eval(r[1])
}
}
},
loadScript: function(content){
var self = this;
var mac = /<script\s*?src="([\s\S]*?)"/ig;
var r = "";
var filePath = this.getFilePath();
if(content.match(mac)){
var length = content.match(mac).length;
while(r = mac.exec(content)) {
length--;
var url = this.getRequestUrl(filePath,r[1]);
if(length>1){
this.loadJs(url);
}else{
var callback = function(){
self.executeScript(content)
};
this.loadJs(url,callback);
};
};
}else{
self.executeScript(content)
}
},
loadJs:function(url,callback){
var script=document.createElement('script');
script.type="text/javascript";
if(typeof(callback)!="undefined"){
if(script.readyState){
script.onreadystatechange=function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange=null;
callback();
}
}
}else{
script.onload=function(){
callback();
}
}
};
script.src=url;
document.body.appendChild(script);
},
getHtml: function(content) {
content = content.replace(/<script.*?>([\s\S]*?)<\/script>/ig, '');
return content;
},
getPrevCount: function(src) {
var mac = /\.\.\//g;
var count = 0;
while(mac.exec(src)) {
count++;
}
return count;
},
getRequestUrl: function(filePath, src) {
if(/http:\/\//g.test(src)){ return src; }
var prevCount = this.getPrevCount(src);
while(prevCount--) {
filePath = filePath.substring(0,filePath.substr(1).lastIndexOf('/')+1);
}
return filePath + "/"+src.replace(/\.\.\//g, "");
},
replaceIncludeElements: function() {
var $this = this;
var filePath = $this.getFilePath();
var includeTals = document.getElementsByTagName("include");
this.forEach(includeTals, function() {
//拿到路径
var src = this.getAttribute("src");
console.log('includeTals',includeTals)
//拿到文件内容
var content = $this.getFileContent($this.getRequestUrl(filePath, src));
//将文本转换成节点
var parent = this.parentNode;
var includeNodes = $this.parseNode($this.getHtml(content));
var size = includeNodes.length;
for(var i = 0; i < size; i++) {
parent.insertBefore(includeNodes[0], this);
}
//执行文本中的额javascript
$this.loadScript(content);
//$this.executeScript(content);
parent.removeChild(this);
//替换元素 this.parentNode.replaceChild(includeNodes[1], this); })
}
}
var loadInclude = function() {
new Include39485748323().replaceIncludeElements();
};
if(document.addEventListener){ //标准浏览器
document.addEventListener('DOMContentLoaded',function(){
//注销时间,避免重复触发
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
loadInclude(); //运行函数
},false);
}else if(document.attachEvent){ //IE浏览器
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
loadInclude(); //函数运行
}
});
}
})(window, document)