相应式设想状况治理Javascript类库-JavaScript State Manager

JavaScript State Manager是一种轻量级的、易于运用的状况管理器,重要用于相应式网站。它不须要任何的JavaScript框架。你能够定义断点将运转在当前断点的JavaScript代码打包在一起。

《相应式设想状况治理Javascript类库-JavaScript State Manager》

  • 我为何要运用SimpleStateManager而不是媒体查询?

媒体查询许可您转变一个网站是基于一系列的前提,相反,SimpleStateManager许可你转变你的网站的功用。如许,媒体查询和SimpleStateManager赞美对方,在状况你转变网站的表面也能够转变功用。

重要特征

  • 超轻量级

  • 不依赖任何第三方类库

  • 支撑差别状况增加删除 – add/remove,具有一个完全的API文档

  • 支撑扩大

示例代码

    ssm.addState({
        id: 'mobile',
        maxWidth: 767,
        onEnter: function(){
            console.log('enter mobile');
        }
    });
     
    ssm.addState({
        id: 'tablet',
        minWidth: 768,
        maxWidth: 1023,
        onEnter: function(){
            console.log('enter tablet');
        }
    });
     
    ssm.addState({
        id: 'desktop',
        minWidth: 1024,
        onEnter: function(){
            console.log('enter desktop');
        }
    });
增加多个状况
    ssm.addStates([
        {
            id: 'mobile',
            maxWidth: 767,
            onEnter: function(){
                console.log('enter mobile');
            }
        },
        {
            id: 'tablet',
            minWidth: 768,
            maxWidth: 1023,
            onEnter: function(){
                console.log('enter tablet');
            }
        },
        {
            id: 'desktop',
            minWidth: 1024,
            onEnter: function(){
                console.log('enter desktop');
            }
       }
    ]);

ssm.removeState('mobile'); //删除单个状况
ssm.removeStates(['tablet', 'mobile']); //删除多个状况

态增加后,须要挪用ready()方法来触发,以下:

ssm.ready();
  • 支撑链式操纵,以下:

    ssm.addState({
        id: 'mobile',
        maxWidth: 767,
        onEnter: function(){
            document.getElementById('hero').style.backgroundColor = "#daa23e";
        }
    }).ready();

当屏幕大于979px的时刻:
《相应式设想状况治理Javascript类库-JavaScript State Manager》
当小于979px的时刻就会给他增加一些事宜:
《相应式设想状况治理Javascript类库-JavaScript State Manager》

    原文作者:老谭
    原文地址: https://segmentfault.com/a/1190000003943091
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