الابتداء مع Moon.js

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

مكتبة Moon.js

Moon.js هي مكتبة جافا سكريبت مبسطة لتطوير واجهات سريعة وعملية. حجمها صغير نسبيًا ، مما يجعل من الممكن إنشاء تطبيقات مضغوطة إلى حد ما على أساسها. تتمتع المكتبة بأداء عالٍ للغاية في



Moon.js يتخذ نهجًا قائمًا على المكونات لتصميم الواجهة. تستخدم القوالب لإنشاء المكونات. تشبه هذه المكتبة إلى حد بعيد Vue.js.

نقاط قوة Moon.js

• حجم Moon.js مضغوط (حجمه الصغير والمضغوط حوالي 2 كيلوبايت). هذا أصغر من حجم المكتبات والأطر الأخرى مثل React و Angular.
• تتميز هذه المكتبة بسرعة عالية في عرض واجهات.
• Moon.js هي مكتبة تعتمد على تقنيات التطوير الوظيفي. عند العمل معها ، يتم استخدام نهج لتصميم الواجهة ، بناءً على ما يسمى ب "برامج التشغيل".

بداية العمل

يمكن تضمين مكتبة Moon.js في مشروع بطريقتين. الأول هو تثبيته من NPM. والثاني هو توصيله مباشرة بالصفحة التي تم التخطيط لاستخدامه فيها.



إذا قررت استخدام إصدار NPM من المكتبة ، فأنت بحاجة أولاً إلى تثبيت الحزمة moon-cli، أداة سطر الأوامر:

$ npm i moon-cli -g

في هذا المثال ، يتم تثبيت هذه الأداة بشكل عام ، ويمكنك تسميتها من أي دليل.



لإنشاء مشروع بناءً على Moon.js ، يمكنك تشغيل الأمر التالي:

$ moon create moon-prj

يقوم هذا الأمر بإنشاء مشروع جديد في مجلد moon-prj. بعد اكتمال إنشاء المشروع ، سيكون لديك تحت تصرفك أساس التطبيق المستقبلي.



يتضمن الخيار الثاني لاستخدام Moon.js توصيله بالصفحة التي تخطط لاستخدامه فيها. تحتوي المكتبة على وحدة نمطية moon-browserتسمح لك باستخدام إمكاناتها مباشرة على الصفحة التي تتصل بها.



لذلك ، لربط المكتبة بالصفحة ، نحتاج إلى تضمين العلامتين التاليتين في الصفحة:

<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>

كما ترى ، يتم تحميل البرامج النصية المقابلة من unpkg CDN. العلامة الأولى تستورد المكتبة الرئيسية. والثاني هو المكتبة moon-browser. إنها مسؤولة عن تجميع قوالب Moon.js ، لجعلها تبدو مناسبة للعرض بواسطة المتصفح.



الآن ، من أجل استخدام صيغة Moon.js على الصفحة ، ستحتاج إلى تضمينها في العلامة <script>، دون أن تنسى تعيين السمة الخاصة بها typeكـ text/moon.

<!--      -->
<script src="./main-script.js" type="text/moon"></script>
<!--    ,    -->
<script type="text/moon">
    ...
</script>

ربط تطبيق Moon.js بالصفحة

يرتبط Moon.js ، مثل المكتبات والأطر الأخرى المستخدمة لإنشاء تطبيقات صفحة واحدة ، بعنصر صفحة معين. عادةً ما يلعب العنصر دور الحاوية لتطبيق Moon.js <div>:

<div id="root"></div>

يتم وضع عنصر مشابه ، وهو العنصر الجذر لتطبيق Moon.js ، في كود الملف index.htmlالذي يمثل نقطة الدخول إلى المشروع.



يتم استخدام برنامج تشغيل لربط تطبيق Moon.js بهذا العنصر view(أدناه سنتحدث عن برامج التشغيل بمزيد من التفصيل):

Moon.use({
    view: Moon.view.driver("#root")
})

يخبر هذا البناء المكتبة بأنه يجب عليها توصيل التطبيق بالعنصر باستخدام المعرف root. إذا لزم الأمر ، يمكنك تحديد عنصر مشابه للمكتبة باستخدام واجهة برمجة تطبيقات المتصفح المصممة للعمل مع DOM:

Moon.use({
    view: Moon.view.driver(document.getElementById("root"))
})

الآن دعنا نتحدث عن كيفية تنظيم معالجة البيانات في Moon.js وكيفية إنشاء عناصر الواجهة باستخدام هذه المكتبة.

بناء الجملة لوصف عناصر الواجهة

لوصف واجهات Moon.js ، يتم استخدام لغة برمجة Moon View Language (MVL) ، والتي تم تطويرها خصيصًا لحل هذه المشكلة. إنه يشبه JSX. تُستخدم هذه اللغة لوصف العناصر ولتخصيص علاقاتها. هذا مثال:

<script type="text/moon">
    function aView(data) {
        return (
            <div>Hi from Moon</div>
        )
    }
</script>

من السهل أن ترى أن هذا الجزء من Moon.js ، المسؤول عن عرض العنصر <div>، يستخدم هياكل بناء جملة تشبه HTML. لكن هذه الهياكل تستخدم في كود JavaScript. لن يتمكن المستعرض من تنفيذ كود JavaScript هذا ، ولكن هذا ليس مطلوبًا منه ، لأن Moon.js يجمع مثل هذه التركيبات في JavaScript عادي.

العمل مع البيانات

يستخدم Moon.js مفهوم السائقين للتحكم في العرض المرئي للعناصر وللتعامل مع البيانات. هنا سوف نلقي نظرة على برنامج التشغيل الذي يسمح لنا بالعمل مع البيانات ، وفي القسم التالي سنتحدث عن برنامج التشغيل للعمل مع عناصر الواجهة.



برنامج تشغيل البيانات مسؤول عن تخزين بيانات التطبيق والسماح باستخدام البيانات عند الحاجة. بمعنى آخر ، يقوم برنامج التشغيل هذا بتخزين الحالة العالمية للتطبيق.



يمكنك تعيين البيانات الأولية لتطبيق Moon.js باستخدام واجهة برمجة التطبيقات Moon.use:

Moon.use({
    data: Moon.data.driver
})

يمكنك كتابة بيانات جديدة للدول عن طريق إعادتها من الوظائف المقابلة:

Moon.run(({ data }) => {
    console.log(data) // undefined
    return {
        data: "Nnamdi"
    }
})

واجهة برمجة التطبيقات Moon.run( API) هي المسؤولة عن تشغيل التطبيق. يتلقى رد الاتصال الذي تم تمريره إلى واجهة برمجة التطبيقات هذه مرجعًا للبيانات العامة كوسيطة data. نظرًا dataلأنه في وقت استدعاء هذه الوظيفة ، لا يوجد شيء فيها حتى الآن ، console.logفسيتم إخراج الأمر من هذا المثال undefined.



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



لقد قمنا بفحص آلية العمل مع البيانات في Moon.js. الآن دعنا نتحدث بمزيد من التفاصيل حول العمل مع عناصر الواجهة.

العمل مع عناصر الواجهة

Moon.js لديه محرك viewلإنشاء العناصر وتركيبها في DOM.



لقد قمنا بالفعل بفحص مقتطف الشفرة المكرر أدناه ، حيث <div>يرتبط عنصر Moon.js الأساسي بالعنصر:

Moon.use({
    view: Moon.view.driver("#root")
})

هذا هو المكان الذي يتم فيه تركيب العنصر. يمكن للدالات الآن إرجاع العناصر القادرة على استبدال العناصر القديمة. يمكن تمثيلها في شكل كائنات تحتوي على خاصية viewيتم فيها كتابة البيانات المقابلة. تأخذ المكتبة قيمة الخاصية viewمن الكائن الذي تعيده الوظيفة وتكتبها إلى العنصر المتصل بالعنصر ذي المعرف root.



