JavaScript面向对象分层思维全面解析
JavaScript面向对象分层思维全面解析
码农般的学良 发表于1年前
JavaScript面向对象分层思维全面解析
  • 发表于 1年前
  • 阅读 6
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

这篇文章主要介绍了JavaScript面向对象分层思维,js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想。下文关于js面向对象知识给大家介绍的非常详细,感兴趣的朋友一起看看吧

js本身不是面向对象语言,在我们实际开发中其实很少用到面向对象思想,以前一直以为当要复用的时候才封装成对象,然而随着现在做的项目都后期测试阶段发现面向对象的作用不仅仅只是复用,可能你们会说面向对象还有继承,多态的概念,但在javascript里面多态的概念是不存在,而继承由于web页面的必须先下载js在运行导致js的继承不能像后台那么灵活而且js没有重载以及重写不方便(而且js中重写的意义不是很大),所以在js中很少用到面向对象,可能在一些插件中会看到对象的写法,写js的都会有同样的感觉在写一个插件的时候一般是先用面相过程把插件功能写出来,然后在重构改成对象的方法.但在实际项目开发中要求时间进度和开发成本很少会有那么宽松的时间让你先用面向过程实现功能在重构.实际开发中我们基本都是用面相过程写完就直接提交了.

这种写法发现一个问题就是,当你把这个页面的写完了之后过一段时间突然这个页面的功能需求或是页面布局要调整,你在看这个页面的代码,一下很难快速的把整个页面的代码逻辑步骤梳理清楚,我相信很多写前端都要同感吧! 举个例子:我几年前写的放大镜插件,现在我在放出来发现我写的这个插件在谷歌浏览器第一次渲染的时候没有效果,代码如下:

/// <reference path="../jquery11.js" />

(function ($) {

$.fn.extend({

jqoom: function (potions) {

var settings = {

width: 350,

height: 350,

position: "right"

}

if (potions) {

$.extend(settings, potions);

}

var ImgUrl = $("img", this).attr("src");

var ImgMinWidth = $("img", this).width();

var ImgMinHeigth = $("img", this).height();

var ImgWidth = 0;

var ImgHeight = 0;

var de = true;

$(this).hover(function (e) {

}, function () {

$("#jqoomz").remove();

$(document).unbind("mousemove");

$("#jqoomy").remove();

de = true;

});

$("img", this).hover(function (e) {

var pagex = e.x || e.pageX;

var pagey = e.y || e.pageY;

var pagex1 = 0;

var pagey1 = 0;

var leftcha = 0;

var topcha = 0;

_this = $(this).parents("div");

if ($("#jqoomz").length == 0) {

_this.after("<div id='jqoomz'></div>");

var obj = new Image();

obj.src = ImgUrl;

obj.onload = function () {

if (de && obj.height > 0) {

de = false;

ImgWidth = obj.width;

ImgHeight = obj.height;

finder.call(_this.find("img")[0]);

}

};

$("#jqoomz").width(settings.width).height(settings.height).offset({

left: $(_this).outerWidth() + $(_this).offset().left,

top: $(_this)[0].offsetTop

}).append($("<img></img>").attr("src", ImgUrl));

if (de && obj.height > 0) {

de = false;

ImgWidth = obj.width;

ImgHeight = obj.height;

finder.call(this);

}

}

function mover(event) {

var pagex2 = event.x || event.pageX;

var pagey2 = event.y || event.pageY;

if (parseInt(pagex2 + leftcha) <= parseInt($(_this).width() + $(_this).offset().left) && pagex2 >= leftcha + $(_this).offset().left) {

$(this).offset({left: pagex2 - leftcha});

} else {

if (parseInt(pagex2 + leftcha) > parseInt($(_this).width() + $(_this).offset().left) && pagex2)

$(this).offset({left: $(_this).width() + $(_this).offset().left - leftcha * 2});

else

$(this).offset({left: $(_this).offset().left});

}

if (parseInt(pagey2 + topcha) <= parseInt($(_this).height() + $(_this).offset().top) && pagey2 >= topcha + $(_this).offset().top) {

$(this).offset({top: (pagey2 - topcha)});

//document.getElementById("move").style.top = (pagey2 - (this.pagey - this.divtop)).toString() + "px";

} else {

if (parseInt(pagey2 + topcha) > parseInt($(_this).height() + $(_this).offset().top))

$(this).offset({top: ($(_this).height() + $(_this).offset().top - topcha * 2)});

//document.getElementById("move").style.top = (this.height - this.divHeight).toString() + "px";

else

$(this).offset({top: $(_this).offset().top});

//document.getElementById("move").style.top = "0px"

}

var bilx = ($(this).offset().left - $(_this).offset().left) / (ImgMinWidth / ImgWidth);

var bily = ($(this).offset().top - $(_this).offset().top) / (ImgMinHeigth / ImgHeight);

$("#jqoomz img").css({"margin-left": -bilx, "margin-top": -bily});

}

function finder() {

if (parseFloat($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth)) >=

parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) && parseFloat(pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) >=

parseFloat($(this).offset().top)) {

pagey1 = (pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2);

} else {

if ((pagey - ImgMinHeigth / ImgHeight * ImgMinHeigth / 2) < $(this).offset().top) {

pagey1 = $(this).offset().top;

} else {

pagey1 = ($(this).offset().top + $(this).height() - (ImgMinHeigth / ImgHeight * ImgMinHeigth));

}

}

if (($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth) >=

(pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) && (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) >=

$(this).offset().left) {

pagex1 = (pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2);

} else {

if ((pagex - ImgMinWidth / ImgWidth * ImgMinWidth / 2) < $(this).offset().left) {

pagex1 = $(this).offset().left;

} else {

pagex1 = ($(this).offset().left + $(this).width() - ImgMinWidth / ImgWidth * ImgMinWidth);

}

}

leftcha = ImgMinWidth / ImgWidth * ImgMinWidth / 2;

topcha = ImgMinHeigth / ImgHeight * ImgMinHeigth / 2;

if ($("#jqoomy").length == 0) {

$(this).after("<div id='jqoomy'></div>")

.siblings("#jqoomy")

.addClass("jqoomy").show()

.width((ImgMinWidth / ImgWidth * ImgMinWidth))

.height((ImgMinHeigth / ImgHeight * ImgMinHeigth)).offset({

top: pagey1,

left: pagex1

});

}

$(document).on("mousemove", $.proxy(mover, $("#jqoomy")));

}

}, function () {

});

}

});

})(jQuery);

