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

Elle 发布于2019-08-21 10:45 / 525人阅读

摘要：是一种轻量级的易于使用的状态管理器，主要用于响应式网站。它不需要任何的框架。你可以定义断点将运行在当前断点的代码打包在一起。这样媒体查询和称赞对方在情况你改变网站的外观也可能改变功能。

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函数式编程 javascript框架设计

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86124.html

15个提高编程技巧的JavaScript工具

摘要：官方网站是一组庞大的工具，几乎任何相关文件都可以处理。该工具是独立的，并配有类可处理服务器端的操作。官方网站是一个独立的延迟加载的图像工具。 JavaScript脚本库是一个预先用JavaScript语言写好的库，它方便了我们开发基于JavaScript的应用程序，特别适合AJAX和其他一些以Web为中心的技术。JavaScript主要用于编写嵌入或者包含在HTML页面的函数，从而实现...

LiangJ 2019-08-22 10:56 评论0 收藏0
浅谈MVC,MVP,MVVM渐进变化及React与Vue比较

摘要：将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。此示例使用类似的语法，称为。执行更快，因为它在编译为代码后进行了优化。基于的模板使得将已有的应用逐步迁移到更为容易。前言因为没有明确的界定,这里不讨论正确与否,只表达个人对前端MV*架构模式理解看法,再比较React和Vue两种框架不同.写完之后我知道这文章好水,特别是框架对比部分都是别人说烂的,而我也是打算把...

DrizzleX 2019-08-26 10:36 评论0 收藏0
React.js 最佳实践（2016）_链接修正版

摘要：译者按最近依旧如火如荼相信大家都跃跃欲试我们团队也开始在领域有所尝试年应该是逐渐走向成熟的一年让我们一起来看看国外的开发者们都总结了哪些最佳实践年在全世界都有很多关于新的更新和开发者大会的讨论关于去年的重要事件请参考那么年最有趣的问题来了我译者按：最近React(web/native)依旧如火如荼,相信大家都跃跃欲试,我们团队也开始在React领域有所尝试. 2016年应该是Reac...

syoya 2019-08-19 17:57 评论0 收藏0
Web和Android中的Reactive

摘要：中的常见写法先看下这段代码。声明式编程，就是告诉机器你想要的是什么，让机器想出如何去做。最独特的特性之一，是其非侵入性的响应式系统。的缩写将遍历此对象所有的属性。这一过程被称为依赖收集。组件的显示，数据的体现大部分都是由承载，传递。目录缘起 Android开发中的常见写法 JQuery中的常见写法命令式编程声明式编程 React中的常见写法 Vue的常见写法你肯定熟悉响应...

liangzai_cool 2019-08-26 10:27 评论0 收藏0