استبدال jQuery بـ Vue.js: لا ضرورة لخطوة البناء

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

ما قد لا يعرفه بعض الأشخاص هو أنه يمكنك دمج Vue في مشروعك بنفس الطريقة التي تدمج بها jQuery ، ولا توجد خطوة بناء ضرورية. Vue مرن بمعنى أنه يمكننا استخدامه مباشرة في HTML.

لذلك ، إذا كانت بنية صفحتك الحالية تبدو كما يلي:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> //some jquery code here </script>

يمكنك تغيير علامة البرنامج النصي حرفيًا مع الاستمرار في استخدام HTML و JS جنبًا إلى جنب تمامًا كما فعلت من قبل ، مع إعادة هيكلة عدد قليل من أجزاء التعليمات البرمجية الصغيرة. لا يتعين عليك إعادة كتابة HTML في JavaScript ، ولا يتعين عليك استخدام حزمة الويب ، ولا يتعين عليك إعداد نظام عملاق:

 <main> <div class="thing"> <p>Some content here</p> </div> </main> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> <script> //some vue code here </script>

يمكنك استبدال العلامات وترك العلامات كما هي. أفضل جزء هو أنك قد تعتقد أن الشفرة ستصبح أكثر تعقيدًا ، ولكن قد تجد في قراءة هذه المقالة ورؤية الأمثلة أن Vue بسيط للغاية ومقروء وسهل الصيانة والتكيف. من حيث الحجم ، فهي قابلة للمقارنة أيضًا - لاستخدامها كما هي من CDN ، مصغر ، Vue الإصدار 2.5.3 هو 86 كيلو بايت . jQuery 3.2.1 بحجم 87 كيلوبايت .

دعنا نغطي بعض حالات الاستخدام الشائعة في jQuery وكيف نحولها إلى Vue ، ولماذا نرغب في القيام بذلك.

التقاط مدخلات المستخدم

حالة الاستخدام الشائعة حقًا عند الحاجة إلى JavaScript على موقع ما هي التقاط مدخلات المستخدم من نموذج ، لذلك فلنبدأ من هناك. لن ندمج الشكل الكامل في الواقع حتى الآن من أجل البساطة والوضوح ، لكننا سنعمل على تحقيقه في النهاية.

لالتقاط المعلومات كما يكتبها المستخدم ، إليك كيفية القيام بذلك في jQuery و Vue - جنبًا إلى جنب:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //keypress wouldn't include delete key, keyup does. We also query the div id app and find the other elements so that we can reduce lookups $('#app').keyup(function(e) { var formname = $(this).find('.formname'); //store in a variable to reduce repetition var n_input = $(this).find('#thing').val(); formname.empty(); formname.append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model="name" /> <!--v-model is doing the magic here--> <p>{{ name }}</p> </div>

 //this is a vue instance new Vue({ //this targets the div id app el: '#app', data: { name: '' //this stores data values for 'name' } })

أستخدم هذا المثال لأنه يكشف عن بعض نقاط القوة في Vue. Vue هو رد فعل ، مما يجعله قادرًا بشكل خاص على الاستجابة للتغييرات. يمكنك أن ترى كيف ، بينما نقوم بتحديث ما نكتبه ، يتغير على الفور - ليس هناك تأخير.

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

في إصدار Vue ، نقوم بتخزين الحالة - نحن نتتبع خاصية واحدة نريد تحديثها وتغييرها ، ونتتبع العنصر الذي نريد تغييره بواسطة شيء يسمى التوجيه. هذا يعني أنه مرتبط مباشرة بعنصر HTML الذي نحتاج إلى استهدافه. يمكن أن يتغير هيكل DOM ، ويمكن لـ HTML التحرك ، ولن يؤثر أي من هذا على أدائنا أو التقاط هذه الأحداث. في حالتنا ، نحن نستخدم سمة النموذج v في الإدخال للاتصال بالبيانات التي نخزنها في JavaScript.

