文档章节

JavaScript面向对象分层思维全面解析

码农般的学良
 码农般的学良
发布于 2016/11/23 11:49
字数 1344
阅读 41
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

这篇文章主要介绍了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>

© 著作权归作者所有

码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
私信 提问
加载中

评论(0)

想自学JS吗?想提升JS底层原理吗?76张脑图带你彻底搞懂原生JS

"不畏惧,不讲究,未来的日子好好努力"——大家好!我是小芝麻😄 在默默的更新了一段时间的文章后,小芝麻决定励志成为一个标题党😄 别走,别走,别走啊😭..... 搞错了,下面我们正式开...

金色小芝麻
05/22
0
0
JavaScript 为什么快--第二篇

上一篇,我们介绍了 V8 引擎的执行管道架构。本篇将着重介绍 V8 的语法解析过程。原视频 上一篇是产品经理思维;本篇则是理工科思维; 语法解析阶段对于前端来说尤其重要,相对 Noder 来说较...

秦粤
2018/08/10
0
0
全面理解面向对象的 JavaScript

简介: JavaScript 函数式脚本语言特性以及其看似随意的编写风格,导致长期以来人们对这一门语言的误解,即认为 JavaScript 不是一门面向对象的语言,或者只是部分具备一些面向对象的特征。本...

IBMdW
2013/04/21
1.5K
6
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║ Vue前篇:ES6初体验 & 模块化编程

缘起 昨天说到了《[从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this](https://www.cnblogs.com/laozhang-is-phi/p/9580807.html)》,通过总体来看,好像大家...

laozhang_is_phi
2018/09/05
0
0
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础:ES6初体验 & 模块化编程

缘起 昨天说到了《从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this》,通过总体来看,好像大家对这一块不是很感兴趣,嗯~~这一块确实挺枯燥的,不能直接拿来...

osc_715mam6n
2018/09/05
2
0

没有更多内容

加载失败,请刷新页面

加载更多

apache服务器 --Internal Server Error(内部服务错误)

问题显现: 首先,我先展示一下错误提示代码: Internal Server ErrorThe server encountered an internal error or misconfiguration and was unable to complete your request. Ple......

二营长意大利炮
33分钟前
15
0
唱作俱佳,腾讯AI艾灵领唱中国新儿歌

唱作俱佳,腾讯AI艾灵领唱中国新儿歌 今年六一儿童节,腾讯联合北京荷风艺术基金会发起“腾讯荷风艺术行动”,给孩子们送上两份礼物,为音乐美学中国素质教育的发展做出贡献。 其中一份就是由...

腾讯技术资讯
35分钟前
39
0
BeetlSQL3.0 难搞

最近想支持一下nosql,难搞,每个nosql server,都很难一天掌握安装和基础用法,所以先决定选用clickhouse ,apache drill (操作文件),Cassandra,这三个下手 hadoop系列也挺好的,但确实没时...

闲大赋
35分钟前
26
0
生产计划体系学习

生产计划的内容: 1、生产的最终产品与零部件数量 2、生产的批量和产出时间 3、产品产出的日程计划 生产计划编制思路,按照分层次来进行的 1、主生产计划(MPS) 2、零部件生产计划(MRP) ...

旺仔没馒头
36分钟前
19
0
如何使用Maven创建具有依赖项的可执行JAR? - How can I create an executable JAR with dependencies using Maven?

问题: I want to package my project in a single executable JAR for distribution. 我想将我的项目打包在一个可执行的JAR中进行分发。 How can I make a Maven project package all depen......

javail
39分钟前
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部