如何写好JavaScript笔记 | 青训营

用户8312626552457
48 阅读2分钟

如何写好JavaScript

我们学习了HTML/CSS/JavaScript，离真正的前端工程师还有多远？换一个说法，前端工程师对于JavaScript有什么标准？怎么写JavaScript才是好的代码。

前提：已经对JS的基础（如语法语义）有一定的了解，在这节课里面基本没有讲JS的基础，重点在如何写好JS代码。（不仅限于JS，JavaScript程序员本质上也是程序员，因此这里面有很多相通的东西，有同样的原则、技巧）

推荐资料：犀牛书和红宝书（JavaScript 权威指南和JavaScript 高级程序设计）这两本书都很厚，而且会越来越厚，因为JavaScript会有越来越多的新特性。

 

写好JavaScript的原则

一 各司其责

什么叫各司其责？就是让HTML/CSS/JS职能分离。

  •  HTML/CSS/JS各司其责

  • 应当避免不必要的由JS直接操作样式

  • 可以用class来表示状态

  • 纯展示类交互寻求零JS方案


 

课程中的例子的简单实现：

情景：一个网页，在很多时候，他提供深色和浅色模式，白天使用浅色模式，晚上使用深色模式，便于用户更好的去阅读。

最容易想到的方式就是使用DOM API获取网页右上角button值，用if判断，如果是深色模式，就把CSS样式改为浅色，如果是浅色模式，就把CSS样式改为深色，同时修改标签内容。

这个版本有什么问题？怎么优化？

新的版本：使用CSS className来判断，切换CSS class即可。这种版本也有助于一个项目，一个团队里面其他程序员看懂代码。

还能优化吗？

白天夜晚阅读模式的切换——零JS方案

涉及到CSS高级功能，使用伪类选择器。

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="1.css">
</head>

<body>
    <input id ="checkBox" type="checkbox">
    <div class="content">
        <header>
            <label id = 'btn' for ="checkBox"></label>
            <h1>深夜食堂</h1>
        </header>

        <main>
            <div class = "description">
                <p>some....</p>
                <p>some....</p>
                <p>some....</p>
            </div>
        </main>
    </div>
</body>
</html>

CSS代码

*
{
    box-sizing: border-box;
}
body,html
{
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.content
{
    height: 100%;
    padding: 10px;
    transition: background-color 1s,color 1s;
}

#checkBox
{
    display: none;
}

#checkBox:checked + .content
{
    background-color: black;
    color: white;
    transition: all 1s;
}

#btn
{
    float: right;
}

#btn::after
{
    content: '☀';
}

#checkBox:checked + .content #btn::after
{
    content: '🌙';
}

效果如下
点击☀符号时，页面切换成夜间模式：

image.png 点击🌙符号时，页面切换成白天模式：

image.png

二 组件封装

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

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

三次重构：插件化、模板化、抽象化（组件框架）

解耦：将控制元素抽取为插件，插件与组件之间通过依赖注入的方式建立联系

 

三 过程抽象

  • 用来处理局部细节控制的一些方法

  • 函数式编程思想的基础应用

 

avatar
文章
阅读
粉丝