jsor

jsor

jsor est une bibliothèque JavaScript rapide et très petite avec seulement 2,0 Ko.

Il permet de convertir des objets javascript en documents HTML, cela rend le code plus propre, plus clair et plus lisible, la programmation est plus simple, plus facile et plus réutilisable, il est compatible avec la plupart des navigateurs puisqu'il utilise du javascript natif.

Si vous êtes nouveau sur jsor, nous vous recommandons de consulter les informations ci-dessous.

Navigateur

Balise de script

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

Nœud

Pour inclure jsor dans Node, installez d'abord avec npm.

 $ npm install jsor

Exemple

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

Exemples de données back-end

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

Exemple de chaque donnée

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

Exemple simple, élément caché

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

Séparé par composants

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

Étendre les composants

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