想必有很多像我一样的开发者，总是为了做而做，日复一日，做着没营养的工作，其实技术这种东西，真的是说难不难，但是说简单也不简单，关键看做的人“心态”。尤其js这项语言，很多人提起它时，总会说又爱又恨，其实想学好js并非什么异想天开的事，只要 手到 心到 就一定会做好 。话不多说，还得靠自己认真付出，脚踏实地。
首先js对于每个开发者来讲并不陌生，它基本的语法，在这里我也不细说啦，就说说最近项目用到的编程思想吧，“面向对象编程”
对象：1、JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...
2、JavaScript 提供多个内建对象，比如 String、Date、Array 等等。
3、对象只是带有属性和方法的特殊数据类型。
项目中的对象思想应用场景：（做一个音频的顺序播放器：直播平台）
直接上代码：
Dom结构：
css结构：
/*语音***/
.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: '';
}
重点来了、、、
js结构：
最终呈现效果：
备注：这个呢就是一个在线直播功能的，也就是语音直播的，主要功能就是顺序播放语音的。
技术解析：
这个小功能我也是用的对象思想构建的
1、首先无论做成么项目，我们都要习惯性的建个对象，这里我创建的是LIVE对象，
方式：var LIVE = {}；//直播
2、我们要写这个对象里面的初始化函数：init（）；
方式：var LIVE = {
init:function(){//LIVE对象的方法
}
}；
3、我们写好这个对象，那要先执行下，也就是执行init函数;
方式：var LIVE = {
init:function(){
}
LIVE.init();//这里执行的是对象的私有init方法
}；
以上是写面向对象的一个基础结构，现在我们在具体的看看项目中的思想，
1、init函数获取一些结构的基础信息，及初始化调用的方法
2、events（）函数里面写事件 在init里面被执行时要用this调用，表示是LIVE的私有
方式：this.events();
在本例子中，这个事件函数主要给播放按钮audioPlayCtrl加事件 之后调用播放的控制函数的 _this.playCtrolFun($this);
3、playCtrolFun()函数主要写一些 播放的控制的，像是当前播放，点击之后是否播放或暂停状态，
4、watchPlay（）函数主要给当前播放的audio加监听事件的，像播放的进度，播放完成做什么操作像顺序播放下一个
5、。。。。。
6、LIVE.init({
el: '.audio1',
auto: true
});在调用中给这个init传参，函数用option接收的
之后我们用参数控制是否顺序播放
ps：以上就是我对这个功能点的面向对象思想的总结，对象就是这样，函数套函数，this指向的变动。建议学习面向对象的时候看看，call apply bind函数 有助于理解this指向
网友评论