javascript编码原则部分摘要|青训营

深色模式可以只用css实现,代码如下。

<style>
#modeCheckBox:checked+.content
{
    background-color:black;
    color:white;
    transition:all 1s;
}
</style>
<input id="modeCheckBox" type="checkbox">
<div class="content">
</div>

轮播图组件可以插件化、模板化、抽象化，代码如下。

class Component
{
 constructor(id,opts={name,data:[]})
 {
    this.container=document.getElementById(id);
    this.options=opts;
    this.container.innerHTML=this.render(opts.data);
 }
 registerPlugins(...plugins)
 {
    plugins.forEach(plugin=>{
        const pluginContainer=document.createElement('div');
        pluginContainer.className='.${name}_plugin';
        pluginContainer.innerHTML=plugin.render(this.options.data);
        this.container.appendChild(pluginContainer);
        plugin.action(this);
    })
 }
 render(data)
 {
 }
}

通过查阅相关资料，可以发现编写javascript时还有许多值得注意的细节，比如定义变量时指定数据类型，函数返回固定的类型，还有箭头函数、类、模板字符串、默认参数、三元运算符等特性也都可以用来优化代码。