文章目录
1. 序言
本课程主要讲解JavaScript编码原理和代码优化相关问题。
重要内容:
2.写好JS的一些基本原则
责任
首先,好的后端代码应该是这样的:HTML、CSS、JS代码三部分各司其责,即各自控制自己负责的部分。 主要注意事项如下:
例如,在下面的反例中:
我们来实现一个黑模式切换功能,通常有以下几种方式实现
这样,当我们点击切换按钮时,页面就会切换到黑色模式显示。
不过上面的代码还有很大的优化空间。 首先,我们可以通过类来优化这个过程,减少 DOM 操作的次数。
据悉,我们可以使用纯CSS来实现这一功能。 利用label标签和:checked伪类的特点,我们实现了不依赖JS代码切换界面深色和浅色主题的功能。
接下来我们封装一个轮播组件
alt="图片.png"/>
-JS代码:
首先,建立轮播组件的基本结构,展示其功效和行为。
下一步javascript 编码规范,我们开始构建轮播控件。 对于轮播控件,我们通过自定义storm来控制origin控件的状态切换,从而与轮播组件进行前馈。
在这里javascript 编码规范,我们在 Silder 的构造函数中定义控制技术。 并添加新的启动和停止方法来实现特定的控制行为。
class Slider {
constructor(id, delay=3000) {
this.container = document.querySelector(`#${id}`);
this.sliders = document.querySelectorAll('.slider__item, .slider__item--selected');
this.delay = delay;
const controlContainer = document.querySelector('.slider__control');
if(controlContainer) {
const controls = document.querySelectorAll('.slider__control-item, .slider__control-item--selected');
controlContainer.addEventListener('mouseover', evt=> {
const idx = Array.from(controls).indexOf(evt.target);
if(idx >= 0) {
this.toslider(idx);
this.stop();
}
});
controlContainer.addEventListener('mouseout', evt=> {
this.start();
})
this.container.addEventListener('silde', evt => {
const idx = evt.detail.index;
const selected = document.querySelector('.slider__control-item--selected');
if(selected) {
selected.className = 'slider__control-item';
}
controls[idx].className && (controls[idx].className = 'slider__control-item--selected');
})
}
const pre = document.querySelector('.slider__control--previouse');
if(pre) {
pre.addEventListener('click', evt => {
this.stop();
this.preslider();
this.start();
evt.preventDefault();
})
}
const next = document.querySelector('.slider__control--next');
if(next) {
next.addEventListener('click', evt => {
this.stop();
this.nexslider();
this.start();
evt.preventDefault();
})
}
}
getCurrent() {
const current = document.querySelector('.slider__item--selected');
return current;
}
getCurrentIndex() {
return Array.from(this.sliders).indexOf(this.getCurrent());
}
toslider(idx) {
const current = this.getCurrent();
if(current) {
current.className = 'slider__item';
}
this.sliders[idx] && (this.sliders[idx].className = 'slider__item--selected');
const detail = {
index: idx
};
const event = new CustomEvent('silde', {bubbles: true, detail});
this.container.dispatchEvent(event);
}
preslider() {
const idx = this.getCurrentIndex();
this.toslider((this.sliders.length + idx - 1) % this.sliders.length);
}
nexslider() {
const idx = this.getCurrentIndex();
this.toslider((idx + 1) % this.sliders.length);
}
start() {
this.stop();
this.timer = setInterval(()=>this.nexslider(), this.delay);
}
stop() {
clearInterval(this.timer);
}
}
至此,一个基本的轮播组件就已经封装完成了。
在前面的实现过程中,我们在Slider类的构造函数中定义了各个控件的所有行为,因此各个控件的行为与Silder组件是高度耦合的。 对此,我们需要将每个控件的行为单独封装为插件,然后通过安装插件的方式将插件安装到组件上,实现前馈。 同时,如果我们以后需要减少控制,只需要添加相应的控制插件即可。
在此基础上,我们可以进一步封装模板,将正式控件对应的HTML代码也封装到插件中。
这样封装之后,我们只需要一组HTML标签就可以展示整个轮播组件了。
过程比喻
流程可视化是借助函数式编程思想来处理局部细节控制的一些技术。
常用的高阶函数