CalDOM

مكتبة واجهة مستخدم JavaScript لمكتبة واجهة مستخدم JavaScript للاتصالات اللاإرادية والتفاعلية (3 كيلو بايت) مع وصول مباشر إلى DOM الأصلي.

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

اتباع نهج 2-in-1 الافتراضي DOM و NO-Virtual-DOM إذا صح التعبير.

0⃣ صفر أدوات ، 0⃣ التبعيات صفر ، 0⃣ صفر بناء الجملة الجديد ، فقط نقية JS.

في جوهرها ، Caldom هو مجرد غلاف حول العقدة/العنصر الأصلي. يبلغ انخفاض الأداء العام حوالي 0.04x مقارنة بالفانيليا/جافا سكريبت النقي. يعتمد ذلك على معايير مستوى الوحدة المتوسطة في التعامل مع مثيلات واحدة ومتعددة العناصر: عرض النتائج القياسية ضد الفانيليا JS و JQuery و React JS و Vue & More.

الموقع الرسمي: caldom.org

الوثائق: caldom.org/docs/

مرحبا بالعالم!

استخدمه كقائد DOM DOM قابل للسلسلة ومعالجته ، وهو بديل JQUERY خفيف الوزن.

 _ ( "#output-1" )
    . append (
        _ ( "+h1" ) . text ( "Hello World!" )
    ) ;

//Short append
_ ( "#output-1" , _ ( "+p" , "This is CalDOM." ) ) ; 

مرحبا العالم - رد الفعل

بناء المكونات التفاعلية. استخدمه كبديل لـ JS/VUE JS. عدم استخدام الفئات ، على غرار خطافات رد الفعل ، ولكن أبسط.

 let app = _ ( ) . react (
    { } ,
    {
        render : state =>
            _ ( "+h1" , `Hello ${ state . name } ` ) //This is XSS safe by design
    }
)

_ ( "#output-2" , app ) ;

//Edit below line to update state
app . state . name = "World Reactively ?" ; 

مرحبا العالم - رد الفعل (ES6)

يعمل أيضًا كفئة ES6 ممتدة.

 class HelloWorld extends _ . Component {
 
    constructor ( state ) {
        super ( ) ;
   
        this . react ( state ) ;
    }
 
    render ( state ) {
        return _ ( "+div" , [ //Can pass children as an array too
            _ ( "+h1" , "Hello " + state . name ) ,
            
            _ ( "+p" , [ "The time is: " , state . time ] )
        ] ) ;
    }

    tick ( ) {
        this . state . time = new Date ( ) . toTimeString ( ) . substr ( 0 , 8 ) ;
    }

    didMount ( ) {
        setInterval ( ( ) => this . tick ( ) , 1000 ) ;
    }
 
}

let app = new HelloWorld ( { name : "World!" , time : "" } ) ;

_ ( "#output-3" , app ) ; 

عناصر دوم الأصلية التفاعلية

Native DOM Node هي مواطن من الدرجة الأولى. أيضا ، مثال كالدوم هو مجرد غلاف من حولهم. تتيح هذا التشغيل البيني اللاإرادي كمية لا حصر لها من التكامل القوي.

 let app = _ ( ) . react (
    { } ,
    {
        render : state => {
            let div = document . createElement ( "div" ) ;

            let heading = document . createElement ( "h1" ) ;
            heading . textContent = `I'm a reactive ${ state . name } ` ;

            div . appendChild ( heading ) ;

            //.elem gives you the direct Element
            div . appendChild ( _ ( "+h2" , "???" ) . elem ) 

            return div ;
        }
    }
)

_ ( "#output-3-1" , app ) ;

app . state . name = "native DOM Element. ?" ; 

جعل HTML موجود رد فعل

ليس من محبي التقديم والشيء الافتراضي؟ استخدم Caldom لتحديث () محتوى HTML المحدد مسبقًا بشكل تفاعلي. API Caldom مستوحاة من jQuery.

 let person_one = _ ( "#person-1" ) . react (
    { } ,

    {
        update : function ( state , person ) {
            person . find ( ".name" ) . text ( state . name ) ;
            person . find ( ".age" ) . text ( state . age ) ;
        }
    }
)

//CalDOM batches these 2 state updates to only render once.
person_one . state . name = "Jane Doe" ;
person_one . state . age = 22 ;                 