html:

?

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

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>

<script src="jquery11.js"></script>

<script src="OppJqoom.js"></script>

<style type="text/css">

.jqoom

{

width: 350px;

height: 350px;

border: solid 1px #DFDFDF;

z-index: 10;

}

.jqoom img

{

cursor: pointer;

z-index: 10;

max-height: 350px;

max-width: 350px;

}

.jqoomy

{

background-color: white;

position: relative;

z-index: 999;

opacity: 0.5;

cursor: pointer;

border: solid 1px #DFDFDF;

}

#jqoomz

{

border: solid 1px #DFDFDF;

position: absolute;

overflow: hidden;

}

.lef

{

border: 1px solid #DFDFDF;

display: block;

height: 72px;

line-height: 72px;

text-align: center;

text-decoration: none;

width: 10px;

background-color:#EBEBEB;

float:left;

}

.lef:hover

{

color:red;

}

.jqooz

{

float:left;

width:352px;

margin-top:20px;

}

.jqooz ul

{

float: left;

margin: 0;

padding: 0;

width:328px;

height:72px;

}

.jqooz ul li

{

display: inline;

list-style: none outside none;

margin: 0 10px;

}

.jqooz ul li img

{

border: 1px solid #DFDFDF;

max-height: 72px;

max-width: 120px;

}

.jqooz ul li img:hover

{

border: 1px solid #ff6600;

}

</style>

<script type="text/javascript">

$(function () {

$(".jqoom").jqoom();

});

</script>

</head>

<body>

<div class="jqoom">

<img src="b3.jpg" />

</div>

<div class="jqooz">

<a href="javascript:void(0)" class="lef"><</a>

<ul>

<li><a>

<img src="b3.jpg" /></a></li>

</ul>

<a href="javascript:void(0)" class="lef">></a>

</div>

</body>

</html>

共有 人打赏支持
粉丝 2
博文 20
码字总数 23265
×
码农般的学良
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: