多网站支持的阅读模式Javascript的实现

闲来无事，写一个网页的阅读模式玩玩，说是阅读模式，实际上就是把背景色改成视力保护色，每次看微博手动改太麻烦，以后就用这个工具了，这个工具扩展支持的网站比较方便。

暂时仅支持【csdn博客文章】、【cnblogs博客文章】以及【51cto文章】的阅读模式，其他网站以后用到了再扩展。

关于该工具的几点说明：

• 若需要增加其他网站的支持，则需要默认的有增加【urlConfigs】的配置项，这三个网站的配置项已默认，若发生变更，更改配置项即可；
• 可自定义阅读背景色【readModelColor】，默认为【#C7EDCC】；
• 为指定网站加载阅读模式支持，需要在该网站调用【init()】方法；
• 阅读模式开启按钮通过以下方式显示：鼠标进入元素时显示阅读模式提示，鼠标离开元素时删除阅读模式提示；

效果图：

代码：

function ReadModelUtil(){
	this.isReadModel = false;// 标识当前是否是阅读模式
	this.originalBackgroundColor = "";// 网页原始背景色
	this.readModelColor = "#C7EDCC";// 阅读背景色

	// 各站点的配置项（
	//	urlReg：匹配站点url的正则表达式；
	//	$titleElementStr：该属性指定的元素将有动作【鼠标进入元素时显示阅读模式提示，鼠标离开元素时删除阅读模式提示】；
	//	$labelAppendElementStr：在该属性指定的元素中显示阅读模式提示；
	//	$contentsElementStr：阅读模式启动时将改变该属性指定的元素的背景色为护眼色；）
	this.urlConfigs = {
		csdnArticleDetails : {// csdn博客文章
			urlReg : /blog.csdn.net\/\S*\/article\/details/,
			$titleElementStr : '$("div.article-header-box")',
			$labelAppendElementStr : '$("div.article-header-box").find(".title-article")',
			$contentsElementStr : '$("div.blog-content-box")'
		},
		cnblogsArticleDetails : {// cnblogs博客文章
			urlReg : /www.cnblogs.com\/[A-Z a-z 0-9]*\/p\//,
			$titleElementStr : '$(".postTitle")',
			$labelAppendElementStr : '$(".postTitle")',
			$contentsElementStr : '$("#topics")'
		},
		fiveOneCtoArtDetails : {// 51cto文章
			urlReg : /[a-z]*.51cto.com\/art\//,
			$titleElementStr : '$("div.wznr")',
			$labelAppendElementStr : '$("div.wznr").children().eq(0)',
			$contentsElementStr : '$("div.main_left")'
		}
	};

	/**
	 * 阅读模式核心方法：
	 * 鼠标移动到某一元素上时显示阅读模式开启提示，点击开启后，切换为阅读模式；点击关闭后，还原原始页面；
	 * @param {Object} urlConfig 各站点的配置项的其中一项
	 * @param {int} type 执行模式（不填或0：初始化；1：开启阅读模式；2：关闭阅读模式；）
	 **/
	this.readModel = function(urlConfig, type){
		if (urlConfig == null) {
			console.log("不支持的网站");
			return;
		}
		var _this = this;
		// 初始化：添加鼠标over事件
		if (type == undefined || type == 0) {
			// 鼠标进入元素时显示阅读模式提示
			eval(urlConfig.$titleElementStr).mouseenter(function(){
				if ($("a.read-model-button").size() <= 0) {
					eval(urlConfig.$labelAppendElementStr).append(_this.getReadModelButtonHtml());
					// 绑定阅读模式提示事件
					$("a.read-model-button").click(function(){
						_this.readModel(urlConfig, _this.isReadModel ? 2 : 1);
					});
				}
			});
			// 鼠标离开元素时删除阅读模式提示
			eval(urlConfig.$titleElementStr).mouseleave(function(){
				if ($("a.read-model-button").size() > 0) {
					$("a.read-model-button").remove();
				}
			});
		} else if (type == 1) {
			// 阅读模式开启
			this.originalBackgroundColor = eval(urlConfig.$contentsElementStr).css('background');
			eval(urlConfig.$contentsElementStr).css('background',this.readModelColor);
			$("a.read-model-button").html("关闭阅读模式");
			this.isReadModel = true;
		} else if (type == 2) {
			// 阅读模式关闭
			eval(urlConfig.$contentsElementStr).css('background',this.originalBackgroundColor);
			$("a.read-model-button").html("开启阅读模式");
			this.isReadModel = false;
		}
	}

	// 获取阅读模式提示元素
	this.getReadModelButtonHtml = function(){
		return '<a class="read-model-button" style="color:red;cursor:pointer;font-weight:bold;">'+(this.isReadModel ? '关闭' : '开启')+'阅读模式</a>';
	}

	// 根据当前页面url获取站点的配置项
	this.getUrlConfig = function(){
		var url = window.location.href;
		var urlConfig;
		for (var urlConfigKey in this.urlConfigs) {
			urlConfig = this.urlConfigs[urlConfigKey];
			if (urlConfig.urlReg.test(url)) {
				return urlConfig;
			}
		}
		return null;
	}

	/**
	 * 初始化工具
	 * @param {string} color 指定的阅读背景色（可不传，默认是#C7EDCC）
	 **/
	this.init = function(color){
		if (color != undefined) {
			this.readModelColor = color;
		}
		this.readModel(this.getUrlConfig(), 0);
	}
}