PHP可以從伺服器端產生各種HTML和JavaScript程式碼，來讓瀏覽器執行；但在實務上，用PHP產生JavaScript來跑，真的好嗎？

最近在一些專案上，看到某位離職同事寫的程式碼，是用PHP產生Google Chart的資料，來自動繪出圓餅圖；我看到的JavaScript程式碼概略是長這樣：

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Topping’);
data.addColumn(‘number’, ‘Slices’);

data.addRows([

<?php foreach ($data_array as $id => $row) : ?>

<?php if ($id>0) echo ‘,’; ?>

[‘<?= $row[‘title’] ?>’,'<?= $row[‘total’] ?>’]

<?php endforeach; ?>

]);

var options = {‘title’: ‘範例圓餅圖’,’height’: 400};

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

上圖中紅色的部份，是用PHP來產生json格式的語法，乍看之下除了程式的可讀性很低之外，似乎也沒什麼問題；但事實上，它就是出問題了，問題發生在某個title的值是類似「Jacky’s Demo」，當單引號被放進json中，就造成了json格式的錯誤。

實務上來看，Google Chart既然是用json的方式傳入數值參數的第三方工具，那麼就應該直接用標準的轉換工具：json_encode( )；所以實作上應該：

1. server端讀取資料庫
2. 整理成所需的Array格式
3. 以json_encode函式，將Array轉成Google Chart所需的json格式，傳給JavaScript執行

依照上面這個概念來實作，JavaScript的程式碼可能像這樣：

var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Topping’);
data.addColumn(‘number’, ‘Slices’);

data.addRows(<?= json_encode($data_array) ?>);
var options = {‘title’: ‘範例圓餅圖’,’height’: 400};

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’));
chart.draw(data, options);

修改完後，json中的單引號在json_encode( )時，被加上了跳脫符號(‘\’)，問題解決，同時，程式碼的可讀性是不是好多了？