JS三大原则之「各司其职」 | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第3天。

写好JS的三大原则：

各司其责： 组件封装过程抽象让HTML、CSS和JavaScript职能分离。

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

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

接下来将详细探讨一下 「各司其职」 这一原则。

在开发过程中将 HTML、CSS 和 JavaScript 分离，使每种技术专注于自己的职责。在组件封装过程中，HTML 负责结构、CSS 负责样式、JavaScript 负责交互。这样做的好处是提高代码的可维护性和可重用性。

即结构、样式和行为各司其职。

各司其职.png

案例：深夜食堂：页面浅色深色模式切换

版本一：

 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 = '🌞';
     }
 });

特点：

让JS直接去控制CSS。
后续CSS样式跟随项目需求发生变化时，需要修改JS代码，且较麻烦。
后续程序员很难直接理解需求。

版本二：

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

特点：

JS只控制class样式，做到了各司其职。
是专业前端工程师应该坚持的风格。

版本三：

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

 //css代码部分
 #modeCheckBox {
     display: none;
 }
 
 #modeCheckBox:checked + .content {
     background-color: black;
     color: white;
     transition: all 1s;
 }

特点：

纯CSS切换的事情CSS单独就可以完成，所以其实不需要JS参与。
这里单击label就可以切换checkbox，label已经和checkbox绑定，这也是JS的特性。

核心

HTML/CSS/JS 各司其责
应当避免不必要的由 JS 直接操作样式
1. 使用 CSS 选择器和 CSS 规则来控制元素样式，而不是使用 JavaScript 来修改样式。
2. 使用 CSS 类来控制元素样式，并在 JavaScript 中通过添加和删除类来改变样式。
3. 使用 CSS 状态类 (state class) 来控制元素的样式, 例如: .is-active, .is-hidden, .is-disabled.
4. 使用 JavaScript 库或框架，如 jQuery 或 React，来操作样式。这些库或框架有自己的方法来操作元素的样式，可以让你的代码更简洁和可维护。
5. 使用 CSS-in-JS 来管理样式, 这样你可以在 JS 中直接管理样式，不过这样做会让你的样式和交互更加紧密结合。
可以用 class 来表示状态
纯展示类交互寻求零 JS 方案