ولكن! هذه ليست حالة استخدام شائعة مثل تخزين شيء ما عندما تضغط على مفتاح الإدخال ، لذلك دعونا ننظر إلى ذلك بعد ذلك.

تخزين مدخلات المستخدم في حدث واحد

الشيء المثير للاهتمام حول طريقة عمل Vue هو أنه منفصل عن الاضطرار إلى التفكير في أحداث DOM معينة عند تخزين البيانات واستردادها. من حيث الجوهر ، لدينا بالفعل فكرة عما نريد التقاطه ؛ نعطيها شكلاً من خلال اختيار حدث لتغييره. في المقابل ، يرتبط jQuery ارتباطًا وثيقًا بما يفعله DOM ويستند إلى أحداث DOM تلك لبناء المتغيرات التي يخزنها ، والتي يمكن وضعها في أي مكان ، بدلاً من مجموعة واحدة متسقة (في البيانات) للاسترجاع. يمكننا أن نرى هذا في الإصدار المحدث من المثال الأخير ، حيث يتم جمع المعلومات عند الضغط على مفتاح الإدخال:

 <div> <label for="thing">Name:</label> <input type="text" /> <p class="formname"></p> </div>

 // this is an alias to $(document).ready(function() { $(function() { //We query the div id app and find the other elements so that we can reduce lookups $('#app').change(function(e) { var n_input = $(this).find('#thing').val(); $(this).find('.formname').append(n_input); }); }); 

 <div> <label for="name">Name:</label> <input type="text" v-model.lazy="name" /> <p>{{ name }}</p> </div>

 new Vue({ el: '#app', data: { name: '' } });

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

"اذهب واحصل على هذا العنصر ، وشاهد ما يفعله ، وتمسك بهذه التغييرات ، وافعل شيئًا مع هذه التغييرات."

بالمقارنة: في Vue ، نحن نتحكم في ما يتغير ، ويستجيب DOM لتلك التغييرات بناءً على أوامرنا. نرفقه مباشرة بالشيء الذي نرغب في تحديثه. في حالتنا ، لدينا تجريد صغير يسمى المعدل: v-model.lazy . يعرف Vue الآن عدم بدء تخزين هذا إلا بعد حدوث حدث التغيير. أنيق جدا!

تبديل الفئات

الشيء التالي الذي سنقوم بتغطيته هو تبديل فئات CSS لأنه ، كما أخبرني Googly القدير الذي يشاهدني باستمرار ، إنها أكثر وظائف jQuery شيوعًا.

 <div> <button aria-pressed="false">Toggle me</button> <p class="toggle">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS $(function() { $('button').click(function(e) { $('.toggle').toggleClass('red'); $(this).attr('aria-pressed', ($(this).attr('aria-pressed') == "false" ? true : false)); }); }); 

 <div> <button @click="active = !active" :aria-pressed="active ? 'true' : 'false'">Toggle me</button> <p :class="{ red: active }">Sometimes I need to be styled differently</p> </div>

 .red { color: red; } JS new Vue({ el: '#app', data: { active: false } })

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

نقوم بتخزين البيانات active ، ويقوم الزر بتبديل الحالة ، ويتم تغيير .red بناءً على هذا الشرط. حتى الحالات الخاصة بإمكانية الوصول ، التي يتم aria-pressed ، يتم ذكرها بشكل أسرع ، حيث لا يتعين علينا تعيين أي شيء في البرنامج النصي في Vue ، فنحن قادرون على التبديل بين الحالات المضمنة مباشرةً في القالب بناءً على حالة " active " ".

ستلاحظ أيضًا في الأمثلة القليلة الماضية ، ربما كنت تعتقد أنه سيكون هناك الكثير من التعليمات البرمجية لبدء العمل مع Vue.js بدلاً من jQuery ، لكنها في الواقع قابلة للمقارنة.

