美文网首页MockJS
Mock.js之数据模板定义 DTD

Mock.js之数据模板定义 DTD

作者: Lia代码猪崽 | 来源:发表于2019-11-15 15:24 被阅读0次

    数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:

    // 属性名   name
    // 生成规则 rule
    // 属性值   value
    'name|rule': value
    

    注意:
    属性名 和 生成规则 之间用 | 分隔。
    生成规则 是可选的。

    生成规则 有 7 种格式:

    1. 'name|min-max': value
    2. 'name|count': value
    3. 'name|min-max.dmin-dmax': value
    4. 'name|min-max.dcount': value
    5. 'name|count.dmin-dmax': value
    6. 'name|count.dcount': value
    7. 'name|+step': value
    • 生成规则 的 含义 需要依赖 属性值 才能确定。
    • 属性值 中可以含有 @占位符
    • 属性值 还指定了最终值的初始值和类型。

    一、属性值是字符串 String
    1. 'name|min-max': 'value'通过重复 'value'生成一个字符串,重复次数大于等于 min,小于等于 max
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="show"></div>
    <script src="http://mockjs.com/dist/mock.js"></script>
    <script>
        window.onload = function(){
            // 使用 Mock
            var data = Mock.mock({
                'list|1-10': 'hello'
            });
            document.getElementById('show').innerText = JSON.stringify(data, null, 4);
        }
    </script>
    </body>
    </html>
    
    结果1
    结果2
    1. 'name|count': 'value'通过重复 'value'生成一个字符串,重复次数等于 count
      (其余代码与上面的相同,所以这个以及后面的都省略了,测试时请自行不上)
    // 使用 Mock
    var data = Mock.mock({
        'list|3': 'hello'
    });
    
    结果,三次hello
    二、 属性值是数字 Number
    1. 'name|+1': 100 属性值自动加 1,初始值为 100
    var data = Mock.mock({
        'name|+1': 100
    });
    
    结果为啥是100而不是101,求解
    1. 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数,属性值 100 只用来确定类型。
    var data = Mock.mock({
        'name|1-100': 100
    });
    
    结果1
    结果2
    1. 'name|1-100.1-10': 100 生成一个浮点数,整数部分大于等于 1、小于等于 100,小数部分保留 110 位。
    var data = Mock.mock({
        'number1|1-100.1-10': 1,
        'number2|123.1-10': 1,
        'number3|123.3': 1,
        'number4|123.10': 1.123
    });
    
    结果1
    结果2
    三、属性值是布尔型 Boolean
    1. 'name|1': value 随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率是 1/2
    var data = Mock.mock({
        'flag|1': true
    });
    
    结果1
    结果2
    1. 'name|min-max': value 随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)
    // true的概率为1/3,false的概率为2/3
    var data = Mock.mock({
        'flag|1-2': true
    });
    
    四、属性值是对象 Object
    1. 'name|min-max': {} 从属性值 {} 中随机选取 minmax 个属性。
    var data = Mock.mock({
        'flag|1-5': {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: 5
        }
    });
    
    结果1
    结果2
    1. 'name|count': {} 从属性值 {} 中随机选取 count 个属性。
    var data = Mock.mock({
        'flag|2': {
            a: 1,
            b: 2,
            c: 3,
            d: 4,
            e: 5
        }
    });
    
    结果1
    结果2
    五、属性值是数组 Array
    1. 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素,作为最终值。
    var data = Mock.mock({
        'name|1': [
            {
                a: 1
            },
            {
                b: 2
            },
            {
                c: 3
            }
        ]
    });
    
    结果1
    结果2
    1. 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数大于等于 min,小于等于 max
    var data = Mock.mock({
        'name|1-3': [
            {
                a: 1
            },
            {
                b: 2
            },
            {
                c: 3
            }
        ]
    });
    
    结果1
    结果2
    1. 'name|count': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组,重复次数为 count
    var data = Mock.mock({
        'name|2': [
            {
                a: 1
            },
            {
                b: 2
            },
            {
                c: 3
            }
        ]
    });
    
    结果
    六、属性值是数组 Function

    'name': function(){} 执行函数 function(){},取其返回值作为最终的属性值,上下文为 'name' 所在的对象。

    var data = Mock.mock({
        'name': function () {
            return 'Jack';
        }
    });
    
    结果

    参考资料

    http://mockjs.com/

    相关文章

      网友评论

        本文标题:Mock.js之数据模板定义 DTD

        本文链接:https://www.haomeiwen.com/subject/fswjictx.html