面向工具仅仅是一个观点或者编程思想

通过一种叫做原型的办法来实现面向工具编程

1、 创建工具(自定义工具,内置工具)

html双击选中JavaScript第四章 CSS

基于Object工具的办法创建工具-自定义工具

示例:

var 工具名称=new Object( );

var flower=new Object();

flower.name="长春花";

flower.genera="夹竹桃科 长春花属";

flower.area="非洲、亚热带、热带以及中国大陆的华东、西南、中南等地";

flower.uses="不雅观赏或用药等";

flower.showName=function(){ alert(this.name); }

flower.showName();

常见的内置工具

String（字符串）工具

Date（日期）工具

Array（数组）工具

Boolean（逻辑）工具

Math（算数）工具

RegExp工具

二、

如何办理利用同一个接口不须要创建很多工具，减少产生大量的重复代码？

1、布局函数:

function Flower(name,genera,area,uses){

this.name=name;

…….

this.showName=function(){

alert(this.name);

}

}

var flower1=new Flower("长春花","夹竹桃科 长春花属","非洲、亚热带、热带以及中国大陆的华东、西南、中南等地","不雅观赏或用药等")

flower1.showName();

2、原型工具:

function Flower(){

}

Flower.prototype.name="曼陀罗花";

Flower.prototype.genera="茄科 曼陀罗属";

Flower.prototype.area="印度、中国北部";

Flower.prototype.uses="不雅观赏或药用";

Flower.prototype.showName=function() {

alert(this.name);

}

var flower1=new Flower();

flower1.showName();

var flower2=new Flower();

flower2.showName();

alert(flower1.showName==flower2.showName);

三、继续

1.原型链:一个原型工具是另一个原型工具的实例

干系的原型工具层层递进，就构成了实例与原型的链条，便是原型链

示例:

function Humans(){

this.foot=2;

}

Humans.prototype.getFoot=function(){

return this.foot;

}

function Man(){

this.head=1;

}

Man.prototype=new Humans(); //继续了Humans

Man.prototype.getHead=function(){

return this.head;

}

var man1=new Man();

alert(man1.getFoot()); //2

alert(man1 instanceof Object); //true

alert(man1 instanceof Humans); //true

alert(man1 instanceof Man); //true

2.工具继续:

function Humans(){

this.clothing=["trousers","dress","jacket"];

}

function Man(){ }

//继续了Humans

Man.prototype=new Humans();

var man1=new Man();

man1.clothing.push("coat");

alert(man1.clothing);

var man2=new Man();

alert(man2.clothing);

3.组合继续:

组合继续：有时也叫做伪经典继续

将原型链和借用布局函数的技能组合到一块，发挥二者之长的一种继续模式

利用原型链实现对原型属性和方法的继续，而通过借用布局函数来实现对实例属性的继续

四、这一章的示例代码:

<html>

<head>

<title>面向工具标题栏更换和修正</title>

</head>

<style>

{

margin: 0;

padding: 0;

}

ul li {

list-style: none;

}

main {

width: 960px;

height: 500px;

border-radius: 10px;

margin: 50px auto;

}

main h4 {

height: 100px;

line-height: 100px;

text-align: center;

}

.tabsbox {

width: 900px;

margin: 0 auto;

height: 400px;

border: 1px solid lightsalmon;

position: relative;

}

nav ul {

overflow: hidden;

}

nav ul li {

float: left;

width: 100px;

height: 50px;

line-height: 50px;

text-align: center;

border-right: 1px solid #ccc;

position: relative;

}

nav ul li.liactive {

border-bottom: 2px solid #fff;

z-index: 9;

}

#tab input {

width: 80%;

height: 60%;

}

nav ul li span:last-child {

position: absolute;

user-select: none;

font-size: 12px;

top: -18px;

right: 0;

display: inline-block;

height: 20px;

}

.tabadd {

position: absolute;

/ width: 100px; /

top: 0;

right: 0;

}

.tabadd span {

display: block;

width: 20px;

height: 20px;

line-height: 20px;

text-align: center;

border: 1px solid #ccc;

float: right;

margin: 10px;

user-select: none;

}

