Front-end development independent of backend backend-learning MOCKJS

Source: Internet
Author: User

features implemented by MOCKJS

1. Enable the front-end siege division to develop independently from the backend.

2. Simulate a variety of scenarios with random data. Increase the authenticity of unit tests

3. Without modifying the existing code, you can intercept the AJAX request and return the simulated response data.

4. Simple to use

5. Support to generate random text, numbers, Boolean values, dates, mailboxes, links, pictures, colors, etc.

6. Support for extending more data types, support for custom functions and regular.

Grammar

In the data template, each property consists of 3 parts: property name, generate rule, attribute value: ' Name ' | ' Rule ': ' Value '

Attention:

    1. Use ' | ' between the property name and the build rule
    2. The build rule is optional
    3. The build rule has its format:
      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
    4. The meaning of the build rule requires the attribute value to be determined
    5. The property value can contain placeholders
    6. The property value also specifies the initial value and type of the final value
Build Rule Sample Description
    1. ' Name|min-max ': ' Value ' generates a string by repeating ' value ', with a repetition number greater than or equal to min, less than or equal to max.
    2. ' Name|count ': ' Value ' generates a string by repeating ' value ', and the number of repetitions equals count.
    3. ' name|+1 ': 100 attribute value automatically plus 1, initial value is 100
    4. ' name|1-100 ': 100 generates an integer greater than or equal to 1, less than or equal to 100, and the property value 100 is used only to determine the type.
    5. ' name|1-100.1-10 ': 100 generates a floating-point number, the integer part is greater than or equal to 1, less than or equal to 100, and the fractional portion remains 1 to 10 bits.
    6. ' name|1 ': value randomly generates a Boolean value, the probability of true is 1/2, and the probability of a value of false is 1/2.
    7. ' Name|min-max ': value randomly generates a Boolean value, the probability of value is min/(min + max), and the probability of a value of!value is Max/(min + max).
    8. ' Name|min-max ': {} randomly selects min to max properties from the property value {}.
    9. ' Name|count ': {} randomly selects count properties from the property value {}.
    10. ' name|1 ': [{}, {} ...] randomly selects 1 elements from the property value [{}, {} ...] as the final value.
    11. ' Name|min-max ': [{}, {} ...] a new array is generated by repeating the property value [{}, {} ...], and the number of repetitions is greater than or equal to min, less than or equal to max.
    12. ' Name|count ': [{}, {} ...] a new array is generated by repeating the property value [{}, {} ...], and the number of repetitions is count.
    13. ' Name ': the function () {} executes functions () {}, takes its return value as the final property value, and the context is the object where ' name ' resides.
Placeholder definitions for data

Placeholders are only placed in the property value string and do not appear in the final attribute value. The format of the placeholder is: @ placeholder (parameter [, parameter])

Attention:

    1. The string to be identified with @ is a placeholder.
    2. A placeholder refers to a method in Mock.random.
    3. Extend the custom placeholder with Mock.Random.extend ().
    4. Placeholders can also refer to properties in a data template.
    5. Placeholders refer to properties in data templates preferentially

Example

'@FIRST ' @FIRST '@LAST '@first @middle @last '}    }//  = = "Name ""first": "Charles""middle": "Brenda""last": "Lopez"   "Full": "Charles Brenda Lopez"    }}
Usage:

Jquery:

<script src= "Http://mockjs.com/dist/mock.js" ></script>
  mock.mock ( ' Http://g.cn", { ' name ': '  @name ', " age| 1-100 ': 100,  ' color ': '  @color '});             

$.ajax({    url: ‘http://g.cn‘,    dataType:‘json‘    }).done(function(data, status, xhr){ console.log( JSON.stringify(data, null, 4) ) });

Nodejs

// installation npm Install Mockjs // Use var Mock = require (' mockjs '); var data = Mock.mock ({    ' list|1-10 ': [{        ' id|+1 ': 1    null , 4))

Official Document: Http://mockjs.com

Front-end development independent of backend backend-learning MOCKJS

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.