想必有很多像我一樣的開發(fā)者，總是為了做而做功炮，日復(fù)一日溅潜，做著沒營(yíng)養(yǎng)的工作，其實(shí)技術(shù)這種東西薪伏，真的是說難不難滚澜，但是說簡(jiǎn)單也不簡(jiǎn)單，關(guān)鍵看做的人“心態(tài)”嫁怀。尤其js這項(xiàng)語(yǔ)言设捐，很多人提起它時(shí)，總會(huì)說又愛又恨塘淑，其實(shí)想學(xué)好js并非什么異想天開的事萝招，只要 手到 ?心到 ?就一定會(huì)做好 。話不多說存捺，還得靠自己認(rèn)真付出槐沼，腳踏實(shí)地。
首先js對(duì)于每個(gè)開發(fā)者來(lái)講并不陌生，它基本的語(yǔ)法母赵，在這里我也不細(xì)說啦逸爵，就說說最近項(xiàng)目用到的編程思想吧，“面向?qū)ο缶幊?/b>”?
對(duì)象：1凹嘲、JavaScript 中的所有事物都是對(duì)象：字符串师倔、數(shù)值、數(shù)組周蹭、函數(shù)...
? ? ? ? ? ?2趋艘、JavaScript 提供多個(gè)內(nèi)建對(duì)象，比如 String凶朗、Date瓷胧、Array 等等。
? ? ? ? ? 3棚愤、對(duì)象只是帶有屬性和方法的特殊數(shù)據(jù)類型搓萧。
項(xiàng)目中的對(duì)象思想應(yīng)用場(chǎng)景：（做一個(gè)音頻的順序播放器：直播平臺(tái)）
直接上代碼：
Dom結(jié)構(gòu)：
css結(jié)構(gòu)：
/*語(yǔ)音***/
.speak-content i {
display: inline-block;
width: 1.06837rem;
height: 1.06837rem;
border-radius: 50%;
color: #00acff;
text-align: center;
margin-left: 6px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
vertical-align: middle;
box-shadow: 0 0 1px rgba(103,132,146,.3);
}
.speak-content var {
position: relative;
right: -2rem;
top: 2rem;
width: 1.282rem;
height: 1.68037rem;
color: #666;
float: right;
margin-right: -0.0427rem;
margin-top:-2.495726rem;
}
.audio-bar-area {
/*height: 100%;*/
position: relative;
display: inline-block;
width: 80%;
/* right: 1.28205rem;*/
margin-left:0.2rem;
/*? margin-top: 0.5rem;*/
}
.speak-audio-content{
font-size: 0;
}
[data-audio-play="yes"]{
background:url(close.png) no-repeat center center;
}
[data-audio-play="no"]{
background:url(open.png) no-repeat center center;
}
.audio-bar-area::before {
position: absolute;
left: .1rem;
right: .1rem;
height: .05rem;
background-color: #c5e4f3;
border-radius: 1px;
/* top: 50%;*/
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
content: '';
}
.front-bar {
position: absolute;
display: block;
left: 1rem;
height: .2rem;
background-image: -webkit-linear-gradient(left,#00acff,#00eaff);
background-image: linear-gradient(90deg,#00acff,#00eaff);
border-radius: 1px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.audio-bar-area .block {
display: block;
height: 0.3846rem;
width: 0.55rem;
position: absolute;
left: 0;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
background-color: #fff;
box-shadow: 0 0 0 1px rgba(197,228,243,.5) inset;
border-radius: .2rem;
background-clip: padding-box;
box-sizing: content-box;
border-radius: 1.3rem;
}
.audio-bar-area .block::before {
display: block;
width: 1px;
height: .3rem;
background-color: #c5e4f3;
margin: .1rem auto;
top: 50%;
content: '';
}
重點(diǎn)來(lái)了、宛畦、瘸洛、
js結(jié)構(gòu)：
最終呈現(xiàn)效果：
備注：這個(gè)呢就是一個(gè)在線直播功能的，也就是語(yǔ)音直播的次和，主要功能就是順序播放語(yǔ)音的反肋。
技術(shù)解析：
這個(gè)小功能我也是用的對(duì)象思想構(gòu)建的
1、首先無(wú)論做成么項(xiàng)目踏施，我們都要習(xí)慣性的建個(gè)對(duì)象石蔗，這里我創(chuàng)建的是LIVE對(duì)象，
方式：var LIVE = {}畅形；//直播
2养距、我們要寫這個(gè)對(duì)象里面的初始化函數(shù)：init（）；
方式：var LIVE = {
? ? ? ? ? ? ? ? ?init:function(){//LIVE對(duì)象的方法
? ? ? ? ? ? ? ? }
}日熬；
3棍厌、我們寫好這個(gè)對(duì)象，那要先執(zhí)行下碍遍，也就是執(zhí)行init函數(shù);
方式：var LIVE = {
? ? ? ? ? ? ? ? ? init:function(){
? ? ? ? ? ? ? ?}
? ? ? ? ? ? ? LIVE.init();//這里執(zhí)行的是對(duì)象的私有init方法
}；
以上是寫面向?qū)ο蟮囊粋€(gè)基礎(chǔ)結(jié)構(gòu)阳液，現(xiàn)在我們?cè)诰唧w的看看項(xiàng)目中的思想怕敬，
1、init函數(shù)獲取一些結(jié)構(gòu)的基礎(chǔ)信息帘皿，及初始化調(diào)用的方法
2东跪、events（）函數(shù)里面寫事件 在init里面被執(zhí)行時(shí)要用this調(diào)用，表示是LIVE的私有
方式：this.events();
在本例子中，這個(gè)事件函數(shù)主要給播放按鈕audioPlayCtrl加事件 之后調(diào)用播放的控制函數(shù)的 _this.playCtrolFun($this);
3虽填、playCtrolFun()函數(shù)主要寫一些 播放的控制的丁恭，像是當(dāng)前播放，點(diǎn)擊之后是否播放或暫停狀態(tài)斋日，
4牲览、watchPlay（）函數(shù)主要給當(dāng)前播放的audio加監(jiān)聽事件的，像播放的進(jìn)度恶守，播放完成做什么操作像順序播放下一個(gè)
5第献、。兔港。庸毫。。衫樊。
6飒赃、LIVE.init({
? ? ? ? ? ? ?el: '.audio1',
? ? ? ? ? ? ? auto: true
});在調(diào)用中給這個(gè)init傳參，函數(shù)用option接收的
之后我們用參數(shù)控制是否順序播放
ps：以上就是我對(duì)這個(gè)功能點(diǎn)的面向?qū)ο笏枷氲目偨Y(jié)科侈，對(duì)象就是這樣载佳，函數(shù)套函數(shù)，this指向的變動(dòng)兑徘。建議學(xué)習(xí)面向?qū)ο蟮臅r(shí)候看看刚盈，call apply bind函數(shù) 有助于理解this指向