يستخدم Moon.js مفهوم DOM الظاهري وخوارزمية قوية لمقارنة إصدارات الواجهة القديمة والجديدة. يتيح ذلك للمكتبة اتخاذ قرارات بشأن وقت تحديث DOM وأي أجزاء من DOM تحتاج إلى التحديث.

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

هنا رد الاتصال الذي تم تمريره Moon.runهو إخراج الزر إلى DOM. يحدث هذا بسبب حقيقة أن الوظيفة ترجع كائنًا بخاصية view. تذهب القيمة المعينة لهذه الخاصية إلى DOM.



يحتوي الزر على معالج حدث click، يتم تمثيله بواسطة دالة handleClick. تقوم هذه الوظيفة بإرجاع كائن فارغ ، واستدعاءها لا يغير DOM.

خلق العناصر

يوفر Moon.js للمطور مجموعة كبيرة من الوظائف المساعدة لإنشاء عناصر الواجهة. نتيجة لذلك ، اتضح أنه يمكن إنشاء العناصر ليس باستخدام لغة وصف واجهة Moon.js ، ولكن باستخدام الوظائف المقابلة:

const { div, text, node, p } = Moon.view.m

يقوم Moon.js بتصدير الوظائف التي تتطابق أسماؤها مع أسماء العناصر التي تنشئها. لذلك ، divتتيح لك الوظيفة إنشاء عناصر <div>. تقوم الوظيفة textبإنشاء عقد نصية. nodeتتيح لك الوظيفة إنشاء عناصر مخصصة. الوظيفة pتخلق العناصر <p>. كما ترى ، فإن أسماء هذه الوظائف تشير بوضوح إلى الغرض منها.



لنقم بإنشاء عنصر <div>:

const Div = div({});

يمكنك تعيين سمات للعناصر عن طريق تمرير كائن بخصائص إلى الوظيفة المقابلة:

const Div = div({
    class: "DivClass"
});

هنا وصفنا العنصر <div>، في السمة classالتي يجب كتابة القيمة الخاصة بها DivClass.



إليك كيفية إنشاء عنصر نص:

const Text = text({ data: "A text node" });

تحتوي خاصية dataالكائن الذي تم تمريره إلى الوظيفة textعلى نص العنصر.



لنقم بإنشاء عنصر مخصص:

const CustomEl = node("custom-el");

لتعيين أي سمة لهذا العنصر ، يمكنك القيام بما يلي:

CustomEl({ "attr": "attr-value"})

التطورات

يمكنك إرفاق معالجات الأحداث بالعناصر باستخدام بنية تستخدم رمزًا @:

function handleClick() {
    return {};
}
Moon.run(() => ({
    view: <button @click=handleClick>Click Me!</button>
}));

نتيجة لذلك ، سيتم عرض زر مع نص على الصفحة Click Me، من خلال النقر على الوظيفة التي سيتم استدعاءها handleClick.

مكونات

في Moon.js ، الوظائف هي مكونات. هذا يعني أنه يمكن ذكر الوظائف في وصف عناصر الواجهة. سيتم تضمين ما ترجع الدالة في العنصر.



افترض أن لدينا وظيفة مثل هذه:

function aView({ data }) {
    return <div>A View</div>
}

هذه الوظيفة ،، aViewتُرجع عنصرًا يمكن عرضه:

Moon.run(() => {
    view: <div><aView /></div>
})

يتم استخدام اسم الوظيفة في هذا المثال كاسم العنصر. نتيجة لتنفيذ هذا الرمز ، اتضح أن ما تعيده الوظيفة سيتم وضعه في العلامة <div>. عندما يكون كل هذا في DOM ، سيكون هناك ترميز مثل هذا:

<div>
    <div>A View</div>
</div>

تطوير التطبيقات على أساس Moon.js

من أجل تجميع كل ما تحدثنا عنه للتو ، فلنقم بإنشاء تطبيق TODO بسيط في Moon.js. هنا سوف نستخدم المثال المقابل ، الذي أعده مطورو Moon.js.



