jsor

jsor

jsor ist eine schnelle und sehr kleine JavaScript-Bibliothek mit nur 2,0 KB.

Es hilft bei der Konvertierung von Javascript-Objekten in HTML-Dokumente, wodurch der Code sauberer, klarer und besser lesbar wird, die Programmierung einfacher, einfacher und wiederverwendbar wird und es mit den meisten Browsern kompatibel ist, da es natives Javascript verwendet.

Wenn Sie neu bei jsor sind, empfehlen wir Ihnen, einen Blick auf die folgenden Informationen zu werfen.

Browser

Skript-Tag

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

Knoten

Um jsor in Node einzubinden, installieren Sie es zunächst mit npm.

 $ npm install jsor

Beispiel

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

Beispiel-Backend-Daten

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

Beispiel für alle Daten

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

Einfaches Beispiel, verstecktes Element

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

Nach Komponenten trennen

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

Komponenten erweitern

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