JavaScript State Manager是一種輕量級的、易於使用的狀態管理器,主要用於響應式網站。它不須要任何的JavaScript框架。你能夠定義斷點將運行在當前斷點的JavaScript代碼打包在一塊兒。javascript
我爲何要使用SimpleStateManager而不是媒體查詢?java
媒體查詢容許您改變一個網站是基於一系列的條件,相反,SimpleStateManager容許你改變你的網站的功能。這樣,媒體查詢和SimpleStateManager稱讚對方,在狀況你改變網站的外觀也可能改變功能。框架
主要特性網站
超輕量級spa
不依賴任何第三方類庫code
支持不一樣狀態添加刪除 - add/remove,擁有一個完整的API文檔blog
支持擴展事件
示例代碼圖片
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()方法來觸發,以下:ip
ssm.ready();
支持鏈式操做,以下:
ssm.addState({ id: 'mobile', maxWidth: 767, onEnter: function(){ document.getElementById('hero').style.backgroundColor = "#daa23e"; } }).ready();
當屏幕大於979px的時候:
當小於979px的時候就會給他添加一些事件: