JS 组件动态加载CSS文件

document.currentScript   返回其所包含的脚本中正在被执行的 ;  值得注意的是,如果当前正在执行的代码是处在某个回调函数或者事件处理函数中的,那么 currentScript 属性不会指向包含那个函数的 <script> 元素,而是会返回 null
var curScriptElement = document.currentScript;

 

Chrome和Firefox上都提供了document.currentScript，用来获取当前正在执行的SCRIPT元素（注意不是当前执行的代码所在的SCRIPT元素）。如果代码被注册到一个计时器事件中执行，它就无法获取到，因为处理计时器事件时SCRIPT元素中的代码已经执行完毕了。
　　计时器事件毕竟的属于DOM的东西，如果换成JavaScript自身的异步的话就不一定了。

 

getPath: function() {
    var e = document.currentScript ? document.currentScript.src: function() {
        for (var e, t = document.scripts,
        i = t.length - 1,
        n = i; n > 0; n--) 
		if ("interactive" === t[n].readyState) {   //判断状态  当前脚本正在执行
            e = t[n].src;
            break
        }
        return e || t[i].src
    } ();
    return e.substring(0, e.lastIndexOf("/") + 1)
} (),

createLink : function(path){
	if(__myLayer__.path){
		var header = document.getElementsByTagName('head')[0];
		var link = document.createElement('link');
		link.rel="stylesheet";
		link.href = __myLayer__.path+path;
		header.appendChild(link);
	}
	
},

调用方法的时候

var __myLayer__ = {
	v : "1.1.0",
	alert : function(msg,option,callback){
		var bool = typeof option === 'function'
		if(bool){
			callback = option;
		}
		__r__.open($.extend({content: msg},bool ? {} : option))
	},
	path : __opt__.getPath,
	ready : function(){
		var n='layer.css?v='+this.v;
		__opt__.createLink(n);
	} ,
	msg:function(msg,option,callback){
		__r__.open($.extend({}))
	}
}

__myLayer__.ready();

 

 

判断SCRIPT元素正在执行呢？实际上IE10及之前的IE版本都可以直接通过SCRIPT元素的readyState属性来判断。当其值为"interactive"时，表示这个SCRIPT元素的代码正在被执行。于是可以写一个IE8~IE10兼容的polyfill。

Object.defineProperty(document,"currentScript",{
  get:function(){
    var s=document.getElementsByTagName("script"),i=0,e;
    while(e=s[i++])if(e.readyState=="interactive")return e;
    return null;
  }
});
console.log(document.currentScript);

更低版本的IE不支持给对象添加访问器属性，但可以定义成一个函数来调用。
最后还有个IE11的问题没解决，IE11不知道是哪根筋抽了，不把currentScript兼容上也就算了，还把SCRIPT元素的readyState属性给删掉了