บทนำสู่ Stimulus.js

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

ประมาณหนึ่งปีที่แล้ว ฉันเริ่มใช้ Stimulus และรู้สึกยินดีเป็นอย่างยิ่งกับรหัสที่ฉันกำลังจัดส่ง เป็นไลบรารี่ขนาด ประมาณ 30kb ซึ่งสนับสนุนการใช้ JavaScript แบบโรยซ้ำเล็กๆ ภายในแอปของคุณ โดยจัดระเบียบในลักษณะที่ทิ้งคำแนะนำเล็กๆ น้อยๆ ใน HTML ที่เข้าถึงได้ของคุณว่าจะค้นหา JavaScript ที่เชื่อมต่อได้จากที่ใด มันทำให้เข้าใจว่าชิ้นส่วนของ JavaScript จะโต้ตอบกับหน้าเว็บของคุณอย่างไรเกือบจะเหมือนกับการอ่านรหัสเทียม

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

สิ่งกระตุ้นทำให้ฉันสร้างแอปพลิเคชันในลักษณะที่นำกลับมาใช้ใหม่ได้และเข้าถึงได้ง่าย แม้ว่าฉันไม่คิดว่า Stimulus จะเข้ามาแทนที่เว็บอย่าง React และ Vue แต่ฉันคิดว่ามันเป็นเครื่องมือที่คุ้มค่าในการเรียนรู้

คำศัพท์

เช่นเดียวกับเฟรมเวิร์กทั้งหมด Stimulus มีข้อกำหนดในการอธิบายบางสิ่งมากกว่า โชคดีที่ (และเหตุผลหลักประการหนึ่งที่ทำให้ฉันชอบ Stimulus) มีเพียงสองข้อที่คุณจำเป็นต้องรู้เกี่ยวกับ:

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

กระโดดลงไปในสิ่งกระตุ้น!

ในตัวอย่างต่อไปนี้ ฉันจะใช้โค้ดที่คุณสามารถวางลงในเบราว์เซอร์เพื่อเริ่มต้นได้ทันทีผ่านไลบรารีที่แจกจ่ายผ่าน unpkg.com ต่อไป ฉันจะพูดถึงแนวทางของ webpack ซึ่งได้รับการสนับสนุนอย่างสูง เนื่องจากช่วยให้จัดระเบียบโค้ดของคุณได้ดีขึ้นและเป็นแนวทางที่ใช้ในคู่มือ Stimulus

Boilerplate

เมื่อคุณเข้าใจสาระสำคัญของตัวอย่างข้างต้นแล้ว คุณจะมีความรู้ที่จะดำเนินการโครงการที่ใช้สิ่งกระตุ้นได้อย่างสบายใจ

สวยน่ากลัวใช่มั้ย? มาดูกันว่าทุกสิ่งกำลังทำอะไรอยู่!

application.start

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

คอนโทรลเลอร์

แอตทริบิวต์ data-controller เชื่อมต่อองค์ประกอบ HTML ของเรากับอินสแตนซ์ของคลาส JavaScript ของเรา ในกรณีนี้ เราใช้ตัวระบุ "ตัวนับ" เพื่อเชื่อมต่ออินสแตนซ์ของ CounterController JavaScript กับองค์ประกอบ div ของเรา เราแจ้ง Stimulus เกี่ยวกับการเชื่อมต่อระหว่างตัวระบุนี้กับคอนโทรลเลอร์ผ่านวิธี application.register

สิ่งกระตุ้นจะตรวจสอบหน้าเว็บของคุณอย่างต่อเนื่องเมื่อมีการเพิ่มและลบองค์ประกอบที่มีแอตทริบิวต์นี้ เมื่อมีการเพิ่ม HTML ใหม่ลงในหน้าด้วยแอตทริบิวต์ data-controller มันจะเริ่มต้นอินสแตนซ์ใหม่ของคลาสคอนโทรลเลอร์ที่เกี่ยวข้อง จากนั้นเชื่อมต่อองค์ประกอบ HTML หากคุณลบองค์ประกอบนั้นออกจากหน้า มันจะเรียกวิธีการ disconnect การเชื่อมต่อในคลาสคอนโทรลเลอร์

การกระทำ

Stimulus ใช้แอ็ตทริบิวต์ data-action เพื่อกำหนดอย่างชัดเจนว่าฟังก์ชันใดของคอนโทรลเลอร์จะทำงาน การใช้ syntax event->controller#function ใครก็ตามที่อ่าน HTML จะสามารถเห็นสิ่งที่มันทำ สิ่งนี้มีประโยชน์อย่างยิ่ง เนื่องจากช่วยลดความเสี่ยงของโค้ดที่ไม่คาดคิดจากไฟล์อื่น ทำให้นำทางไปยังฐานโค้ดได้ง่ายขึ้น เมื่อฉันเห็นแนวทางที่ Stimulus สนับสนุนเป็นครั้งแรก รู้สึกเหมือนกำลังอ่าน pseudocode เลย

