文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/23 11:49
字数 1344
阅读 13
收藏 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
通州
私信 提问
JavaScript 为什么快--第二篇

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

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

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

IBMdW
2013/04/21
1K
6
图书团购-《编写高质量代码》【已售罄】

基本信息: 作者: 曹刘阳;出版社:机械工业出版社;出版日期:2010 年7月;页码:281。 图书简介: 本书以网站重构为楔子,深刻而直接地指出了Web前端开发中存在的重要问题—代码难以维护。...

老枪
2010/09/14
3K
65
从壹开始前后端分离 [ 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
09/05
0
0
2014年值得学习的编程语言书

经过数据分析和研究 Jobs Tractor 的 45000 个开发人员招聘职位数据,我们得到了上图的结果: 自上一年,主要的变化如下: PHP和Java换了位置,但是仍旧是高居不下 Java的Android已经取代了S...

modernizr
2014/05/22
15.6K
16

没有更多内容

加载失败,请刷新页面

加载更多

URL访问网站的网络传输全过程

打开浏览器,在地址栏输入URL,回车,出现网站内容。这是我们几乎每天都在做的事,那这个过程中到底是什么原理呢?HTTP、TCP、DNS、IP这些耳熟能详的名词都在什么时候起着什么作用呢?在这里...

MrBoyce
7分钟前
0
0
都9102年了,还不会Docker?10分钟带你从入门操作到实战上手

Docker简述 Docker是一种OS虚拟化技术,是一个开源的应用容器引擎。它可以让开发者将应用打包到一个可移植的容器中,并且该容器可以运行在几乎所有linux系统中(Windows10目前也原生支持,W...

公众号_Zack说码
7分钟前
1
0
day175-2018-12-12-英语流利阅读-待学习

日本报纸修改二战“慰安妇”描述,引发众怒 雪梨 2018-12-12 1.今日导读 第二次世界大战期间,日本肆意侵略其他国家,所到之处,无数妇女沦为日本士兵肆意践踏的对象。半个多世纪过去了,面对...

飞鱼说编程
9分钟前
1
0
TiDB 源码阅读系列文章(二十一)基于规则的优化 II

在 TiDB 源码阅读系列文章(七)基于规则的优化 一文中,我们介绍了几种 TiDB 中的逻辑优化规则,包括列剪裁,最大最小消除,投影消除,谓词下推和构建节点属性,本篇将继续介绍更多的优化规...

TiDB
15分钟前
0
0
mysql 时间格式化

DATE_FORMAT

1713716445
21分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部