dp.SyntaxHighlighter 自动加载更新

作者: jaclon 分类: JS 发布时间: 2011-06-23 10:57 ė 63条评论

上次写的自动加载dp.SyntaxHighlighter工具在实际使用中会出现一个些问题:js加的速度有所不同,导致执行的时候出现dp未定义的错误。前两天在西红柿爱番茄的博客上看到“并行加载、按顺序执行javascript文件”的文章,觉得可以用来解决这个问题,下面是改进后的mySyntaxHighlighter.js文件

//西红柿爱番茄的jL类
;(function(win){
	var _h = document.getElementsByTagName("head")[0];
	var _t = {"js":"text/javascript", "css":"text/css"};

	//使用lazy Definition的方式声明xhr实例
	var _xhr = function() {
		_xhr = win.XMLHttpRequest ? function() {
			return new XMLHttpRequest();
		} : (new ActiveXObject("Msxml2.XMLHTTP")) ? function() {
			return new ActiveXObject("Msxml2.XMLHTTP");
		} : function() {
			return new ActiveXObject("Microsoft.XMLHTTP");
		}
		return _xhr();
	}
	//获取文件扩展名
	var _ext = function(url) {
		if (!url) {
			return;
		}
		return url.substr(url.lastIndexOf('.') + 1).toLowerCase();
	}

	//使用DOM Element的方式把脚本动态插入到文档中
	var _domLoad = function(url, parent, callback) {
		if (!url) {
			return;
		}
		var ext = _ext(url);
		if ( ext == "js")
		{
			var s = document.createElement("script");
			s.setAttribute("type",_t["js"]);
			s.setAttribute("src",url);
		} else {
			var s = document.createElement('link');
			s.setAttribute("type",_t["css"]);
			s.setAttribute("rel","stylesheet");
			s.setAttribute("href",url);
		}
		(parent || _h).appendChild(s);
		if (callback) {
			if (s.readyState) { // IE,Opera
				s.onreadystatechange = function() {
					if (s.readyState === "loaded"
							|| s.readyState === "complete") {
						s.onreadystatechange = null;
						callback();
					}
				}
			} else { // FF,Chrome,Safari
				s.onload = function() {
					s.onload = null;
					callback();
				}
			}
		}
	}

	//通过设置script标签的text属性来插入行内脚本到文档中
	//不过一定要插入到head中,插入到body中在IE6下测试出错
	var _script = function(text) {
		var s = document.createElement("script");
		s.type=_t['js'];
		s.text = text;
		_h.appendChild(s);
	}

	//请求每一个js脚本文件
	var _request = function(_p, _o) {
		var _x = _xhr(), item = _o._cache[_p.label];
		_x.open("GET", _p.url, true);
		_x.onreadystatechange = function() {
			if (_x.readyState === 4 && (_x.status === 200 || _x.status === 304)) {
				item["text"] = _x.responseText;
				item["load"] = true;
			}
		}
		_x.send(null);
	}

	var _load = function() {
		for ( var i = 0, l = arguments.length; i < l; i++) {
			var a = arguments[i];
			if (!a.isOrder) {
				_domLoad(a.url, a.parent, a.callback);
			} else {
				this._param.push(a);
				this._cache[a.label] = {};
				this._cache[a.label]["callback"] = a.callback;
			}
		}
		return this;
	}

	var _insert = function() {
		if (!this._param.length) {
			return;
		}
		var _o = null, i = 0;
		// 请求脚本文件
		while (_o = this._param[i++]) {
			_request(_o, this);
		}

		// 定时器检查并插入脚本到文档中
		var o = this._param.shift(), item = null, that = this;
		var interval = setInterval(function() {
			item = that._cache[o.label];
			if (item["load"]) {
				_script(item["text"]);
				if (item["callback"]) {
					item["callback"]();
				}
				if (!(o = that._param.shift())) {
					clearInterval(interval);
				}
			}
		}, 5);
		return this;
	}

	var _jL = function() {
		this._cache = {};
		this._param = [];
	}
	_jL.prototype = {
		load : _load,
		insert : _insert
	}
	win.jL = function() {
		return new _jL();
	}
})(this);
// 去除重复项
Array.prototype.uniq = function() {  
	var temp = {}, len = this.length;

	for(var i=0; i < len; i++)  {  
		if(typeof temp[this[i]] == "undefined") {
			temp[this[i]] = 1;
		}  
	}  
	this.length = 0;
	len = 0;
	for(var i in temp) {  
		this[len++] = i;
	}  
	return this;  
} 
var langs = new Array('c++', 'c#', 'css', 'delphi', 'java', 'js', 'php', 'python', 'ruby', 'sql', 'vb', 'xml', 'html');
var currentlangs = new Array();
var elements = document.getElementsByTagName("pre");
for(var i=0; i < elements.length; i++){
	for(var j=0; j< langs.length; j++){
		if(elements[i].className.indexOf(langs[j]) != -1){
			currentlangs[currentlangs.length] = langs[j];
			break;
		}
	}
}
if (currentlangs.length > 0)
{
	jL().load({"label":"shCore","url":"/wp-content/plugins/dp.SyntaxHighlighter/Scripts/shCore.js",isOrder:true})
	.load({"label":"SyntaxHighlighter","url":"/wp-content/plugins/dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css",isOrder:false})
	.insert();
	currentlangs = currentlangs.uniq();
	for(var i=0;i<currentlangs.length;i++){
		var type = currentlangs[i]
		switch(type) {
			case 'c++':
				type = 'Cpp';
				break;
			case 'c#':
				type = 'CSharp';
				break;
			case 'js':
				type = 'JScript';
				break;
			case 'html':
				type = 'Xml';
				break;
			default :
				type = type.substr(0,1).toUpperCase() + type.substr(1);
		}
		var filename = 'shBrush'+type;
		if(i == currentlangs.length-1){
			jL().load({"label":filename,"url":"/wp-content/plugins/dp.SyntaxHighlighter/Scripts/"+filename+".js",isOrder:true,callback:function(){
				dp.SyntaxHighlighter.ClipboardSwf = '/wp-content/plugins/dp.SyntaxHighlighter/Scripts/clipboard.swf';
				dp.SyntaxHighlighter.HighlightAll('code');
			}})
			.insert();
		} else {
			jL().load({"label":filename,"url":"/wp-content/plugins/dp.SyntaxHighlighter/Scripts/"+filename+".js",isOrder:true}).insert();
		}
	}
}

本文出自 肥蕉博客@IT技术,热门话题,生活随笔,美图欣赏,转载时请注明出处及相应链接。

本文永久链接: http://www.bananawolf.com/html/2011/06/685.html

3条评论

  1. satsun 六月 24, 2011 2:21 下午 回复

    是啊。呵呵 不过我觉得新技术是可以学 但不要急着用,兼容性太差了
    顺便给你狗狗了下!!!我最近应该没点的

  2. liveme 六月 26, 2011 10:55 上午 回复

    扔到function里?

    1. jaclon 六月 26, 2011 4:40 下午 回复

      dp.SyntaxHighlighter 原本就是个wp插件,但每次都要手动加载,现在就改成根据内容自动加载js文件

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

Ɣ回顶部