文档章节

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

码农般的学良
 码农般的学良
发布于 2016/11/23 11:49
字数 1344
阅读 9
收藏 0
点赞 0
评论 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

前言 《你不知道的 javascript》是一个前端学习必读的系列,让不求甚解的JavaScript开发者迎难而上,深入语言内部,弄清楚JavaScript每一个零部件的用途。本书介绍了该系列的两个主题:“作用...

程序员解决师 ⋅ 05/29 ⋅ 0

thinkphp模型层Model、Logic、Service讲解

thinkphp模型层Model、Logic、Service讲解 时间:2014-08-24 15:54:56 编辑:一切随缘 文章来源:php教程网 已阅读:771 次 js特效源码,就从这里开始 我有疑问【PHP186论坛提问】 jS游戏桌球...

thinkyoung ⋅ 2015/09/01 ⋅ 0

面向对象,更适合JavaScript

面向对象程序设计是软件开发中一个很庞大很复杂的话题,它并不是仅仅学会类、继承、封装、多态这些面向对象编程语法元素就表示掌握的,这些语法元素只是实现面向对象程序的工具, 就像砖块、...

陈宏鸿 ⋅ 05/07 ⋅ 0

JSON,异步加载(学习笔记)

JSON是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来数据传输的,前端与后端的数据通信) JSON是静态类(不需要构造),类似于Math,内部...

Mrs_CoCo ⋅ 04/23 ⋅ 0

基于JS的高级脚本语言 - Sara

Sara-基于JS的高级脚本语言 欢迎使用Sara,Sara是一款基于JavaScript的全新的高级脚本语言! Sara不像我们工作室上一款编程语言作品-Ginit一样,他属于更高级的语言 Sara全面支持高级函数,并...

Skyogo ⋅ 04/15 ⋅ 0

趣谈js的call和apply两大召唤术

前言 在《趣谈js的bind牌胶水》这篇文章中,我聊到了js的bind胶水,这篇文章我来聊聊js的call和apply这对孪生兄弟。 Why? ——> 为什么会出现apply和call? 在《趣谈js的bind牌胶水》中,我...

hanmin ⋅ 05/21 ⋅ 0

学习Javascript的8张思维导图

分别归类为:  javascript变量  javascript运算符  javascript数组  javascript流程语句  javascript字符串函数  javascript函数基础  javascript基础DOM操作  javascript正则表达式...

thinkyoung ⋅ 2014/09/23 ⋅ 0

前端要以正确的姿势学习编译原理(上篇)

前端要以正确的姿势学习编译原理(上篇) 发布于 02:05 文章被以下专栏收录

brambles ⋅ 05/22 ⋅ 0

go做静态资源服务器(http2,https),前端无法正常解析js

问题: 想尝试一下golang的http2功能,但是遇到一个问题, js文件无法正常解析... go version go1.10.2 windows/amd64 详情: 后端代码 前端代码: 项目结构: 不能正常解析的情况 前端错误信息: R...

漂泊的树叶 ⋅ 06/05 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Redis 单线程 为何却需要事务处理并发问题

Redis是单线程处理,也就是命令会顺序执行。那么为什么会存在并发问题呢? 个人理解是,虽然redis是单线程,但是可以同时有多个客户端访问,每个客户端会有 一个线程。客户端访问之间存在竞争...

码代码的小司机 ⋅ 27分钟前 ⋅ 0

到底会改名吗?微软GVFS 改名之争

微软去年透露了 Git Virtual File System(GVFS)项目,GVFS 是 Git 版本控制系统的一个开源插件,允许 Git 处理 TB 规模的代码库,比如 270 GB 的 Windows 代码库。该项目公布之初就引发了争...

linux-tao ⋅ 37分钟前 ⋅ 0

笔试题之Java基础部分【简】【二】

1.静态变量和实例变量的区别 在语法定义上的区别:静态变量前要加static关键字,而实例变量前则不加。在程序运行时的区别:实例变量属于某个对象的属性,必须创建了实例对象,其中的实例变...

anlve ⋅ 53分钟前 ⋅ 0

Lombok简单介绍及使用

官网 通过简单注解来精简代码达到消除冗长代码的目的 优点 提高编程效率 使代码更简洁 消除冗长代码 避免修改字段名字时忘记修改方法名 4.idea中安装lombnok pom.xml引入 <dependency> <grou...

to_ln ⋅ 今天 ⋅ 0

【转】JS浮点数运算Bug的解决办法

37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.08499999999998 怎么会这样,两个只有一位小数的数字相乘,怎...

NickSoki ⋅ 今天 ⋅ 0

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 今天 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 今天 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 9

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部