استدعاء قوة كلا العالمين!

قم بتحديث DOM بشكل مباشر () DOM مباشرة و/أو انتقل إلى عرض الظاهري DOM إذا كان أكثر ملاءمة. استخدم هذا. $ لعقد مراجع عقدة DOM مباشرة. يحتفظهم Caldom بمزامنة حتى عندما يقوم Render () بتغيير بنية DOM بشكل كبير.

 class Person extends _ . Component {
    constructor ( ) {
        super ( ) ;

        this . react ( { name : "John" , likes : [ "SpongeBob" ] } ) ;
    }

    render ( state ) {
        return _ ( "+div" , [
            //Saving a reference to the direct DOM Element
            this . $ . title = _ ( "+h1" , `I'm ${ state . name } ` ) . elem ,
            
            _ ( "+p" , "I like " + state . likes . join ( " & " ) )       
        ] ) ;
    }

    update ( state , person , changed_keys , changes_count ) {
        
        if ( changes_count != 1 || ! ( "name" in changed_keys ) )
            // Too complex to update, proceed to render.
            return true ;
            
        else //Update name directly using the DOM reference
            this . $ . title
                . textContent = `I'm ${ state . name } Directly. ?` ;
    }
}

let user = new Person ( ) ;
_ ( "#output-4" , user ) ;

user . state . likes . push ( "Hulk" ) ; //This is handled by render()

setTimeout ( ( ) => 
    user . state . name = "Jane" //This is handled by update()
, 1000 ) ; 

مكونات الويب الأصلية Supercharge

يدمج Caldom بسلاسة مع مكونات الويب. استخدم Caldom لإنشاء مكونات ويب تفاعلية وتفاعلية. كما أنه يقبل مكونات الويب كمدخلات.

 class CustomElement extends HTMLElement {
    connectedCallback ( ) {
        
        let title = _ ( ) . react (
            { msg : "Hello World!" } ,
            {
                render : state => 
                    _ ( "+h2" , state . msg )
            }
        ) ;

        // Appending H2 as a child, keeping root intact
        // this = <custom-element>
        _ ( this , title ) ;

        //Just a shortcut to access state easily
        this . state = title . state ;
    }
    
    doSomething ( ) {
        alert ( "Cool Eh!" ) ;
    }
}

//Registering custom element.
customElements . define ( "custom-element" , CustomElement ) ;

let hello = document . createElement ( "custom-element" ) ;
document . getElementById ( "output-5-1" ) . appendChild ( hello ) ;

hello . state . msg = "I'm a Reactive, Stateful & Native Web Component. " ;

//Creating a new web component using CalDOM
_ ( "#output-5-1" ) . prepend ( _ ( "+custom-element" ) )

يمكنك استخدام هذه العناصر المخصصة في كود HTML أصلاً كالمعتاد. لاحظ أن دعم المتصفح لمكونات الويب جديدة نسبيًا (95 ٪). المستقبل يبدو مشرقا! ؟

 < custom-element onclick =" doSomething() " >
</ custom-element >

< custom-element onclick =" state.msg = 'Native Web Components are awesome! ✌️' " >
</ custom-element > 

يمكنك حتى جعل jQuery تفاعلية

صندوق البناء الأساسي من Caldom هو مجرد عقدة/عنصر أصلي. وبالتالي ، جعله متوافقًا مع أي مكتبة DOM تقريبًا على الويب.

 class HelloJquery extends _ . Component {

    constructor ( ) {
        super ( ) ;

        this . react ( { prompt : "" } ) ;
    }

    render ( state ) {
        //Creating element & attaching click event using jQuery
        return $ ( "<h1></h1>" )
            . text ( state . prompt )
            . click ( ( ) => state . prompt = "Hello from jQuery!" ) [ 0 ] ;
    }
}

let app = new HelloJquery ( ) ;
_ ( "#output-6" , app ) ;

app . state . prompt = "Click Me!" 

يعمل Caldom أيضًا على العقدة JS

يمكنك استخدام مكتبة مثل JS-DOM لتنفيذ سياق المتصفح على الخادم.

 const { JSDOM } = require ( "jsdom" ) ; 

//Set window in the global scope
window = new JSDOM ( ) . window ;

const _ = require ( "caldom" ) ;

class ServerApp extends _ . Component {

