⛎ 🥖 ✌️ ابتعد عن jQuery إلى Svelte ، بدون ألم 👩🏼‍🔧 🙅🏼 👨🏻‍🍳

تحية للجميع.

أنا مطور خلفية وأعمل على حل المهام الأمامية قدر استطاعتي ، أي في jQuery ، عملت في 2015 ، وهي تعمل الآن. ولكن مع Vue و React ، لم يعد هذا مكانًا كاملاً. بدافع الحب بطريقة خاصة ، قررت إتقان Angular / React / Vue ، الذي لم يتم اختباره من قبل الملايين من المطورين ، قررت تجربة Svelte .

بعد أن قمت ببعض التمارين من الكتاب المدرسي ، قررت الانتقال إلى الممارسة. لهذا ، أخذت إحدى مهام الاختبار التي اكتملت بنجاح.

عند التعيين كان من الضروري إجراء مراجعة لقائمة المهام ومهمة واحدة من هذه القائمة ، ليست هناك حاجة إلى CRUD.

يتم تنفيذ جزء العميل باعتباره SPA ، ويتم كل العمل مع DOM من خلال jQuery ، وهو مرشح ممتاز لاستبدال jQuery بـ Svelte.

أدناه سأتحدث عن العقبات الأولى على طول الطريق وبالطبع حول كيفية التغلب عليها.
البرنامج التعليمي لـ Svelte سهل الوصول وبديهي للغاية ، ولكن كيفية تضمين Svelte في مشروع عشوائي ليس واضحًا تمامًا ، لأن Svelte ليست مكتبة مثل jQuery ، فهو مترجم ، أي أن الشفرة المكتوبة باستخدام توجيهات Svelte يجب أن يتم تجميعها بطريقة أو بأخرى في JS الأصلي.

عائق آخر كان استخدام

في Svelte ، هذا حرف محجوز ، لذا يؤدي استخدامه في الرمز الذي سيتم تجميعه بواسطة Svelte إلى حدوث خطأ:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

باستخدام "$"

