Two big programming ideas

  • Process oriented
  • object-oriented

POP(Process-oriented Programming)

Process oriented is to analyze the steps needed to solve the problem, and then use functions to implement these steps step by step, and then use one by one when the call can be.

Take, for example, the process-oriented approach of loading an elephant into a refrigerator

  1. Open the refrigerator door
  2. Put the elephant in
  3. Close the refrigerator door

Process oriented means follow the steps that we have analyzed and follow the steps to solve the problem

Object Oriented Prigramming

Object orientation is the decomposition of things into objects, and then the object division of labor and cooperation.

Take, for example, the object-oriented approach of loading an elephant into a refrigerator

Find objects and write out their functions

1. Elephant objects

  • in

2. Refrigerator objects

  • Open the
  • Shut down

3. Use elephant and refrigerator functions

Object orientation is about dividing problems into object functions, not steps.

Object-oriented features

  • encapsulation
  • inheritance
  • polymorphism

Process oriented vs. Object oriented

Process oriented

  • Advantages: higher performance than object-oriented, suitable for hardware is closely related to things, such as single-chip microcomputer on the use of process-oriented programming
  • Disadvantages: No object-oriented easy maintenance, easy reuse, easy to expand.

object-oriented

  • Advantages: easy to maintain, easy to reuse, easy to expand, because of the object-oriented encapsulation, inheritance, polymorphic characteristics, can design a low coupling system, make the system more flexible, easier to maintain
  • Disadvantages: Lower performance than process-oriented

Object – oriented version of the TAB bar switch

Functional requirements:

  1. Click the TAB bar to switch effects.
  2. Click the + sign to add TAB items and content items.
  3. Click x to delete the current TAB and content.
  4. Double-click TAB text or content text to modify the text content

Extract object: Tab object

  1. This object has switching capabilities
  2. This object has add capability
  3. This object has deletion capability
  4. The modified object has the modification function

TAB bar code

//tab.js

let that;
class Tab{
	constructor(id){
		that=this
		this.main=document.querySelector(id);
		this.add=this.main.querySelector('.add');
		this.ul=this.main.querySelector('ul:first-child')
		this.fsection=this.main.querySelector('.tabcontent')
		this.init()
	}
	init(){
		this.upDateNode();
		//init initializes operations to bind events to related elements
		this.add.onclick=this.addTab
		for(let 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; }}// Add element dynamically, need to retrieve the corresponding element
	upDateNode(){
		this.lis=this.main.querySelectorAll("li");
		this.sections=this.main.querySelectorAll("section");
		this.remove=this.main.querySelectorAll('.close');
		this.spans=this.main.querySelectorAll('.firstnav li span:first-child');
	}
	alearClass(){ 
		for(let i=0; i<this.lis.length; i++){this.lis[i].className="";
			this.sections[i].className=""; }}toggleTab(){
		that.alearClass()
		this.className="li-active";
		that.sections[this.index].className="show";	
	}
	addTab(){
		that.alearClass()
		let random=Math.random()
		let li=` < li class = "li - active" > < span > new option < / span > < span class = "close" > x < / span > < / li > `;
		let section='
      

        contents'
      
+random+'</section>'
		that.ul.insertAdjacentHTML('beforeend',li);
		that.fsection.insertAdjacentHTML('beforeend',section);
		that.init()
	}
	removeTab(e){
		e.stopPropagation()// Prevent events from bubbling
		let index=this.parentNode.index;
		// Delete the corresponding li and section according to the element subscript
		that.lis[index].remove();
		that.sections[index].remove();
		that.init();
		// The selected state li remains unchanged when the selected state li is not deleted
		if(document.querySelector('.li-active')) return
		// When we delete the selected li, the previous Li is selected;
		index--;
		// Manually invoke click events without mouse trigger
		that.lis[index]&&that.lis[index].click();
		
	}
	editTab(){
		// Forbid double-clicking the selected text
		window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
		let str=this.innerHTML
		this.innerHTML='<input type="text" />'
		let input=this.childNodes[0];
		input.value=str;
		input.select();// The text in the text box is selected
		// Assign value to span when input loses focus
		input.onblur=function(){
			this.parentNode.innerHTML=this.value
		}
		// Press enter
		input.onkeyup=function(e){
			if(e.keyCode===13) {this.blur()
			}
		}
		
	}
}
new Tab("#tab")
Copy the code
<! --tab.html-->

<! doctypehtml>
<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		html,dody,div.ul.li.p.section.input{
			margin:0;
			padding:0
		}
		li{
			list-style:none
		}
		.tab{
			position:relative;
			border:1px solid # 000;
			width:500px;
			margin:50px auto 0;
		}
		.tab ul{
			display:flex;
		}
		.tab ul li{
			padding:10px 15px;
			border-bottom:1px solid # 000;
			border-right:1px solid # 000;
			position:relative;
			cursor:pointer
		}
		.close{
			position:absolute;
			top:0;
			right:0;
			background:# 000;
			color:#fff;
			display:inline-block;
			width:18px;
			height:18px;
			line-height:18px;
			text-align:center
		}
		.tab .add{
			position:absolute;
			top:0;
			right:0;
			background:blue;
			color:#fff;
			width:20px;
			text-align:center
		}
		.firstnav ul li input{
			width:50px;
			height:25px;
		}
		.li-active{
			border-bottom:0 ! important;
		}
		.show{
			display:block ! important;
			
		}
		.tabcontent section{
			display:none;
			height:500px;
			padding:15px
		}
	</style>
	
</head>
	<body>
		<div id="tab" class="tab">
			<nav class="firstnav">
				<ul>
					<li class="li-active">
					<span>Option a</span>
					<span class="close">x</span></li>
					<li><span>Option 2</span><span class="close">x</span></li>
					<li><span>Option three</span><span class="close">x</span></li>
				</ul>
				<div class="add">
					<span>+</span>
				</div>
			</nav>
			<div class="tabcontent">
				<section class="show">Content of a</section>
				<section>Content of the two</section>
				<section>Content of the three</section>
			</div>
			
		</div>
		<script type="text/javascript" src="./tab.js"></script>
	</body>
</html>

Copy the code

Because I’m writing a demo, CSS style is a little bit easy. Main learning JS programming ideas