纯js自动批量引入js、css插件,支持自定义参数
//autoload.js
;! function(e) {
var autoload = e.autoload || {};
e.autoload = autoload;
e.autoload = new function() {
this.options = {
id: 'autoload',
}
var o = this.options;
this.include = function(_opt) {
o = _opt;
var id = document.getElementById('autoload');
if(typeof id!=='undefined'){
var cssid = id.getAttribute('css');
var jsid = id.getAttribute('js');
}
cssid = autoload.split(cssid);
jsid = autoload.split(jsid);
var c = 0; //记录js的起始位置
for(var i = 0; i < o.path.length; i++) {
var file = o.path[i];
if (file.match(/.*.js$/)){
var ind = i+1-c; //记录js的起始位置
if(jsid.toString().indexOf(ind)>-1){ //判断id中的js链接是否存在
document.write('<script type="text/javascript" src="' + file + '"></script>');
}
}else if (file.match(/.*.css$/)){
c++;
if(cssid.toString().indexOf(i+1)>-1){
var Link = document.createElement('link');
Link.href = o.path[i];
Link.rel = 'stylesheet';
document.getElementsByTagName('head')[0].appendChild(Link);
}
}
}
}
}
autoload.split = function(str){
var strs= new Array(); //定义一数组
strs=str.split(","); //字符分割
return strs;
}
}(window)
//调用
autoload.include({
id: 'autoload' //引入的该js的id
//引入的路径
,path: [
'css/a.css'
,'css/b.css'
,'js/1.js'
,'js/2.js'
,'js/3.js'
,'js/4.js'
,'js/5.js'
]
});
</body>前引入,js和css为path中参数的位置,例中js位置为1,2,4从1开始查找,css同理。
<script src="js/autoload.js" id="autoload" js="1,2,4" css="1,2"></script>
纯js自动批量引入js、css插件,支持自定义参数的更多相关文章
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...
- Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录
node.js官网下载并安装node 进入node文档目录下,运行cmd 输入 node -v 查看node版本 出现表示安装完成 输入 npm -v 显示npm版本信息 安装cnpm 输入 npm ...
- 页面中引入js的几种方法
通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...
- 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题
插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- js自动生成条形码插件-JsBarcode
JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)
这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...
- vue脚手架使用swiper /引入js文件/引入css文件
1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...
- Google Pagespeed,自动压缩优化JS/CSS/Image
Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...
随机推荐
- [Android] Android 锁屏实现与总结 (一)
实现锁屏的方式有多种(锁屏应用.悬浮窗.普通Activity伪造锁屏等等).但国内比较主流并且被广泛应用的Activity伪造锁屏方式. 实例演示图片如下: 系列文章链接如下: [Android] A ...
- [再寄小读者之数学篇](2014-05-27 矩阵的迹与 Jacobian)
(from MathFlow) 设 $A=(a_{ij})$, 且定义 $$\bex \n_A f(A)=\sex{\cfrac{\p f}{\p a_{ij}}}. \eex$$ 试证: (1) $ ...
- [译]Ocelot - Configuration
原文 这里有一个配置的样例.配置主要有两个部分.一个是ReRoutes数组,另一个是GlobalConfiguration.ReRoute告诉Ocelot怎么处理上游的请求.Global config ...
- python的线程和进程
1.线程的基本概念 概念 线程是进程中执行运算的最小单位,是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,只拥有一点在运行中必不可少的资源,但它可与同属一个进程的其它线程 ...
- LESS知识总结
知识体系 1.认识less 2.使用less 3.变量( variables ) 4.混合 ( mixins ) 5.嵌套规则 ( nested-rules ) 6.运算(operation ...
- 【原创】大数据基础之Oozie(2)使用
命令行 $ oozie help 1 导出环境变量 $ export OOZIE_URL=http://oozie_server:11000/oozie 否则都需要增加 -oozie 参数,比如 $ ...
- JAVA 数组作为方法参数—传递地址
package Code411;//数组作为方法参数—传递地址public class DodeArrayParam { public static void main(String[] args) ...
- vue-i18n国际化在data中切换不起作用
vue-i18n是一个针对于vue的国际化插件,使用非常简单,具体使用方式看我细细道来. 实现方式 1. 下载包 npm install vue-i18n 2. 配置 在main.js文件中加入如下配 ...
- pl/sql学习(6): 引号/程序调试/列中的字符串合并/正则表达式
有关自治事务的问题: https://www.cnblogs.com/princessd8251/p/4132649.html 我在plsql development学习中遇到的常见问题: (一) 引 ...
- SQL入门(4): 嵌入式SQL语言
本节讲述内容: 1.嵌入式SQL 语言概述 2.变量声明与数据库连接 3.数据集与游标 4.可滚动游标与数据库的增删改 5.状态捕捉以及错误处理机制 (一)嵌入式SQL语言 之前我们所学的都是交互式S ...