Kotenarok

   ในบางสถานการณ์ที่เราต้องการจะใส่ tag script (หรือ tag อื่น ๆ ที่อยากจะ escape ไม่ให้ Vue.js render) ภายใต้ template ของ Vue.js โดยเฉพาะเวลาทำงานกับ Payment gateway มักจะต้องใส่ script เพิ่มเข้ามา <component is="script" src="https://www.example.com/script.js" ></component> ให้ใช้ฟีเจอร์ Dynamic Components เข้ามาช่วย ใส่ script เข้าไปใน attribute is ได้เลย

 สมมติเรามี getter ชื่อ foo ตามโค้ดด้านล่างที่รับ argument 1 ตัว getters: { foo: (state) => (bar) => {      return bar; } } เราสามารถประกาศใน computed ได้แบบนี้ computed: { ...mapGetters([ 'foo', //ส่งชื่อ getter ที่ต้องการใช้เข้าไปตรง ๆ ได้เลย ]) } จากนั้นเวลาเรียกใช้ก็สามารถเรียกใช้ได้เหมือน getter ปกติเลย created() { console.log(this.foo('hello')); // logs "hello" } อ้างอิง:  https://stackoverflow.com/questions/43807123/pass-params-to-mapgetters

 ในบางโปรเจ็กต์เราอาจจะต้องแยก site ภายในโปรเจ็กต์เดียวกันเป็นหลาย ๆ site เช่น หน้าบ้านให้ user ใช้ site นึง และสำหรับ admin ใช้อีก site นึงในโปรเจ็กต์เดียวกัน อาจะเกิดปัญหาว่าต้องเขียน webpack.mix.js หลายร้อยบรรทัดจนลายตา มันอาจจะดีกว่าถ้าสามารถแยกเป็น webpack.mix.front.js และ webpack.mix.admin.js ได้ เพื่อง่ายต่อการจัดการ ซึ่งในบทความนี้เราจะมาสอนวิธีแยกไฟล์กันครับ สิ่งที่ต้องเตรียม ต้องโหลด minimist  มาใช้สำหรับจัดการ argument ที่เราจะส่งผ่านเข้าไปทาง command line ลงมือทำกันเลย สร้างไฟล์ขึ้นมาตาม site ที่เราต้องการ ในตัวอย่างนี้จะขอแบ่งเป็น admin กับ front 2 ไฟล์ รวมถึงต้องมีไฟล์หลักคือ webpack.mix.js 1 ไฟล์ตามนี้นะครับ ไฟล์ webpack.mix.js เนื้อหามีดังนี้ const { env } = require('minimist')(process.argv.slice(2));//รับ aurgument หลัง -- มา ซึ่งรับแต่ชื่อ env if (env && env.site) { require(`${__dirname}/webpack.mix.${env.site}.js`); } โค้ดตามนี้จะรับค่า env.site มาจาก command line เวลาเราสั่ง yarn prod หรือ yarn dev แล้วตามด้วย --env.site={ชื่อ site ที่

v-model เป็นพื้นฐานสำคัญของ Vue.js ที่ใช้เพื่อผูกข้อมูลกับตัวแปร เมื่อ user กรอกข้อมูลเข้ามาจะทำให้ตัวแปรที่ผูกนั้นได้รับ value จาก user ด้วย หรือในทางกลับกันถ้าหาก โค้ดของเราแก้ไขค่าตัวแปรนั้น user ก็จะเห็นค่าที่เปลี่ยนไปตามที่โค้ดเราเขียนเช่นกัน เรียกว่า "two-way data binding" v-model สามารถใช้งานได้กับ input พื้นฐานทั้งหมด ดูโค้ดตัวอย่างได้ตามนี้ Input Text <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> จากตัวอย่างด้านบนเราผูก value กับตัวแปรชื่อ message ผ่าน v-model เมื่อ user กรอกข้อมูลเข้ามาที่ input ข้อความที่แสดงตรง <p> ก็จะอัพเดทตามไปด้วย ตัวอย่างอื่น ๆ Textarea <span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> Checkbox <input type="checkbox" id="checkbox" v-model="checked

 บทความนี้ผมจะถือว่าผู้อ่านมีความรู้เรื่อง Vue.js มาแล้วในระดับหนึ่ง เนื่องจากไม่ใช่บทความสอนการเขียน Vue.js แต่เป็นส่วนเสริมเรื่องการทำ component ขึ้นมาเองแล้วรองรับการใช้งาน v-model (ถ้ายังไม่รู้ว่า v-model คืออะไร แนะนำให้ศึกษาเพิ่มเติมมาก่อน) ทำให้รองรับ v-model ยังไง? v-model มันคือการส่งข้อมูลไปกลับระหว่าง parent component และ child component ซึ่งถูกเรียกว่า two-way binding คือค่าของตัวแปรจะถูกส่งไปกลับระหว่าง 2 component นี้ ค่าตั้งต้นของการทำ v-model คือ component จะรับค่าผ่าน props ที่ชื่อว่า value และส่งค่ากลับไปด้วย event ที่ชื่อ input ขอยกตัวอย่างโค้ดง่าย ๆ เป็น EmailInput.vue ตามนี้ละกันครับ <template> <input type="email" @input="handleInput" /> </template> <script> export default { props: ['value'], data: () => ({ email: null }), created() { if (this.value) { this.email = this.value; } }, methods: { handleInput (e) { this.email = e.target.value; this.$em

 async, await เป็นตัวช่วยจัดการ Promise ให้ดูอ่านง่ายขึ้น จะเห็นผลมากหากเราต้องจัดการกับ Promise มากกว่า 1 ตัว การใช้ async มีข้อจำกัดว่าต้องใช้กับ function เท่านั้น เราจะลองแปลงโค้ดจากบทความที่แล้ว ให้อยู่ในรูปของ async / await async function test() { let myPromise = new Promise((resolve, reject) => { let x = 0; //ลองสลับเลขเพื่อดูผลลัพธ์เมื่อสำเร็จและล้มเหลว if (x == 0) { resolve("OK"); } else { reject("x must be 0"); } }); try { let msg = await myPromise;//await เพื่อรอรับผลลัพธ์จากกรณีที่สำเร็จ console.log("Success: " + msg); } catch (msg) { console.log("Error: " + msg);//ใช้ try / catch ดักกรณีที่ล้มเหลว } } test();//เรียกใช้ function ให้ทำงาน อ้างอิง: async function - JavaScript | MDN (mozilla.org) Async/await (javascript.info)

 ก่อนจะไปเริ่มกัน เราต้องเข้าใจคำว่า asynchronous ก่อนเป็นอันดับแรก asynchronous คือการทำงานแบบไม่ต้องการรอผลลัพธ์ ยกตัวอย่างง่าย ๆ เช่น การรอคิวเข้าร้านอาหาร ถ้าเป็น synchronous คือเราต้องรอจนกว่าจะได้คิว (เหมือนรอผลลัพธ์) ถึงจะเข้าไปในร้านได้ แต่ถ้าเป็นการทำงานแบบ asynchronous เราจะไม่ยืนรอคิวหน้าร้าน เราจะไปเดินเล่นเตร็ดเตร่ หรือทำธุระอย่างอื่น จนกว่าร้านค้าจะโทรมาตามเรา (ร้านค้าบอกผลลัพธ์เราว่าได้คิวแล้ว) แล้วจึงค่อยกลับมาเข้าร้าน หมายเหตุ: เหมือนเคย หากใครยังไม่เข้าใจ arrow function แนะนำให้กดกลับไปอ่านก่อนนะครับ Promise คืออะไร? Promise คือ object ตัวนึ่งที่ใช้จัดการการทำงานแบบ asynchronous โดยตัว Promise จะมีการให้เราจัดการด้วยว่าถ้าการทำงานสำเร็จให้ return  อะไร หรือถ้าล้มเหลวให้ return อะไร  การจัดการกับงานที่สำเร็จเราจะใช้ .then ในการจัดการ ส่วนงานที่ล้มเหลวเราจะจัดการด้วย .catch  const promiseA = new Promise( (resolve, reject) => { setTimeout(() => {//ให้ทำงานส่วนนี้หลังจาก 1 วินาที (1000 millsec) resolve(777); //ใช้ resolve บอกว่างานสำเร็จ และคืนค่า 777 ไ

 Array.sort() โดย default ของมันคือการแปลงค่าใน array เป็น string แล้วจับมาเรียงลำดับตามตัวอักษร แต่ก็รองรับการทำ custom sorting แบบอื่น ๆ ซึ่งอยู่ที่เราเขียนเลยว่าจะให้มันทำงานยังไง บทความนี้ตัวอย่างผมจะเน้นเขียนแบบ Arrow function หากใครยังไม่เข้าใจให้ลองอ่านวิธีการเขียนก่อนนะครับตาม link ตัวอย่างการใช้แบบ default const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort();//เรียกแบบนี้ได้เลย console.log(months); // ค่าที่ได้: Array ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // ค่าที่ได้: Array [1, 100000, 21, 30, 4] จะเห็นว่ามันไม่มองค่าตัวเลขเป็นตัวเลข แต่เป็นการเทียบ string แทน โครงสร้างโค้ดการทำ custom sorting ในตัวอย่างด้านล่างจะเป็น callback function ที่ใช้สำหรับโยนให้ .sort() โดยค่า a และ b จะตั้งชื่อยังไงก็ได้ และเราจะทราบแค่ว่าเป็นค่า 2 ค่าที่มาเทียบกันเท่านั้น โดยเบื้องหลังการทำงานก็ขึ้นอยู่กับ compiler ของแต่ละ browser หรือ platform ว

 .reduce() เป็น built-in function ของ Array ใน JavaScript ใช้งานเพื่อที่จะจัดการกับ array ก้อนนั้นเพื่อให้ได้ค่า ๆ นึงออกมา ยกตัวอย่างเช่น การทำ function sum เพื่อบวกรวมตัวเลขที่อยู่ใน array ทั้งหมดออกมาเป็นค่า sum ค่าเดียว โดย function นี้จะมี syntax หน้าตาแบบนี้ arr.reduce(callback ( accumulator, //ผลจากแต่ละรอบ loop currentValue, //ค่าของสมาชิก array ปัจจุบัน [, index //(optional) index ของ array ปัจจุบัน [, array]] //(optional) เป็น callback ของก้อน array ที่เรานำมาใช้เรียก .reduce โดยปกติมักไม่ได้ใช้ค่านี้ ) [, initialValue] //(optional) ค่าตั้งต้นของ function ซึ่งถ้าเราไม่ใส่ function จะใช้สมาชิกตัวแรกของ array เป็นค่าตั้งต้น //สังเกตดี ๆ คือค่าตั้งต้นนี้จะอยู่นอก callback function ) ขอใช้ตัวอย่าง function sum จากบทความ " Rest parameters คืออะไร " มาเป็นตัวอย่างอีกครั้งละกัน ตัวอย่างแรกลองเขียน callback function ทั่วไปก่อน function sum(...args) { return args.reduce(function(accumulator, currentValue) { return accumulator + currentValue

 บทความที่ก่อนได้เคยพูดถึง Spread syntax (...)  ไปแล้ว รอบนี้มาพูดถึงสิ่งที่หน้าตาเหมือนกันแต่ใช้งานแตกต่างกันโดยสิ้นเชิงคือ Rest parameters (Rest syntax) เป็นการประกาศ function ขึ้นมาให้สามารถรับ arguments "เท่าไหร่ก็ได้" โดยค่า arguments ที่ถูกส่งมาจะถูกรวบเป็น array ก้อนเดียว แล้วนำไปใช้ต่อ ซึ่งโดยปกติจะพบเห็นได้ทั่วไปใน built-in function ที่มีมาให้ใช้อยู่แล้ว ยกตัวอย่างเช่น Math.max(arg1, arg2, ..., argN); //หาค่าสูงสุด console.log(arg1, arg2, ..., argN); // log ตัวแปรออกมาดูค่าในหน้าต่าง Console แต่เราเองก็สามารถนำมาใช้ประโยชน์ในการสร้าง function เพื่อไว้ใช้งานเองหรือเผื่อให้คนอื่นนำไปใช้งานได้สะดวกขึ้นก็ได้ ขอยกตัวอย่างเป็น function sum ไว้ใช้บวกรวมตัวเลขทั้งหมดที่ส่งเข้ามาใน function function sum(...args) { let total = 0; for (let num of args) { total += num; } return total; } console.log(sum(1, 2)); //3 console.log(sum(1, 2, 3)); //6 console.log(sum(1, 2, 3, 4, 5)); //15 แต่ function ด้านบนจะเจอปัญหาว่าถ้าค่าที่ส่งเข้ามาไม่ใช่ตัวเลขล่ะ? บางค่

 Arrow function expressions คือการเขียน function ในรูปแบบอย่างย่อ ทำให้สะดวกในการเขียนมากขึ้น web browser ยุคใหม่ก็ support กันหมดแล้ว แต่จะเห็นว่าใช้แพร่หลายคือกับ node.js หรือกับ JavaScript framework ตัวใหม่ ๆ ซึ่งส่วนมากจะใช้กับ closure function แปลง function ปกติเป็น Arrow function // function แบบปกติทั่วไป function (a){ return a + 100; } // แปลงเป็น Arrow Function // 1. ลบ "function" และใส่ => เข้าไปแทนระหว่างวงเล็บของ argument และปักกาเปิด { (a) => { return a + 100; } // 2. ลบปีกกาและคำว่า "return" ออก (a) => a + 100; // 3. ลบวงเล็บของ argument ออก a => a + 100; ถ้า argument มีหลายตัว // Traditional Function function (a, b){ return a + b + 100; } // Arrow Function (a, b) => a + b + 100; // เอาวงเล็บ argument ออกไม่ได้ ถ้า function ไม่มี argument // Traditional Function (no arguments) let a = 4; let b = 2; function (){ return a + b + 100; } // Arrow Function (no arguments) let a = 4; let b = 2; () => a + b + 100; //ใ

 Spread syntax คือการนำค่าของตัวแปรที่มีลักษณะเป็น collection ไม่ว่าจะ array หรือ object มาแจกแจงกระจายออกมาใช้งาน ซึ่งจะคนละอย่างกับ Rest syntax (แต่ใช้ ... เหมือนกัน) โดย Rest syntax จะเป็นการประกาศให้ function รับ argument กี่ตัวก็ได้ ซึ่งจะเขียนในบทความถัดไป Spread syntax จะมีการใช้งานหลัก ๆ อยู่ 3 รูปแบบดังนี้ ใช้ส่ง arguments ให้ function ยกตัวอย่าง function sum ตามภาพ รับ argument 3 ตัว เราสามารถโยน array ที่มีสมาชิก 3 ตัวด้วย Spread syntax เข้าไปใน function ได้เลย function sum(x, y, z) { return x + y + z; } let numbers = [1, 2, 3]; console.log(sum(...numbers)); // 6 และหากเรานำไปใช้กับ function ที่ประกาศด้วย Rest syntax จะมองเห็นความเจ๋งของ Spread syntax ได้ชัดขึ้น function sum(...theArgs) { //theArgs รับเข้ามาจะเป็น array return theArgs.reduce((previous, current) => { return previous + current; }); } let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(sum(...numbers)); // 55 ใช้งานกับ array array ใน JavaScript จะมีความพิเศษอยู่อย่างหนึ่