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

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

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

关于该工具的几点说明：

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

效果图：

代码：

[code]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);
}
}