วิธีจัดรูปแบบแอปพลิเคชัน Svelte

เว็บเฟรมเวิร์กมาและไป แต่หนึ่งในนั้นมีแนวโน้มมากที่สุดคือ Svelte Svelte เป็นทางเลือกที่ยอดเยี่ยมสำหรับ React และแม้ว่าจะมีชุมชนขนาดใหญ่อยู่แล้ว แต่ก็เป็นกรอบการทำงานที่น่าจับตามอง Svelte ทำให้การจัดรูปแบบแอปของคุณเป็นเรื่องง่าย ด้วยวิธีการต่างๆ ที่มีอยู่

แอพพลิเคชั่นจัดแต่งทรงผม Svelte

Svelte มีหลายวิธีในการกำหนดรูปแบบแอปพลิเคชัน รวมถึงการนำเข้าไฟล์ CSS การใช้สไตล์แบบอินไลน์ และการใช้รูปแบบอื่นที่เรียกว่า “สล็อต” แต่ละแนวทางมีข้อดีและข้อเสียที่แตกต่างกัน ซึ่งนักพัฒนาซอฟต์แวร์ควรพิจารณาอย่างรอบคอบเมื่อเลือกแนวทางที่เหมาะสมกับความต้องการของตนมากที่สุด

การตั้งค่าโครงการ Svelte ของคุณ

หากต้องการติดตั้ง Svelte ให้สำเร็จโดยใช้เครื่องมือสร้างส่วนหน้าของ ViteJS จำเป็นต้องมีสภาพแวดล้อมรันไทม์ Node.js และ Node Package Manager (NPM) ติดตั้งไว้ล่วงหน้าบนระบบของคุณ หลังสามารถยืนยันได้ผ่านการตรวจสอบง่ายๆ ผ่าน Terminal โดยดำเนินการคำสั่งต่อไปนี้:

 node -v

หลังจากตรวจสอบให้แน่ใจว่าโหนดใช้งานได้ ให้เปิดเซสชันอินเทอร์เฟซบรรทัดคำสั่งและดำเนินการคำสั่งที่ตามมาตามลำดับ:

 npm create vite

หรือ:

 yarn create vite

หากต้องการสร้างโปรเจ็กต์ใหม่ที่ใช้ Svelte โดยใช้ Vite พร้อมการกำหนดค่าที่ระบุ โปรดทำตามขั้นตอนเหล่านี้:1. ใช้คำสั่ง vite init ในเทอร์มินัลของคุณหรือสภาพแวดล้อมการพัฒนาแบบรวม (IDE) เพื่อสร้างโครงการใหม่ตามข้อกำหนดที่กำหนด ตรวจสอบให้แน่ใจว่าโปรเจ็กต์ถูกสร้างขึ้นภายในโฟลเดอร์ที่คุณเลือก2. เปลี่ยนไดเร็กทอรีการทำงานปัจจุบันเป็นโฟลเดอร์โปรเจ็กต์ที่สร้างขึ้นใหม่โดยดำเนินการคำสั่ง cd ตามด้วยพาธไปยังโฟลเดอร์ที่มีไฟล์โปรเจ็กต์3. ในการตั้งค่าการพึ่งพาที่จำเป็นสำหรับโครงการ ให้ดำเนินการคำสั่งการติดตั้งที่เหมาะสม ในกรณีนี้ จะเกี่ยวข้องกับการติดตั้งแพ็คเกจ เช่น @sveltejs/kit , @sveltejs/vite และไลบรารีหรือเฟรมเวิร์กที่จำเป็นอื่นๆ ที่จำเป็นสำหรับการสร้างแอปพลิเคชัน

 npm install

หรือ:

 yarn

เพื่อเริ่มกระบวนการพัฒนา ก่อนอื่นต้องติดตั้งการพึ่งพาที่จำเป็นที่จำเป็นสำหรับโครงการ ในการเริ่มเซิร์ฟเวอร์การพัฒนา เพียงดำเนินการคำสั่งที่เหมาะสมภายในเทอร์มินัลหรือพรอมต์คำสั่งของคุณ

 npm run dev

หรือ:

 yarn dev

การกำหนดมาร์กอัปของโครงการ

หากต้องการเริ่มงาน ให้เข้าถึงโครงการโดยใช้อินเทอร์เฟซการเข้ารหัสที่คุณต้องการ และกำจัดทั้งโฟลเดอร์"assets"และ"lib"นอกจากนี้ ตรวจสอบให้แน่ใจว่าเนื้อหาภายในไฟล์"app.css"และไฟล์"App.svelte"ถูกล้างแล้ว หลังจากนั้น ให้เปิดไฟล์ “main.js” แล้วใส่ข้อความต่อไปนี้:

 import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app
 

