Jscalpel 使操作对象更容易

最新推荐文章于 2025-09-07 22:13:39 发布

weixin_33890526

最新推荐文章于 2025-09-07 22:13:39 发布

阅读量101

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5add16d8518825672033a7d2

jsCalpel是一款轻量级的JavaScript库，用于简化对象的处理任务，如设置默认值、查询和赋值等。它体积小巧，gzip压缩后不足3KB，适用于Angular、React及Vue等现代框架中常见的数据驱动接口开发场景。

A small feature library that makes it easier to manipulate objects

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.

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

Document

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

Installation

Install using npm

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>
复制代码

Demos

var data = {
  status: '0',
  data: {
    response: {
      code: 1,
      msg: 'response msg'
    }
  }
}

// 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;

// advanced

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

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

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

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

jscalpel.default({
	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);
  }
});

jscalpel.default({
	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);
  }
})


复制代码