wl-mapper

In a development environment where the front and back end are separated, when the front and back end start in parallel, it is inevitable that the fields defined by both sides are completely inconsistent. More standardized companies will be in the code before the development of the front and back end of the detailed design document preparation and review, but on the one hand, the implementation of the process of the company is not many and cumbersome, on the one hand, the back-end does not guarantee that after writing a good document in the subsequent development will not change the field name. In the author’s development process, this problem is particularly prominent: 1. 3. After the document is reviewed and put into the library, the background will still change the field according to the demand in the actual development. Most of the time, the author can only manually correspond to the mapping between background fields and front-end variables after the development of background interfaces. However, the problem is obvious. One is that there is a large amount of data, and the other is that if the front-end is not informed after the modification of the background, the front-end logic will not be able to run and get correct results.

Wl-mapper is a JS mapping class that tries to solve the mapping relationship between a large number of fields in front and back interfaces

Currently, simple single-variable mapping, object field mapping, and array field mapping are supported. 1. The incoming object field mapping mapping object for a specified field set 3. Arrays field mapping, mostly access list when the front end at this time often use an empty array receiving unable to establish the mapping of the conventional sense, so is the return data for processing and then form a new array Note: the function does not return a processed data but returned to the current class

The document

Constructor (SRC, source, merge_keys, is_arr) receive four arguments when instantiating: Merge_keys: Array specifies that the source key is copied directly to the SRC Object to map the various database ids that the front end will not declare in advance. Boolean indicates whether source is an array

Mapper (src_key, source_key) 1. Src_key: String Key of object data to be mapped. 2. Src_key: String Key of source data to be mapped

ObjMapper (mapper, deep, deep_src, deep_source) 1. Mapper: Object Mapping Object, where the key of a single member is the key of SRC and the value is the key of source. 2. Deep_src: Object; deep_source: src_key; src_key; Object recurses to the next round of source data

ArrMapper (mapper, deep_src) 1. Mapper: Object Mapping Object, where the key of a single member is the key of SRC and the value is the key of source. 2. Deep_source: Indicates the source data of the next round in recursion

Merge (keys, deep_src, deep_source) 1. Keys: Array specifies that the source key is copied directly to the SRC object to map the various database ids that are not declared in advance by the front end. Deep_source: Indicates the source data of the next round in recursion

Simple little example

// Import WlMapper from"wl-mapper";

  let aa = { x: { h: 8 }, y: 1 };
  let bb = { y: { e: 12, ff: "0001" }, f: 4, id: "0000" };

  let mapper1 = new WlMapper(aa, bb, ["id"]);
  let mapper2 = new WlMapper(aa, bb, ["id"]);
  letmapper3 = new WlMapper(aa, bb); // Simple mapping, single field console.log(mapper1.mapper("x"."y")); // Complex mapping, multiple fields, recursively console.log(mapper2.objmapper ({x:"y", y: "f", h: "e" }, true)); Console. log(mapper3.objMapper({x:"y", y: "f", h: "e" }, true).merge(["id"]));Copy the code

A small pit

Webpack class call error, ah! Hateful for Baidu Webpack engineers

 wl_mapper__WEBPACK_IMPORTED_MODULE_1___default.a is not a constructor"
Copy the code

Release the unpackaged source code first