易栈网-膘叔（Neatstudio.COM）

浏览模式: 标准 | 列表Tag:插件

TinEye插件

Submitted by gouki on 2009, November 5, 9:37 AM

搜索相似图片，你会怎么搜索？上传？分析？再搜索结果？
tineye.com就是这样的一个搜索相似图片的网站。yhustc在分析了tineye for firefox的插件后，写了下面的文章。
不过，我怎么感觉来感觉去，这种JS的注入，都象在学搜狗输入法？把某个链接加入到收藏夹，在你要搜索的页面，点击一下这个收藏的链接。然后再点击图片就可以搜索了。。

虽说JS注入方式有很多，但最近发扬光大的却是搜狗输入法。有记忆的朋友可能会记得几年前，所谓网上流传的一段神奇代码，在一个图片非常多的页面，在地址栏里键入代码，页面中的图片就会滚动起来。。。

好相象啊。不多说了，看原文吧。
原文地址：http://www.yhustc.com/Made_a_JS_plug-in_tineye_search.html

使用方法很简单，IE用户在下面的链接上右键选择添加到收藏夹，firefox用户直接将链接拖动到书签栏就行了

tineye搜索

然后打开任意网页，比如g.cn，比如现在要搜索与google的logo相似的图片，在收藏夹里点击这个tineye的收藏就行了，此时JS文件已经加载到该网页并且处理过所有页面中的图片了。把鼠标移动google的logo上会有个黑框，然后title也变成了“Search in tineye”，左键单击图片，就会打开新窗口来搜索图片。

测试过了，firefox，opera，ie，webkit都能用。以后看到美女图要找套图就方便了，哈，直接用这个JS处理一下然后点击就行了。

---EOF--
如果你有特殊爱好，比如胆子小，又比如有点“钻”研精神，直接看：http://www.yhustc.com/tineye.js也可以了解一下yhustc的想法。HOHO

Tags: 插件, tineye

Javascript | 评论:0 | 阅读:19657

PHP反射API--利用反射技术实现的插件系统架构

Submitted by gouki on 2009, October 21, 5:17 PM

纯COPY，没仔细看。。。。【先申明，我COPY对这段代码，主要是看他reflectionClass的应用，并非关注插件的应用。。。】

有爱好的人，可以学习一下。。

http://www.e897.com/Article/wlbc/php/200908/5377.html

/**
* @name PHP反射API--利用反射技术实现的插件系统架构
* @author :PHPCQ.COM
*/
interface Iplugin{
public static function getName();
}
function findPlugins(){
$plugins = array();
foreach (get_declared_classes() as $class){
$reflectionClass = new ReflectionClass($class);
if ($reflectionClass->implementsInterface('Iplugin')) {
$plugins[] = $reflectionClass;
}
}
return $plugins;
}
function computeMenu(){
$menu = array();
foreach (findPlugins() as $plugin){
if ($plugin->hasMethod('getMenuItems')) {
$reflectionMethod = $plugin->getMethod('getMenuItems');
if ($reflectionMethod->isStatic()) {
$items = $reflectionMethod->invoke(null);
} else {
$pluginInstance = $plugin->newInstance();
$items = $reflectionMethod->invoke($pluginInstance);
}
$menu = array_merge($menu,$items);
}
}
return $menu;
}
function computeArticles(){
$articles = array();
foreach (findPlugins() as $plugin){
if ($plugin->hasMethod('getArticles')) {
$reflectionMethod = $plugin->getMethod('getArticles');
if ($reflectionMethod->isStatic()) {
$items = $reflectionMethod->invoke(null);
} else {
$pluginInstance = $plugin->newInstance();
$items = $reflectionMethod->invoke($pluginInstance);
}
$articles = array_merge($articles,$items);
}
}
return $articles;
}
require_once('plugin.php');
$menu = computeMenu();
$articles = computeArticles();
print_r($menu);
print_r($articles);
//plugin.php 代码如下
<?php
class MycoolPugin implements Iplugin {
public static function getName(){
return 'MycoolPlugin';
}
public static function getMenuItems(){
return array(array('description'=>'MycoolPlugin','link'=>'/MyCoolPlugin'));
}
public static function getArticles(){
return array(array('path'=>'/MycoolPlugin','title'=>'This is a really cool article','text'=>xxxxxxxxx));
}
}

