响应式设计状态管理Javascript类库-JavaScript State Manager

JavaScript State Manager是一种轻量级的、易于使用的状态管理器，主要用于响应式网站。它不需要任何的JavaScript框架。你可以定义断点将运行在当前断点的JavaScript代码打包在一起。

• 我为什么要使用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的时候：

当小于979px的时候就会给他添加一些事件：