写好JavaScript的灵丹妙药 | 青训营笔记

音乐小精灵
133 阅读5分钟

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

        JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

java.png

        写好JS的三大基本原则：各司其职、组件封装、过程抽象。

1.各司其职
        应当避免不必要的由JS直接操作样式，可以用class来表示状态，最好用纯展示类交互寻求零JS的方案。
        案例：写一段JS，控制一个网页，让它支持浅色和深色两种浏览模式。
        解答：无不必要JS直接操作样式，定义变量btn，定义鼠标单击操作方法，切换body对象中ClassName的属性状态，无过多HTML与CSS主要功能语句。 
const btn = document.getElementById('modeBtn');
  btn.addEventListener('click', (e) => {
    const body = document.body;
    if(body.className !== 'night') {
      body.className = 'night';
    } else {
      body.className = '';
    }
  });

        JavaScript控制行为，CSS控制页面展示，HTML控制页面结构。处理前端需求时，一定要遵循JavaScript、CSS、HTML各司其职的原则，各自实现对应的功能，这样的好处不仅便于后续代码的维护扩展，而且可以做到代码简洁、可读性高。

11.png

2.组件封装
        组件是指Web页面上抽出来一个个包含模版（HTML）、功能（JS）和样式（CSS）的单元。好的组件具备封装性、正确性、扩展性、复用性。
        基本方法：
  • 结构设计
  • 展现效果
  • 行为设计——API（功能）&& Event（控制流）
        案例： 利用原生JS写一个电商网站的轮播图。
        解答： HTML构建结构。轮播图是一个典型的列表结构，我们可以使用无需列表ul元素实现； CSS构建样式。使用CSS绝对定位将图片重叠在同一个位置，轮播图切换的状态使用修饰符，轮播图的切换动画使用 CSS transition；JS构建行为。利用API，构建控制流行为，使用自定义事件来解耦。

        HTML: 
<div id="my-slider" class="slider-list">
      <ul>
        <li class="slider-list__item--selected">
          <img src="A.png">
        </li>
        <li class="slider-list__item">
          <img src="B.jpg">
        </li>
        <li class="slider-list__item">
          <img src="C.jpg">
        </li>
        <li class="slider-list__item">
          <img src="D.jpg">
        </li>
      </ul>
    </div>

        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;
  }

        JS:

lass 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);
  • 组件设计的原则:封装性、正确性、扩展性、复用性
  • 实现组件的步骤：结构设计、展现效果、行为设计
  • 三次重构：插件化、模板化、抽象化（组件框架）
  • 封装的组件必须具有高性能，低耦合的特性
  • 实现组件封装，有效提高程序代码性能

44.png

3.过程抽象
        过程抽象是用来处理局部细节控制的一些方法，这也是函数式编程思想的基础应用。
        应用举例1:纯函数和非纯函数
        纯函数（Pure Function）输入输出数据流全是显式（Explicit）的。函数与外界交换数据只有一个唯一渠道——参数和返回值；函数从函数外部接受的所有输入信息都通过参数传递到该函数内部；函数输出到函数外部的所有信息都通过返回值传递到该函数外部。
        非纯函数（Impure Function）通过隐式（Implicit）方式，从外界获取数据，或者向外部输出数据，函数通过参数和返回值以外的渠道，和外界进行数据交换。比如，读取全局变量，修改全局变量，都叫作以隐式的方式和外界进行数据交换；比如，利用I/O API（输入输出系统函数库）读取配置文件，或者输出到文件，打印到屏幕。 
 //纯函数
 def add(a:Int,b:Int) = a + b
 //非纯函数
 var a = 1
 def addA(b:Int) = a + b

        应用举例2:高阶函数

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
//高阶函数
function HOF0(fn) {
    return function(...args) {
      return fn.apply(this, args);
    }
  }

        应用举例3:编程范式

  • 命令式：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。
  • 声明式：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。

33.png

//命令式
let list = [1, 2, 3, 4];
  let mapl = [];
  for(let i = 0; i < list.length; i++) {
    mapl.push(list[i] * 2);
  }
  //声明式
let list = [1, 2, 3, 4];
  const double = x => x * 2;
  list.map(double);
My Personal Summary
        JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能。
        为了成为一名优秀的前端开发工程师，要严格牢记并遵循写好JS的三大基本原则——各司其职、组件封装、过程抽象，创造出更优秀的网页编程代码，创造出更精湛的网页，实现最优化的脚本框架。
        如果人生就像编程，那么指针能寻找到绝对地址，心情就能带我们去到想要去的地方；如果人生就像编程，输入总是能得到相应输出，那真心换来的一定也是真心；如果人生就像编程，我就是那个简单的程序员，用键盘敲出想要的生活。加油，未来的前端工程师！

44.png

avatar
文章
阅读
粉丝