Tags: 反射, 插件

PHP | 评论:5 | 阅读:26790

推荐一款插件：ScribeFire

Submitted by gouki on 2009, September 4, 12:48 PM

这款插件的用途是可以让你快速发表博客。功能还算是挺强大。主要是方便啦

而且，它是firefox的插件，不需要你安装软件，有firefox的地方就能够使用，多方便啊。。。

当然，在使用它为wordpress发表文章的时候，还必须在后台开启XML-RPC应用。否则是不能发表的。

博客系统看来是需要更换了，sablog用了也将近2年了。最痛苦的就是输入的文章突然消失（不小心按了Backspace键，然后回来的时候内容就没有了），出现了好几次这样的事故。。

下载地址为：https://addons.mozilla.org/en-US/firefox/addon/1730

截图：

Tags: 插件, firefox, scribefire, wordpress, blog

Software | 评论:4 | 阅读:26851

jQuery简单开发

Submitted by gouki on 2009, April 13, 1:19 PM

jQuery这种轻量级的框架大家使用的都比较多，1.3后效率据说又上升了不少，因此，开发基于jQuery的插件也就显得那么理所当然了。
一般来说，jQuery有两种插件模式，一种是：$.extends({}) ，另一种是：$.fn.extends({})
个人理解：前一种是属于全局性的调用，后一种是针对某个元件的绑定调用。这当然是简单的理解。但事实上，也基本上就是这么做的。

官方的例子也比较简单：

JavaScript代码

$.extend({
max: function(a, b) {
return a > b ? a : b;
},
min: function(a, b) {
return a > b ? b : a;
},
avg: function(a, b) {
return a / b;
}
});

看上去是不是容易？然后就可以直接调用了。 $.min(2,3) 返回2
一般情况下，为了在扩展中使用$，却又担心的页面使用了jQuery.noConflict()而取消了$指向jQuery的引用，则需要这样写

JavaScript代码

( function($){
$.fn.extend({
//....code in here
});
})(jQuery);

这样写不仅能够将$显式指向jQuery，而且将产生的变量封在function的作用范围内，不会污染window全局。
而基于$.fn.extends({})的扩展又如何开发呢？

在这里我引用Roby的译文：http://www.robysky.com/archives/171
英文原文：http://www.learningjquery.com/2007/10/a-plugin-development-pattern

我认为以下插件开发模式是必须应该掌握的：
1.在JQuery命名空间内声明一个特定的命名；
2.接收参数来控制插件的行为；
3.提供公有方法访问插件的配置项值；
4.提供公有方法来访问插件中其他的方法（如果可能的话）；
5.保证私有方法是私有的；
6.支持元数据插件；

下面，我将逐一讲述上面的内容，并在同时给出相关的简单插件开发代码。
1.在JQuery命名空间内声明一个特定的命名

这意味着开发的是一个单一命名的插件脚本，如果你的脚本包含多个插件或者有补充性质的插件，比如$.fn.doSomething() 和$.fn.undoSomething()，那你得声明多个命名了。但是总体来说，当开发一个插件时，我们应该努力做到用一个单一的命名来搞定整个插件。

在例子中，我们将声明一个名为“hilight”的插件。

JavaScript代码

$.fn.hilight = function() {
// Our plugin implementation code goes here.
};

我们可以这样调用：
$(’#myDiv’).hilight();
但是假如我们需要打破这种单一的命名和调用方式呢？有很多理由支持我们这么做：设计上的需要；更加简单和可读的配置；而且那样将更加符合OO的要求。

在没有给命名空间来到麻烦的前提下，将插件的部署打破成为多个函数的形式将是十分繁琐的。我们通过认识并利用JavaScript中 functions是最高层的对象，和其他对象一样，functions可以被赋予属性，前面我们已经将hilight命名声明在了JQuery的原型对象上，那么，其实，其他的我们想扩展的属性或对象都能够在hilight上进行声明。稍后将详细讲述此点。
2.接收参数来控制插件的行为；

来为我们的hilight插件添加指定前景和背景色的功能，我们需要在函数中允许一个object类型的选项设置。如下所展示的那样：

JavaScript代码

$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};

