标签归档:wp.template()

WordPress 内置的 JavaScript 模板 wp.template()

说到 JavaScript 模板引擎,大家首先想到的肯定是 Angular 和 React 这些时下比较流行的项目,它们让前端开发模式变的与传统的 WordPress 主题大不相同。

不同于 WordPress 的使用 PHP 在服务端处理一切,调用模板生成好 HTML 再返回给用户;JavaScript 模板引擎下,服务器只负责处理和生成数据,然后由 JavaScript 在浏览器前端,根据专门为它设计的模板生成出 HTML 代码。

这种开发模式对于制作和用户有大量交互的网站非常有优势,尤其是在使用 AJAX 上传和获取数据时,可以避免很多麻烦。虽然这种技术我很喜欢,也符合未来的发展趋势,但是因为搜索引擎相关的问题的不完善,导致 JavaScript 模板引擎只能在 Web APP 和管理后台之类的网页被使用。

不过,即使在普通网站中不能全面的应用,在一些特殊的地方,小范围的使用 JavaScript 模板生成 HTML 代码也是非常方便的,比如评论列表、设置选项和 AJAX 加载文章列表之类的,不需要搜索引擎抓取,又需要 JavaScript 参与的功能。

在 WordPress 核心中,提供了一个基于 Underscore.js 的简易 JavaScript 模板「引擎」,被主题定制器大量的使用,今天我们就来一起学一下,相信只要合理利用它,就可以完美解决你拼接大量字符串的痛苦。

挂载脚本

在开始正式之前,首先要把用来支持 JavaScript 模板的 Underscore.js 引入进来,它在脚本排队系统中的名称是 wp-util,可以直接挂载:

function Bing_enqueue_scripts() {
    wp_enqueue_script( 'wp-util' );
}
add_action( 'wp_enqueue_scripts', 'Bing_enqueue_scripts' );

也可以把它设置成我们的脚本的依赖:

上边的代码中,制作好数据之后,我们讨巧的使用了 wp_send_json() 函数直接封装并发送 JSON。如果需要直接把数据放在页面里,就得使用 wp_json_encode() 函数来封装 JSON 并获取,然后再在放到我们想要的位置。

<script type="text/javascript">
    jQuery( document ).on( 'click', '.random', function() {
        var posts = '<?php echo wp_json_encode( $json ); ?>';
    } );
</script>

使用模板

重头戏来了,现在有了模板也有了数据,就差把两者结合到一起,生成出 HTML 代码了。

首先,使用标题中提到的 wp.template() 方法,传入模板的 ID 来初始化它;然后使用返回的方法,传入 data 参数即可生成 HTML,总共说了一句话,就是这么简单。

jQuery( document ).on( 'click', '.random', function() {
    var content  = jQuery( '#content' );
 
    content.empty();
 
    jQuery.get( adminAjax, 'action=random-posts', function( data ) {
        var template = wp.template( 'article' );
 
        for ( var i = data.length - 1; i >= 0; --i ) {
            var html = template( data[i] );
 
            content.prepend( html );
        }
    } );
 
    return false;
} );

 

上边的代码中,调用模板,传入数据,生成出 HTML 代码,再通过 jQuery 的 DOM 操作方法 append()prepend()after() 和 before() 把代码插入到想要的位置,或者直接用 html() 方法修改元素的内容。

后记

看到最后,你可能会有点小失望,前边的准备时间那么长,到最后只需要两步走就能完成操作。实际上,这个 JavaScript 模板的功能也就这么多,只能帮你生成 HTML,减少在 JavaScript 代码中大量拼接字符串的痛苦。

但是,如果能够利用好,也能在实际开发中解决大问题。就比如我最近想制作一个点击插件链接,就能直接弹出插件信息的功能,如果把所有插件的弹窗都在 PHP 中生成好 HTML 代码,会导致页面非常庞大,重复代码很多;直接在 JavaScript 中把弹窗代码拼接起来吧,更是让我非常痛苦,所以才盯上了这个模板。

在实际使用过程中,还是在「制作模板」这一步骤的可扩展性最强,因为你可以嵌入任意 JavaScript 代码,各种逻辑都能完成,比如上边所说的插件弹窗,就有一个插件的星级评价显示,这些都可以在模板中完成,PHP 只需要提供分数即可。