• jQ插件开发规范(转)


    当我们画出了UI之后就可以正式编写jQuery插件代码了,不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。

    1. 使用闭包:
    (function($) {
      // Code goes here
    })(jQuery);

    这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?

    a) 避免全局依赖。

    b) 避免第三方破坏。

    c) 兼容jQuery操作符'$'和'jQuery '

    我们知道这段代码在被解析时会形同如下代码:
    var jq = function($) {
      // Code goes here
    };
    jq(jQuery);

    这样效果就一目了然了。

    2. 扩展

    jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.

    $.extend 用于扩展自身方法,如$.ajax, $.getJSON等,$.fn.extend则是用于扩展jQuery类,包括方法和对jQuery对象的操作。为了保持jQuery的完整性,我比较 趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.

    3. 选择器

    jQuery提供了功能强大,并兼容多种css版本的选择器,不过发现很多同学在使用选择器时并未注重效率的问题。

    a) 尽量使用Id选择器,jQuery的选择器使用的API都是基于getElementById或getElementsByTagName,因此可以知道 效率最高的是Id选择器,因为jQuery会直接调用getElementById去获取dom,而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。

    b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom,且这些dom属于同一类型,例如获取所有className为jquery的div,那么我们应该使用的写法 是$('div.jquery')而不是$('.jquery'),这样写的好处非常明显,在获取dom时jQuery会获取div然后进行筛选,而不是 获取所有dom再筛选。

    c) 避免迭代,很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式,如$('.jquery .child'),获取className为jquery的dom下的所有className为child的节点,其实这样编写代码付出的代价是非常大 的,jQuery会不断的进行深层遍历来获取需要的元素,即使确实需要,我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。


    js插件开发的一种方法:

    js代码:

    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    (function ($) { 
    //默认参数 (放在插件外面,避免每次调用插件都调用一次,节省内存)
    var defaults = { 
    color: '红色' 
    }; 
    //扩展 
    $.fn.extend({ 
    //插件名称 
    height: function (options) { 
    //覆盖默认参数 
    var opts = $.extend(defaults, options); 
    //主函数 
    return this.each(function () { 
    //激活事件 
    var obj = $(this); 
    obj.click(function () { 
    alert(opts.color); 
    }); 
    }); 

    }) 
    })(jQuery); 
    $(function () { 
    $("p").height({ color: 'black' }); 
    }); 
    </script>


    html代码:

    <p> 
    click here
    </p> 

  • 相关阅读:
    Linux系统下设置Tomcat开机自动启动
    2、nginx配置文件基本介绍
    1、Centos7下安装nginx
    40、springboot——运行状态监控使用Actuator
    39、springboot——热部署
    38、springboot——分布式之SpringCloud
    38、springboot——分布式之zookeeper+dubbo
    37、springboot——安全
    36、springboot——异步任务、定时任务、邮件任务
    React过誉了吗?
  • 原文地址:https://www.cnblogs.com/d-17/p/4643459.html
Copyright © 2020-2023  润新知