ในตัวอย่างข้างต้น เมื่อปุ่มเริ่มเหตุการณ์ "คลิก" ปุ่มนั้นจะถูกส่งต่อไปยังฟังก์ชัน addOne ภายในตัวควบคุม "ตัวนับ" ของเรา

เป้าหมาย

เป้าหมายคือวิธีกำหนดองค์ประกอบที่จะพร้อมใช้งานสำหรับคอนโทรลเลอร์ของคุณอย่างชัดเจน ในอดีต ฉันเคยใช้ ID, CSS class name และ data data ผสมกันเพื่อให้บรรลุเป้าหมายนี้ ดังนั้นการมี "This is the way to do it" เพียงรายการเดียวซึ่งชัดเจนมากทำให้โค้ดมีความสอดคล้องกันมากขึ้น

สิ่งนี้ต้องการการกำหนดชื่อเป้าหมายของคุณภายในคลาสคอนโทรลเลอร์ของคุณผ่านฟังก์ชัน targets และเพิ่มชื่อให้กับองค์ประกอบผ่าน data-target

เมื่อคุณได้ตั้งค่าสองชิ้นนี้แล้ว องค์ประกอบของคุณจะพร้อมใช้งานในตัวควบคุมของคุณ ในกรณีนี้ ฉันได้ตั้งค่าเป้าหมายด้วยชื่อ "เอาต์พุต" และสามารถเข้าถึงได้โดย this.outputTarget ภายในฟังก์ชันในคอนโทรลเลอร์ของเรา

เป้าหมายที่ซ้ำกัน

หากคุณมีเป้าหมายหลายรายการที่มีชื่อเดียวกัน คุณสามารถเข้าถึงได้โดยใช้เมธอด target รุ่นพหูพจน์ ในกรณีนี้เมื่อฉันเรียก this.outputTargets มันจะส่งคืนอาร์เรย์ที่มีทั้ง divs ของฉันที่มีแอตทริบิวต์ data-target="hello.output"

ประเภทงาน

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

