UI工具

主要目录结构

• constants，常量
• src
  • carousel
  • group，通用类
  • imageLoader
  • modal
  • swipe
  • swipeCarousel
• styles
  • _func.scss
  • _root.scss

其中_func.scss中$rem默认100px，可设置覆盖

Observer

使用观察者模式管理状态切换

自定义观察者(observer)必须包含update方法，接收目标(subject)的当前状态和原状态。使用目标实例方法attach(), detach()管理观察者，参数接收(Observer|Array.<Observer>)。

const customObserver = () => ({
  update(state, prevState) {
    const { page: currentPage } = state;
    const { page: prevPage } = prevState;

    if (prevPage !== currentPage && currentPage === 'main') {
      doSth();
    }
  },
});

const menu = new Menu('main');
menu.attach(customObserver());

menu添加自定义观察者示例。当menu状态切换到打开main页时将执行doSth函数。

browserslist

浏览器支持情况

npx browserslist

见.browserslistrc

测试和文档

测试和文档

npm test

运行单元测试

npm run jsdoc

# darwin
npm run open

生成和查看doc

资源

• How to Build Your Own Progressive Image Loader
• How Medium does progressive image loading
• SpinKit
• Simple Swipe With Vanilla JavaScript
• The Rise Of The State Machines