【连载】Bootstrap开发漂亮前端界面之插件开发

相关文章：

1.《教你用Bootstrap开发漂亮的前端界面》

2.《Bootstrap开发漂亮的前端界面之实现原理》

3.《Bootstrap开发漂亮的前端界面之自定义右键菜单》

 

什么是jQuery插件？

　　　　首先，来看看我们一般是如何使用jQuery，第一种方式：$.trim(" hello world ")，直接使用jQuery中方法，第二种方式：$("#myinput").val()，获取页面中的元素，然后使用jQuery对象中方法。两种的区 别在于，第一种方式调用方法一般不涉及DOM，而第二种方式需要先获取页面中元素，然后再进行方法调用，方法的执行围绕着DOM元素。trim、val方 法都是jQuery原生提供的，其实我们也可以编写自己的方法，而我们自己写的方法一般被称为jQuery的插件。

　　　　现在我们先编写两个入门的插件:

　　　　需求一：获取字符串路径的中文件名；需求不涉及到任何的DOM，所以我们可以采用方式一模式来编写我们的插件。

　　　　$本来一个函数，在javascript中一切皆对象，所以$也是一个对象，那么向jquery对象中添加新的方法也是可以行的。

<script type="text/javascript">
    //jQuery对象添加自定义方法
    $.getFileName=function(path){
        if(!path){
            return;
        }
        //使用正则表达式获取路径中的文件名部分
        return  /(?!.*\/).*/.exec(path+"")[0];
    }
    //调用自定义插件
    var fileName = $.getFileName("f:/abc/源代码教育绝密资料.txt");
    console.debug(fileName);
</script>

　　　　第一个简单插件就应经完成了，当然如果你的需求很复杂，你的代码可能会更多。　

　　　　　　　

　　　　需求二:获取页面中元素的元素的名字;需求中需要先有DOM元素，然后才能获取DOM元素的名字。

　　　　首先通过$(选择器)获取页面中元素对象，其实$(选择器)函数的返回值返回的就是一个jQuery实例对象，JS中每个对象都有自己的原 型对象，jQuery实例对象的原型对象为jQuery.prototype或者$.fn，如果不知道”原型对象“是什么的童鞋自己百度一下，这个JS高 手必备的知识。（你可以尝试执行： $.fn={};然后再去调用jquery对象的方法，你会发现都无法使用了）

//jQuery 实例对象的原型对象添加自定义方法
$.fn.tagName=function(){
    return this[0].nodeName;
};
    
$(function(){
    //调用自定义插件
    console.debug($("#mydiv").tagName());    
});

　　　　  第二个插件的功能主要涉及到了DOM元素的访问；

 　　　　 右键菜单插件开发，本插件是以《Bootstrap开发漂亮前端界面之自定义右键菜单》为基础，所以右键菜单的细节，不会在本文中描述。

　　　　 

　　　　仔细比对插件代码与非插件代码细微的差别，其实就是把以前写死的东西使用this进行替换；

$(function(){
        //调用代码
        $("#contextMenu").contextmenu();
 });