//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插件,支持自定义参数的更多相关文章

  1. babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效

    我遇到了一个问题,我在已经配置babel的项目中通过require引入了一个项目目录外层的另一个js文件,前期是可以成功转换并打包的,但是到了后期就不行了,报错: 这个报错的意思是,引入的js文件中有 ...

  2. Windows使用Node.js自动生成Vue.js模版环境部署步骤-----记录

    node.js官网下载并安装node 进入node文档目录下,运行cmd 输入 node -v 查看node版本 出现表示安装完成 输入 npm -v 显示npm版本信息 安装cnpm 输入 npm ...

  3. 页面中引入js的几种方法

    通常大家最为熟悉的是一下两种方法: 在页面中直接写入<script type="text/javascript">js代码</script>. 在页面中引入 ...

  4. 解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题

    插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标 ...

  5. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  6. js自动生成条形码插件-JsBarcode

    JsBarcode.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 自己编写jQuery动态引入js文件插件 (jquery.import.dynamic.script)

    这个插件主要是结合jquery或者xhr异步请求来使用的,它可以把已经引入过的js文件记录在浏览器内存中,当下次再引入相同的文件就忽略该文件的引入. 此插件不支持浏览器刷新保存数据,那需要利用cook ...

  8. vue脚手架使用swiper /引入js文件/引入css文件

    1.安装vue-cli 参考地址:https://github.com/vuejs/vue-cli 如果不使用严格语法需要在后三项打no:(加了挺头疼的,老是报错,但是对自己的代码规范性也是有很大的帮 ...

  9. Google Pagespeed,自动压缩优化JS/CSS/Image

    Google Pagespeed,自动压缩优化JS/CSS/Image 浏览: 发布日期:// 分类:技术分享 关键字: Nginx Appache Pagespeed 自动压缩优化JS/CSS/Im ...

随机推荐

  1. [物理学与PDEs]第1章习题14 求解 rot 方程

    设向量函数 ${\bf B}(x,y,z)=(B_x,B_y,B_z)$ 在 $z\neq 0$ 时具有一阶连续偏导数, 在 $z=0$ 时具有第一类间断, 且 $$\bex \Div{\bf B}= ...

  2. 移动端控制视频点击播放点击下一个视频时自动停止播放&监听滑动溢出屏幕高度时停止播放

    直接上代码js部分: <script type="text/javascript"> var go;//记录video播放器位置 var video=document. ...

  3. Python中__get__, __getattr__, __getattribute__的区别及延迟初始化

    本节知识点 1.__get__, __getattr__, __getattribute__的区别 2.__getattr__巧妙应用 3.延迟初始化(lazy property) 1.__get__ ...

  4. 用可配置外部工具的编辑器编译与执行java

    用可配置外部工具的编辑器编译与执行java 最近用了everedit.觉得比之前平时用的Editplus有更多的细节与功能要好许多. 这里就写写用everedit编译与执行java的方法. 原理 ja ...

  5. 【原创】大数据基础之Spark(2)Spark on Yarn:container memory allocation容器内存分配

    spark 2.1.1 最近spark任务(spark on yarn)有一个报错 Diagnostics: Container [pid=5901,containerID=container_154 ...

  6. java集合(list,set,map)

    集合 集合与数组 数组(可以存储基本数据类型)是用来存现对象的一种容器,但是数组的长度固定,不适合在对象数量未知的情况下使用. 集合(只能存储对象,对象类型可以不一样)的长度可变,可在多数情况下使用. ...

  7. youtube-dl下载youtube视频时查看分辨率以及选择分辨率下载

    1.查看分辨率: youtube-dl -F https://www.youtube.com/watch?v=_NMf1TpiFwY 2.根据分辨率下载,比如下载1280*720的mp4,前面的数字是 ...

  8. 小程序 -- ui布局

    Flex布局 相对定位和绝对定位 弹性盒模型 display flex-direction flex-wrap  :nowrap(不换行)/ wrap(换行,第一行在上方)/ wrap-reverse ...

  9. spring boot vuejs

    项目介绍 Spring Boot 2.0 + VueJs 2.0 开发项目示例 GitHub: https://github.com/fqybzhangji/spring-boot-vue 码云: h ...

  10. Spring Boot mybatis HashMap +layui 通用分页

    背景: mybatis 常用数据查询的方法都是先建实体类,再建Mapper,最后写Service,如果只是单纯的去查询数据显示,这样操作太麻烦.本文就以mybatis +layui创建通用分页类,简化 ...