The Mock grammar

The mock. Js is introduced

Mock. Js is a mock data generator designed to help front-end engineers create their own data without having to chase their friends from the back end. Does that mean the front end doesn’t need the back end? Of course not. Mock. Js just provides us with some data that the back end is going to transfer to us, which is actually simulated data for our front-end testing. In normal development, we sometimes have to wait for the back-end interface, which is relatively passive. If the requirements are not complex, we can manually simulate some background data, but this method has great limitations. If the amount of data is large and the interaction is complex, it is too inefficient. At this point you can use mock. Js to simulate the background data you need to solve the problem easily. Mock. js has two main functions. The first is that we can generate rich mock data based on the data template. The second feature is that it intercepts Ajax requests. Mock. js can intercept Ajax requests and return mock response data without modifying existing code.

The Mock. Js’s official website

The Mock grammar

Data template definition

Each attribute in the data template consists of three parts: attribute name, generation rule, and attribute value:

// Attribute name name
// Generate rule rule
// Attribute value value
'name|rule': value
Copy the code

Note:

  • Between the attribute name and the build rule|Space.
  • The generation rule is optional.
  • There are seven formats for generating rules:
  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
  • The meaning of the generation rule depends on the attribute value.
  • Property value can contain@ placeholder.
  • The property value also specifies the initial value and type of the final value.

The above definitions refer to the official documentation, but let’s take a look at mock data templates with examples

1. The attribute value is a String

  1. 'name|min-max': 'value'By repeating'value'Generates a string that is repeated more than or equal to timesminIs less than or equal tomax.
  2. 'name|count': 'value'By repeating'value'Generates a string with the number of repetitions equal tocount

2. The attribute value is Number

  //2. The attribute value is Number
        console.log( 
            Mock.mock({
                'number1|+1':100.'number2|1-100':12.'number3 | 1-100.5':12.'number4 | 1-100.1-10':12.'number5 | 123.1-10':12.'number6 | 123.10':12,}));Copy the code
  1. 'name|+1': 100The value of the property is automatically incremented by 1. The initial value is 100. The value of the property is automatically incremented by 1 every time this data is incremented once.
  2. 'name|1-100': 12Generates an integer greater than or equal to 1 and less than or equal to 100. The attribute value 12 is used only to determine the type is number.
  3. 1-100.5 ' 'name | : 12Generates a floating point number with an integer part greater than or equal to 1, less than or equal to 100, and a decimal part reserved for 5 digits. The attribute value 12 is used only to determine the type is number.
  4. 1-100.1-10 'name |' : 12Generates a floating point number with integer parts greater than or equal to 1, less than or equal to 100, and decimal parts reserved from 1 to 10 bits. The attribute value 12 is used only to determine the type is number.
  5. 'name | 123.1-10' : 12Generates a floating point number with an integer part of 123 and a decimal part reserved for 1 to 10 bits. The attribute value 12 is used only to determine the type is number.
  6. The name '|' 123.10:12Generates a floating point number with an integer part of 123 and a decimal part reserved for 10 bits. 12 is only used to determine the type is number.

3. The property value is Boolean

 //3. The attribute value is Boolean
        console.log( 
            Mock.mock({
                'b1|1':false.'b2|0':false.'b3|1-5':false,}));Copy the code

  1. 'name|1': boolean

    Generate a random Boolean value with a 1/2 chance of true and 1/2 chance of false.

  2. 'name|0': boolean

    Generate a random Boolean value with 100% probability of true and 0 probability of false.

  3. 'name|min-max': value

    Generates a random Boolean value with a probability of min/(min + Max) with a value of! The probability of value is Max over min plus Max.

4. The attribute value is Object

 //4. The property value is the Object
        console.log( 
            Mock.mock({
                'num1|1-3': {a:10.b:20.c:30.d:40},
                'num2|2': {a:10.b:20.c:30.d:40}}));Copy the code

  1. 'name|min-max': object

    Randomly select min to Max attributes from the attribute value object.

  2. 'name|count': object

    Select count randomly from the attribute value object.

5. The property value is Array Array

  //5. The property value is Array Array
        console.log( 
            Mock.mock({
                'arr1|1': ['a'.'b'.'c'.'d'.'e'].'arr2|+1': ['a'.'b'.'c'.'d'.'e'].'arr3|1-5': ['a'.'b'.'c'.'d'.'e'].'arr4|2': ['a'.'b'.'c'.'d'.'e']}));Copy the code

  1. 'name|1': array

    One element is randomly selected from array as the final value.

  2. 'name|+1': array

    Select one element from array as the final value.

  3. 'name|min-max': array

    Generates a new array by repeating the property value array more than min and less than Max.

  4. 'name|count': array

    Generates a new array by repeating the property value array, count times

6. Attribute values are functionsFunction

 <script>
        //6. The attribute value is Function
        console.log( 
            Mock.mock({
             'result' : function () {return 1+2}
            }) 
  </script>
Copy the code

  1. 'name': function

    Function is executed, taking its return value as the final property value, and the context of the function is the object in which the property ‘name’ resides.