การสร้าง Chain method ใน PHP

ถ้าใครเคยใช้งาน jQuery จะเห็นว่าจุดเด่นเรื่องนึงก็คือการสร้าง Chain method ยกตัวอย่างเช่นเราอยากจะทำการกำหนด style ให้กับ div แล้วหลังจากนั้นให้ทำการ slideUp เราสามารถเขียนได้แบบนี้

1
$("div").css("color","red").slideUp();

เราสามารถนำ concept นี้มาใชใน PHP ได้เช่นเดียวกัน โดยการเขียนนี่เรียกได้ว่าง่ายแบบที่คิดไม่ถึงเลยทีเดียว ยกตัวอย่างเช่นถ้าเราอยากจะทำการ addProduct() เข้าไปใน stock แล้วสามารถเรียก method checkAvailable() ต่อกันได้เลย เช่น

1
2
3
$stock = new Stock();
$isAvailable = $stock->addProduct('P001', 10)
->checkAvailable('P001', 20);

จากตัวอย่างเราจะเห็นว่าเราสามารถเขียน ธรรมดาก็ได้ แต่ต้องใช้ 2 บรรทัด แต่ถ้าเราใช้ chain method เราสามารถเขียนได้สั้นลง และสื่อความหมายได้ดีขึ้นและถ้าใครใช้ CodeIgniter คงจะคุ้นเคยการเขียนในรูปแบบนี้เพราะใน Active Record ของ CodeIgniter สามารถเขียนแบบ Chain Method ได้ เช่น

1
2
3
4
5
6
7
8
$this->db->select('*');
->from('blogs');
->join('comments', 'comments.id = blogs.id');
->where('name', $name);
->where('title', $title);
->where('status', $status);

$query = $this->db->get();

จากตัวอย่างเราสามารถเขียนสลับบรรทัดกันได้ ทำให้ code ของเราอ่านได้ง่ายขึ้น

วิธีการเขียนก็ง่ายมากใน method ไหนที่ต้องการให้มี chain ต่อไปเราก็ทำการ return $this หรือ object ปัจจุบันออกไปเท่านี้ก็สามารถเรียกใช้งาน method อื่นๆใน class นี้ได้แล้ว ตามตัวอย่าง

1
2
3
4
5
6
7
8
9
10
11
class Stock{
function addProduct($product_id, $qty){
// do something
return $this;
}

function checkAvailable($product_id, $qty){
// do something
return $this;
}
}

เวลาเรียกใช้งาน ก็เขียน code แบบนี้

1
2
3
$stock = new Stock();
$isAvailable = $stock->addProduct('P001', 10)
->checkAvailable('P001', 20);

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

การใช้งาน jQuery แทน Media Query ใน CSS3 ตอนที่ 2

จากที่เคยเขียนแนวทางการใช้งาน jQuery แทน media query ใน CSS3 เนื่องจาก IE 6,7,8 ยังไม่ support ดังนั้นเราอาจใช้ jQuery เข้ามาช่วยทำ Responsive Web แบบง่ายๆด้วย JavaScript ได้ แต่เนื่องจากตอนนั้นยังทำได้ไม่สมบูรณ์เลยเขียน code มาแบบเต็มๆให้ดู จริงๆอยากจะประยุกต์ Singleton Pattern ใน JavaScript มาด้วยแต่เดี๋ยวยากเกินไป เอาแค่นี้ก่อนละกัน ในบทความนี้จะเปรียบเทียบกับตัว CSS3 ด้วยจะได้เข้าใจมากขึ้น

เริ่มจาก code ส่วนแรกประกาศเป็น function ชื่อว่า checkDevice() เป็นfunction ที่รับ parameter เป็น  width ของ window

1
2
3
4
5
6
7
8
9
10
11
var checkDevice = function(width){
        console.log(width);        
        $('li').removeClass();
        if(width > 760){
             $('li:first-child').addClass('desktop');
        }else if(width > 480 ){
             $('li:nth-child(2)').addClass('tablet');
        }else if(width > 0){
             $('li:last-child').addClass('mobile');
        }
};

