2021-07-14

webpack笔记——了解面向过程与面向对象的前端开发。

首先，我们先简单看一下面向过程的前端开发
（面向过程：分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用）
如下示例：

<!DOCTYPE html>
<html>
<head><style>#tabBox input {background: #F6F3F3;border: 1px solid #FF0000;}#tabBox .active {background: #E9D4D4;}#tabBox div {width:300px;height:250px;display:none;padding: 10px;background: #E9D4D4;border: 1px solid #FF0000;}</style><meta charset="utf-8" /><title>选项卡</title><script>window.onload=function(){var tabBox = document.getElementById('tabBox');var tabBtn = tabBox.getElementsByTagName('input');var tabDiv = tabBox.getElementsByTagName('div');for(var i=0;i<tabBtn.length;i++){tabBtn[i].index = i;tabBtn[i].onclick = function (){for(var j=0;j<tabBtn.length;j++){tabBtn[j].className='';tabDiv[j].style.display='none';}this.className='active';tabDiv[this.index].style.display='block';};}};</script>
</head><body><div id="tabBox"><input type="button" value="游戏" class="active" /><input type="button" value="旅行" /><input type="button" value="音乐" /><div style="display:block;">GTA5、孤岛惊魂</div><div>澳大利亚、西藏</div><div>暗里着迷、一生有你</div></div>
</body>
</html>

相比与面向对象，面向过程的前端开发有以下明显缺点：
*（1）不易维护。面向过程代码比较集中，不易于进行调试纠错。
（2）不易复用。面向过程不易于实现模块化，代码的重复利用的几率低，两个页面实现相似的页面需要写两份相同的代码。
（3）不易扩展。相同的逻辑，如果要有两份相似逻辑，那在面向过程中，就很多时候需要写两份。
面向对象的前端开发
javascript本身是一种基于对象(object-based)的语言，我们日常编码过程中用到的所有东西几乎都是对象(Number, String, Boolean, etc.)。但是，相对于一些流行的面向对象语言(C++, C#, java)，它又不是一种真正的面向对象编程(OOP)语言，因为它的语法中没有class的概念。因此相比与Java，c++其类的定义是不太一样的。
示例如下：

、、、/**
**js代码*** 选项卡* @param {Object} id 选项卡id   */
function Tab(id){var tabBox = document.getElementById(id);this.tabBtn = tabBox.getElementsByTagName('input');this.tabDiv = tabBox.getElementsByTagName('div');for(var i=0;i<this.tabBtn.length;i++){this.tabBtn[i].index = i;var _this = this;this.tabBtn[i].onclick = function(){_this.clickBtn(this);};}
};
/*** 为Tab原型添加点击选项卡方法* @param {Object} btn 点击的按钮*/
Tab.prototype.clickBtn = function(btn){for(var j=0;j<this.tabBtn.length;j++){this.tabBtn[j].className='';this.tabDiv[j].style.display='none';}btn.className='active';this.tabDiv[btn.index].style.display='block';
};
、、、
<!DOCTYPE html>
<html>
<head><style>.tab input {background: #F6F3F3;border: 1px solid #FF0000;}.tab .active {background: #E9D4D4;}.tab div {width:300px;height:250px;display:none;padding: 10px;background: #E9D4D4;border: 1px solid #FF0000;}</style><meta charset="utf-8" /><title>选项卡</title><!-- 引入tab.js --><script type="text/javascript" src="../js/tab.js" ></script><script>window.onload = function(){var tab1 = new Tab("tabBox1");var tab2 = new Tab("tabBox2");}</script>
</head><body><div class="tab" id="tabBox1"><input type="button" value="游戏" class="active" /><input type="button" value="旅行" /><input type="button" value="音乐" /><div style="display:block;">GTA5、孤岛惊魂</div><div>澳大利亚、西藏</div><div>暗里着迷、一生有你</div></div><br /><div class="tab" id="tabBox2"><input type="button" value="技术" class="active" /><input type="button" value="工具" /><input type="button" value="网站" /><div style="display:block;">Java、Spring</div><div>Eclipse、HBuilder</div><div>博客园、CSD</div></div>
</body>
</html>

面向对象为实现可复用，易拓展性，就需要把面向对象的函数进行函数封装，这就意味着需要更大的代码量。
熟悉完成Javascript面向过程与面向对象的区别。下一节给大家带来webpack的作用以及实现基本使用。

2021-07-14相关推荐

GMOJ - 2021.07.20【普及组】模拟赛C组 - 排座椅(seat)、传球游戏(ball)、立体图(drawing)、间谍派遣、seek
文章目录 luogu博客链接 GMOJ - 2021.07.20[普及组]模拟赛C组 - 排座椅(seat).传球游戏(ball).立体图(drawing).间谍派遣.seek T1 排座椅(seat ...
Neovim开发环境搭建(2021.07.01)
Neovim开发环境搭建(2021.07.01) 一.搭建环境 Ubuntu 21.04 Neovim 0.4.4 二.Neovim安装 # 下载 neovim,如遇网络问题可以采用 https:// ...
电动力学每日一题 2021/10/14
电动力学每日一题 2021/10/14 (a) Define r∣∣=xx^+yy^\textbf r_{||}=x\hat x+y\hat yr∣∣=xx^+yy^, r∣∣=x2+y2r_{| ...
哔哩哔哩“2021.07.13 我们是这样崩的”报告的学习-1
哔哩哔哩"2021.07.13 我们是这样崩的"报告的学习-1 这份报告是我学计算机两年来第一次真实看到大厂的员工到底在干什么.出现了很多专有名词,以及当前最先进的互联网企业的应用 ...
2021.07.22禾赛提前批一面面经
2021.07.22禾赛提前批一面面经 1.LUTRAM的意思 2.LUTRAM和block RAM的区别 3.时序约束和时序优化 4.跨时钟域 5.为什么不能多bit采用同步寄存器打两拍(就这个问题 ...
2021.07.07 宇信科技
2021.07.07 宇信科技宇信科技晚上电话面问了一堆java基础,离谱,jd上也没要求java:简历筛选扣工资! java小白,凭借c语言基础简单回答了一哈,面试官估计在电 ...
Doris Weekly FAQ】2021.07.19~2021.08.01
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月19日 - 2021年08月01日的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
【Doris Weekly FAQ】2021.07.05~2021.07.18
观众朋友们: 晚上好! 欢迎收看[ Doris 近日要闻]~本次为您带来的是 2021年07月15日 - 2021年07月18日的双周总结. Doris 社区周报每期会包含 FAQ 环节.我们会在社 ...
Ubuntu下载安装EDB1.3.0 2021.07
Ubuntu16.04x64下载安装EDB1.3.0 2021.07 1.更新gcc和g++ > 7 $ sudo add-apt-repository ppa:ubuntu-toolchain ...
新手如何理解一个Web应用的构建（2021.07.29更新）
Web应用构建 ==前言== 我为什么写这篇文章? 适合什么样的人看? ==摘要== 步骤汇总 (1)网站定位与功能设定 (2)信息架构 (3)UI设计 (4)应用架构 (5)开发 (6)部署 (7) ...

2021-07-14

webpack笔记——了解面向过程与面向对象的前端开发。

2021-07-14相关推荐

最新文章

热门文章