หมวดหมู่: Jquery

import $ from 'jquery'; // ประกาศให้เป็น Global Scope (window as any) .$ = $; (window as any) .jQuery = $; // ทดสอบเรียกใช้
$ ( () => { console.log ("jQuery is now global!") ;
}) ;

// vite.config.ts
import { defineConfig } from 'vite'; export default defineConfig ({ define: { // วิธีนี้จะทำให้ $ และ jQuery ใช้งานได้ทั่วทั้งโปรเจกต์ 'window.$': 'jquery', 'window.jQuery': 'jquery', }
}) ;

interface Window { $: any; jQuery: any;
}

💡 ทำไม jQuery 4.0 ถึงไม่แนะนำให้ทำ Global?

ใน jQuery 4.0 ทีมพัฒนาพยายามผลักดันให้ใช้ ES Modules อย่างเต็มตัว การไม่ใช้ Global Scope มีข้อดีคือ

1. No Conflicts: ป้องกันปัญหาชื่อตัวแปรซ้ำกับ Library อื่น
2. Better Minification: เครื่องมืออย่าง Vite/Rollup สามารถบีบอัดโค้ดได้ดีกว่า
3. Security: ช่วยลดช่องโหว่จากการที่ Script แปลกปลอมมาเรียกใช้ jQuery ของเราผ่าน Global scope

ตอนนี้คุณสามารถเรียกใช้ $ ในหน้า Browser Console เพื่อทดสอบตาราง DataTables ของคุณได้แล้วครับ

อ่านเพิ่มเติม

• jQuery: 4.0.0 เกิดใหม่ แต่เหมือนแจ้งตาย
• DataTables: ต้อนรับ jQuery 4.0
• DataTables