أريد أن أذكرك أنه من المستحسن ، أثناء إتقان المكتبات والأطر الجديدة ، إنشاء تطبيقات صغيرة بمساعدتهم. يتيح لك ذلك تسريع التعلم ويساعدك على فهم ميزات الأدوات المدروسة. في البداية ، نتحدث عن أسسها ، ولكن مع مرور الوقت ، يأتي فهم آليات أكثر تعقيدًا.



هذا ما تبدو عليه صفحة هذا التطبيق.









صفحة التطبيق تحتوي الصفحة على عنوان وحقل وزر وقائمة مهام ، والتي يمكن تجديدها عن طريق إدخال أوصافها في الحقل والنقر فوق الزر.



لنبدأ بإنشاء ملفindex.html. هنا نربط Moon.js مباشرة بالصفحة:

<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/moon"></script>
<script src="https://unpkg.com/moon-browser"></script>
<!--  ,    -->
<script type="text/moon">
    function viewTodos({data, view}) {
        return (
            <div>
                <input type="text" value=data.todo @input=updateTodo/>
                <button @click=createTodo>Create</button>
                <ul children=(data.todos.map(todo =>
                    <li>{todo}</li>
                ))/>
            </div>
        )
    }
    function updateTodo({ data, view }) {
        const dataNew = { ...data, todo: view.target.value };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    function createTodo({ data }) {
        const dataNew = {
            todo: "",
            todos: [...data.todos, data.todo]
        };
        return {
            data: dataNew,
            view: <viewTodos data=dataNew/>
        }
    }
    <!--   data  view -->
    Moon.use({
        data: Moon.data.driver,
        view: Moon.view.driver("#root")
    })
    <!--   -->
    Moon.run(() => {
        data: [],
        view: <viewTodos data=[]>
    })
</script>
</html>

viewTodosتعرض الوظيفة العناصر المطلوبة لإدخال معلومات حول الحالات الجديدة وعرضها في قائمة. حججه dataو view. تنشئ



الوظيفة createTodoحالة جديدة وتعيدها في خاصية dataالكائن الذي تعيده.



تقوم الوظيفة updateTodoبكتابة حالة جديدة لحالة التطبيق.



انتبه إلى معالجات الأحداث @clickو @inputالتي هي في وظيفة viewTodos. @inputيتم تشغيل الحدث عند إدخال نص يصف الحالة في الحقل المناسب. عند معالجة هذا الحدث ، يتم استدعاء الوظيفة updateTodo. جدالviewفي هذه الوظيفة يمثل الحدث الذي حدث. باستخدامه ، نصل إلى DOM ونحصل على البيانات المدخلة في الحقل. ثم تدخل هذه البيانات إلى الدولة كملكية todo. يتم استدعاء



الحدث @clickبعد النقر فوق الزر. يسجل قائمة مهام جديدة. يتم استخدام الوظيفة لحل هذه المشكلة createTodo. تصل هذه الوظيفة إلى خاصية الحالة todoوتكتب بيانات جديدة إلى الخاصية todos، وبعد ذلك ، في خاصية viewالكائن الذي يتم إرجاعه إليه ، تقوم بإرجاع العنصر الذي <viewTodos>تمثله الوظيفة المقابلة ، في السمة dataالتي يتم كتابة القيمة الخاصة بها dataNew.



سيؤدي هذا إلى إعادة تقديم viewTodosوتحديث DOM. ستتم إضافة مهمة جديدة إلى قائمة المهام المعروضة على الصفحة.



قم بتشغيل هذا التطبيق في متصفحك وجربه.

النتيجة

لقد غطينا أساسيات Moon.js. أي أننا تحدثنا عن حقيقة أنه يمكنك استخدام المكتبة من خلال تثبيتها من NPM وربطها بالصفحات مباشرة. بعد ذلك ناقشنا الآليات الداخلية للمكتبة: العمل مع البيانات ، التعامل مع الأحداث ، تطوير المكونات.



يبدو أن Moon.js مكتبة جميلة. وحتى لو لم أتحدث عن مزاياها الأخرى ، فإنني أحبها بسبب حجمها الصغير.



هل استخدمت Moon.js؟