JavaScript - 面向对象鸡汤
2017-03-29 本文已影响28人
西巴撸
知道大家被前面面向对象的概念弄的都有点不想学编程了是吧,概念这种东西怎么说呢,能理解最好,不能理解就得结合案例和长时间的慢慢消化才行,总之不想当司机的厨师不是一个好程序猿.在中国现在浮躁的社会环境下,如果你不能静下心来学点东西,那你可能再过几年又面临换行或者到处找工作的局面,只有基础只是打的坚实,才能理解内部的真正的原理,才能走的更高更远.
<p style="color:red">下面给大家准备了两个小例子,如果把前面的概念比作是白大米,白馒头的话,那现在就给大家来点鸡汤喝喝</p>
小案例一 ----> <p style="color:red">Tab选项卡切换</p>
用面向对象编程写的 如果你前面的真的掌握了的话 那你看懂这个案例应该不难
< ! ---------- HTML ----------- >
- 示例代码 :
<div class="tab">
<ul class="tab-top" id="tab_top">
<li class="current">公告</li>
<li>规则</li>
<li>论坛</li>
<li>公益</li>
<li>安全</li>
</ul>
<div class="tab-bottom" id="tab_bottom">
<div class="tab-content selected">
<ul>
<li>
<a href="#">数据七夕:金牛爱送玫瑰</a>
</li>
<li>
<a href="#">阿里打造"互联网监管"</a>
</li>
<li>
<a href="#">10万家店60万新品</a>
</li>
<li>
<a href="#">全球最大网上时装周</a>
</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li>
<a href="#">“全额返现”要管控啦</a>
</li>
<li>
<a href="#">淘宝新规发布汇总(7月)</a>
</li>
<li>
<a href="#">炒信规则调整意见反馈</a>
</li>
<li>
<a href="#">质量相关规则近期变更</a>
</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li>
<a href="#">阿里建商家全链路服务</a>
</li>
<li>
<a href="#">个性化的消费时代来临</a>
</li>
<li>
<a href="#">跨境贸易是中小企业机</a>
</li>
<li>
<a href="#">美妆行业虚假信息管控</a>
</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li>
<a href="#">接次文件，毁了一家店</a>
</li>
<li>
<a href="#">账号安全神器阿里钱盾</a>
</li>
<li>
<a href="#">新版阿里110上线了</a>
</li>
<li>
<a href="#">卖家学违禁避免被处罚</a>
</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li>
<a href="#">为了公益high起来</a>
</li>
<li>
<a href="#">魔豆妈妈在线申请</a>
</li>
</ul>
</div>
</div>
</div>
< ! --------- Style --------------- >
<style>
* {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
.tab {
width: 498px;
height: 130px;
border: 1px solid #999;
margin: 100px auto;
overflow: hidden;
}
.tab .tab-top {
width: 501px;
height: 33px;
background: #eee;
position: relative;
left: -1px;
}
.tab .tab-top li {
float: left;
width: 98px;
height: 33px;
text-align: center;
line-height: 33px;
cursor: pointer;
border-bottom: 1px solid #999;
padding: 0 1px;
}
.tab .tab-top li.current {
background: #fff;
border-bottom: 0;
border-left: 1px solid #9d9d9d;
border-right: 1px solid #9d9d9d;
padding: 0;
}
.tab .tab-top li:hover {
font-weight: 700;
color: #f40;
}
.tab-bottom .tab-content {
display: none;
}
.tab-bottom .tab-content a {
text-decoration: none;
color: #000;
}
.tab-bottom .tab-content a:hover {
color: #f40;
}
.tab-bottom .tab-content ul li {
margin-top: 20px;
width: 220px;
float: left;
text-align: center;
}
.tab-bottom .selected {
display: block;
}
</style>
< ! --------- JavaScript ------- >
<script>
function $(id) {
return document.getElementById(id);
}
window.onload = function () {
function TabFn() {
// 获得属性
this.topLis = $('tab_top').getElementsByTagName('li');
this.tabContent = $('tab_bottom').getElementsByClassName('tab-content');
}
TabFn.prototype = {
// 1. 初始化方法
init: function () {
// 1.1 设置索引
this.setIndex();
// 1.2 监听事件
this.bindEvent();
},
// 2. 索引
setIndex: function () {
for (var i = 0; i < this.topLis.length; i++) {
var li = this.topLis[i];
li.index = i;
}
},
// 3. 监听
bindEvent: function () {
for (var i = 0; i < this.topLis.length; i++) {
var self = this;
this.topLis[i].onmouseover = function () {
self.handler(this);
}
}
},
// 4. 排他
handler: function (that) {
for (var j = 0; j < this.topLis.length; j++) {
this.topLis[j].className = ''
this.tabContent[j].style.display = 'none';
}
that.className = 'current';
this.tabContent[that.index].style.display = 'block';
}
}
// 5. 实例化对象
var tab = new TabFn();
tab.init();
}
</script>
< ! --------- 效果展示 ---------- >
**Tab选项卡**
小案例二 ----> 五彩人生
- 示例代码 :
< ! ---------- HTML ----------- >
<div id="ball"></div>
< ! --------- Style --------------- >
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
html, body {
width: 100%;
height: 100%;
}
#ball {
width: 100%;
height: 100%;
background-color: #000;
}
</style>
< ! --------- JavaScript ------- >
// Underscore是一个类库,上面有好多方法,网上可以下载到
<script src="js/Underscore-min.js"></script>
// 外链一个面向对象文件
<script src="js/ColorBall.js"></script>
/**
* 1.构造函数
* @param option 可选参数
* @constructor
*/
function ColorBall(option) {
this._init(option);
}
/**
* 2.构造函数的原型库
* @type {{constructor: ColorBall}} 构造器:构造函数
*/
ColorBall.prototype = {
// 获得当前构造函数
constructor: ColorBall,
// 1. 添加属性
_init: function (option) {
var option = option || {};
// 1.1 必要的属性
this.parentId = option.parentId;
this.x = option.x || 0;
this.y = option.y || 0;
this.r = 60;
this.bgColor = option.bgColor || 'green';
// 1.2 变化的属性
this.dX = _.random(-5, 5);
this.dY = _.random(-5, 5);
this.dR = _.random(1, 3);
// 1.3 把实例化的小球装入数组
ballArr.push(this);
},
// 2. 绘制小球
render: function () {
// 2.1 创建节点
var parentNode = document.getElementById(this.parentId);
var childNode = document.createElement('div');
parentNode.appendChild(childNode);
// 2.2 设置定位
parentNode.style.position = 'relative';
childNode.style.position = 'absolute';
// 2.3 设置属性
childNode.style.left = this.x + 'px';
childNode.style.top = this.y + 'px';
childNode.style.width = this.r + 'px';
childNode.style.height = this.r + 'px';
childNode.style.borderRadius = '50%';
childNode.style.backgroundColor = this.bgColor;
},
// 3. 小球开始运动
update: function () {
// 3.1 小球位置的变化轨迹
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
// 3.2 判断半径值
if (this.r < 0) {
this.r = 0;
// 如果小球的半径小于0的话 就把小球移除数组
ballArr = _.without(ballArr, this);
}
}
}
<script>
// 1. 获取标签
var ball = document.getElementById('ball');
// 2. 定义小球数组和颜色数组
var ballArr = [];
var colorArr = ['pink', 'red', 'purple', 'blue', 'green', 'orange', 'skyblue', 'white'];
// 3. 创建小球装入数组
ball.onmousemove = function (event) {
var event = event || window.event;
new ColorBall({
parentId: 'ball',
x: event.clientX,
y: event.clientY,
bgColor: colorArr[_.random(0, colorArr.length - 1)]
});
}
// 4. 开始定时器
setInterval(function () {
// 4.1 先把创建的div清屏
for (var i = 0; i < ball.children.length; i++) {
ball.removeChild(ball.children[i]);
}
// 4.2 绘制小球和小球的动画
for (var i = 0; i < ballArr.length; i++) {
ballArr[i].render();
ballArr[i].update();
}
}, 50);
</script>
< ! --------- 效果展示 ---------- >
**五彩小球**
