邂逅如何写好Javascript | 青训营笔记

JavaScript 编码原则之各司其责

JavaScript 好代码的标准

写好JS的一些原则：

各司其责：让HTML、CSS和Javascript职能分离

组件封装：好的UI组件具备正确性、扩展性、复用性

过程抽象：应用函数式编程思想

深夜食堂

这是一间营业时间从午夜十二点到早上七点的特殊食堂。这里的老板，不太爱说话，却总叫人吃得热泪盈 眶。在这里，自卑的舞蹈演员偶遇隐退多年舞界前辈，前辈不惜讲述自己不堪回首的经历不断鼓舞年轻人，最终令其重拾自信；轻言绝交的闺蜜因为吃到共同喜爱的美食，回忆起从前的友谊，重归于好；乐观的绝症患者遇到同命相连的女孩，两人相爱并相互给予力量，陪伴彼此完美地走过了最后一程；一味追求事业成功的白领，在这里结交了真正暖心的朋友，发现真情比成功更有意义。食物、故事、真情，汇聚了整部剧的主题，教会人们坦然面对得失，对生活充满期许和热情。每一个故事背后都饱含深情，情节跌宕起伏，令人流连忘返。

深色模式与浅色模式的切换

// 版本1
const btn = document.getElementById('modeBtn'); 
btn.addEventListener('click', (e) => { 
    const body = document.body; 
    if (e.target.innerHTML === '🌞') { 
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        e.target.innerHTML = '🌜'; 
    }
    else {
        body.style.backgroundColor = 'white';
        body.style.color = 'black';
        e.target.innerHTML = '🌞';
    } 、
});

/*版本2 -- 优化版,直观反映要求*/
body,
html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
​
body {
  box-sizing: border-box;
}
​
.content {
  padding: 10px;
  transition: background-color 1s, color 1s;
}
​
#modeCheckBox {
  display: none;
}
​
#modeCheckBox:checked+.content {
  background-color: black;
  color: white;
  transition: all 1s;
}
​
#modeBtn {
  font-size: 2rem;
  float: right;
}
​
#modeBtn::after {
  content: '🌞';
}
​
#modeCheckBox:checked+.content #modeBtn::after {
  content: '🌜';
}

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

第三版：可以用CSS直接实现功能

结论

• HTML、CSS、JavaScript 各司其责
• 应当避免不必要的由JS 直接操作样式
• 可以用 class 来表示状态，类名具有不错的业务语义
• 纯展示类交互寻求零JavaScript方案

组件封装

组件封装（组件是指Web页面上抽出来一个个包含模版(HTML)、功能(JS)和样式(CSS)的单元。好的组件具备封装性、正确性、扩展性、复用性）

过程抽象

组件设计总结：

• 组件设计的原则:封装性、正确性、扩展性、复用性

• 实现组件的步骤:结构设计、展现效果、行为设计

• 三次重构：插件化、模板化、抽象化(组件框架)

  • 并不影响HTML、CSS、JS各司其责的原则，各自做自己应当做的事情。