jsor

jsor

jsor adalah perpustakaan JavaScript yang cepat dan sangat kecil dengan hanya 2,0 KB.

Ini membantu mengubah objek javascript menjadi dokumen HTML, ini membuat kode lebih bersih, lebih jelas dan lebih mudah dibaca, pemrograman lebih sederhana, lebih mudah dan lebih dapat digunakan kembali, kompatibel dengan sebagian besar browser karena menggunakan javascript asli.

Jika Anda baru mengenal jsor, kami sarankan Anda melihat informasi di bawah ini.

Peramban

Tag skrip

 < script src = "https://unpkg.com/[email protected]/dist/jsor.min.js" > < / script >

simpul

Untuk memasukkan jsor di Node, instal terlebih dahulu dengan npm.

 $ npm install jsor

Contoh

 import JSOR from 'jsor' ;
 
console . log (
    JSOR . render ( { tag : 'div' , id : 1 , className : 'my-class' , childNodes : [
      { tag : 'p' , innerHTML : 'First element' } ,
      { tag : 'p' , innerHTML : 'Second element' }
    ] } )
) ;

/* logs:
<div id="1" class="my-class">
  <p>First element</p>
  <p>Second element</p>
</div>
*/

Contoh data backend

 import JSOR from 'jsor' ;

//data from the backend
var data = '{"tag":"div","className":"my-class","id":"1","childNodes":[{"tag":"p","innerHTML":"First element"},{"tag":"p","innerHTML":"Second element"}]}' ;

console . log (
    JSOR . render ( JSON . parse ( data ) )
) ;

/* logs:
<div class="my-class" id="1">
  <p>First element</p>
  <p>Second element</p>
</div>
*/

Contoh setiap datanya

 import JSOR from 'jsor' ;

var data = [ { name : 'First element' } , { name : 'Second element' } ]
 
console . log (
    JSOR . render ( { tag : 'div' , className : 'container' , childNodes : data . map ( function ( e ) {
      return { tag : 'p' , innerHTML : e . name } ;
    } ) } )
) ;

/* logs:
<div class="container">
  <p>First element</p>
  <p>Second element</p>
</div>
*/

Contoh sederhana, elemen tersembunyi

 import JSOR from 'jsor' ;

let enabled = false ;

console . log (
    JSOR . render ( { tag : 'div' , id : 1 , className : 'my-class' , childNodes : [
      ! enabled || { tag : 'p' , innerHTML : 'First element' } ,
      { tag : 'p' , innerHTML : 'Second element' , style : { display : enabled || 'none' } } ,
      { tag : 'p' , innerHTML : 'Third element' , className : enabled || 'hidde' }
    ] } )
) ;

/* logs:
<div id="1" class="my-class">
  <p style="display: none;">Second element</p>
  <p class="hidde">Third element</p>
</div>
*/

Pisahkan berdasarkan komponen

 const FirstElement = ( props ) => {
  return { tag : 'div' , onClick : props . handleChange , childNodes : [
    { tag : 'h1' , innerHTML : 'First element' }
  ] } ;
} ;

const SecondElement = ( props ) => {
  return { tag : 'div' , onClick : props . handleChange , childNodes : [
    { tag : 'h1' , innerHTML : 'Second element' }
  ] } ;
} ;

class Parent {
  constructor ( props ) {
    this . props = props ;
  }
  handleChange ( event ) {
    console . log ( event . target . innerHTML ) ;
  }
  render ( ) {
    return { tag : 'div' , className : 'btn' , style : { color : '#999' } , id : 'parent' , childNodes : [
      { tag : FirstElement , handleChange : this . handleChange } ,
      { tag : SecondElement , handleChange : this . handleChange } ,
      this . props . childNodes
    ] } ;
  }
}

console . log (
  JSOR . render ( { tag : Parent , hide : true , childNodes : [
    { tag : 'div' , childNodes : [
      { tag : 'h1' , innerHTML : 'Third element' }
    ] }
  ] } )
) ;

/* logs:
<div class="btn" id="parent" style="color: rgb(153, 153, 153);">
  <div><h1>First element</h1></div>
  <div><h1>Second element</h1></div>
  <div><div><h1>Third element</h1></div></div>
</div>
*/

Perluas Komponen

 class Parent extends JSOR . Component {
  constructor ( props ) {
    super ( props ) ;
    this . state = {
        running : true
    } ;
    this . handleChangeStop = this . handleChangeStop . bind ( this ) ;
  }
  handleChangeStop ( ) {
    this . setState ( {
        running : false
    } )
  }
  render ( ) {
    return { tag : 'div' , childNodes : [
      { tag : 'span' , handleChangeStop : this . handleChangeStop , innerHTML : '[Stop]' } ,
      { tag : 'div' , innerHTML : this . state . running ? 'Loading...' : '' }
    ] } ;
  }
}

console . log (
  JSOR . render ( { tag : Parent } )
) ;

/* logs:
<div>
  <span>[Stop]</div>
  <div>Loading...</div>
</div>
*/