这个文章用在什么地方，我先说一下，上周啊，我接到一个任务。因为公司业务要对接不同的银行，例如在工行下颜色是红色的，在其他银行下默认为蓝色，所以在页面一致的情况下，保证页面中的按钮和ICON是可以配置的，这样秩序改动一个值【颜色或路径】，就能正常全部适配好了，其实这个业务很简单：
**第一种方案：我们有新建两个config1.js和config2.js,代码分别类似如下：**var config = { ???// 改变全局按钮颜色 ???btncolor: "red", ???// 配置优惠券和同意的Icon ???img1: "../images/icon_01.png", ???img2: "../images/icon_02.png", ???img3: "../images/icon_03.png"}为什么要建两个config.js呢，一个是默认情况下配置信息，一个是定制版本的配置信息。
新建好以后，我们就要把他们引入到页面中去了，怎么引用呢，引用哪一个呢，好纠结啊…
- 首先我们先建index.html页面,
- 然后动态引入JavaScript【这里写链接内容】
看了这边篇文章，我决定采用document.writeln()，大家可以查一下和document.write()区别在哪里
但是到底引入哪一个config文件呢，我们需要判断它到底是哪一个银行，我们这里假设header里面就是银行的名字，好了，这样就好办了
- indexOf() 判断字符串首次出现的位置
- 理清思路，开始撸代码啦
($("header").text().indexOf("工商银行") > -1) ? ???????????document.writeln("<script src=\"./js/config1.js\"><\/script>") ????????: ???????????document.writeln("<script src=\"./js/config2.js\"><\/script>");把代码放入页面中就完成任务啦，完整代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<script src="./js/jquery-2.1.1.min.js"></script> ???<script> ???????($("header").text().indexOf("工商银行") > -1) ? ???????????document.writeln("<script src=\"./js/config1.js\"><\/script>") ????????: ???????????document.writeln("<script src=\"./js/config2.js\"><\/script>"); ???</script></head><body> ???<header> 工商银行 </header> ???<div> ???????<a href="">我是按钮1</a> ???????<a href="">我是按钮2</a> ???????<a href="">我是按钮3</a> ???????<p> 我是按钮4 </p> ???????<button> 我是按钮5 </button> ???????<img class="img1"> ???</div> ???<script> ???????$("header").text().indexOf("工商银行") > -1 ? ???????document.writeln("我是工行") : document.writeln("我不是工行"); ???????console.log($("header").text()); ???????console.log(config); ???????????var btncolor = config.btncolor; ???????????console.log(btncolor); ???????????$("a,p,button").css("color", btncolor); ???????????var img1 = config.img1; ???????????console.log(img1); ???????????$(".img1").attr(‘src‘, img1); ???</script></body></html>**第二种方法就是，只有一个文件 config.js**我们感觉config.js本来配置项就不多，必须在一个文件包含所有的配置项
var config = { ???first: { ???????// 改变全局按钮颜色 ???????btncolor: "yellow", ???????// 配置优惠券和同意的Icon ???????img1: "../images/icon_01.png", ???????img2: "../images/icon_02.png", ???????img3: "../images/icon_03.png" ???}, ???second: { ???????// 改变全局按钮颜色 ???????btncolor: "red", ???????// 配置优惠券和同意的Icon ???????img1: "../images/icon_03.png", ???????img2: "../images/icon_02.png", ???????img3: "../images/icon_01.png" ???}}不过这时候方法和上面的基本上是一样的，我就不详细说了，直接代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<meta name="viewport" content="width=device-width, initial-scale=1.0"> ???<meta http-equiv="X-UA-Compatible" content="ie=edge"> ???<title>Document</title> ???<script src="./js/jquery-2.1.1.min.js"></script> ???<script src="./js/config.js"></script></head><body> ???<header> ???????工1商银行 ???</header> ???<div> ???????<a href="">我是按钮1</a> ???????<a href="">我是按钮2</a> ???????<a href="">我是按钮3</a> ???????<p> 我是按钮4 </p> ???????<button> 我是按钮5 </button> ???????<img class="img1"> ???</div> ???<script> ???????$("header").text().indexOf("工商银行") > -1 ? ???????document.writeln("我是工行") : ???????document.writeln("我不是工行"); ???????var a = config.first, ???????????b = config.second, ???????????c = $("header").text().indexOf("工商银行") > -1; ???????console.log($("header").text()); ???????if (c) { ???????????console.log(a); ???????????var btncolor = a.btncolor; ???????????console.log(btncolor); ???????????$("a,p,button").css("color", btncolor); ???????????var img1 = a.img1; ???????????console.log(img1); ???????????$(".img1").attr(‘src‘, img1); ???????} else { ???????????console.log(b); ???????????var btncolor = b.btncolor; ???????????console.log(btncolor); ???????????$("a,p,button").css("color", btncolor); ???????????var img1 = b.img1; ???????????console.log(img1); ???????????$(".img1").attr(‘src‘, img1); ???????} ???</script></body></html>举一反三的情况下：我们可以怎么在react项目中来配置全局颜色呢，直接看代码：
<!DOCTYPE html><html> ?<head> ???<meta charset="UTF-8" /> ???<title></title> ???<script src="https://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script> ???<script src="https://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script> ???<script src="https://static.runoob.com/assets/react/browser.min.js"></script> ???<script src="./js/config2.js"></script> ?</head> ?<body> ???<div id="example"></div> ???<script type="text/babel"> ???????var NoLink = React.createClass({ ???????????show: function(dd){ ???????????????alert(dd) ???????????}, ???????????render: function() { ???????????????var o = this; ???????????????var message = [1,5,7,9,0]; ???????????????console.log(config); ???????????????var btncolor = config.btncolor; ???????????????var sss = message.map(function(data){ ???????????????????return( ???????????????????????<input type="button" value={data} onClick={o.show.bind(data,data)} style={{backgroundColor:btncolor}}/> ???????????????) ?????????????}) ???????????return( ???????????????<div> {sss} </div> ???????????????) ??????????????????} ???????}); ???????ReactDOM.render( ???????<NoLink />, ???????document.getElementById(‘example‘) ???????) ???</script> ?</body></html>config.js配置页面中的样式和图片路径
原文地址：http://www.cnblogs.com/glauto/p/8036685.html