    constructor ( ) {
        super ( ) ;

        this . react ( { msg : "" } ) ;
    }

    render ( state ) {
        return _ ( "+p" , state . msg )
            . css ( "color" , "#199646" )
    }
}

let app = new ServerApp ( ) ;
_ ( "body" , app ) ;

app . react ( { msg : "Hello from NodeJS " + process . version  } ) ;

//Saving generated HTML by the component to a file
require ( "fs" ) . writeFileSync (
    "static_content.html" , 
    window . document . body . innerHTML 
) ;

تفضل بزيارة caldom.org لتجربة العديد من أمثلة التعليمات البرمجية الحية.

---

ابدأ

CDN

 < script src =" https://unpkg.com/caldom " > </ script >

يستخدم Caldom متغير "_" كمستعر عالمي بشكل افتراضي. لاستخدام الاسم المستعار المختلفة ، قم بتعيين نافذة ['_ cal_dom_alias'] = 'readial_alias' قبل تحميلها.

تحميل

• الإصدارات المصغرة في حالة dist
• رمز المصدر في SRC

استخدمه كوحدة نمطية

لا يعلق Caldom أي شيء على البيئة العالمية عند استخدامه كوحدة نمطية.

npm install caldom

 //CalDOM also runs on Node JS with js-dom
const _ = require ( 'caldom' ) ; 

 //RequireJS
requirejs ( [ "caldom" ] , function ( _ ) { } ) ; 

 //ES6 Module
import _ from "./dist/caldom.min.mjs.js" ;

المساهمة

مساهماتك مرحب بها للغاية وشكرا لك مقدمًا. يرجى التأكد من اختبار الوحدة بعد التغييرات.

المبادئ الرئيسية

• الأداء ، كونه لاأدري (قابلية التشغيل البيني مع DOM الأصلي) والسيطرة على الأولوية قبل كل شيء.
• الثراء في أساليب وميزات قصيرة يدوية ثانوية.
• دعم المتصفحات القديمة ليس أولوية.

المهام

• تنفيذ الاختبارات

  • تحتاج إلى توسيع مجموعة متنوعة من الاختبارات إلى حالات الاستخدام المختلفة. (حاليًا ، إنه متحيز تجاه أسلوب الترميز الشخصي).

• وثائق/دليل ملائمة للمبتدئين. الحالي هو تقني للغاية.

• تنفيذ مخرجات تصحيح مفيدة لإصدار التطوير.

• اختبارات نسخة متصفح شاملة.

• مزيد من تحسين خوارزمية DOM DIFFING الافتراضية. انظر المعيار هنا

  • خوارزمية الاختلاف هي فقط أكثر من 140 خطًا من الكود.
  • أعتقد أن هناك مجالًا كبيرًا للتحسين إذا نظرت بعض العقول المشرقة إليها من زاوية جديدة.

• تحتاج إلى القياس لتطبيقات أكبر (مثل في جدول بيانات حيث كل خلية هي مكون فرعي؟)

مبنى

حاليا ، رمز المصدر بأكمله في ملف واحد. لذلك لا توجد عملية بناء ضخمة بخلاف استخدام Uglify-JS لتحقيقها.

هذا ببساطة بناء. min.js & .min.mjs.js و files .MAP.

 # Install dev dependencies
npm install

# Build
npm run build

اختبار الوحدة والمعايير

الاختبارات والمعايير مصادر في ./tests_and_benchmarks. تستخدم Caldom إطارًا جديدًا للوحدة واختبار القياس يسمى PFREAK. الذي تم إنشاؤه كمشروع جانبي من Caldom.

تتوفر نتائج اختبار الوحدة لأحدث بناء على caldom.org/tests/

بدء Pfreak بعد التثبيت لتعيين روابط SYM بشكل صحيح

pfreak init ./tests_and_benchmarks/internal/
pfreak init ./tests_and_benchmarks/external/

اختبارات الوحدة

npm test

أو

pfreak test ./tests_and_benchmarks/internal/

قم بتشغيل المعايير مقابل المكتبات الأخرى (هذا يستغرق الكثير من الوقت ، يمكنك تشغيل المهام بشكل انتقائي باستخدام الأعلام.)

 cd ./tests_and_benchmarks/external/
pfreak benchmark

راجع مساعدة Pfreak للحصول على التفاصيل

pfreak --help