Svelte: Svelte Component ตั้งชื่ออะไรก็ได้ เอาที่สบายใจ(ตอนที่ 3)
มาต่อจาก Svelte: Introduction to svelte (ตอนที่ 2) ซึ่งเราได้ทดลองติดตั้ง svelte template และได้ลองสัมผัส first svelte กับ Hello World มาแล้ว คราวนี้เรามารู้จักหัวใจสำคัญของ svelte นั่นก็คือ svelte component กันบ้าง
สร้าง Svelte Component
ก่อนจะพูดถึงหน้าตาโครงสร้าง component ของ svelte ลองมาดูว่าการสร้าง component ของ framework ยอดนิยมแต่ละค่ายจะมีหน้ากันอย่างไรบ้าง
- Angular ใช้ typescript สร้าง class
2. React ใช้ function หรือ class
3. Vue ใช้ object literals
แต่ svelte ไม่ได้ใช้ js container รูปแบบใดใดเลย ตามตัวอย่างข้างบน คือ
- ไม่ได้ใช้ class
- ไม่ได้ใช้ object literal
- ไม่ได้ใช้ function
/* main.svelte */<script>
let name = "x-file";
</script><style>
.title {
font-weight: bold;
margin-bottom: .5rem
}
</style><h1 class="{ name }">Hello World</h1>
<h2 class="title"></h2>
<p> ..............</p>
แต่ svelte ใช้ การกำหนด component (โดย default)ในรูปแบบ SFC
(Single File Component) (คล้ายๆ .vue ใน vue) โดยใช้ นามสกุลไฟล์เป็น .svelte โครงสร้างประกอบไปด้วย 3 ส่วน คือ html, style (css) และ javascript และ ประกาศอยู่ในไฟล์ไฟล์เดียว
- <script>….</script> สำหรับเขียน code javascript
- <style>…..</style> สำหรับเขียน code css หรืือ sass/scss
- html สังเกตุว่าป็นโค้ดอิสระลอยๆ ไม่ถูกครอบด้วย tag อะไรทั้งนั้น แปะ code ตรงๆได้เลย ตรงนี้มีข้อสังเกตุ ดังนี้
-ถ้าเทียบกับ React html ต้องเขียนในรูปแบบ JSX (html in javascript)
-ถ้าเทียบกับ Vue คือ ต้องถูกบังคับให้ประกาศ html ใน
<template> …. </template>-ทั้ง React และ Vue ถูกบังคับให้ html ต้องประกาศ ในรูป “single root DOM node” (ถูกบังคับให้ต้องมี <div> ครอบเสมอ เพื่อให้ DOM มีโหนดเดียวในระดับ root เสมอ)
-attribute ใน html เป็นธรรมชาติ เหมือน html ปกติ
(ใน vue ถ้าต้องใช้ร่วมกับ state ต้อง binding ด้วย directive v-bind 🙄)
(ใน react ใช้ attribute class ตรงตรงเหมือน html ไม่ได้ เนื่องจากจะตรงกับ keyword class ของ javascript เลยต้องเลี่ยงไปใช้ className 🙄)
/* Vue: main.vue */
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}, data() {
return {
name: "x-file"
}
}
}
</script><div>
<h1 class="title">Hello World</h1>
<h2 v-bind:class="name"></h2> /* 🙄🙄🙄🙄🙄*/
<p> ..............</p>
</div>/* React: main.js */
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span> /* 🙄🙄🙄🙄🙄*/
}
-ในไฟล์ component .svelte ไม่จำเป็นต้องมีองค์ประกอบครบทั้ง 3 ส่วน เช่น
มี เพียง <script>…</script> หรือ html อย่างเดียวก็ได้-ในไฟล์ component .svelte ลำดับการวางองค์ประกอบ html, style, script ก่อนหลังไม่มีผล
-ในระดับ top-level ไม่สามารถประกาศ <style>…</style> หรือ <script>…</script> มากกว่า 1 ครั้งได้ พูดง่ายๆ คือ ใน .svelte ต้องมี <style> หรือ <script> แค่จุดเดียวเท่านั้น
ชื่อ Component
ถ้าสังเกตจากการนิยาม component ของไฟล์ .svelte ที่ผ่านมาข้างบน (รูปที่ 4)
จะเห็นว่าไม่มีการกำหนดชื่อ component ที่จุดใดเลย
(แตกต่างจาก framework อื่นๆ ที่ต้องกำหนดชื่อ component ผ่านชื่อ class, ชื่อ function หรือ กำหนดชื่อผ่าน property) แต่ให้ไปกำหนดชื่อเรียก component ตอนหยิบเอาไปใช้งาน มีข้อแม้เพียงข้อเดียวคือ ต้องตั้งชื่อขึ้นต้นด้วยตัวอักษรตัวใหญ่
ตั้งชื่อ component ได้อิสระ ตอนเอาไปใช้ และต้องขึ้นต้นด้วยอักษรตัวใหญ่
จากรูปด้านบนมีจุดสังเกตุดังนี้
- “ชื่อไฟล์ Component” จากรูป จะเห็นว่าชื่อไฟล์ “Batman.svelte” หรือ “batman.svelte” ไม่มีผลแตกต่าง
Batman.svelte = batman.svelte = BATMAN.svelte = bAtMaN.svelte
2. ชื่อ Component เวลา import svelte file component มาใช้งาน สามารถตั้งชื่อได้อิสระ แต่ควรตั้งชื่อขึ้นต้นด้วยอักษรตัวแรกเป็นตัวใหญ่เสมอ
*หากเป็นกรณีอื่นผิดจากนี้ svelte สงวนไว้ให้เป็น html tag ธรรมดา
จากรูปจะเห็นว่า เรา import ไฟล์ component เดียวกันคือ “Batman.svelte” แต่เวลาเรียกใช้ สามารถตั้งชื่อได้อิสระ
เช่น
import Superman from './Batman.svelte"import ชื่อ Superman จากไฟล์ “Batman.svelte” ชื่อ component ไม่สัมพันธ์กับชื่อไฟล์ component เลยก็ได้
(แต่ Best practice ควรเรียกชื่อให้ล้อ สัมพันธ์กับชื่อไฟล์ component ดีกว่านะ)
อยากตั้งชื่ออะไร แลัวแต่พี่สบายใจเลย
3. เมื่อประกาศชื่อ component แล้ว ให้เรียกชื่อ custom tag ตามชื่อที่ตั้ง
ต้องอยู่ในรูปแบบที่ valid ตาม html ด้วยนะ
เช่น <Batman /> หรือ <Batman></Batman>เพราะฉะนั้น <Batman> เฉยๆไม่มี “/” ปิดท้าย จะไม่แสดงผลนะจ้า
จากรูปด้านบน ทำการสร้างไฟล์ component ชื่อ “bATMan.svelte” ถูกนำมาเรียกใช้งานที่ app.svelte จะสังเกตุว่า เรา import ไฟล์ component เดียวกัน แต่ตั้งชื่อแตกต่างกันไป ในไฟล์เดียวกัน สามารถแสดงผลลัพธ์ได้เหมือนกัน
สรุป
ความจริงบทความนี้ ตั้งใจจะเขียนไกลกว่านี้ แต่อยากให้เห็นถึงการเรียกใช้งาน component การตั้งชื่อไฟล์ component (.svelte) กลัวว่าจะยาวกว่านี้เลยขอสรุปเรื่อง component ของ svelte ดังนี้
โครงสร้างไฟล์ svelte component โดย default เขียนอยู่ในไฟล์ component (.svelte) เดียวกัน โดยมีองค์ประกอบ 3 ส่วน คือ html, css (<style>…</style>)และ javascript (<script>…</script>) และไม่มีการกำหนดชื่อเรียก component มาตั้งชื่อเรียกได้แบบอิสระ ตอนเรียกใช้ โดยมีข้อแม้การตั้งชื่อ component ให้ขึ้นตั้นด้วยอักขระแรกเป็นตัวใหญ่
แต่ Best Practice ควรตั้งชื่อให้สื่อความหมาย ชื่อไฟล์และชื่อเรียก component ควรเป็นชื่อเดียวกัน และควรเป็นชื่อขึ้นต้นด้วยตัวใหญ่ เช่น
import App from “./App.svelte”อีกเหตุผลนึงคือ component ควรตั้งชื่อเป็นตัวใหญ่เพื่อให้แยกแยะออกระหว่าง component กับ html tag ปกติ
