您的位置：首页 > Web前端 > CSS

config.js配置页面中的样式和图片路径

2017-06-24 15:50 204 查看
这个文章用在什么地方，我先说一下，上周啊，我接到一个任务。因为公司业务要对接不同的银行，例如在工行下颜色是红色的，在其他银行下默认为蓝色，所以在页面一致的情况下，保证页面中的按钮和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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航