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

这个文章用在什么地方，我先说一下，上周啊，我接到一个任务。因为公司业务要对接不同的银行，例如在工行下颜色是红色的，在其他银行下默认为蓝色，所以在页面一致的情况下，保证页面中的按钮和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>

posted @ 2017-12-14 11:11 高亮uncle 阅读(455) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：高亮uncle
园龄： 7年9个月
粉丝： 25
关注： 12

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. vue全面介绍--全家桶、项目实例(1)

高亮

好雨知时节

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

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	var config = {
	// 改变全局按钮颜色
	btncolor: "red",
	// 配置优惠券和同意的Icon
	img1: "../images/icon_01.png",
	img2: "../images/icon_02.png",
	img3: "../images/icon_03.png"
	}

	($("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>

	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>
	<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>