现在，我们的插件可以这样来调用：

$(’#myDiv’).hilight({
foreground: ‘blue’
});
3.提供公有方法访问插件的配置项值；

上面的代码我们可以做一下改进，使得插件的默认值可以在插件之外被设置。这无疑是十分重要的，因为它使得插件用户可以使用最少的代码来修改插件配置，这其实是我们利用函数对象的开始。

JavaScript代码

// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};

4.提供公有方法来访问插件中其他的方法（如果可能的话）

这里要讲的方法和前面的讲解一脉相承，用此方法来扩展你的插件（而且能够让其他人进行扩展）是件很有意思的事情。例如，在扩展hilight插件时，我们可以定义一个format方法用来格式化高亮显示的文本，原来的hilight插件和扩展了format方法的插件代码如下：

JavaScript代码

$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {'
return '<strong>' + txt + '</strong>';
};

如前面所述，我们已经很容易的通过设置options对象的属性来允许一个回调函数来覆写默认的格式设置。在这里有另外一个非常棒的方法来个性化你的插件，上面展示的方法实际上就是通过暴露format方法，使其可以被重新定义。这种做法使得其他人可以采用他们自己的习惯和方式来重写你的插件，这意味着他们可以为你的插件写额外的扩展插件。
仔细考量一下前面我们用到的插件例子程序，你可能会想“我们究竟应该在什么时候使用这种插件方式来实现需求”的问题。一个来自现实应用中的插件便是“ Cycle Plugin”，它是一个支持多种滑动显示特效的插件，特效包括滚动、滑动和渐变等等。但是，实际上，并没有办法来定义每一个可能会用在滑动变幻上的特效。这就是这种扩展方式的有用之处。“ Cycle Plugin”插件暴露了”transitions”对象，这使得用户只需要按照如下方式便可以添加自己的变幻定义：
$.fn.cycle.transitions = {
…
};
这种技巧使得用户可以定义或者采用自己习惯的方式来扩展“ Cycle Plugin”。
5.保证私有方法是私有的；

上面提到的暴露插件中的公有方法的技巧使得插件能够被覆写，这将使插件变得十分灵活而强大，但至于哪一部分，那些属性和方法应该被暴露出来，你得小心了。一旦使其能够被外界访问到，你就得注意到任何调用参数和语义化的变动都可能使其丧失向前的兼容性。作为一般准则，如果不确定是否应该暴露某个属性或对象的话，那就最好别那样做。
那么我们应该怎样来定义多个方法而不至于使命名空间混乱并且保证不被暴露再外呢？这就是闭包的工作，为了便于演示，我们给插件加入了一个叫做 “debug”的功能，它用来记录firebug控制台所选择的网页元素数目。为了创建一个闭包，我们将整个功能的定义放入在一个function中了（有关这方面的知识，可参见JQuery手册）。

JavaScript代码

// create closure
(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
...
};
// private function for debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
...
// end of closure
})(jQuery);

debug方法在这里是无法被在插件以外访问到的，因此，我们称之为它是插件私有的。
6.支持元数据插件；

根据你所写的插件的类型，为你的插件加入元数据插件的支持将使其变得更强大。就我个人来说，喜欢采用元数据插件的重要原因便是它可以让你使用定义之外的标签来覆写你的插件属性设置（这在创建demo和例子时十分有用），而且支持它十分的简单。
更新：这部分内容可以在本文的评论中展开讨论（既然有争议的话）

JavaScript代码