อันที่จริง ให้เราดำเนินการเข้าถึงส่วนสคริปต์หลักของคอมโพเนนต์ Svelte โดยนำทางผ่านโครงสร้างโฟลเดอร์โครงการ เมื่อเรามาถึงไฟล์ App.svelte แล้ว โปรดค้นหาองค์ประกอบ ภายในนั้น จากนั้น คุณสามารถกำหนดตัวแปรอาร์เรย์ JavaScript ใหม่ที่เรียกว่า"ลิงก์"โดยใช้ไวยากรณ์ JavaScript สมัยใหม่ การรวบรวมองค์ประกอบข้อมูลนี้จะจัดเก็บทรัพยากรไฮเปอร์ลิงก์ต่างๆ สำหรับแอปพลิเคชันของเรา

 <script>
  let imageLinks = [
    "https://images.pexels.com/photos/1170986/pexels-photo-1170986.jpeg",
    "https://images.pexels.com/photos/1754986/pexels-photo-1754986.jpeg",
    "https://images.pexels.com/photos/3257811/pexels-photo-3257811.jpeg",
    "https://images.pexels.com/photos/3643714/pexels-photo-3643714.jpeg",
    "https://images.pexels.com/photos/755834/pexels-photo-755834.jpeg",
    "https://images.pexels.com/photos/2928158/pexels-photo-2928158.jpeg",
  ];
</script>
 

