jscalpel A small feature library that makes it easier to manipulate objects

A small feature library that makes it easier to manipulate objectsjavascript

Overview

It is tiny but very useful and can help you handle javascript native objects. Data-driven interface development is very common today, we are in the angular, react, vue will encounter a lot of object processing, including set the default value, query, assignment, etc., jscalpel is born for this scene.html

jscalpel is little poor, gzip less than 3k, so a library you can use it anytime, anywhere without worrying about anything.vue

Document

View the document please visit ihtml5.github.io/jscalpel/

中文文檔html5

Installation

Install using npm

jscalpel

npm install jscalpel --save
yarn add jscalpel --save
複製代碼

Useage

Es6

import Jscalpel from 'jscalpel'
複製代碼

Include in html

<script charset="utf-8" src="https://unpkg.com/jscalpel@latest/dist/index.js"></script>
複製代碼

APIS

parameter type default value use isRequired required version
target string/object {} target true all
deep boolean false whether or not to copy the target object in depth false all
prefix string undefined public prefix, automatically added for the keys false all
success function function () {} The function that was called when the analysis was successful true ^0.6.2
error function function () {} The function that is called when the analysis fails. false ^0.6.2
path string/array/function [] path false ^0.6.2
plugins array [] A plug-in set, similar to the webpack plugins. false ^0.6.2

Online Demos

Code

1. simple pattern

// mock data
var data = {
  status: '0',
  data: {
    response: {
      code: 1,
      msg: 'response msg'
    }
  }
}
// super easy
jscalpel.get(data, 'data.response.code'); // return 1
// bind data
var jscalpelIns = jscalpel({
  target: data
})
jscalpelIns.get('data.response.code') // returned 1;
jscalpelIns.set('data.response.code', 12);
jscalpelIns.set({
  'status': '1'
})
jscalpelIns.get('data.response.code') // returned 12
jscalpelIns.get('status') // returned 1
jscalpelIns.has('data.response.code') // returned true
jscalpelIns.del('data.reponse.code') 
jscalpelIns.get('data.reponse.code') // returned undefined;
jscalpelIns.has('data.reponse.code') // returned false;
複製代碼

2.advanced patterns

const res = {
  data: {
    article: [{
      articleId: 0,
        title: 'jscalpel'
    }]
  },
  response: {
    code: '0',
    msg: 'success'
  }
}
jscalpel({
	target: res,
  path: ['data.article.0', 'response.msg'],
  success:  (article, msg) => {
  	console.log('keys=>array=>output:', article, msg);
  }
})

jscalpel({
	target: res,
  path: 'response.msg',
  success:  (msg) => {
  	console.log('keys=>string=>output:',msg);
  }
});
複製代碼

3.use prefix

jscalpel({
	target: res,
  prefix: 'response',
  path: ['code', 'msg'],
  success:  (code, msg) => {
  	console.log('prefix=>output:', code, msg);
  }
})
複製代碼

4.dynamic path

jscalpel({
  target: res,
  path: () => ['code', 'msg'].map((key) => `response.${key}`),
  success:  (code, msg) => {
  	console.log('dynamic=>output:', code, msg);
  }
})

jscalpel({
	target: res,
  deep: true,
  prefix: 'response',
  path: ['code', 'msg'],
  success:  (code, msg, finalRes, keys) => {
    console.log( finalRes === res);
  	console.log('deep into callback:', code, msg, finalRes, keys);
  }
});
複製代碼

5.use plugins

const logicMap = {
  'code': {
    match: ({value, name}) => value === '0',
    success: ({value, name}) => {
      console.log('logicPlugin', value, name);
    }
  }
}
jscalpel({
  target: res,
  deep: true,
  prefix: 'response',
  path: ['code', 'msg'],
  plugins: [jscalpel.jscalpelType, jscalpel.jscalpelLogic(logicMap)],
  success: (code, msg, finalRes, keys) => {
    console.log( finalRes === res);
  	console.log('deep into callback:', code, msg, finalRes, keys);
  }
})
複製代碼

Related projects

jscalpel-ormjava

It is convenient for you to extract the required fields from one object to generate another object.node

Changelog

2017.9.14

Add jscalpelLogic plugin, reduce ifelse, make run logic configurablereact

2018.3.08

add ormwebpack

2018.9.04

add get methodgit

import { get } from 'jscalpel';
// get(data, path ,defaultValue);
複製代碼

License

The MIT License.github

相關文章
相關標籤/搜索