Học sử dụng biến php cơ bản trong Javascript

Học PHP cơ bản ở từ liêm hà nội hôm nay sẽ giới thiệuSử dụng biến PHP trong Javascript với hàm wp_localize_script.

Làm thế nào để sử dụng các biến PHP trong Javascript ? Bình thường ta có thể sử dụng các biến đó khi viết Javascript trên thẻ. Tuy nhiên khi làm việc với WP thì mình biết được 1 hàm nó có thể sử lý điều này rất tốt đó là hàm: wp_localize_script

Cú Pháp: 



Hàm wp_localize_script cho bạn khả năng để viết một đối tượng JavaScript với nhiều biến được định nghĩa. Một điểm lưu ý là hàm này phải được gọi sau khi mã javascript của bạn đã được enqueued. Để biết chi tiết về các các tham số các bạn có thể vào đây:  wp_localize_script
Ví dụ: Bài Toán ban đầu: Đây là đoạn script đã được enqueued lúc đầu
1 wp_enqueue_script(  'portfolio-effect-js', CHILD_URL . 'js/portfolio-effect.js', array( 'jquery' ), '1.5.0'
Trong script portfolio-effect.js có 1 đoạn js cần sử lý:
1 $portfolio_effect.masonry( {
2 itemSelector: '.portfolio-item',
3      columnWidth : function ( containerWidth )
4      {
5         return containerWidth / 4;
6      },
7     isAnimated : true
8 } );
Để cho trực quan thì mình lấy luôn trường hợp mà mình gặp phải trước khi đụng tới hàm wp_localize_script này. Bài Toán ban đầu: Đây là đoạn script đã được enqueued lúc đầu
1 wp_enqueue_script(  'portfolio-effect-js', CHILD_URL . 'js/portfolio-effect.js', array( 'jquery' ), '1.5.0'


Trong script portfolio-effect.js có 1 đoạn js cần sử lý:
1 $portfolio_effect.masonry( { itemSelector: '.portfolio-item',
2      columnWidth : function ( containerWidth )
3      {
4         return containerWidth / 4;
5      },
6     isAnimated : true  
7} );

Làm Thế nào để khi người dùng click vào layout với các thành phần 1 cột, 2 cột, 3 cột thì hiệu ứng Javascript sẽ nhận số cột đó để chia kích thước chiều rộng với số cột tương ứng thay vì fix số lượng cột là 4 như trên ( Việc này có nhiều cách xử lý đơn giản hơn nhưng vì liên quan tới vấn đề đưa php vào trong JS nên mình đưa ra cách giải quyết này ) Bài toán xử lý:
1 $fitbus = array(  
2'portfolio_columns' => $portfolio_column
3 );
4 wp_localize_script( 'portfolio-effect-js', 'fitbus', $fitbus );
+ Chúng ta cần khai báo 1 mảng, với mảng bao gồm các biến cần xử lý. Ở đây biến $portfolio_column là biến được xử lý để lấy giá trị số cột khi người dùng lựa chọn trong setting, Chúng ta cần đưa biến đó vào trong Js ở trên
+ Trong hàm wp_localize_script thì portfolio-effect-js: Tên của Js đã enqueued phần trên fitbus: Tên đối tượng Js sẽ chứa dữ liệu $fitbus: mảng chứa các biến được khai báo ở trên Công việc cuối cùng là chúng ta sẽ quay trở lại Js:  portfolio-effect.js Thay con số 4 ở trên bằng biến mà chúng ta đã khai báo trong mảng, cụ thể như sau
1 $portfolio_effect.masonry( {
2   itemSelector: '.portfolio-item',
3   columnWidth : function ( containerWidth )
4   {
5   return containerWidth / fitbus.portfolio_columns;
6   },
7   isAnimated : true
8 } );
Như vậy là sau khi người dùng setting số cột thì lập tức biến đó sẽ được truyền vào trong Js và Js này thực hiện tính chiều dài của cột tương ứng với setting.  
Các blog về giúp tìm hiểu về tổng quan PHP cơ bản ở từ liêm hà nội sẽ tiếp tục với các blog tiếp theo. Mong nhận được sự ủng hộ và đóng góp của các bạn sinh viên muốn theo học lập trình ở hà nội nói chung và các bạn sinh viên ở từ liêm hà nội nói riêng.