Z-Blog Wiki Z-Blog Wiki

Z-Blog官方文库

用户工具

站点工具


zblogphp:development:features:1.5:zbpjf

这是本文档旧的修订版!


Z-BlogPHP JavaScript Framework

介绍

这是一个旨在规范Z-BlogPHP前端代码接口而推出的框架,用于处理之前前端代码无序的局面。

ZBPJF引入接口开发机制,将为应用开发者提供便利。通过ZBPJF可以方便的自定义系统js事件处理,或注册新事件。在ZBP1.5+版本中,开发者将不再需要引入从前100+KB的zb_system/script/common.js了,你可以更加自由引用所需要的JS组件了,你的主题头部JS引用可以是这样的

<!--- cdn 引入自定义jq版本 --->
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js" type="text/javascript"></script>
<!--- 引入ZBPJF --->
<script src="{$host}zb_system/script/zblogphp.js" type="text/javascript"></script>
<!--- 引入系统动态 JS --->
<script src="{$host}zb_system/script/c_html_js_add.php" type="text/javascript"></script>
<!--- 引入主题自定义 JS --->
<script src="{$host}zb_users/theme/{$theme}/script/common.js" type="text/javascript"></script>

zb_users/theme/THEMEID/script/common.js 中你只需绑定需要的事件进行个性化即可,如

//解绑系统事件
zbp.plugin.unbind("comment.reply", "system");
//绑定评论回复事件,点击回复按钮执行
zbp.plugin.on("comment.reply", "THEMEID", function(i) {
    if ($("#inpRevID").val() != 0) return false;
 
    $("#inpRevID").val(i);
    $("#AjaxComment" + i).next().after("<dl id=\"reply\">" + $("#postcmt").html() + "</dl>");
    $("#postcmt").hide("slow").html("");
    $("#cancel-reply").show().bind("click", function() {
        $("#inpRevID").val(0);
        $(this).hide().prev().show();
        $("#postcmt").html($("#reply").html()).show("slow");
        $("#reply").remove();
        window.location.hash = "#comment";
        return false;
    }).prev().hide();
    $("#reply").show("slow");
    window.location.hash = "#reply";
});
//绑定回复成功事件,成功发表后取消回复状态
zbp.plugin.on("comment.postsuccess", "THEMEID", function () {
	$("#cancel-reply").click();
});
代码示例:https://github.com/zblogcn/zblogphp/blob/master/zb_users/plugin/ZBPJFExample/zbpjfexample.js

函数说明

get

zbp.cookie.get(CookieKey)
根据Key得到Cookie的值

set

zbp.cookie.set(sCookieName, sCookieValue, iExpireDays)

2. comment

get

zbp.comment.get(文章ID, 评论页数)
触发事件,获得指定的评论列表

reply

zbp.comment.rely(评论ID)
触发回复评论事件

post

zbp.comment.post(发送内容)
触发发送评论事件。发送内容要求为Object,参数如下:
            /**
             * Form Data
             * @name POSTFORMDATA
             * @typedef {Object} PostData
             * @memberOf COMMENT
             * @property {string} action - Post Url
             * @property {string} postid - Article ID
             * @property {string} verify - Verify code
             * @property {string} name   - Comment user name
             * @property {string} email  - Comment user E-mail
             * @property {string} content - Comment content
             * @property {string} homepage - Comment user Website
             * @property {string} replyid - Comment Parent ID
             * @property {string} isajax - Return Ajax String
             * @type {object}
             */

3. userinfo

output

save

saveFromHtml

懒得写了……

4. plugin

on

zbp.plugin.on(bind / addListener)(接口名, 插件ID, 回调函数(错误, 待发送数据))

用于创建一个监听器,监听事件的发生

unbind

zbp.plugin.unbind(removeListener)(插件ID)

用于解绑一个监听器

emit

zbp.plugin.emit(接口名, 内容)

用于传递内容到监听器

自带事件接口列表

userinfo.output

userinfo.savefromhtml

userinfo.save

无参数,请自行处理。

comment.verifydata

代码示例,应注意ZBPJFExample是指你的主题或者插件ID,以防止冲突:

// 验证评论
zbp.plugin.on("comment.verifydata", "ZBPJFExample", function (error, formData) {
	console.log("待发送数据:");
	console.log(formData);
	// formData里的数据可以任意操作
 
	// 如果出错的话
	//if (1 == 2) {
	//	error.no = 32768; // 给一个错误编码
	//	error.msg = "Z-BlogPHP JavaScript Framework 测试"; // 错误消息
	//}
	// 设置error后,系统将自动报错。
});

comment.posterror

comment.postsuccess

代码示例:

// 评论发送成功
zbp.plugin.on("comment.postsuccess", "ZBPJFExample", function (formData, data, textStatus, jqXhr) {
	console.log("系统返回数据:" + data);
	// 同样,这里除了formData是发送的数据外,另外三项是jQuery ajax的参数,参见jQuery手册,不再赘述。
});

comment.get

comment.got

comment.reply

//点击回复评论
zbp.plugin.on("comment.reply", "ZBPJFExample", function (id) {
	console.log("Wow! 你要回复ID为" + id + "的评论啊!");
});

更多系统默认接口代码请看:systemevents 更多详情请阅读源码: https://github.com/zblogcn/zblogphp/blob/master/zb_system/script/zblogphp.orig.js

模块化调用

AMD

<script src="{$host}zb_system/script/require.js" type="text/javascript"></script>
<script>
	require.config({
		baseUrl: '{$host}', 
		paths: {
			jquery: 'zb_system/script/jquery.min', 
			zbp: 'zb_system/script/zblogphp'
		}
	});
	require(["zbp", "jquery"], function (ZBP, jQuery) {
		var zbp = new ZBP({
			bloghost: "{$host}",
			ajaxurl: "{$zbp.ajaxurl}",
			cookiepath: "{$zbp.cookiespath}?>",
			lang: {
				error: {
					72: "{$lang['error']['72']}",
					29: "{$lang['error']['29']}",
					46: "{$lang['error']['46']}"
				}
			}
		}, jQuery);
		console.log(zbp);
	});
 
</script>

CMD

<script src="{$host}zb_system/script/sea.js" type="text/javascript"></script>
<script>
 
	seajs.config({
		base: '{$host}', 
		alias: {
			jquery: 'zb_system/script/jquery.min', 
			zbp: 'zb_system/script/zblogphp'
		}, 
		debug: true
	});
	seajs.use(["zbp", "jquery"], function (ZBP, jQuery) {
		var zbp = new ZBP({
			bloghost: "{$host}",
			ajaxurl: "{php}echo $zbp->ajaxurl;{/php}",
			cookiepath: "{php}echo $zbp->cookiespath;{/php}?>",
			lang: {
				error: {
					72: "{php}echo $lang['error']['72'];{/php}",
					29: "{php}echo $lang['error']['29'];{/php}",
					46: "{php}echo $lang['error']['46'];{/php}"
				}
			}
		}, jQuery);
		console.log(zbp);
	});

在模块中调用

define(function(require, exports, module) {
	var jquery = require("jquery");
	var ZBP = require("zbp");
	var zbp = new ZBP({
        // Params...
	}, jquery);
	console.log(zbp);
});

CommonJS

var ZBP = require("zbp");

ES6 Import

import * as ZBP from 'zbp';

zblogphp/development/features/1.5/zbpjf.1480383066.txt · 最后更改: 2016/11/29 09:31 由 yszm