标签：index font 面向对象编程 iconfont li 切换 tab var main
前言
以尽量简练的语言让读者感受到面向对象编程的魅力
一、了解面向过程编程
什么是面向过程编程？一个事务被拆分成多个步骤，通过代码按步骤一步一步的实现的过程就是面向过程编程———这种思维方式是大部分人的正常逻辑——比如写文章的时候用首先...然后.....最后....事务被解决。
它具有不可忽视的优点：
1 效率极高性能极好——这种面向过程编程非常的直接所以相对来说效率非常高所以说单片机这种硬件就是需要这种效率高的编程
但是也有一些大型项目不可以接受的缺点 ：
1 不易重复使用 该面对过程的编程就是为了解决某一事务而存在面对其他不同的事务几乎是不具有再利用价值，甚至是相近的事务重复利用可行性也很低要经过很多的修改 。
2 不易维护 按照步骤来只要某一个步骤某一小块区域出现了一丁点的bug就可能达不到所需效果——痛苦的根源
3 不宜扩展 你似乎想在加上几个需求呢！！！
二 了解面向对象编程
什么是对象？一个具体的东西比如说：这一本书，那个电脑，不可以是：书，电脑这种泛指，这种也有一个名词叫类但这里不谈。对象清楚的具有一些属性——书的名字和方法——电脑是可以用来打游戏的。什么是面向对象编程？将多个对象用编程的方式进行赋予所需的属性和方法如何将这些对象和谐的组合起来的完成一个项目的过程就是面向对象编程。比如说——项目：把大象放进冰箱，对象：大象，对象：冰箱，大象的方法：可以移动。冰箱的方法：可以开关门。if（大象移动到冰箱门面前）{冰箱门打开} else if (大象完全进入冰箱) {冰箱门关上}项目完成。很明显这种逻辑不是一般人在日常中用到的逻辑 写起来明显感觉到繁琐麻烦。
但是有很多的优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统，使系统更加灵活、更加易于维护——面试答案感觉很难懂吧嘿嘿！易维护、易复用、易扩展 很容易理解吧你做了一个冰箱对象在其他项目中很明显是可以使用的改起来也轻松改改冰箱的颜色，加一个制冷的方法不需要大改。设计出低耦合的系统 ？？啥是低耦合？？就是对象与对象之间的联系 联系越少耦合度就越低 啧啧零耦合的话，岂不是放放对象就好了。
三 以下是以面向对象编程的逻辑做的一个Tab栏切换
1 引入HTML页面
<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><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>2 引入css
@font-face {font-family: "iconfont";
src: url('./iconfont/iconfont.eot?t=1553960438096'); /* IE9 */
src: url('./iconfont/iconfont.eot?t=1553960438096#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmwAAAJrAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAp4fwE2AiQDCAsGAAQgBYRtBzAbpQXIrrApw71oi3CCOyzEy8RvE4yIN8TD036/zp03qCYRjaJZNBFFS/gREoRGipQKofjuNrb+9XbTqrmXcqWzfTRDqFqWkhAJzYToaE6LQ7Q30CirRqSKMnj58DdIdrNAdhoTQJa5VGfLrtiAy+lPoAcZdUC57UljTR4TMAo4oL0xiqwYG8YueIHPCdTqYajty/t+bUpmrwvEnUK42lQhLMssVy1UNhzN4kmF6vSQVvMY/T5+HEU1SUXBbti7uBBrx++cgqJULp0GhAgBna5AgSkgE0eN6R1NwTitNt0yAI5VG7wr/8AljmoX7K+zq+tBF1Q8k9JTPWp1AjnJDgCzmM3bU0V31dsvV3M2eC6fHjaGfX/qS7U5Gr58vj6uD0bgxudyrV/OtHHyP+NZnpO1txbktjdY+3FB61+7nxeOzq8niGYnRwT3v3aZxeXf6rrNxl5//49WlEtZUUL1Pj3Bv1EO7MuG2namrCkbvcnApLUJtWpRhv2tzlRLx43kQ7WO2/FW6c5QqDZEZnYKFeosoVK1NdSa5E/XaVM1Ra7BhAEQmk0kjV5QaLbIzG5U6HRRqTkK1DqJtivrjMT1zJaNnIsihAiyQE3JdbszcW0Xiadzdl4d8UO0HSUGNDNXzl2hifYSO5pPjrorgdjUAAavoa5TKDZVUXD3kuuOOzh70fShvUiN2owtNsRxIREIIiATUCYpGO2aqXy/CxEeHcfuaKrLDiGbQ5kcEMsNIK8M5qCmR3mn8RFHOpcECBtlAAwWIZ2OAqV5kQoJXHvShORYBzrDZKhhb3uT8QPlrA3bmsKZV6i89DiTV2o1AAAA') format('woff2'),
url('./iconfont/iconfont.woff?t=1553960438096') format('woff'),
url('./iconfont/iconfont.ttf?t=1553960438096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont/iconfont.svg?t=1553960438096#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-guanbi:before {
content: "\e676";
}
3 写入js
window.addEventListener("DOMContentLoaded", function() {
var that;
class Tab {
constructor(id) {
// 获取参数
that = this;
this.main = document.querySelector(id);
this.tabadd_span = this.main.querySelector('.tabadd').querySelector('span');
this.ul = this.main.querySelector('ul');
this.tabscon = this.main.querySelector('.tabscon');
this.init();
}
// 初始化操作
init() {
this.updataNode();
for (var i = 0; i < this.lis.length; i++) {
this.lis[i].index = i;
this.lis[i].onclick = this.toggleTab;
this.xs[i].onclick = this.removeTab;
this.spans[i].ondblclick = this.editTab;
this.sections[i].ondblclick = this.editTab;
}
this.tabadd_span.onclick = this.addtab;
}
// toggle功能
updataNode() {
this.lis = this.main.querySelectorAll("li");
this.sections = this.main.querySelectorAll("section");
this.xs = this.main.querySelectorAll(".iconfont");
this.spans = this.main.querySelectorAll(".fisrstnav li span:first-child");
}
toggleTab() {
that.clearClass();
this.className = 'liactive';
that.sections[this.index].className = 'conactive';
}
// 清除类
clearClass() {
for (var i = 0; i < that.lis.length; i++) {
this.lis[i].className = '';
this.sections[i].className = '';
}
}
// 添加功能
addtab() {
that.clearClass();
var li = '<li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>'
that.ul.insertAdjacentHTML('beforeend', li);
var section = '<section class="conactive">测试1</section>';
that.tabscon.insertAdjacentHTML('beforeend', section);
that.init();
}
// 删除功能
removeTab(e) {
var index = this.parentNode.index;
this.parentNode.remove();
that.sections[index].remove();
// 当我们删除的不是选定状态的时候 原来的选定状态li保持不变
e.stopPropagation(); // 防止触发冒泡事件
that.init();
if (!document.querySelector('.liactive')) {
index != 0 && that.lis[index - 1].click();
}
}
// 修改功能
editTab() {
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //双击禁止选择文字
this.innerHTML = `<input type='text' value='${this.innerHTML}'>`;
var input = this.children[0];
input.select();
input.onblur = function() {
this.parentNode.innerHTML = `${this.value}`; //双击编辑功能
}
input.addEventListener('keyup', function(e) {
if (e.keyCode == 13) this.blur(); //讲究人
});
}
}
var tab = new Tab("#tab");
});4 页面展示
功能描述 ： 1 单击nav 的li会切换为对应的内容 li的css样式会发生改变
2 点击右方加号按钮会添加新的nav li 对应添加内容
3 点击nav li 右上角的x链接会删除对应的li 和 内容
4 双击文字可以修改内容但不会选中文字
ps：如果是用面向过程编程的思维来写估计一半代码都要不到
标签：index,font,面向对象编程,iconfont,li,切换,tab,var,main 来源： https://blog.csdn.net/helgeal/article/details/120229478
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。