響應(yīng)式設(shè)計狀態(tài)管理Javascript類庫-JavaScript State Manager

Elle 發(fā)布于2019-08-21 10:45 / 701人閱讀

摘要：是一種輕量級的易于使用的狀態(tài)管理器，主要用于響應(yīng)式網(wǎng)站。它不需要任何的框架。你可以定義斷點將運行在當(dāng)前斷點的代碼打包在一起。這樣媒體查詢和稱贊對方在情況你改變網(wǎng)站的外觀也可能改變功能。

JavaScript State Manager是一種輕量級的、易于使用的狀態(tài)管理器，主要用于響應(yīng)式網(wǎng)站。它不需要任何的JavaScript框架。你可以定義斷點將運行在當(dāng)前斷點的JavaScript代碼打包在一起。

我為什么要使用SimpleStateManager而不是媒體查詢?

媒體查詢允許您改變一個網(wǎng)站是基于一系列的條件,相反,SimpleStateManager允許你改變你的網(wǎng)站的功能。這樣,媒體查詢和SimpleStateManager稱贊對方,在情況你改變網(wǎng)站的外觀也可能改變功能。

主要特性

超輕量級

不依賴任何第三方類庫

支持不同狀態(tài)添加刪除 - add/remove，擁有一個完整的API文檔

支持?jǐn)U展

示例代碼

    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");
        }
    });
添加多個狀態(tài)
    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"); //刪除單個狀態(tài)
ssm.removeStates(["tablet", "mobile"]); //刪除多個狀態(tài)

態(tài)添加后，需要調(diào)用ready()方法來觸發(fā)，如下：

ssm.ready();

支持鏈?zhǔn)讲僮鳎缦拢?/p>

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

當(dāng)屏幕大于979px的時候：

當(dāng)小于979px的時候就會給他添加一些事件：