基于Chrome插件的开发工具链

Tue, 06 May 2014 21:51:58 +0000

在项目开发过程中，时不时会碰上需要使用一些工具来做一些自动操作或者附加功能。特别是有一些外部组件只会提供Web工具，或者如果产品会发布在Web上的时候，在线上的产品中加调试指令显然是不安全的（前段时间刚好有携程线上服务器暴露的调试接口，导致用户信息泄露的事故）。这时候我们就可以借助Chrome来制作一些特别的小工具。使用Chrome来自作工具有几个好处：其一是对熟悉Web开发的人而言，它用得全是Javascript(当然你也可以用Go语言)和HTML，没有太多额外的学习成本，而且现在的Chrome对HTML5标准支持得也比较好，基本的功能都可以实现；其二是不需要花多少时间在UI方面（作为一个后台开发表示The easier the better）；其三是在需要的时候，还能开发为App，直接运行（另外还有一个项目叫Nodejs-webkit，提供了打包成不依赖Chrome本地应用的功能，而且底层用了nodejs，提供了更加强大的系统资源访问的功能)。总而言之，作为开发工具而言已经绰绰有余了。

JQuery扩展插件--提示信息

Fri, 19 Nov 2010 15:20:12 +0000

学校做项目顺便写的，还是有点用的。

/***
 * JQuery扩展插件--提示信息
 *
 * 本函数用于创建提示信息
 *
 * Example
 * <code>
 * var t = $.noticeMessage(msg, a, b);
 * </code>
 *
 *
 * function noticeMessage([msg, a,b])
 * @Param {
 * msg: 信息内容(默认: Notice Message!)
 * a: 配置选项({expire: 过期时间（默认5秒）, time: 过渡时间, from: {起始CSS样式}, to:{最终CSS样式}})
 * b: 回调函数
 * }
 * @Return {jQuery(msgDiv): 产生的信息DOM组件的jQuery容器}
 *
 *
 * Example:
 * <code>
 * var t = $.noticeMessage("Hello World!");
 * </code>
 *
 *
 * @Author OWenT
 * @Version 1.0
 * @Link http://www.owent.net
 */
jQuery.extend({
 noticeMessage: function (msg, a, b) {
 msg = msg || "Notice Message!";
 var option = { "expire": 5000, "time": 500,
 "from": { "background-color": "LightGreen", "opacity": "0", "position": "fixed", "bottom": "0px", "z-index": "1000",
 "font-size": "24px", "color": "DarkGreen", "padding": "3px", "font-weight": "bold"
 },
 "to": { "opacity": "1", "bottom": "+5px" }
 };
 var callback = function () { };
 if (a && jQuery.isFunction(a))
 callback = a;
 else {
 a = a || {};
 jQuery.extend(option, a);
 callback = b || function () { };
 }

 var msgDiv = document.createElement("div");

 jQuery(msgDiv).css(option.from).html(msg);
 jQuery(document.body).append(msgDiv);
 jQuery(msgDiv).stop().animate(option.to, option.time, callback);
 if (option.expire > 0) {
 setTimeout(function () {
 if (msgDiv) {
 jQuery(msgDiv).stop().animate({ "opacity": "0", "bottom": "-5px" }, option.time,
 function () { callback(); jQuery(this).remove(); });
 }
 }, option.expire);
 }
 return jQuery(msgDiv);
 }
});

写在最后补充一下，这个动机基本没什么用了

插件 on I'm OWenT

基于Chrome插件的开发工具链

JQuery扩展插件--提示信息