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编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...
随机推荐
- 深入浅出 Java Concurrency (38): 并发总结 part 2 常见的并发场景[转]
常见的并发场景 线程池 并发最常见用于线程池,显然使用线程池可以有效的提高吞吐量. 最常见.比较复杂一个场景是Web容器的线程池.Web容器使用线程池同步或者异步处理HTTP请求,同时这也可以有效的复 ...
- HTML 颜色表示
三种表示方法 1 颜色单词 : blue green red pink 2 10进制表示: RGB(255, 10, 0) 3 16进制表示: #FF0000(红) #00FF00(绿)
- java 对接芝麻信用 -用芝麻私钥解密错误
最近在做芝麻信用认证对接, 按照官方的文档,配置了,appid ,私钥公钥 ,然后把示例文档拷过来, 结果 总是报错, 芝麻私钥解密 ZMOP.decode_private_key_error, 调了 ...
- java基础之完数判断
完数: 完全数(Perfect number),又称完美数或完备数,是一些特殊的自然数.它所有的真因子(即除了自身以外的约数)的和(即因子函数),恰好等于它本身.如果一个数恰好等于它的因子之和,则称该 ...
- elasticsearch 中文API 删除（四）
删除API 删除api允许你通过id,从特定的索引中删除类型化的JSON文档.如下例: DeleteResponse response = client.prepareDelete("twi ...
- php函数基础（一）
一.函数结构 1.构成部分: 关键字 function
- Java内功修炼系列一代理模式
代理模式是JAVA设计模式之一,网上设计模式相关的博文铺天盖地,参考它们有助于自己理解,但是所谓“尽信书不如无书”,在参考的同时也要思考其正确性,写博客也是为了记录自己理解知识点的思路历程和心路历程, ...
- 写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- 谈谈数据库sql编写
本文主要给初学者关于关系数库的一个浮光掠影式的介绍,如果想深入理解,必须对于下文提到的每个内容单独深入学习! it-information technology的简称,中文是信息机技术,信息其实就是数 ...
- Python3实用编程技巧进阶
Python3实用编程技巧进阶 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候可以 ...