J框架前端組件 jquery.queryphp.js · QueryPHP V4.0

QueryPHP 提供了一個 **jquery.queryphp.js** 插件用來增強框架在前端表現，這個插件只封裝了基本的功能，沒有任何多余的功能。 # 1）：初始化 jquery.queryphp.js 插件插件位于框架中的 **{項目地址}/lib/queryphp/resource/js/jquery.queryphp.js**，復制一份 **{項目地址}/www/public/js/jquery.queryphp.js**，然后在項目中引入，同時也要引入 jquery 框架。 ~~~ {# 引入 JS 組件} <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="{$APP:url_public}/js/jquery.queryphp.js?_=1.0"></script> {# 初始化組件，必須} <script type="text/javascript"> var $Q; $(function(){ $Q=$.fn.queryphp({ app_name:"{$APP:app_name}", controller_name:"{$APP:controller_name}", action_name:"{$APP:action_name}", enter:"{$APP:url_app|basename}", root:"{$APP:url_root}", i18n:"{$APP:appi18n_name}" }); }); </script> ~~~ 模板編譯后的結果： ~~~ <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="<?php echo $APP->url_public; ?>/js/jquery.queryphp.js?_=1.0"></script> <script type="text/javascript"> var $Q; $(function(){ $Q=$.fn.queryphp({ app_name:"<?php echo $APP->app_name; ?>", controller_name:"<?php echo $APP->controller_name; ?>", action_name:"<?php echo $APP->action_name; ?>", enter:"<?php echo basename ( $APP->url_app ); ?>", root:"<?php echo $APP->url_root; ?>", i18n:"<?php echo $APP->appi18n_name; ?>" }); }); </script> ~~~ 運行后的結果： ~~~ <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="/public/js/jquery.queryphp.js?_=1.0"></script> <script type="text/javascript"> var $Q; $(function(){ $Q=$.fn.queryphp({ app_name:"home", controller_name:"index", action_name:"i18n", enter:"index.php", root:"", i18n:"en-us" }); }); </script> ~~~ # 2）：生成框架 url 地址系統可以通過 Q::url 來生成 url 地址，同時 javascript 也提供了一個生成 url 地址的功能。 ~~~ <script type="text/javascript"> $(function(){ console.log($Q.url('blog/list',{category_id:11, user_id:31})); console.log($.fn.queryphp('url','blog/get_detail?id=45',{is_ajax:1,category_id:45})); }); </script> ~~~ 輸出結果： ~~~ index.php?c=blog&a=list&category_id=11&user_id=31 index.php?c=blog&a=get_detail&id=45&is_ajax=1&category_id=45 ~~~ # 3）：格式化文本信息 php 可以通過 sprintf 格式化消息，同時 javascript 也提供了一個格式化消息的功能。 ~~~ <script type="text/javascript"> $(function(){ console.log($Q.sprintf("老夫喜歡敲 <%s>, 復制粘貼 <%s> 就是干!",'代碼','拿起來')); console.log($.fn.queryphp("sprintf","老夫喜歡敲 <%s>, 復制粘貼 <%s> 就是干!",'代碼','拿起來')); }); </script> ~~~ 輸出結果： ~~~ 老夫喜歡敲 <代碼>, 復制粘貼 <拿起來> 就是干! 老夫喜歡敲 <代碼>, 復制粘貼 <拿起來> 就是干! ~~~ # 4）：格式化語言包信息 php 可以通過 Q::i18n 格式化語言包，同時 javascript 也提供了一個格式化語言包的功能。 ~~~ <script type="text/javascript"> $(function(){ console.log($Q.i18n("歡迎使用 %s ，Query Yet Simple！",'QeePHP')); console.log($Q.i18n("老夫喜歡敲 <%s>, 為軟件產品提供 <%s> 國際化語言解決方案!",'代碼','Javascript')); $Q.i18nPackage('en-us', { "老夫喜歡敲 <%s>, 為軟件產品提供 <%s> 國際化語言解決方案!" : "Old lady likes to knock <%s>, software products for the <%s> international language solutions!", "歡迎使用 %s ，Query Yet Simple！" : "Welcome to use %s ，Query Yet Simple！" }); console.log($Q.i18n("歡迎使用 %s ，Query Yet Simple！",'QeePHP')); console.log($Q.i18n("老夫喜歡敲 <%s>, 為軟件產品提供 <%s> 國際化語言解決方案!",'代碼','Javascript')); }); </script> ~~~ 輸出結果： ~~~ 歡迎使用 QeePHP ，Query Yet Simple！老夫喜歡敲 <代碼>, 為軟件產品提供 <Javascript> 國際化語言解決方案! Welcome to use QeePHP ，Query Yet Simple！ Old lady likes to knock <代碼>, software products for the <Javascript> international language solutions! ~~~ > 提示：語言包我們建議不使用 $.fn.queryphp('i18n') 這樣的方式，主要是為了方便使用 Poedit 軟件自動掃描 i18n 語言包標記。例外就是，系統會將 po 對應的 js 語言包緩存到 **{項目地址}/www/public/js/i18n/en-us/default.js** 中，內容如下： ~~~ /* I18n Cache */ ;$(function(){ $.fn.queryphp('i18nPackage','en-us',{"我是一個只狗":"I am a dog"}); }); ~~~ # 5）：javascript 模板引擎系統為 javascript 提供一個模板引擎，以便于開發高效的前后端分離應用《模板引擎語法/J模板引擎 intro》這一章。