jsor

jsor

jsor هي مكتبة جافا سكريبت سريعة وصغيرة جدًا بمساحة 2.0 كيلوبايت فقط.

فهو يساعد على تحويل كائنات جافا سكريبت إلى مستندات HTML، وهذا يجعل التعليمات البرمجية أكثر وضوحًا وأكثر قابلية للقراءة، والبرمجة أبسط وأسهل وأكثر قابلية لإعادة الاستخدام، وهو متوافق مع معظم المتصفحات لأنه يستخدم جافا سكريبت الأصلي.

إذا كنت جديدًا في jsor، فنوصيك بإلقاء نظرة على المعلومات أدناه.

المتصفح

علامة البرنامج النصي

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

العقدة

لتضمين jsor في Node، قم بالتثبيت أولاً باستخدام npm.

 $ npm install jsor

مثال

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

مثال على البيانات الخلفية

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

مثال على كل البيانات

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

مثال بسيط، العنصر المخفي

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

منفصلة حسب المكونات

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

تمديد المكونات

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