1、面向過程
1. 找到所有的按鈕
2. 給按鈕新增事件
3. 根據按鈕的下標顯示對應的內容
// 1. 找到所有的按鈕
var btns = document.
queryselector
(".btns"
).children;
var boxs = document.
queryselectorall
(".box"
)for
(var i =
0; i < btns.length ; i ++)}
// 3.根據按鈕的下標顯示對應的內容
removeclass
( boxs ,
"active");
boxs[k]
.classname +=
" active";}
}// 刪除元素的active類名
function
removeclass
( ele_list , class_name)}}
<
/script>
1、ooa 物件導向分析
1)選擇元素
2)事件新增器 把功能變成工具
3)下標獲取器
4)類名清除器
5)類名新增器
2、ood 物件導向設計
// 建構函式
function table()
// 初始化功能
table.prototype.init = function()
// 元素選擇功能
table.prototype.$ = function()
// 事件新增功能
table.prototype.bindevent = function()
// 下標獲取器
table.prototype.getindex = function()
// 類名清除器
table.prototype.clearclass = function()
// 類名新增器
table.prototype.addclass = function()
// 3、oop 物件導向程式設計
function
table()
// 初始化
table.prototype.
init
=function
( options )
// 元素選擇
table.prototype.$=
function
( selector )
// 事件新增
table.prototype.
bindevent
=function()
.bind
(this
, i)
)//this指向例項物件，同時獲取下標}}
// // 下標獲取器 用bind也能獲取
// table.prototype.getindex = function()
// 類名清除器
table.prototype.
clearclass
=function()
}// 類名新增器
table.prototype.
addclass
=function
( index )
var table =
newtable()
; table.
init()
;<
/script>
="container"
>
="btns"
>
"0"class
="btn active"
>
1<
/button>
"1"class
="btn"
>
2<
/button>
"2"class
="btn"
>
3<
/button>
<
/div>
="content"
>
="box active"
>
1<
/div>
="box"
>
2<
/div>
="box"
>
3<
/div>
<
/div>
<
/div>
.container
.content
.box
button.active
.box.active
<
/style>
物件導向和面向過程
面向過程就是分析出解決問題所需要的步驟，然後用函式把這些步驟一步一步實現，使用的時候乙個乙個依次呼叫就可以了。物件導向是把構成問題事務分解成各個物件，建立物件的目的不是為了完成乙個步驟，而是為了描敘某個事物在整個解決問題的步驟中的行為。例如五子棋，面向過程的設計思路就是首先分析問題的步驟 1 開始遊...
物件導向和面向過程
物件導向和面向過程的區別 面向過程 更加關注整個程式的實現流程 物件導向 更加關注整個程式中有哪些類，每個類有哪些屬性，有哪些行為，它將整個功能劃分為許多小功能，分散到不同的類中，使用時，僅需命令相應的類完成相應的事情 物件導向的優勢 1.更高的容錯率 2.更易閱讀的 3.更易擴充套件 物件導向的劣...
物件導向和面向過程
面向過程 顧名思義，其中心意義在於 過程 二字，比如你要吃飯，那麼首先是要選地，播種，施肥，成熟，收穫，煮飯，然後才能吃飯，那麼面向過程就是從開始到結束，分析出解決問題的需要的每乙個步驟，然後用函式將這些步驟乙個乙個實現，使用的時候乙個乙個一次呼叫就行了。物件導向 同樣的，你去飯店吃飯的時候，只需要...