بالطبع ، قد يطرح السؤال: ما هو `` $ `مثل إذا قمنا بتغيير jQuery بالكامل إلى Svelte؟
نعم ، السؤال معقول ، ولكن إذا فكرت في الأمر ، ستصبح المشكلة واضحة - لا تحتاج إلى أكل الفيل بالكامل ، فالأشخاص ذوي الخبرة يأكلون الفيل في أجزاء. فيما يتعلق بالانتقال من استخدام jQuery إلى استخدام Svelte ، ستكون سلسلة من إعادة هيكلة الذرة ، وسيكون التقدم مرئيًا دائمًا وسيظل "النظام" ككل في حالة عمل دائمًا.

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

تحدث مشكلة "$" فقط في التعليمات البرمجية التي يجمعها Svelte ، لقد تم نقل جميع منطق SPA إلى ملف "business-process.js" ، ولا توجد حاجة لحل هذه المشكلة ، ولكن يجب أن تذهب جميع التعليمات البرمجية من "business-process.js" إلى App.svelte ومكونات التطبيق الأخرى ذات الصلة.

بعد إعادة الهيكلة الأولى ، ظهر App.svelte مع الرمز التالي:


<script>
    jQuery(function ($) {

        function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
        }

        loadStartScreen();

        async function search(sample) {
            $('#paging').empty();
            $.ajax({
                type: "GET",
                url: `/api/v1/task/search/${sample}/`,
                dataType: "json",
                success: renderTasks,
                error: function (jqXHR, textStatus, errorThrown) {
                },
                timeout: 500,
            });
        }

        $("#search").submit(async function (event) {
            event.preventDefault();
            const sample = $("#sample").val();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });
    });
</script>

<div class="container">
    <h1>  </h1>

    <form class="form-horizontal" id="search">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  " 
                 autofocus autocomplete="on" />
            </div>
        </div>
    </form>
    <div id="taskList">
    </div>
    <div id="paging">
    </div>

يعمل الكود ، في الواقع لم يتم استخدام Svelte بعد على الإطلاق ، في هذه المرحلة لا تولد Svelte إلا كود HTML يتم إدراجه في

<body>

المتغير `$` معزول في المكالمة

jQuery(function ($) {});

لا يوجد تعارض تسمية.

نقوم بربط متغير العينة بقيمة عنصر الإدخال بالمعرف = "sample":


                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />

في حالة إرسال عنصر النموذج بالمعرف = "search" ، يتم تنفيذ الرمز:


        $("#search").submit(async function (event) {
            event.preventDefault();

            if (sample) {
                search(sample);
            }
            if (!sample) {
                loadStartScreen();
            }
        });

يجب تنفيذ هذا الرمز وفقًا لتوجيه Svelte ، ونعيد كتابته:


<script>
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>
<form class="form-horizontal" id="search"
on:submit="{svelteSearch}">
</form>

يتم تجميع الشفرة ، ولكنها لا تعمل ، لأن وظيفة search () محددة في نطاق jQuery (function ($) {}) ؛ وهذه الوظيفة غير مرئية في النطاق العالمي. اسحب البحث () إلى نطاق واحد باستخدام svelteSearch (event):


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }

    let sample = '';

    jQuery(function ($) {
        loadStartScreen();
    });
    async function search(sample) {
        $('#paging').empty();
        $.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

لا يجمع هذا الرمز:


[!] (plugin svelte) ValidationError: $ is an illegal variable name

ماذا أفعل؟ ابحث في جوجل! "Svelte how to import jquery": كيف أستخدم jQuery في Svelte
لم تعجبني الإجابة المميزة بـ "صحيحة" لاستيراد مكتبة خارجية (تعسفية * .js) ، لا يكفي كتابة الاستيراد * ، يجب عليك تسجيلها في rollup.config.js خارجي:


export default { external []};

الخيار الثاني مع النافذة. يتطلب $ حركات جسم أقل بكثير ، وبما أننا نخطط للتخلي تمامًا عن استخدام jQuery ، فسيكون هذا الأمر للاستيراد مؤقتًا ويمكن تأجيل الاستيراد حتى وقت لاحق.

استخدم لصق النسخ مع تجاوز سعة المكدس:


<script>
    function loadStartScreen() {
        loadPaging(0, settings.capacity);
        loadPage(0, settings.capacity);
    }
    jQuery(function ($) {
        loadStartScreen();
    });

    let sample = '';

    async function search(sample) {
        window.$('#paging').empty();
        window.$.ajax({
            type: "GET",
            url: `/api/v1/task/search/${sample}/`,
            dataType: "json",
            success: renderTasks,
            error: function (jqXHR, textStatus, errorThrown) {
            },
            timeout: 500,
        });
    }
    async function svelteSearch(event) {
        event.preventDefault();
        if (sample) {
            search(sample);
        }
        if (!sample) {
            loadStartScreen();
        }
    }
</script>

<div class="container">
    <h1>  </h1>
    <form class="form-horizontal" id="search"
    on:submit="{svelteSearch}">
        <div class="form-group">
            <label class="control-label col-sm-2" for="sample">
            
            </label>
            <div class="col-sm-10">
                <input id="sample" class="form-control " type="search"
                 placeholder="  "
                 autofocus autocomplete="on"
                 bind:value={sample}
                 />
            </div>
        </div>
    </form>
// ..skip..
</div>

يبقى للتخلص من:


    jQuery(function ($) {
        loadStartScreen();
    });

نزيل هذا الرمز ونضيفه إلى الترميز:


<svelte:window on:load = {loadStartScreen} />

منجز.

في وثائق Svelte ، يمكنك العثور على:

<ممشوق: وثيقة>
و <ممشوق: وثيقة> علامة، تماما مثل <ممشوق: نافذة>، يمنحك وسيلة مريحة لإضافة إلزامي المستمعين الحدث لكائن المستند. هذا مفيد للاستماع إلى الأحداث التي لا تطلق على النافذة ، مثل الماوس والماوس.

عمليا ، لدينا:


[!] (plugin svelte) ParseError: Valid <svelte:...> tag names are svelte:head, svelte:options, svelte:window, svelte:body, svelte:self or svelte:component

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

كيفية دمج jQuery في كود Svelte بقليل من الدم قلت.

كيفية تجميع توجيهات Svelte في كود JS

نقوم بضخ مشروع فارغ في مجلد منفصل كما هو موضح في مدونة Svelte (قم بتثبيت Node.js على طول الطريق). الآن نقوم بنقل الملفات التي تم تنزيلها إلى دليل مشروعنا.

نقوم بنقل الملفات من "عام" إلى حيث لدينا الملفات ليتم تحميلها من قبل العميل (متصفح المستخدم) ، ولدي "عام / أصول / موقع" ، ولست بحاجة لأنماط من "global.css" ، ولم أنقل هذا الملف.

الملف "public / index.html" ، قمت بنقله إلى حيث سيأخذ الخادم النموذج للعرض: "view / Site / index.html".

تتم إضافة ملفات من "src" إلى مصدر الواجهة الأمامية - "src / frontend".

ملفات تصف مصادر الواجهة الأمامية:

rollup.config.js
package-lock.json
حزمة

لقد تحولت إلى الجذر ، حيث التقطتهم IDE واعتنوا بكل شيء (تبعيات مثبتة).
تحتاج الآن إلى تغيير تكوين الترجمة لتوجيهات Svelte في JS.

افتح الملف rollup.config.js وقم بتغيير مسارات الملفات:


export default {
	input: 'src/frontend/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/assets/Site/bundle.js'
	},
	plugins: [
		svelte({
			dev: !production,
			css: css => {
				css.write('public/assets/Site/bundle.css');
			}
		}),

هذه هي الصعوبة في الدمج الأولي لـ Svelte في مشروع موجود.

نقوم بتثبيت التبعيات وبدء تتبع التغييرات في التعليمات البرمجية المصدر للواجهة الأمامية لتجميعها بسرعة.

npm install
npm run dev

لا تنسى

قم بتحرير قالب العرض التقديمي (في حالتي ، هو "view / Site / index.html"):

كل شيء داخل علامة الجسم قابل للنقل إلى App.svelte

أضف روابط إلى ملفات الموارد الضرورية


<head>
  <link rel='stylesheet' href='/assets/Site/bundle.css'>
</head>

بعد علامة النص ، أضف "رابط" إلى ملف التجميع الذي تم إنشاؤه:
```
<body>
</body>
<script src='/assets/Site/bundle.js'></script>
```

يمكن عرض الكود بأكمله في المستودع .

لا يزال التخلي النهائي عن jQuery في هذا المشروع بعيدًا جدًا ، لكن المقالة لم تكن حول ذلك ، فهذه المقالة حول الخطوات الأولى لتطبيق Svelte في التعليمات البرمجية الخاصة بك ، حول أبسط الأشياء.

شكرا للانتباه.

التهديد
كيف تحول الانتقال ، يمكنك أن تقرأ في المقالة التالية " كيف كانت "

ابتعد عن jQuery إلى Svelte ، بدون ألم

باستخدام "$"

كيفية تجميع توجيهات Svelte في كود JS

لا تنسى

More articles: