梦回苍石居  |
Cangshi Live

Ref-JS 18 Views

作者:
苍石
进度:
开发
Progress: 50%
项目开始时间:
2020-10-30
项目结束时间:
项目发表时间:
2021-01-04 18:00:46
最后编辑于:
9 个月前
标签:
REF-JSJAVSCRIPTFRAMEWORK

查看演示

Ref JS

Used for creating ref by using javascript

Get Start

Import the script

  1. Install from NPM or yarn
    npm i @palerock/ref
    
    yarn add @palerock/ref
    
  2. Download the source file - /build/ref.js or mini file /build/ref.mini.js

Using the script

  1. With NodeJS
    const {ref,refs} = require('@palerock/ref');
    
    Or using import keyword
    import {ref,refs} from '@palerock/ref';
    
  2. With HTML on browser
    <script src="./xxx/ref-mini.js"></script>
    <script>
        const {ref,refs} = window;
    </script>
    

Demo for Simple Usage

  1. Using with dom
    const {ref} = window;
    
    // select a dom
    const dom = document.querySelector('h1');
    
    // create ref
    const domRef = ref(
        dom, ['title'],
        ({title}, targetDom)=>{
            targetDom.innerHTML = title;
        }
    )
    
    // change the ref
    domRef.title = 'Hello Ref JS';
    
    console.log(dom.innerHTML); // Hello Ref JS
    
  2. Using with multi vars in NodeJS
    const {ref} = require('@palerock/ref');
    
    const dataSource = {
        project: {
            name: 'project 01'
        },
        owner: {
            name: 'Ryan'
        }
    }
    
    const dataRef = ref(
        dataSource,
        {
            // declare vars and setting the initial values
            projectName: 'Unknown Project Name',
            ownerName: 'Unknown Owner Name'
        },
        ({projectName, ownerName}, targetDataSource)=>{
            targetDataSource.project.name = projectName;
            targetDataSource.owner.name = ownerName;
        }
    )
    
    dataRef.projectName = 'project ref name';
    
    console.log(dataSource.project.name); // project ref name
    console.log(dataSource.owner.name); // Unknown Owner Name
    

Documentation

  • ref: function

    • description: create a ref with a object
    • arguments - ordered as following
    • target: Object what object the ref related.
    • vars: Object|<Array<String>> declare the vars used in the mapping function
    • mapping: function when the ref changed, what to do is following the function
      • callback arguments - ordered as following
      • ref: Object the ref Object
      • target: Object the target Object
  • refs: function

    • description: create a ref with multi objects
    • arguments - ordered as following
    • targets: List<Object> what objects the ref related.
    • vars: Object|<Array<String>> declare the vars used in the mapping function
    • mapping: function when the ref changed, what to do is following the function
      • callback arguments - ordered as following
      • ref: Object the ref Object
      • target: Object the target Object
  • More APIs please find the definition or comments from ./types/index.d.ts

Leave your comments with any question or suggestion please

留言 ( 0 )

Person name
未登录用户可以发表匿名评论