首页»JavaScript»编写优秀jQuery插件的10个技巧

重庄时时彩开奖结果: 编写优秀jQuery插件的10个技巧

来源:泉城IT圈子 发布时间:2018-04-15 阅读次数:

黑龙江时时彩玩法 www.hfebe.com.cn

1. 把你的代码全部放在闭包里面

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。

不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面。

而方法可能应该放在Prototype方法内部。

(function($)  {
//code here
})(jQuery);

2. 提供插件的默认选项

你的插件应该会有一些选项是可以让开发者设置的,所以提供恢复默认选项是以有必要的。 你可以通过jQuery的extend功能来设置这些选项:

var defaultSettings = {      mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

3. 使用返回一个元素

JavaScript/jQuery有一个很好的特点就是可以进行方法级联,所以我们不应该破坏这个特性,始终在方法中返回一个元素。我在我的每一个jQuery插件中都遵守这一条。

$.fn.wPaint = function(settings)  {
return this.each(function()  {
var elem = $(this);
//run some code here
}
}

4. 一次性代码放在主循环以外

这一条很重要,但是常常被忽略。简单的讲,如果你有一段代码是一堆默认值,只需要被实例化一次,而不是每次调用你插件功能的时候都实例化,你应该把这段代码放在插件方法的外面。这样可以让你的插件运行的更高效,节省内存。

var defaultSettings = {
mode            : 'Pencil',
lineWidthMin    : '0',
lineWidthMax    : '10',
lineWidth       : '2' };
settings = $.extend({}, defaultSettings, settings || {});

$.fn.wPaint = function(settings)  {
return this.each(function()  {
var elem = $(this);
//run some code here
}
}

你可以注意到,上面代码中的“defaultSettings”是完全在插件方法外面的,由于这些代码是在闭包里面,我们不用担心这些变量被重写。

5. 为什么要设置 Class Prototyping

作为你代码的血与肉,方法和函数应该放在prototype函数内。有两个原因:

  •  它可以节省很多内存,因为可以不用重复创建这些方法。

  •  引用一个现成的方法比重新创建一个好快很多。

简单的说,prototype就是扩展了一个对象,为它提供方法,而不用在每一个对象中实例化这些方法。这也让你的代码更有条理和高效。一旦你习惯这种开发方式,你会发现它在你将来的项目中为你节省了很多时间。

6. 如何设置 Class Prototyping

设置一个 prototype 方法有两个部分。首先我们需要创建我们最初的类定义,在多数情况下这就意味着创建一个对象。这个定义包含了每一个对象实例都不同的部分。在我的Paint jQuery Plugin 插件中,我是这么写的:

function Canvas(settings)  {
this.settings = settings;
this.draw = false;
this.canvas = null;
this.ctx = null;
return this;  }

下面来添加全局的方法:

Canvas.prototype =  {
generate: function() {
//generate code
}
}

这里的关键是要让prototype的方法是通用的,但是数据是每个实例自己的,可以用“this”引用。

7. 使用 “this” 对象

通过使用“$this”,我们可以向别的闭包传递正确的引用。我们也可能需要向别的方法传入 $this 引用。需要注意的是, $this 这个名字是可以改的,任意的变量名都可以。

Canvas.prototype =  {
generate: function()   {
//some code
var $this = this;
var buton = //...some code
button.click(function(){
//using this will not be found since it has it's own this
//use $this instead.
$this.someFunc($this);
});
},

someFunc: function($this)      {
//won't know what "this" is.
//use $this instead passed from the click event
}
}

8. 在每一个对象中保存设置

我一直在每一个对象中保存自己的设置,然后操作它自己的设置。这样你就不用在不同的方法中传递很多参数。把这些变量放在对象中,也方便你在其他地方调用这些变量。

function Canvas(settings)  {
this.settings = settings;
return this;
}

9. 分离你的Prototype方法逻辑

这可能是一个基本的原则。当你在犹豫是否需要提供一个方法的时候,你可以问你自己 “如果其他人要重写这个方法的话,你的代码是否能满足他的需求?”或者“别人来写这个方法有多困难?”。当然这是一个灵活性拿捏的问题。这里列出了我的Color Picker jQuery Plugin 的方法,你可以参考一下:

generate()
appendColors()
colorSelect()
colorHoverOn()
colorHoverOff()
appendToElement()
showPalette()
hidePalette()

10. 提供 Setter/Getter 选项

这一条不是必须的,但是我发现我所有的插件都包用到了这一条。因为它只需要一点点代码,就能为别人提供一个他可能需要的功能。

基本上,我们只要让开发者能够设置或者获取元素已经存在的值:

var lineWidth = $("#container").wPaint("lineWidth");  $("#container").wPaint("lineWidth", "5");

总结:以上十条基本上覆盖了jQuery插件开发的核心,并且可以作为开发的模板。有一套基本的代码可以极大的缩短你的开发时间,并且能够让你设计插件架构的时候更自信

QQ群:WEB开发者官方群(515171538),验证消息:10000
微信群:加小编微信 849023636 邀请您加入,验证消息:10000
提示:更多精彩内容关注微信公众号:全栈开发者中心(fsder-com)
网友评论(共0条评论) 正在载入评论......
理智评论文明上网,拒绝恶意谩骂 发表评论 / 共0条评论
登录会员中心
  • 苹果高管驳斥iPhone计划报废说 iOS 12就是证据 2019-02-16
  • 江西省第33届“爱鸟周”正式启动 2019-02-16
  • 现阶段人民是指全体社会主义劳动者、社会主义事业的建设者、拥护社会主义的爱国者和拥护祖国统一的爱国者。[哈哈] 2019-02-16
  • “有个景区叫宁夏”2018景区推介及产品政策在太原发布 2019-02-15
  • 重庆私藏的绝美古镇 悠闲不打挤 2019-02-15
  • 候选企业:国家开发银行 2019-02-14
  • 湖南省益阳市牵手第十二师二二一团举办“湘疆情深 爱洒兵团”捐赠仪式 2019-02-14
  • 88rising首张合辑即将发布 当红鬼才们的盛夏狂欢亚洲 文化 2019-02-14
  • 《中国国家地理》杂志社在拉萨林周县举行“黑颈鹤观察拍摄基地”授牌仪式文章中国国家地理网 2019-02-14
  • 随着科技的发展,人们获得信息的渠道越来越多,越来越方便。刘少奇同志说过:“你们的笔,是人民的笔,你们是党和人民的耳目喉舌。”愿人民日报做好党和人民的喉舌,越办越 2019-02-13
  • 从“掌握核心科技”到“创造核心科技” “自主”是格力的秘诀 2019-02-13
  • 曼谷车展遇见门罗 电动摩托也能很有范儿 2019-02-13
  • 杭州退役女狙击手爱上摩旅 曾“单骑”出国游老挝 2019-02-13
  • 镌刻下更美好的记忆(我与人民日报·纪念人民日报创刊70周年) 2019-02-12
  • 2018首届中国书画春节联欢晚会在京举行  2019-02-12
  • 124| 551| 454| 888| 170| 980| 570| 262| 709| 420|