ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化
继承深入
这两种方式继承不够合理(为什么)
将实例作为子类的原型
在子类的构造函数内部借用父类的构造函数
将父类的原型作为子类的原型(会修改父类的原型)
css圣杯布局(左右宽度固定、中间自适应)
目标效果
左中右div左浮动、相对定位(一行显示,宽度由内容撑开)
中间宽度100%:铺满整行
左left设置为自己宽度的负值
中间上移
给main(外部容器)加padding
右加负左外边距,右上移至同行,中、右重叠
右设置left
中间内容增加时
给左中右设置很大的下内外边距
main清除浮动
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {padding: 50px;}.wrap {border: 1px solid #000;width: 80%;}.top,.foot {height: 50px;background-color: pink;}.main {padding: 0 50px;overflow: hidden;}.main .left,.main .content,.main .right {float: left;position: relative;background-color: cornflowerblue;width: 50px;padding-bottom: 2000px;margin-bottom: -2000px;}.main .content {background-color: crimson;width: 100%;margin-left: -50px;}.main .left {left: -50px;}.main .right {margin-left: -50px;left: 50px;}</style>
</head><body><div class="wrap"><div class="top"></div><div class="main"><div class="left">123</div><div class="content">456<br>556</div><div class="right">789</div></div><div class="foot"></div></div><script type="text/javascript"></script>
</body></html>
JS圣杯模式
- 用buffer实例来隔绝父构造函数的原型和子构造函数的实例
- 封装
- 自执行函数里 隔绝作用域
var inherit = (function () {function Buffer() { }function inherit(Target, Origin) {Buffer.prototype = Origin.prototypeTarget.prototype = new Buffer()Target.prototype.constructor = TargetTarget.prototype.super_class = Origin}return inherit
})();
function Teacher() {this.tName = 't'
}
function Student() {this.sName = 's'
}
inherit(Student,Teacher)
console.log(new Student())
var inherit = (function () {function Buffer() { }function inherit(Target, Origin) {Buffer.prototype = Origin.prototypeTarget.prototype = new Buffer()Target.prototype.constructor = TargetTarget.prototype.super_class = Origin}return inherit
})();
var Common = function () {}
// 继承父类原型上的属性和方法 实例中的属性和方法则不继承
Common.prototype = {time: '8小时',range: '周一至周五'
}
Common.prototype.printFn = function () {console.log(this.name + ":每天工作" + this.time + ',工作时间' + this.range)
}
var Worker = function (name) {this.name = name
}
inherit(Worker, Common)
var p1 = new Worker('桐壶更衣')
console.log(p1)
var p2 = new Worker('紫姬')
p1.printFn()
p2.printFn()
用于多人协作开发、模块化开发,有自己的命名空间,作用域和外界隔离了。在多人协作时,能防止全局污染。
模块化开发、初始自执行
- 创造独立作用域空间
- 将函数保存在GO、随时调用
window.onload = function () {init()
}
function init() {console.log(initFb(10))console.log(initDiv(100))
}
// 协同开发
var initFb = (function () {function fb(n) {if (n <= 0) {return 0} else if (n <= 2) {return 1} else {return fb(n - 1) + fb(n - 2)}}return fb
})();
var initDiv = (function () {function div(n) {var arr = []for (var i = 0; i <= n; i++) {if (i % 3 == 0 || i % 5 == 0 || i % 7 == 0) {arr.push(i)}}return arr}return div
})();
ES5-12 【utils】继承深入、call、apply、圣杯模式、模块化相关推荐
- 7种方法实现ES5中的继承
7种方法实现ES5中的继承 1.借用构造函数继承父类属性 步骤 实现示例 优缺点 2.利用原型对象继承父类方法 步骤 实现示例 优缺点 3.组合继承 步骤 实现示例 优缺点 4.寄生式继承 步骤 实现 ...
- 12. 星际争霸之php设计模式--模板模式
题记 ============================================================================== 本php设计模式专辑来源于博客(jy ...
- R语言︱数据集分组、筛选(plit – apply – combine模式、dplyr、data.table)
R语言︱数据集分组 大型数据集通常是高度结构化的,结构使得我们可以按不同的方式分组,有时候我们需要关注单个组的数据片断,有时需要聚合不同组内的信息,并相互比较. 一.日期分组 1.关于时间的包都有很多 ...
- 四旋翼飞行器12——飞控接收机的三种接收模式
四旋翼飞行器12--飞控接收机的三种接收模式 文章目录 四旋翼飞行器12--飞控接收机的三种接收模式 一.PWM型 二.PPM型 三.SBUS 无线遥控就是利用高频无线电波实现对模型的控制.如天地飞的 ...
- c语言 整数除以分数,3.12数学与应用数学专业人才培养模式改革创新的具体措施与.PDF...
3.12 数学与应用数学专业人才培养模式改革创新的具体措施与实施效果 人才培养模式集中体现办学思想和办学理念,实是教育观念.培养目标. 培养规格和培养方式多层面结合的产物,涉及人才培养模式设计.课程设 ...
- ES5和ES6继承的区别
ES5的继承方法可以看这篇: https://blog.csdn.net/qq593249106/article/details/83098432 ES5与ES6的继承方法对照: ES5 functi ...
- ES5 和ES6 继承机制
为什么80%的码农都做不了架构师?>>> ES5 的继承,实质是先创造子类的实例对象this,然后再将父类的方法添加到this上面(Parent.apply(this)).ES ...
- javaScript(ES5)中想方设法继承家产的方式详解
目录 前言 一.原型链继承 原型链继承的概念 原型链继承的不足 二.借用构造函数继承 借用构造函数继承的概念 利用构造函数继承的不足 三.组合继承(原型链继承+构造函数继承) 组合继承的概念 组合继承 ...
- (语法糖)ES6类class声明类的方式 -ES5类声明继承
本文将从以下几方面介绍类与继承 类的声明与实例化 如何实现继承 继承的几种方式 类的声明与实例化 类的声明一般有两种方式 // es5和es6声明类的区别,es5没有统一语法规范.es6有统一写法规范 ...
最新文章
- linux webrtc浏览器,WebRTC 浏览器支持
- python学习费用-python学习,是看免费视频自学,还是报个收费班学习好?
- in the java search_LeetCode第[33]题(Java):Search in Rotated Sorted Array
- 剑指Offer #09 变态跳台阶(数列推导)
- 三层架构介绍和MVC设计模型介绍
- 如何将二维数组作为函数的参数传递
- 实习生解雇_我们解雇了我们的顶尖人才。 我们做出的最佳决定。
- 如果有一天不做程序员了,还能入什么行业?
- php7 电子书 下载,php7.3.8中文电子手册
- php开源 饭馆记账软件_个人记账软件 - 开源免费
- 记录一款绿色便携的sqlist3数据库编辑工具SQLiteSpy
- ORA-01122 ORA-01207问题
- MEM/MBA数学强化(03)整式与分式的运算
- kinetis晶体谐振器到底要不要加电容和电阻
- vb.net将excel表格数据填加到Listbox控件中并去重复选项
- 04747_Java语言程序设计(一)_第3章_面向对象编程基础
- 优启通制作系统u盘_优启通u盘制作工具-easyu优启通2020官方下载-独木成林
- WLAN 无线网络 09 - 管理帧 zz
- 友盟------微信分享圆角图片有黑色背景 最终解决方案!!!
- 特别的用法、特殊的含义(专有名词)
热门文章
- java random产生随机数_java的三种随机数生成方式,必掌握
- android程序root权限,android – 如何从源代码授予对特定应用程序的root访问权限而不是root权限?...
- tcp 三次握手与四次挥手_TCP三次握手与四次挥手详解
- GameObject数组逐渐消失
- 定义[nextTick、事件循环]
- PAT 1007 Maximum Subsequence Sum
- H5项目开发分享——用Canvas合成文字
- 对话jQuery之父John Resig:JavaScript的开发之路
- 某项目要调用现有的100多个DLL 一 开始
- 向mvc controller传递json数组