致力于打造中国站长娱乐学习的免费资源站!官方合作QQ:283852481

您当前的位置:首页 > 教程 > 网页设计 > JavaScript/JQuery

jQuery面向对象的开发模式

时间:2016-11-20 15:52:25  来源:互联网  

所以最后我们的插件成了这样:

;(function($, window, document,undefined) {    //定义Beautifier的构造函数    var Beautifier = function(ele, opt) {        this.$element = ele,        this.defaults = {            'color': 'red',            'fontSize': '12px',            'textDecoration': 'none'        },        this.options = $.extend({}, this.defaults, opt)    }    //定义Beautifier的方法    Beautifier.prototype = {        beautify: function() {            return this.$element.css({                'color': this.options.color,                'fontSize': this.options.fontSize,                'textDecoration': this.options.textDecoration            });        }    }    //在插件中使用Beautifier对象    $.fn.myPlugin = function(options) {        //创建Beautifier的实体        var beautifier = new Beautifier(this, options);        //调用其方法        return beautifier.beautify();    }})(jQuery, window, document);

一个安全,结构良好,组织有序的插件编写完成。

关于变量定义及命名

现在谈谈关于变量及方法等的命名,没有硬性规定,但为了规范,遵循一些约定还是很有必要的。

变量定义:好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头,变量名间用逗号隔开。原因有二:

  • 一是便于理解,知道下面的代码会用到哪些变量,同时代码显得整洁且有规律,也方便管理,变量定义与逻辑代码分开;
  • 二是因为javascript中所有变量及函数名会自动提升,也称之为JavaScript的Hoist特性,即使你将变量的定义穿插在逻辑代码中,在代码解析运行期间,这些变量的声明还是被提升到了当前作用域最顶端的,所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。当然,再次说明这只是一种约定,不是必需的。

变量及函数命名 一般使用驼峰命名法(CamelCase),即首个单词的首字母小写,后面单词首字母大写,比如resultArray,requestAnimationFrame。对于常量,所有字母采用大写,多个单词用下划线隔开,比如WIDTH=100,BRUSH_COLOR='#00ff00'。当变量是jQuery类型时,建议以$开头,开始会不习惯,但经常用了之后会感觉很方便,因为可以很方便地将它与普通变量区别开来,一看到以$开头我们就知道它是jQuery类型可以直接在其身上调用jQuery相关的方法,比如var $element=$('a'); 之后就可以在后面的代码中很方便地使用它,并且与其他变量容易区分开来。

引号的使用:既然都扯了这些与插件主题无关的了,这里再多说一句,一般html代码里面使用双引号,而在JavaScript中多用单引号,比如下面代码所示:

var name = 'Wayou';document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号,JavaScript中保持单引号

一方面,HTML代码中本来就使用的是双引号,另一方面,在JavaScript中引号中还需要引号的时候,要求我们单双引号间隔着写才是合法的语句,除非你使用转意符那也是可以的。再者,坚持这样的统一可以保持代码风格的一致,不会出现这里字符串用双引号包着,另外的地方就在用单引号。

(function( $ ){  var methods = {     init : function( options ) {       return this.each(function(){         var $this = $(this),             data = $this.data('tooltip'),             tooltip = $('<div />', {               text : $this.attr('title')             });         // If the plugin hasn't been initialized yet         if ( ! data ) {           /* Do more setup stuff here */           $(this).data('tooltip', {               target : $this,               tooltip : tooltip           });         }       });     },     destroy : function( ) {       return this.each(function(){         var $this = $(this),             data = $this.data('tooltip');         // Namespacing FTW         $(window).unbind('.tooltip');         data.tooltip.remove();         $this.removeData('tooltip');       })     },     reposition : function( ) { // ... },     show : function( ) { // ... },     hide : function( ) { // ... },     update : function( content ) { // ...}  };  $.fn.tooltip = function( method ) {    if ( methods[method] ) {      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));    } else if ( typeof method === 'object' || ! method ) {      return methods.init.apply( this, arguments );    } else {      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );    }      };})( jQuery );

精彩广告