这是我参与「第四届青训营 -前端场」笔记创作活动的的第3篇笔记

如何写好JavaScript

1.1 写好JS的一些原则

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

1.2组件封装

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

eg：

用原生 JS 写一个电商网站的轮播图：

结构（HTML）

 <div id="my-slider" class="slider-list">
      <ul>
        <li class="slider-list__item--selected">
          <img src="https://p5.ssl.qhimg.com/t0119c74624763dd070.png">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01adbe3351db853eb3.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p2.ssl.qhimg.com/t01645cd5ba0c3b60cb.jpg">
        </li>
        <li class="slider-list__item">
          <img src="https://p4.ssl.qhimg.com/t01331ac159b58f5478.jpg">
        </li>
      </ul>
    </div>

结构

轮播图是一个典型的列表结构，我们可以使用无序列表ul元素来实现。 表现（CSS）

#my-slider{
    position: relative;
    width: 790px;
  }

  .slider-list ul{
    list-style-type:none;
    position: relative;
    padding: 0;
    margin: 0;
  }

  .slider-list__item,
  .slider-list__item--selected{
    position: absolute;
    transition: opacity 1s;
    opacity: 0;
    text-align: center;
  }

  .slider-list__item--selected{
    transition: opacity 1s;
    opacity: 1;
  }

表现

使用 CSS 绝对定位将图片重叠在同一个位置
轮播图切换的状态使用修饰符（modifier）
轮播图的切换动画使用 CSS transition

行为（JS）

 class Slider{
    constructor(id){
      this.container = document.getElementById(id);
      this.items = this.container
      .querySelectorAll('.slider-list__item, .slider-list__item--selected');
    }
    getSelectedItem(){
      const selected = this.container
        .querySelector('.slider-list__item--selected');
      return selected
    }
    getSelectedItemIndex(){
      return Array.from(this.items).indexOf(this.getSelectedItem());
    }
    slideTo(idx){
      const selected = this.getSelectedItem();
      if(selected){ 
        selected.className = 'slider-list__item';
      }
      const item = this.items[idx];
      if(item){
        item.className = 'slider-list__item--selected';
      }
    }
    slideNext(){
      const currentIdx = this.getSelectedItemIndex();
      const nextIdx = (currentIdx + 1) % this.items.length;
      this.slideTo(nextIdx);
    }
    slidePrevious(){
      const currentIdx = this.getSelectedItemIndex();
      const previousIdx = (this.items.length + currentIdx - 1)
        % this.items.length;
      this.slideTo(previousIdx);  
    }
  }

  const slider = new Slider('my-slider');
  slider.slideTo(3);

行为：API

总结：基本方法

结构设计
展现效果
行为设计

API （功能）

Event （控制流）

插件化

解耦：

将控制元素抽取成插件
插件与组件之间通过依赖注入 方式建立联系
将TML模块化，更容易扩展

补：静态界面搭建总结

通常类似于导航栏、项目logo、快捷导航、查看更多、友情链接、立即制作等使用超链接a标签进行制作

定位所谓的定位，简单来说就是通过css样式属性（float或position）设置HTML元素运行时在HTML页面中的位置。

css中的定位主要分为浮动（float）和定位（position)

使用固定定位这一属性定义网页元素的时候，相对的父级或者参照物是浏览器窗口；当position属性设置为fixed时，即将元素设定为固定定位，这一属性脱离普通文档流存在，所以设定后，它将始终显示于固定的位置，不随浏览器窗口变化而变化，也不随浏览器滚动条而改变位置

脱离文档流：fixed，absolute；

脱离文档流能让 HTML 元素脱离文档流的方式：

将元素设置为浮动将元素设置为绝对定位将元素设置为固定定位 position属性 position 属性具有 4 个值：

static：表示静态定位，默认值(不开启定位) absolute：表示绝对定位 fixed：表示固定定位 relative：表示相对定位显示与溢出显示与隐藏如下所示：

