JS成功学之「各司其职」 | 青训营笔记

Canivores
99 阅读3分钟

JS成功学之「各司其职」 | 青训营笔记

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

写好JS的三大原则：

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

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

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

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

HTML（Hyper Text Markup Language）即超文本标记语言，是页面的骨架。

编译过程：当浏览器通过http请求得到一个响应头中content-type为text/html的响应后就将响应数据从二进制转变为html文件最终生成为DOM树，浏览器根据DOM树的结构开始渲染页面。

CSS则是使用各种选择器和各种dom关系以及标签状态等为不同的标签设置各自的样式。

编译过程：浏览器在生成DOM树的同时也解析CSS文件生成CSSOM树，最终根据这两棵树确定页面的结构和页面的样式。

JavaScript则是在浏览器上运行的编程语言，浏览器编译运行js代码对用户的各种行为做出反应，比如点击按钮提交表单后跳转到新的页面，验证用户在浏览某些网页之前是否登录了账号等。

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

版本一：

 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 直接操作样式
  • 可以用 class 来表示状态
  • 纯展示类交互寻求零 JS 方案
avatar
文章
阅读
粉丝