jsor

jsor

jsor é uma biblioteca JavaScript rápida e muito pequena, com apenas 2,0 KB.

Ajuda a converter objetos javascript em documentos HTML, isso torna o código mais limpo, claro e legível, a programação é mais simples, fácil e reutilizável, é compatível com a maioria dos navegadores por utilizar javascript nativo.

Se você é novo no jsor, recomendamos que dê uma olhada nas informações abaixo.

Navegador

Etiqueta de script

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

Nó

Para incluir jsor no Node, primeiro instale com npm.

 $ npm install jsor

Exemplo

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

Exemplo de dados de 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>
*/

Exemplo de cada dado

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

Exemplo simples, elemento oculto

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

Separar por componentes

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

Estender componentes

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