.tabscon {

width: 100%;

height: 300px;

position: absolute;

padding: 30px;

top: 50px;

left: 0px;

box-sizing: border-box;

border-top: 1px solid #ccc;

}

.tabscon section,

.tabscon section.conactive {

display: none;

width: 100%;

height: 100%;

}

.tabscon section.conactive {

display: block;

}

</style>

<body>

<main>

<h4>

JS面向工具 动态添加标签页

</h4>

<div class="tabsbox" id="tab">

<!-- tab标签 -->

<nav class="fisrstnav">

<ul>

<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span> </li>

<li><span>测试2</span><span class="iconfont icon-guanbi"></span> </li>

<li class="liactive"><span>测试3</span><span class="iconfont icon-guanbi"></span> </li>

</ul>

<div class="tabadd">

<span>+</span>

</div>

</nav>

<!-- tab内容 -->

<div class="tabscon">

<section class="conactive">测试1</section>

<section>测试2</section>

<section>测试3</section>

</div>

</div>

</main>

</body>

<script>

var that;

class Tab {

constructor(id) {

// 获取元素

that = this;

this.main = document.querySelector(id);

this.add = this.main.querySelector('.tabadd');

// li的父元素

this.ul = this.main.querySelector('.fisrstnav ul:first-child');

// section 父元素

this.fsection = this.main.querySelector('.tabscon');

this.init();

}

init() {

this.updateNode();

// init 初始化操作让干系的元素绑定事宜

this.add.onclick = this.addTab;

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].index = i;

this.lis[i].onclick = this.toggleTab;

this.remove[i].onclick = this.removeTab;

this.spans[i].ondblclick = this.editTab;

this.sections[i].ondblclick = this.editTab;

}

}

// 由于我们动态添加元素 须要重新获取对应的元素

updateNode() {

this.lis = this.main.querySelectorAll('li');

this.sections = this.main.querySelectorAll('section');

this.remove = this.main.querySelectorAll('.icon-guanbi');

this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');

}

// 1. 切换功能

toggleTab() {

// console.log(this.index);

that.clearClass();

this.className = 'liactive';

that.sections[this.index].className = 'conactive';

}

// 打消所有li 和section 的类

clearClass() {

for (var i = 0; i < this.lis.length; i++) {

this.lis[i].className = '';

this.sections[i].className = '';

}

}

// 2. 添加功能

addTab() {

that.clearClass();

// (1) 创建li元素和section元素

var random = Math.random();

var li = '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';

var section = '<section class="conactive">测试 ' + random + '</section>';

// (2) 把这两个元素追加到对应的父元素里面

that.ul.insertAdjacentHTML('beforeend', li);

that.fsection.insertAdjacentHTML('beforeend', section);

that.init();

}

// 3. 删除功能

removeTab(e) {

e.stopPropagation(); // 阻挡冒泡 防止触发li 的切换点击事宜

var index = this.parentNode.index;

console.log(index);

// 根据索引号删除对应的li 和section remove()方法可以直接删除指定的元素

that.lis[index].remove();

that.sections[index].remove();

that.init();

// 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变

if (document.querySelector('.liactive')) return;

// 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态

index--;

// 手动调用我们的点击事宜 不须要鼠标触发

that.lis[index] && that.lis[index].click();

}

// 4. 修正功能

editTab() {

var str = this.innerHTML;

// 双击禁止选定笔墨

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

// alert(11);

this.innerHTML = '<input type="text" />';

var input = this.children[0];

input.value = str;

input.select(); // 文本框里面的笔墨处于选定状态

// 当我们离开文本框就把文本框里面的值给span

input.onblur = function () {

this.parentNode.innerHTML = this.value;

};

// 按下回车也可以把文本框里面的值给span

input.onkeyup = function (e) {

if (e.keyCode === 13) {

// 手动调用表单失落去焦点事宜 不须要鼠标离开操作

this.blur();

}

}

}

}

new Tab('#tab');

</script>

</html>