يختبئ ويظهر

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

 <div> <button type="button" aria-expanded="false"> Toggle Panel </button> <p class="hello">hello</p> </div>

 $(function() { $('#toggle').on('click', function() { $('.hello').toggle(); $(this).attr('aria-expanded', ($(this).attr('aria-expanded') == "false" ? true : false)); }); }); 

 <div> <button @click="show = !show" :aria-expanded="show ? 'true' : 'false'"> Toggle Panel </button> <p v-if="show">hello</p> </div>

 new Vue({ el: '#app', data: { show: true } })

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

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

الآن ، ليس هناك أي خطأ في console.log ، ولكن بمساعدة أدوات تطوير Vue ، يمكننا في الواقع الحصول على تدريب عملي على Vue (لا يمكن مقاومة) لما يعتقد Vue أنه يحدث. في هذا gif أدناه ، يمكنك أن ترى أثناء تبديل الزر ، تقوم Vue devtools بتحديث حالة true / false وفقًا لذلك. إذا كان DOM لا يعمل بالطريقة التي توقعناها ، فيمكننا رؤية البيانات في Vue في الوقت الفعلي. هذا يجعل الأمر أسهل بكثير في التصحيح ؛ إنه رائع حقًا.

الشيء الآخر الذي أحبه في هذا هو أنه من السهل توسيع v-if ليشمل شروطًا أخرى. يمكنني أن أقرر استخدام شيء يسمى v-show بدلاً من v-if إذا كان الشيء الذي أقوم بتبديله سيظهر ويخفي بشكل متكرر: v-if سيؤدي إلى إلغاء تثبيت العنصر تمامًا ، بينما سيؤدي v-show فقط إلى تبديل ظهوره. هذا التمييز مهم حقًا لأنه من الأفضل بكثير تبديل الرؤية بأسلوب بدلاً من فك / تركيب عقدة DOM تمامًا. يمكنني إظهار أو إخفاء شيء ما بناءً على الكثير من الشروط ، أو حتى وجود مدخلات المستخدم أو شروط أخرى أيضًا. هذا هو المكان الذي يمكن أن يصبح فيه jQuery فوضويًا بعض الشيء ، حيث يتم اختبار اتصال DOM في مواقع متعددة وتنسيقها. فيما يلي مثال على تنسيق إظهار شيء ما بناءً على وجود مدخلات المستخدم:

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea v-model="tacos"></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 new Vue({ el: '#app', data() { return { tacos: '' } } }) 

 <div> <label for="textarea">What is your favorite kind of taco?</label> <textarea></textarea> <br> <button v-show="tacos">Let us know!</button> </div>

 $(function() { var button = $('.button'); var textarea = $('#textarea'); button.hide(); textarea.keyup(function() { if (textarea.val().length > 0) { button.show(); } else { button.hide(); } }) });

في هذا المثال ، يمكنك أن ترى قيمة امتلاك Vue للحالة - فنحن نتفاعل مع التغييرات بشكل طبيعي جدًا وبتعليمات برمجية أقل تمامًا. بمجرد أن تعتاد على النمط ، يكون من الأسرع فهمه لأنك لست مضطرًا لتتبع المنطق سطرًا بسطر. يسمي الكثير من الناس هذا الاختلاف "حتميًا مقابل تصريحي".

تقديم نموذج

كانت حالة الاستخدام المتعارف عليه لـ jQuery تُرسل نموذجًا مع استدعاء AJAX ، لذلك يجب أن نلقي نظرة على ذلك أيضًا. لا يحتوي Vue في الواقع على شيء مضمّن مثل AJAX ؛ من المعتاد في تطبيق Vue استخدام شيء مثل Axios (مكتبة JavaScript لإجراء طلبات HTTP) للمساعدة في هذه المهمة.

هذا المثال أكثر تعقيدًا بقليل من البقية. سنقوم ببعض الأشياء هنا:

