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>

config.js配置页面中的样式和图片路径的更多相关文章

用JS改变页面中b标签的样式啊样式的等
用JS改变页面中b标签的样式啊样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
@vue/cl构建得项目下，postcss.config.js配置，将px转化成rem
依赖包: postcss-pxtorem 配置: 在项目根目录下创建 postcss.config.js 配置如下: module.exports = () => ({ plugins: [ r ...
JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分最常用的方式是在页 ...
webpack2-webpack.config.js配置
写在前面: 了解更多:https://github.com/miaowwwww/webpack-learn 贴一个webpack.ocnfig.js 的配置属性表一.代码分割: 1.插件 Comm ...
vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析
1.下载vue-cli npm install vue-cli -g vue-cli的使用与详细介绍,可以到github上获取https://github.com/vuejs/vue-cli 2.安装 ...
vue3.0 vue.config.js 配置实战
今天讲述一下vue-config.js配置,我们前面搭建好脚手架会发现,这个对比2.x版本少了很多东西,没有build的配置,也没有webpack的配置,那么问题来了,我们如何去开发我们的项目呢,比如 ...
webpack.config.js配置信息的说明
module.exports = { entry: "./src/main.js", output: { filename: "build/build.js" ...
关于editor网页编辑器ueditor.config.js 配置图片上传
最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

随机推荐

freemarker 嵌套循环（导出word时，修改ftl模板）
1.循环 (循环输出reportList列表的每行的姓名) <#list reportList as report> ${report.name} </$list> 2.嵌套循 ...
第一周——clone项目到本地
公司使用的是git进行version control,代码托管在gitlab. 按照公司规范注册了gitlab账号, 漫长的等待clone到本地~ 然而,还是有问题,jar包下载不完全(公司网速dow ...
.net core 使用swagger生成API文档
[1]安装Swashbuckle.AspNetCore包 [2]在Startup.cs中注册swagger //注册Swagger生成器,定义一个和多个Swagger 文档 services.AddS ...
scrapy中下载文件和图片
下载文件是一种很常见的需求,例如当你在使用爬虫爬取网站中的图片.视频.word.pdf.压缩包等的时候 scrapy中提供了FilesPipeline和ImagesPipeline,专门用来下载文件和 ...
Chapter 6 排序
Chapter 6 排序 1- 直接插入排序 O(n2) O(1) 2- 折半插入排序 O(n2) O(1) 适合关键字较多 3- 希尔排序O(nlogn) O(1) 又名,缩小增量排序 ...
css 渐变背景
background: linear-gradient(left,#fa7f6d, #fc5e7f); left: 从左边开始
[转]C# 中的委托和事件 + 观察者模式
引言委托和事件在 .Net Framework中的应用非常广泛,然而,较好地理解委托和事件对很多接触C#时间不长的人来说并不容易.它们就像是一道槛儿,过了这个槛的人,觉得真是太容易了,而没有过去 ...
__name__ = '__main__'
有句话经典的概括了这段代码的意义: “Make a script both importable and executable” 意思就是说让你写的脚本模块既可以导入到别的模块中用,另外该模块自己也可 ...
【HAOI2015】树上染色—树形dp
[HAOI2015]树上染色 [题目描述]有一棵点数为N的树,树边有边权.给你一个在0~N之内的正整数K,你要在这棵树中选择K个点,将其染成黑色,并将其他的N-K个点染成白色.将所有点染色后,你会获得 ...
Error-SQLServer：【失败】win7装SQL server2017
ylbtech-Error-SQLServer:[失败]win7装SQL server2017 1.返回顶部 1. 2018年08月15日 22:06:38 USCWIFI 阅读数:5433 版 ...

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

config.js配置页面中的样式和图片路径的更多相关文章

随机推荐

热门专题