// plugin definition
$.fn.hilight = function(options) {
...
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
...

改动部分的代码会做如下的事情：
*测试metadata插件是否可用
*如果可以，将用metadata扩展options对象
这被加入到jQuery.extend，作为其最后一个参数，所以它可以覆写任何其他参数设置。现在我们可以通过下面的方式控制其行为：

XML/HTML代码

<div class="hilight { background: 'red', foreground: 'white' }">Have a nice day!</div>
<div class="hilight { foreground: 'orange' }">Have a nice day!</div>
<div class="hilight { background: 'green' }">Have a nice day!</div>

而在调用方面，我们通过一行简单的代码就可以实现预期的效果：
$(’.hilight’).hilight();

将上面所述内容涉及到的代码放在一起，完整的例子程序代码如下：

JavaScript代码

//
// create closure
//
(function($) {
//
// plugin definition
//
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
//
// end of closure
//
})(jQuery);

看完以上的内容，你是不是对jQuery的插件开发加深了一定的了解了呢？
顺便提一下，yhustc在自己的博客上写了一个基于jQuery的软键盘插件，你是不是又可以根据上面的教程来写一个基于$.fn.extends的扩展呢？让yhustc的插件可以绑定在某个元件上？

Tags: jquery, 开发, 插件, yhustc

Javascript | 评论:2 | 阅读:24225

团队作品：[NEATSheepDog]法师的牧羊犬

Submitted by gouki on 2008, October 21, 10:46 PM

想说的是，团队没在一起开发N年了，虽然大家都还保持着联系。。。

walkerlee卖机票去了，hihiyou北京泡妞去了，老戴广州去了，totododo电信去了，唯有我还在上海没挪过地方。

总以为Walkerlee不会再搞开发了，毕竟当boss了嘛，HOHO，不料今天QQ又骚扰我说是写了一个插件，想介绍我使用，被我义正言辞的拒绝了。wow，确实很多年没有玩了，从头至尾，我的人物就没有超过10级。

废话不说了，介绍一下窝窝的插件。

– ==========================================
– 插件说明
– ==========================================
英文:NEATSheepDog
中文:法师的牧羊犬
版本:1.0 BETA
作者:walkerlee
联系:walkerlee[at]yahoo(dot)cn www.walkerlee.net
简介:这个插件能使你设置一个目标作为监视目标,在不切换你”当前目标”的情况下可以监视目标的血条用图形和百分比表示.同时监视目标上的变形术剩余时间.
插件还支持对监视对象施放变形术的特性.如果玩家和监视目标之间距离超过变形术施法距离,插件会以半透明的形式提示玩家.
同时,在变形术到达剩余的指定时间时,施法时间到时和羊被打断时,屏幕会有相对应的提示.
– ==========================================
– 按键说明
– ==========================================
插件分为血量条和读秒条.其中鼠标操作:
鼠标左键单击血量条时,如果玩家当前目标不是监视目标并且监视目标已被设为焦点,则把监视目标设置为玩家当前目标.
鼠标中键单击血量条时,把玩家当前目标设置为焦点即监视目标.
鼠标右键单击血量条时,把玩家当前目标设置为焦点目标同时施放变形术.
鼠标左键单击读秒条时,如果监视目标已经被设置为焦点,则对监视目标施放变形术.
鼠标右键单击读秒条时,如果监视目标已经被设置为焦点,清除监视目标的焦点设置.
按住鼠标左键拖动血量条或者读秒条可以拖动插件界面,到你想要的位置上松开鼠标左键即可.
– ==========================================
– 监视目标说明
– ==========================================
监视目标显示的优先顺序为,在有焦点目标的情况下,优先显示焦点目标,在没有焦点目标的情况下,显示当前目标.
当前目标直接用目标的名字表示,焦点目标用*目标名字*表示.例如血量条上显示”风之步行者”,表示监视目标当前为玩家的当前目标.
血量条上显示”*风之步行者*”,表示监视目标为玩家设置的焦点目标.
– ==========================================
– 安装说明
– ==========================================
进入你魔兽世界的安装根目录,例如 “D:\游戏\魔兽世界\”,在这个目录下面你可以看到Launcher.exe,Wow.exe等文件.
在根目录下找到文件夹Interface,如果没有,请自行建立一个文件夹并将其命名为”Interface”.
进入Interface文件夹,找到Addons文件夹,如果没有该文件夹,请自行建立一个文件夹并将其命名为”Addons”.
把NEATSheepDog这个文件夹复制到Addons文件夹中,在登陆魔兽世界后,角色选择画面的左下角的插件选项中找到”法师的牧羊犬”,如果没有打钩,请打上.进入游戏即可使用本插件.
– ==========================================
– 截图说明
– ==========================================
截图\demo.jpg 插件界面以及特点演示
截图\alert1.jpg 变形术剩余10秒提示
截图\alert2.jpg 变形术打断提示
截图\alert3.jpg 变形术结束提示