前端与HTML青训营笔记

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

写好JS的原则

1. 各司其职
2. 组件封装
3. 过程抽象

各司其职

• HTML/CSS/JS各司其职
• 应当避免不必要的由JS直接操作样式
• 可以用class来表示状态
• 纯展示类交互寻求零JS方案

组件封装

用js写轮播图

• 结构：HTML 轮播图——>列表结构，使用无序列表<ul>元素实现

• 表现：CSS 使用CSS绝对定位将图片重叠在同一个位置

  轮播图切换的状态使用修饰符（modifier）

  切换动画使用CSS的transition

• 行为设计：API JS API设计应保证原子操作，职责单一，满足灵活性

Slider

+getSelectedItem()

+getSelectedItemIndex()

+slideTo()

+slideNext()

+slidePrevious()

• 行为：控制流 使用自定义事件来解耦

组件封装

总结：基本方法 封装性、正确性、扩展性、复用性

重构：插件化、模板化、组件框架

解耦

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

抽象

• 将通用的组件模型抽象出来

过程抽象

• 用来处理局部细节控制的一些方法
• 函数式编程思想的基础应用

例子

操作次数限制

• 一些异步交互
• 一次性的http请求

高阶函数

• 以函数作为参数
• 以函数作为返回值
• 常用于作为函数装饰器

编程范式

• Toggle - 命令式
• Toggle - 声明式
• Toggle - 三态

举个例子

window.addEventListener('load', function() {

var leftArrow = this.document.querySelector('.lf');
var rightArrow = this.document.querySelector('.lr');

// 鼠标移动到左右箭头的位置更换图片 有灰色背景的图片
leftArrow.addEventListener('mouseenter', function() {
    this.style.backgroundPosition = '0 0';
});

leftArrow.addEventListener('mouseleave', function() {
    this.style.backgroundPosition = '-83px 0';
});

rightArrow.addEventListener('mouseenter', function() {
    this.style.backgroundPosition = '-42px 0';
});

rightArrow.addEventListener('mouseleave', function() {
    this.style.backgroundPosition = '-123px 0';
});

// 获取图片 和 小点
var imgs = this.document.querySelectorAll('.img');
var dots = this.document.querySelector('.dots').querySelectorAll('span');

// 给图片设置index 属性，好判断当前的图片是哪一张
for (let i = 0; i < imgs.length; i++) {
    imgs[i].setAttribute('data-index', i);
}

// 获取当前图片 和 图片的index（数组下标）
var current = this.document.querySelector('.current');
var currentIndex = current.getAttribute('data-index');

// 左箭头的点击事件，点击了就返回前一张图片 
// 如果当前图片为第一张那么需要更换到最后一张图片也就是第四张
leftArrow.addEventListener('click', function() {
    if (currentIndex > 0) {
        imgs[currentIndex].classList.remove('current');
        dots[currentIndex].classList.remove('square');
        imgs[--currentIndex].classList.add('current');
        dots[currentIndex].classList.add('square');
    } else {
        imgs[currentIndex].classList.remove('current');
        dots[currentIndex].classList.remove('square');
        currentIndex = 4;
        imgs[currentIndex].classList.add('current');
        dots[currentIndex].classList.add('square');
    }
});

// 点击右箭头下一张图片切换
// 如果当前为第五张图片，那么切换回第一张图片
rightArrow.addEventListener('click', changeImage);

var timer = this.setInterval(changeImage, 8000);

function changeImage() {
    if (currentIndex < 4) {
        imgs[currentIndex].classList.remove('current');
        dots[currentIndex].classList.remove('square');
        imgs[++currentIndex].classList.add('current');
        dots[currentIndex].classList.add('square');
    } else {
        imgs[currentIndex].classList.remove('current');
        dots[currentIndex].classList.remove('square');
        currentIndex = 0;
        imgs[currentIndex].classList.add('current');
        dots[currentIndex].classList.add('square');
    }
};

// 小圆点的点击事件
for (let k = 0; k < dots.length; k++) {
    dots[k].setAttribute('data-index', k);
    dots[k].addEventListener('click', function() {
        var index = this.getAttribute('data-index');
        if (index != currentIndex) {
            imgs[currentIndex].classList.remove('current');
            dots[currentIndex].classList.remove('square');
            imgs[index].classList.add('current');
            dots[index].classList.add('square');
            currentIndex = index;
        }

    })
}

}); t.csdn.cn/dm495