【青训营】月影带我学js——各司其责
JS 青训营 月影 我学
2023-06-13 09:15:05 时间
theme: channing-cyan
各司其责
我们都知道前端html和css,还有js都是不同的分工,这三个其实就是各司其责,web开发从一开始的框架上就做了职责分离,这样的话可以避免混用,造成应用非常的复杂。
写个小栗子来进行讲解,大家看到最后绝对会惊艳到。
我们写一个div,里面包着span,点击button的时候添加div背景颜色和span字体颜色。非常简单, 大家看一下代码。
<body>
<div style="width: 100px;height: 100px;">
<span>我是大熊jackson</span>
</div>
<button>点击改变div颜色</button>
</body>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
let div = document.querySelector('div');
let span = document.querySelector('span');
div.style.backgroundColor = '#99bb88';
span.style.color = '#fff';
})
</script>
这个代码看起来是没有什么问题,我们仔细想想它是否有优化的空间,往各司其责上想。如果有其他人读我们的代码,代码很多的情况下他是不容易分辨我们写的是什么内容。 我们这里修改样式,是直接动用css属性,其实我们可以直接给给class类的。
<style>
.change{
background-color: #99bb88;
}
.change span{
color: #fff;
}
</style>
</head>
<body>
<div style="width: 100px;height: 100px;">
<span>我是大熊jackson</span>
</div>
<button>点击改变div颜色</button>
</body>
<script>
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
let div = document.querySelector('div');
let span = document.querySelector('span');
div.className = 'change';
})
以上这个方法就是添加一个类,我们读代码的时候直接找类名就可以知道操作的是什么了。 但是这样优化的还是不够,我们仔细想想这个其实是一个纯css的职责,没必要让js来参与操作。
最好的代码就是不写代码! 先看用纯css改变
<style>
#checkbox:checked + .change{
background-color: #99bb88;
}
#checkbox:checked + .change span{
color: #fff;
}
#checkbox{
display: none;
}
label{
border: 1px solid #ccc;
display: inline-block;
padding: 10px;
}
</style>
</head>
<body>
<input id="checkbox" type="checkbox" >
<div class="change" style="width: 100px;height: 100px;">
<span>我是大熊jackson</span>
</div>
<label for="checkbox">
点击改变div颜色
</label>
</body>
看到这个方法大家有没有惊艳到。我们用css的checkbox选中事件来做处理,直接就避免了编写js代码。
其实在这里还存在一些问题,比如刷新页面后状态就无法保存了。这时候就需要用到js了。但是纯展示类的我们还是尽量追求零JS。
总结
- HTML CSS JS 应该各司其责
- 应当避免不必要的由JS直接操作样式
- 可以用class来表示状态
- 纯展示类交互寻求零JS方案
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- 关于JS全局变量问题
- html如何只刷新页面指定,js控制页面刷新 JS刷新当前页面的几种方法总结
- 用JS获取地址栏url参数的方法_js的url是啥
- 【说站】js中介者模式是什么意思?
- Js排序算法_js 排序算法
- Js生成二维码_js在线生成二维码
- js中四舍五入的方法_JS取整
- 【青训营】关于JS设计模式(一)
- 【青训营】JS洗牌算法
- 【源码】PDF.js批注注释插件库(纯JS). 创建和保存PDF批注(PDF 高亮/签名/插图/截屏/文本框/画笔/多边形)-pdf.js
- JS代码如何嵌入到网页中
- JS在Oracle中的应用(js如何oracle)
- Redis中的订阅机制及其在JS中的应用(redis 订阅 js)
- html锁定页面(js遮罩层弹出div效果)
- jquerytablesorter.js支持中文表格排序改进
- JS判断当前日期是否大于某个日期的实现代码
- js获取坐标通过JS得到当前焦点(鼠标)的坐标属性
- js剪切板的用法(clipboardData.setData)与jsmatch函数介绍
- JS屏蔽按键效果与改变按键效果的示例代码
- js通过html()及text()方法获取并设置p标签的显示值
- 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门