理解JavaScript | 青训营

这是我参与「第四届青训营」笔记创作活动的的第7天

写好js的一些原则

各司其职：让HTML、CSS和JavaScript职能分离。
组件封装：好的UI组件具备正确性、扩展性、复用性。
过程抽象：应用函数式编程思想。

example one——深夜食堂

写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。 method one

const btn=document.getElementById('modeBtn');
btn.addEventListener('click',(e)=>{
    const body=document.body;
    if(e.target.innerHTML===黑){
        body.style.background-color='white';
        body.style.color='black';
        e.target.innerHTML===白;
    }else{
        body.style.background-color='black';
        body.style.color='white';
        e.target.innerHTML===黑;
    }
})

这种方法将css应该操作的部分，即改变指定元素的style放在js里执行，违背第一个原则且代码简洁度低，较难维护。

method two

const btn=document.getElementById('modeBtn');
btn.addEventListener('click',()=>{
    const body=document.body;
    if(body.className!=='night'){
        body.className='night';
    }else{body.className=' '}
})

将color、background-color封装在css中（className为night），优于method one。

method three

在HTML中添加<input type="checkbox" id="modeCheckBox"> 使checkbox有checked属性，同时利用<label for="modeCheckBox" id="modeBtn"></label>将按钮与checkbox绑定。当一点击按钮，checkbox即checked 同时隐藏，改变样式。这种方法还设置了transition有过渡效果，实现零js。

example two——轮播图

组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。用原生 JS 写一个电商网站的轮播图，应该怎么实现？

JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。

JavaScript是一门动态语言，所谓的动态语言可以暂时理解为在语言中的一切内容都是不确定的。比如一个变量，这一时刻是个整型，下一时刻可能会变成字符串了。当然这个问题我们以后再谈。不过在补充一句动态语言相比静态语言性能上要差一些，不过由于JavaScript中应用的JIT技术，所以JavaScript可能是运行速度最快的动态语言了。