display 属性：用来设置 HTML 元素的显示类型。 visibility 属性：用来设置显示或隐藏 HTML 元素。 display属性 CSS display 属性用来设置 HTML 元素的显示类型，例如将 HTML 页面中某个元素设置为块级元素、内联元素或者行内块级元素的显示类型。当然，display 属性也可以将某个元素隐藏，在运行该 HTML 页面时，是看不到这个元素的效果的。

display 属性的值较多，这里主要围绕显示隐藏进行学习。该属性的常用值如下所示：

block：表示将某个元素的显示类型设置为块级元素。 inline：表示将某个元素的显示类型设置为内联元素。 inline-block：表示将某个元素的显示类型设置为行内块级元素。 none：表示将某个元素进行隐藏，不显示在 HTML 页面中。当为某个元素设置 display 属的值为 none 时，表示关闭了该元素在 HTML 页面中的显示。这种情况下，由于隐藏的元素不再在 HTML 页面中占用任何区域，所以会导致该元素后的所有兄弟元素的布局显示位置。并且，该元素的所有后代元素也同样会被关闭显示效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
        }

        .box1{
            background-color: grey;
        }
        .box2{
            background-color: purple;
            display:none;
            /* 当前元素设置为隐藏
               所占区域消失
               当前元素设置为显示
               将display设置为非none值 */
        }
        .box3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- <div></div> -->
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
</body>
</html>

这是运行display:none;之前和运行display:none;之后的两个效果

visibility属性

visibility 属性的值常用的有 2 个，如下所示：

visible：表示将某个元素设置为显示。
hidden：表示将某个元素设置为隐藏。

内容溢出 overflow属性 CSS overflow 属性用来设置当子级元素溢出父级元素的区域时，要如何进行处理。该属性的值具有如下几种：

visible：l默认值。内容不会被修剪，会显示在父级容器之外。 hidden：内容会被修剪，并且其余内容不可见。 scroll：内容会被修剪，浏览器会显示滚动条以便查看其余内容。 auto：由浏览器决定，如果内容被修剪，就会显示滚动条。当设置 overflow 属性的值为 hidden 时，表示如果子级元素溢出父级元素时，将溢出部分的内容进行隐藏

当设置 overflow 属性的值为 scroll 时，表示如果子级元素溢出父级元素时，浏览器显示滚动条来查看溢出部分的内容

值得注意的是，当设置 overflow 属性的值为 scroll 时，无论子级元素是否溢出父级元素，浏览器都会显示滚动条

当设置 overflow 属性的值为 auto 时，浏览器会根据具体的情况来判断是否显示滚动条，具体情况如下：

如果子级元素没有溢出父级元素的话，浏览器则不显示滚动条。如果子级元素溢出父级元素的话，浏览器则显示滚动条。 ext-overflow属性 CSS text-overflow 属性用来设置当文本内容溢出时，要如何进行处理。该属性的值具有如下几种：

clip：将文本内容超出父级容器的部分隐藏。 ellipsis：将文本内容超出父级容器的部分使用省略号（…）表示。 string：将文本内容超出父级容器的部分使用指定文本内容表示，例如“.”等。注意：当设置 text-overflow 属性时，同时需要设置 overflow 属性为非 visible，否则 text-overflow 属性将无效

z-index设置层级必须拥有定位属性在需要给某一元素设定层级的时候，必须设置定位属性，否则不起作用；注意：

（1）z-index的默认值是0，同级元素取值越大，定位元素在层叠元素中越靠上；
（2）父子元素比较，父元素z-index不会起作用，子元素在z-index正负值上才会与父元素产生层叠效果。
（3）不同父元素且父元素设置z-index情况下，子元素依照自己父元素的z-index发生层叠（即“拼爹”）。
（4）在上一条情况的基础上，修改子元素的z-index只会影响该子元素的层叠效果，对父元素不产生影响。
（5）同样在（3）的情况下，为子元素z-index设置负值，那他们就都会被父元素覆盖掉。 2、如果取值相同，根据书写顺序，后来者居上。

3、数字后面不能加单位。

4、只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性。

如何写好JavaScript | 青训营笔记