และใช้ jQuery ดึงขนาดความกว้างของ window แบบนี้

1
$(window).width()

และสุดท้ายก็ทำการ เรียก function นี้ทุกครั้งที่เกิดการย่อหรือขยายความกว้างของ browser

1
2
3
4
checkDevice($(window).width());
$(window).resize(function(){
     checkDevice($(window).width());
});​

ซึ่งโดยทั้งหมดนี้มีค่าเท่ากับ Style Sheet แบบนี้

1
2
3
4
5
@media screen and (min-width: 760px){
       li:first-child{
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (min-width: 481px and max-width: 760px){
       li:nth-child(2){
           border: 3px solid #41709B;
       }
   }
1
2
3
4
5
@media screen and (max-width: 480px){
       li:last-child{
           border: 3px solid #41709B;
       }
   }

ใน style sheet จะใช้ min-width และ max-width ในการกำหนดช่วงของความกว้างของ browser ถ้าตกอยู่ในช่วงไหนก็จะทำการกำหนด style sheet ในวงเล็บเข้าไปตาม selector ที่เราเลือก

โดยรอบนี้มี code ให้เข้าไปทดสอบกันได้ที่ http://jsfiddle.net/irobust/vgzvR/ 

แต่ถ้าต้องการดูผลลัพธ์ต้องดูแบบ Full Screen ถึงจะเห็นผลลัพธ์ที่ถูกต้องโดยเข้าไปที่http://jsfiddle.net/irobust/vgzvR/embedded/result/

การใช้ jquery แทน media query

การใช้งาน Media Query ยังมีข้อจำกัดอยู่ที่่ต้องการ Browser รุ่นใหม่ๆ
ซึ่งจะมี IE ที่ยังไม่ Support และยังมีผู้ใช้งานอยู่มาก
แต่เราสามารถที่จะใช้ jQuery มาใช้ในการจัดการแทน Media query ได้โดยเราสามารถหาความกว้างของ window ได้โดยใช้

1
$(window).width()

นอกจากนั้นเรายังดักจับ event resize window ได้ด้วย $(window).resize(); เราสามารถจะเขียน Code ได้แบบนี้

1
2
3
4
5
6
7
8
9
10
$(window).resize(function(){
     var width = $(window).width();
     if(width > 760){
         $('h1').attr('class','web');
     }else if(width > 480 ){
         $('h1').attr('class','tablet');
     }else if(width > 0){
         $('h1').attr('class','mobile');
     }
});

ที่ใช้ .attr แทน addClass เพราะจะได้ replace Class ทั้งหมด แต่ถ้าเราต้องการ เพิ่ม Class เข้าไปซึ่งส่วนใหญ่ในงานจริงเป็นแบบนั้น เราจะใช้ addClass แทน อันนี้จะขึ้นอยู่กับรูปแบบการเขียน Stylesheet ของเรา

การใช้ jQuery animate

ในกรณีที่เราต้องการสร้าง animation โดยการเปลี่ยนแปลงค่าใน StyleSheet มากกว่า 1 ตัวเราจะใช้ .animate() เพื่อสร้าง animation ให้กับ element ต่างๆ โดย parameter ตัวแรกจะเป็น Json ที่จะระบุ attribute ต่างๆที่ต้องการเปลี่ยนแปลงค่า เช่นในตัวอย่างจะเป็น เปลี่ยนแปลงความกว้าง, ความสูง และ border-radius

ในกรณีที่เราระบุค่า attribute ที่มีเครื่องหมาย ‘-‘ เราต้องใส่เครื่องหมาย ” ครอบ หรือ เปลี่ยนเป็น Camel Case เช่น border-radius เขียนได้อีกแบบเป็น borderRadius

parameter ตัวที่ 2 จะเป็นระยะเวลาที่สร้าง animation หน่วยเป็น milliseconds ในตัวอย่างจะระบุเป็น 5000 วินาที
jquery animate