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的时候就会给他添加一些事件：
响应式设计状态管理Javascript类库-JavaScript State Manager
原文：http://www.cnblogs.com/laotanrensheng/p/4931934.html
