zp25 / zp-ui

UI

Home Page:https://ui.zp25.ninja

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

UI工具

npm Build Status

主要目录结构

  • 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

资源

About

UI

https://ui.zp25.ninja

License:MIT License


Languages

Language:JavaScript 90.7%Language:CSS 9.3%