1. سيظهر الزر باللون الرمادي قبل أن نبدأ في الكتابة في النموذج الخاص بنا ، ثم سيتلقى فصل دراسي "نشط" ويتحول إلى اللون الأزرق ؛
2. عندما نرسل النموذج ، سنمنع الصفحة من التحميل ؛
3. عند إرسال النموذج ، سنعرض بيانات الاستجابة على الصفحة.

 <div> <form action="/"> <div> <label for="name">Name:</label><br> <input type="text" name="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" name="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea name="caps" required></textarea> </div> <button class="submit" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre class="response"></pre> </div> </form> </div>

 $(function() { var button = $("button"); var name = $("input[name=name]"); name.keyup(function() { if (name.val().length > 0) { button.addClass('active'); } else { button.removeClass('active'); } }); $("form").submit(function(event) { event.preventDefault(); //get the form data var formData = { name: $("input[name=name]").val(), email: $("input[name=email]").val(), caps: $("input[name=caps]").val() }; // process the form $.ajax({ type: "POST", url: "//jsonplaceholder.typicode.com/posts", data: formData, dataType: "json", encode: true }).done(function(data) { $(".response") .empty() .append(JSON.stringify(data, null, 2)); }); }); });

هنا ، سنرى الأسطر 2-10 تتعامل مع التعامل مع فئة الزر ، بشكل مشابه لما فعلناه من قبل. نقوم بتمرير معلمة تسمى الحدث إلى النموذج ، ثم نقول event.preventDefault() لمنع إعادة تحميل الصفحة. ثم نجمع كل بيانات النموذج من مدخلات النموذج ، ونعالج النموذج ، ثم نضع الرد في .done() من طلب AJAX.

 <div> <form @submit.prevent="submitForm"> <div> <label for="name">Name:</label><br> <input type="text" v-model="name" required/> </div> <div> <label for="email">Email:</label><br> <input type="email" v-model="email" required/> </div> <div> <label for="caps">HOW DO I TURN OFF CAPS LOCK:</label><br> <textarea v-model="caps" required></textarea> </div> <button :class="[name ? activeClass : '']" type="submit">Submit</button> <div> <h3>Response from server:</h3> <pre>{{ response }}</pre> </div> </form> </div>

 new Vue({ el: '#app', data() { return { name: '', email: '', caps: '', response: '', activeClass: 'active' } }, methods: { submitForm() { axios.post('//jsonplaceholder.typicode.com/posts', { name: this.name, email: this.email, caps: this.caps }).then(response => { this.response = JSON.stringify(response, null, 2) }) } } })

في إصدار Vue ، نقرر الحقول التي نحتاج إلى تعبئتها في النموذج ، ثم نرفقها بهذا النموذج v الذي استخدمناه سابقًا. نتحقق من وجود الاسم لتبديل الفصل. بدلاً من المرور في الحدث وكتابة event.preventDefault() ، كل ما علينا فعله هو كتابة @submit.prevent على عنصر النموذج لدينا ، وهذا أمر مهم بالنسبة لنا. لإرسال المنشور نفسه ، نستخدم Axios ، وسنخزن الرد في مثيل Vue ردًا على ذلك.

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

خاتمة

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

نظرًا لمرونة Vue ، من السهل أيضًا نقل هذا الكود إلى خطوة بناء وهياكل المكونات إذا كنت ترغب في اعتماد بنية أكثر تعقيدًا بمرور الوقت. من الممتع حقًا تجربته ، لذلك عندما تكون مستعدًا للقيام بذلك ، تحقق من vue-cli. ما تفعله هذه الأداة هو منحك القدرة على دعم بناء Vue و webpack على مستوى الإنتاج بالكامل باستخدام بضعة أوامر طرفية. يتيح لك هذا العمل مع مكونات ملف واحد ، حيث يمكنك استخدام HTML و CSS و Script جنبًا إلى جنب في ملف واحد يتكون من مكونات فردية قابلة لإعادة الاستخدام. لست مضطرًا إلى تكوين webpack build إلا إذا كنت ترغب في القيام بشيء خاص ، لذلك يمكنك توفير الكثير من الوقت في إعداد الأشياء. حتى أن لديهم أمرًا مدمجًا لإعداد كل شيء لنشر الإنتاج.

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