ในการฟังเหตุการณ์ของ window หรือ document (เช่น การปรับขนาด หรือผู้ใช้ออฟไลน์) คุณจะต้องผนวก “@window” หรือ “@document” ต่อท้ายประเภท event (เช่น resize@window->console#logEvent จะเรียก ฟังก์ชัน logEvent ) บน console คอนโทรลเลอร์เมื่อปรับขนาดหน้าต่าง

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

ใช้ตัวควบคุมหลายตัวในองค์ประกอบเดียวกัน

บ่อยครั้งคุณอาจต้องการแยกตรรกะสองส่วนออกเป็นคลาสแยกกัน แต่ให้ปรากฏใกล้กันภายใน HTML Stimulus ช่วยให้คุณสามารถเชื่อมต่อองค์ประกอบต่างๆ กับหลายคลาสโดยวางการอ้างอิงทั้งสองไว้ใน HTML ของคุณ

ในตัวอย่างข้างต้น ฉันได้ตั้งค่าออบเจ็กต์ basket ซึ่งเกี่ยวข้องกับการนับจำนวนสินค้าทั้งหมดในตะกร้าเท่านั้น แต่ยังเพิ่มออบเจ็กต์ child ที่แสดงจำนวนถุงต่อสินค้า

ส่งข้อมูลไปยังออบเจกต์ของคุณ

สิ่งเร้าจัดเตรียมวิธีการ this.data.get และ this.data.set ภายในคลาสคอนโทรลเลอร์ ซึ่งจะทำให้คุณสามารถเปลี่ยนแอตทริบิวต์ข้อมูลที่อยู่ในเนมสเปซเดียวกับตัวระบุได้ โดยนี้ ฉันหมายความว่าถ้าคุณต้องการส่งข้อมูลไปยังตัวควบคุมสิ่งเร้าจาก HTML ของคุณ เพียงแค่เพิ่มแอตทริบิวต์เช่น data-[identifier]-a-variable ให้กับองค์ประกอบ HTML ของคุณ

เมื่อเรียกใช้ this.data.set มันจะอัปเดตค่าใน HTML ของคุณ เพื่อให้คุณสามารถเห็นการเปลี่ยนแปลงของค่าเมื่อคุณตรวจสอบองค์ประกอบโดยใช้เครื่องมือพัฒนาเบราว์เซอร์ของคุณ

การใช้แอตทริบิวต์ข้อมูลเนมสเปซเป็นวิธีที่ดีมากในการช่วยให้ชัดเจนว่าแอตทริบิวต์ data ใดใช้สำหรับโค้ดส่วนใด

เริ่มต้น เชื่อมต่อ ตัดการเชื่อมต่อ

เมื่อแอปพลิเคชันของคุณเติบโตขึ้น คุณอาจต้องเชื่อมต่อกับ 'เหตุการณ์วงจรชีวิต' เพื่อตั้งค่าเริ่มต้น ดึงข้อมูล หรือจัดการการสื่อสารแบบเรียลไทม์ Stimulus มีสามวิธีในตัวซึ่งถูกเรียกตลอดวงจรชีวิตของคลาส Stimulus

เมื่อ Stimulus เห็นองค์ประกอบที่มีแอตทริบิวต์ data-controller ตรงกัน มันจะสร้างคอนโทรลเลอร์เวอร์ชันใหม่และเรียกใช้ฟังก์ชัน initialize การดำเนินการนี้มักจะทำงานเมื่อคุณโหลดหน้าเว็บครั้งแรก แต่จะถูกเรียกใช้หากคุณผนวก HTML ใหม่เข้ากับหน้าเว็บของคุณ (เช่น ผ่าน AJAX) ที่มีข้อมูลอ้างอิงไปยังคอนโทรลเลอร์ของคุณ มันจะไม่ทำงานเมื่อคุณย้ายองค์ประกอบไปยังตำแหน่งใหม่ภายใน DOM ของคุณ

หลังจากเริ่มต้นคลาสแล้ว Stimulus จะเชื่อมต่อกับองค์ประกอบ HTML และเรียกใช้ฟังก์ชันการ connect นอกจากนี้ยังจะเรียกการ connect หากคุณต้องย้ายองค์ประกอบภายใน DOM ของคุณ ดังนั้น หากคุณต้องนำองค์ประกอบ ลบออกจากองค์ประกอบหนึ่ง แล้วผนวกกับที่อื่น คุณจะสังเกตได้เฉพาะการ connect เท่านั้นที่จะถูกเรียก

ฟังก์ชัน disconnect จะทำงานเมื่อคุณลบองค์ประกอบออกจากหน้าเว็บ ตัวอย่างเช่น หากคุณต้องการแทนที่ส่วนเนื้อหาของ HTML คุณสามารถฉีกโค้ดใดๆ ที่อาจจำเป็นต้องเรียกใช้ใหม่หากองค์ประกอบนั้นไม่อยู่ใน ตำแหน่งเดียวกัน. ตัวอย่างเช่น หากคุณมีตัวแก้ไข WYSIWYG แฟนซีซึ่งเพิ่ม HTML พิเศษจำนวนมากให้กับองค์ประกอบ คุณสามารถเปลี่ยนกลับเป็นสถานะเดิมเมื่อมีการเรียก disconnect

สืบทอดการทำงาน

ในบางครั้ง คุณอาจต้องการแบ่งปันการทำงานทั่วไปเล็กน้อยระหว่างตัวควบคุม Stimulus ของคุณ สิ่งที่ยอดเยี่ยมเกี่ยวกับ Stimulus คือ (ภายใต้ประทุน) คุณกำลังเชื่อมต่อคลาส JavaScript ของ vanilla กับองค์ประกอบ HTML ดังนั้นฟังก์ชันการแชร์จึงควรรู้สึกคุ้นเคย

ในตัวอย่างนี้ ฉันตั้งค่าคลาสพาเรนต์ชื่อ ParentController ซึ่งขยายโดยคลาสย่อยที่ชื่อ ChildController สิ่งนี้ทำให้ฉันได้รับเมธอดจาก ParentController ดังนั้นฉันจึงไม่ต้องทำซ้ำโค้ดภายใน ChildController ของฉัน

ใช้ในการผลิต

ฉันได้สาธิตตัวอย่างการใช้ Stimulus แบบสแตนด์อโลนแบบสแตนด์อโลนบางส่วน ซึ่งจะช่วยให้คุณได้ลิ้มรสของสิ่งที่คุณสามารถทำได้ ฉันยังคิดว่าฉันควรสัมผัสถึงวิธีที่ฉันใช้ในการผลิตและวิธีที่มันใช้ได้ผลสำหรับฉัน

เว็บแพ็ค

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

คุณไม่จำเป็นต้องใช้ webpack หากคุณต้องการใช้ Stimulus แต่จะช่วยทำความสะอาดประสบการณ์ต่างๆ โดยส่วนตัวแล้ว Stimulus เป็นห้องสมุดที่ช่วยแนะนำให้ฉันรู้จักกับ Webpack และรู้สึกถึงคุณค่าที่มันมอบให้จริงๆ

ข้อตกลงชื่อไฟล์

ฉันได้กล่าวถึงในบทนำของบทความนี้ว่าฉันชอบใช้ Stimulus เพราะรู้สึกว่ามีระเบียบ สิ่งนี้ชัดเจนเมื่อคุณรวมเข้ากับ Webpack ซึ่งทำให้สามารถโหลดและลงทะเบียนตัวควบคุมได้อัตโนมัติ

เมื่อคุณตั้งค่า Stimulus ใน Webpack แล้ว ขอแนะนำให้ตั้งชื่อไฟล์เช่น [identifier]_controller.js โดยที่ตัวระบุคือสิ่งที่คุณจะส่งผ่านไปยังแอตทริบิวต์ data-controller ของ HTML

เมื่อโปรเจ็กต์ของคุณเติบโตขึ้น คุณอาจต้องการย้ายตัวควบคุม Stimulus ของคุณไปไว้ในโฟลเดอร์ย่อย ในทางมหัศจรรย์ Stimulus จะแปลงขีดล่างเป็นขีดกลาง และโฟลเดอร์ฟอร์เวิร์ดสแลชเป็นขีดสองขีด ซึ่งจะกลายเป็นตัวระบุของคุณ ตัวอย่างเช่น ชื่อไฟล์ chat/conversation_item_controller.js จะมีตัวระบุ chat--conversation-item

รักษาจาวาสคริปต์ให้น้อยลง

หนึ่งในคำพูดที่ฉันชอบคือ "The Best Code is No Code At All" ฉันพยายามใช้แนวทางนี้กับโครงการทั้งหมดของฉัน

เว็บเบราว์เซอร์มีการพัฒนาไปมาก ฉันค่อนข้างมั่นใจว่าสิ่งที่ฉันจำเป็นต้องเขียน JavaScript ในวันนี้ส่วนใหญ่จะกลายเป็นมาตรฐานและนำไปใช้ในเบราว์เซอร์ภายใน 5 ปีข้างหน้า ตัวอย่างที่ดีของสิ่งนี้คือองค์ประกอบรายละเอียด เมื่อฉันเริ่มการพัฒนาครั้งแรก มันเป็นเรื่องธรรมดามากที่จะต้องโค้ดฟังก์ชันนั้นด้วยตนเองโดยใช้ jQuery

ด้วยเหตุนี้ หากฉันสามารถเขียน HTML ที่เข้าถึงได้โดยใช้ JavaScript แบบโปรยปรายเพื่อตอบสนองความต้องการของฉัน ด้วยความคิดที่ว่า “สิ่งนี้ได้ผลวันนี้ แต่ใน 5 ปีฉันต้องการแทนที่สิ่งนี้อย่างง่ายดาย” ฉันจะมีความสุข นักพัฒนา สิ่งนี้ทำได้ง่ายกว่ามากเมื่อคุณเขียนโค้ดน้อยลงเพื่อเริ่มต้น ซึ่งสิ่งเร้าให้ยืมตัวมันเอง

HTML ก่อน ตามด้วย JavaScript

แง่มุมหนึ่งที่ฉันชอบมากเกี่ยวกับวิธีการที่ Stimulus สนับสนุนคือฉันสามารถมุ่งเน้นไปที่การส่ง HTML ไปยังผู้ใช้ของฉัน ซึ่งจากนั้นก็เพิ่ม JavaScript เล็กน้อย

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

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

บทสรุป

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

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

ช้างในห้องนั้นเป็นอย่างไรเมื่อเทียบกับ React และ Vue แต่ในใจของฉัน พวกมันเป็นเครื่องมือที่แตกต่างกันสำหรับความต้องการที่แตกต่างกัน ในกรณีของฉัน ฉันมักจะแสดงผล HTML จากเซิร์ฟเวอร์ของฉัน และฉันกำลังเพิ่ม JavaScript เล็กน้อยเพื่อปรับปรุงประสบการณ์ใช้งาน หากฉันกำลังทำอะไรที่ซับซ้อนกว่านี้ ฉันจะพิจารณาแนวทางอื่น (หรือยกเลิกข้อกำหนดเพื่อช่วยให้โค้ดของฉันดูเรียบง่าย)

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

• หน้าแรกของสิ่งกระตุ้น
  พวกเขามีคู่มือที่ยอดเยี่ยมที่จะกล่าวถึงแนวคิดที่ฉันได้สรุปไว้ข้างต้นในเชิงลึกมากขึ้น
• Stimulus GitHub Repository
  ฉันได้เรียนรู้มากมายเกี่ยวกับวิธีการทำงานของสิ่งกระตุ้นโดยการสำรวจโค้ดของพวกเขา
• สูตรกระตุ้นเศรษฐกิจ
  คู่มือสรุปไว้ในหน้าเดียว
• Stimulus Forum
  การได้เห็นคนอื่น ๆ ที่ทำงานกับ Stimulus ทำให้ฉันรู้สึกเหมือนถูกใช้งานในป่า