本页二维码,扫一扫分享到朋友圈
朋友圈

jQuery面向对象的写法


阅读173 评论0 赞 42返回首页    go 编程与技术  go javascript



前言

作为前端开发者,一般的简单逻辑可能已经习惯了运用面向函数的编程方法,今天主要看看jQuery中的面向对象的写法,其实原生的也是差不多的。


面向对象的写法

这里以一个播放器组件为例子,通过定义一个jQuery的全局对象来引用它:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

(function(jq, g){

functionVideoDialog(){

//执行初始化

returnthis.init.apply(this,arguments);

}

varvPro = VideoDialog.prototype;

varmaskObj = jq.showComMask();

//定义UI相应的html。至于css则在对应的css文件中去定义

vartpl ='<div class="u-video-dialog" id="j-videoDialog">\

<div class="title">\

<h3>视频介绍</h3>\

<a class="close" id="j-close"></a>\

</div>\

<div class="video-box" id="j-videoBox">\

</div>\

</div>';

vPro.init =function(data){

if(!data){

return;

}

//统一定义变量

this.tpl = $(tpl);

this.videoBoxNode =this.tpl.find('#j-videoBox');

this.closeBtnNode =this.tpl.find('#j-close');

jq.cloudPlayer({

parent: $(this.videoBoxNode),

autoStart:true,

resolutions:{

hdfile: data.url

},

sdMp4Url:'http://video.study.163.com/edu-video/nos/mp4/2014/11/26/876018_hd.mp4',

});

vartop = ((jq(window).height() -450)/2+ (jq(document).scrollTop() ||0));

this.tpl.css({'top':top});

this.bindEvent();

}

//定义各种方法

vPro.bindEvent =function(){

varthat =this;

$(this.closeBtnNode).click(function(){

that.remove();

})

};

vPro.remove =function(){

$(this.tpl).remove();

maskObj.removeMask();

};

vPro.show =function(){

maskObj.show();

$(document.body).append(this.tpl);

};

//最后挂到全局对象jq中去

jq.showVideoDialog =function(data){

return(newVideoDialog(data)).show();

};

})(jQuery,window);

引入该文件后,直接通过jq.showVideoDialog(data),就可以进行调用了。


  上一篇:go javascript的api设计技巧
  下一篇:go 浏览器javascript跨域问题解决办法


评论


用QQ登录管理/创建网站 用微博登录管理/创建网站   发布于:11-19