ภายในบริบทของเอกสาร HTML ให้ใช้แท็กเพื่อกำหนดองค์ประกอบคอนเทนเนอร์หลัก ซึ่งควรจัดรูปแบบเป็นองค์ประกอบหลักภายในโครงสร้างหลัก คอนเทนเนอร์แบบรวมศูนย์นี้จะทำหน้าที่เป็นช่องรองรับองค์ประกอบภาพต่างๆ ที่ได้จากอาร์เรย์ของลิงก์รูปภาพที่รวมกันภายใต้หัวข้อ"imageLinks"ตลอดกระบวนการนี้ ใช้เทคนิคการวนซ้ำเพื่อสร้างแต่ละอินสแตนซ์ขององค์ประกอบ HTML ผนวกเข้ากับเอนทิตีคอนเทนเนอร์ที่ครอบคลุมตามต้องการ

 <main>
  <h1>Cute Cat Gallery</h1>
  <h3>See the cutest images of cats from the internet</h3>
  <div class="container">
    {#each imageLinks as url}
      <div class="image-container">
        <img src={url} />
      </div>
    {/each}
  </div>
</main>

หลังจากสร้างไวยากรณ์ของมาร์กอัปแล้ว ตอนนี้ใคร ๆ ก็สามารถก้าวไปข้างหน้าและใช้วิธีแรกในการกำหนดรูปแบบซอฟต์แวร์ผ่านการนำเข้า CSS โดยตรง

ส่วนประกอบ Svelte จัดแต่งทรงผมด้วยการนำเข้า CSS โดยตรง

การรวมคอมโพเนนต์ Svelte มักจะเกี่ยวข้องกับการเขียนไฟล์ CSS ภายนอกและนำเข้าโดยตรงภายในส่วนสคริปต์ของคอมโพเนนต์ ในการดำเนินการดังกล่าว เราสามารถรวมคำสั่งต่อไปนี้ที่ลำดับชั้นสูงสุดในแท็ก script:javascriptimport { css } from’./app.css';

 import "./app.css";

โปรดแก้ไขไฟล์ app.css โดยตั้งค่าคุณสมบัติการแสดงผลของคลาส"คอนเทนเนอร์"เป็น"ตาราง"และปรับช่องว่างภายในของคลาส"คอนเทนเนอร์รูปภาพ"เป็น 10 พิกเซล ซึ่งจะส่งผลต่อเค้าโครงและระยะห่างของรูปภาพภายในคอนเทนเนอร์ในแท็บสไตล์

 .container {
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.image-container {
  padding:10px;
}

ปรับขนาดองค์ประกอบภาพเพื่อปรับให้เข้ากับขนาดหน้าจอต่างๆ และใช้ตัวเลือกการออกแบบเฉพาะเมื่อผู้ใช้โต้ตอบกับภาพที่แสดงโดยใช้เทคนิคการปรับขนาดและการจัดการเหตุการณ์ใน CSS และ JavaScript

 img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  transition: 250ms;
}

img:hover {
  scale: 1.03;
  transition: 250ms;
}

เมื่อดำเนินการโค้ดภายในสภาพแวดล้อมของเว็บเบราว์เซอร์ ควรสังเกตการแสดงภาพต่อไปนี้:

ข้อดีของการนำเข้า CSS โดยตรง

การนำกลับมาใช้ใหม่โดยการใช้เอกสารที่ไม่เกี่ยวข้องเพื่อกำหนดสไตล์ชีตแบบเรียงซ้อนทำให้สามารถใช้องค์ประกอบภาพที่สอดคล้องกันได้อย่างราบรื่นในส่วนประกอบที่โดดเด่นต่างๆ ซึ่งจะเป็นประโยชน์อย่างยิ่งเมื่อพยายามสร้างความสม่ำเสมอภายในองค์ประกอบการออกแบบที่แตกต่างกัน

การกำหนดเลย์เอาต์และรูปลักษณ์ของหน้าเว็บใหม่มักทำได้โดยการปรับเปลี่ยนเลเยอร์การนำเสนอผ่านเอกสาร CSS ภายนอก แทนที่จะปรับโครงสร้างพื้นฐานของเนื้อหา ด้วยการแยกองค์ประกอบทั้งสองนี้ออกจากกัน การเปลี่ยนแปลงองค์ประกอบหนึ่งจะง่ายขึ้นโดยไม่กระทบกับองค์ประกอบอื่นๆ ดังนั้นจึงส่งเสริมความสามารถรอบด้านที่เพิ่มขึ้นเมื่อปรับแต่งลักษณะการมองเห็นของไซต์

ข้อเสียของการนำเข้า CSS โดยตรง

แม้ว่าการใช้ไฟล์ CSS ภายนอกจะมีประสิทธิภาพ แต่ก็อาจส่งผลให้เกิดการรบกวนและการแทนที่ที่คาดไม่ถึงเมื่อรูปแบบภายนอกตรงกัน เหตุการณ์ดังกล่าวอาจกระตุ้นกระบวนการดีบั๊กและการแก้ไขเพิ่มเติม เพื่อป้องกันไม่ให้การปะทะกันของโวหารที่ไม่ต้องการภายในแอปพลิเคชัน Svelte รวมเข้าด้วยกัน

กระบวนการโหลดของเว็บไซต์ได้รับผลกระทบจากความจำเป็นในการเรียกทรัพยากรเพิ่มเติมนอกเหนือจากไฟล์ HTML หลัก เช่น ไฟล์ CSS ภายนอก แม้ว่าการหน่วงเวลานี้อาจดูไม่มีนัยสำคัญเมื่อมองแวบแรก แต่ก็สามารถสะสมบนสไตล์ชีตภายนอกหลายชุด ซึ่งส่งผลต่อประสิทธิภาพโดยรวมในที่สุด

จัดแต่งทรงผมโดยใช้ Svelte Style Tags

ทางเลือกหนึ่งในการปรับแต่งลักษณะที่ปรากฏของคอมโพเนนต์ Svelte นั้นเกี่ยวข้องกับการใช้แอตทริบิวต์สไตล์ที่นำเสนอโดย Svelte เอง ซึ่งทำตามไวยากรณ์เฉพาะสำหรับการนำไปใช้งาน ไวยากรณ์นี้คล้ายกับโครงสร้างต่อไปนี้:

 <script>
  <!-- Your logic goes here -->
</script>

<!-- Markup goes here -->

<style>
  <!-- styling goes here -->
</style>
 

ประโยชน์หลักของแนวทางนี้อยู่ที่ลักษณะตามขอบเขต ซึ่งสไตล์ขององค์ประกอบแต่ละส่วนจะแยกออกจากกัน ป้องกันการรบกวนระหว่างองค์ประกอบต่างๆ ควรสังเกตว่าสไตล์อินไลน์ภายใน Svelte มีความสำคัญกว่าสไตล์ CSS ภายนอกที่ใช้กับองค์ประกอบเดียวกัน สามารถสังเกตได้โดยเพิ่มข้อมูลโค้ดต่อไปนี้ที่ส่วนท้ายของไฟล์ App.svelte:

 <style>
h1 {
  background-color: red;
}
</style>
 

รวมข้อมูลโค้ดที่ให้ไว้ที่ส่วนท้ายของไฟล์ App.css เพื่อวัตถุประสงค์ในการจัดรูปแบบ

 h1 {
  background-color: yellow;
}

อันที่จริง เมื่อมีการเรียกใช้โค้ดภายในเว็บเบราว์เซอร์ เราจะสังเกตเห็นว่าคุณสมบัติการนำเสนอขององค์ประกอบ # ได้รับการแก้ไขเพื่อรวมสีแดงเข้มเข้ามาแทนที่เฉดสีมะนาวที่แต่งไว้ก่อนหน้านี้ใน App.css ไฟล์.

จัดแต่งทรงผมด้วยตัวประมวลผลล่วงหน้า CSS

เทคนิคที่ใช้กันอย่างแพร่หลายในการออกแบบส่วนประกอบ Svelte เกี่ยวข้องกับการรวมเอาตัวประมวลผลล่วงหน้า CSS ไว้ในแอตทริบิวต์ style ตัวประมวลผลล่วงหน้าดังกล่าวให้ประโยชน์มากมาย เช่น อำนวยความสะดวกในการใช้งานการดำเนินการที่ซับซ้อน เช่น ฟังก์ชันขั้นสูง มิกซ์อิน และการเปิดใช้งานสไตล์ที่ซ้อนกันได้ ซึ่งเป็นนวัตกรรมที่เพิ่งนำมาใช้กับแนวทางปฏิบัติมาตรฐานของ CSS

เมื่อเลือกตัวประมวลผลล่วงหน้าสำหรับการออกแบบเว็บไซต์ จะมีตัวเลือกมากมายให้เลือก รวมถึงแต่ไม่จำกัดเพียง LessCSS, Sass และ Stylus ในการใช้ตัวประมวลผลล่วงหน้าที่ต้องการ จำเป็นต้องติดตั้งเป็นตัวพึ่งพาการพัฒนาผ่านคำสั่ง “npm install [ตัวประมวลผลล่วงหน้า] –save-dev”

 npm install -D <css-preprocessor>

หรือ:

 yarn add -D <css-preprocessor>

เพื่อใช้ตัวประมวลผลล่วงหน้าเฉพาะภายในโครงการของคุณ ตรวจสอบให้แน่ใจว่าคุณแทนที่ชื่อสำหรับ"ตัวประมวลผลล่วงหน้า"ในคำสั่งที่ตามมา ตามภาพประกอบ หากคุณต้องการผสานรวม Less และใช้งานในโครงการของคุณ ให้ดำเนินการตามขั้นตอนต่อไปนี้:

 npm install -D less

หรือ:

 yarn add -D less

หลังจากเสร็จสิ้นภารกิจนี้ คุณอาจใช้แอตทริบิวต์ lang กับองค์ประกอบ และกำหนดค่าเป็น"น้อยกว่า

 <style lang="less">
</style>

อันที่จริง การใช้ Less CSS ภายในคอมโพเนนต์ Svelte ของคุณ ตอนนี้คุณสามารถใช้ประโยชน์จากความสามารถที่ครอบคลุมในการออกแบบและจัดรูปแบบองค์ประกอบภาพของเว็บแอปพลิเคชันของคุณ

อะไรทำให้ Svelte น่าทึ่ง?

แน่นอน! ต่อไปนี้คือความพยายามของฉันในการใช้ถ้อยคำใหม่: เพื่อให้ไฟล์ได้รับการพิจารณาว่าเป็นไฟล์ Svelte ไฟล์นั้นจะต้องลงท้ายด้วย".svelte"ต่อท้าย เมื่อคอมไพเลอร์ Svelte พบไฟล์นี้ เนื้อหาจะถูกแยกวิเคราะห์และประมวลผลตามนั้น ผลจากการแยกวิเคราะห์นี้ คอมไพเลอร์สร้าง JavaScript และ CSS ที่สอดคล้องกัน ซึ่งสามารถส่งไปยังเบราว์เซอร์ได้ ด้วยการใช้ประโยชน์จากรูปแบบเอาต์พุตที่มีประสิทธิภาพเหล่านี้ ผู้ใช้จะสามารถเพลิดเพลินไปกับประสบการณ์การท่องเว็บที่มีความคล่องตัวมากขึ้น เนื่องจากเวลาในการโหลดเนื้อหาที่สร้างขึ้นเร็วขึ้น

เมื่อการรวมไลบรารี JavaScript ภายนอกเข้าด้วยกันถือว่าเหมาะสมภายในบริบทของโปรเจ็กต์ที่ใช้ Svelte ของคุณ คุณสามารถรวมไลบรารีนั้นไว้ในไฟล์ .svelte ของคุณได้โดยตรง โดยจ่ายตามข้อกำหนดสำหรับองค์ประกอบที่บรรจุซึ่งโดยทั่วไปจะเกี่ยวข้องกับทางเลือกอื่น เช่น React