跳至主要內容

各类框架、插件

白日梦想家yy...大约 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)
上次编辑于:
贡献者: mygit