javascript 2
基本的模块化开发
/*
在javascript语言里, 封装一般来讲,就是把散着写的js代码, 给放在函数里,这个就是封装了。
index.html
\_css\index.css
\_js\main.js
\index.js
\_logoEventFn函数
\_createNavFn函数
\ common.js
\_data
\data.js
\_images
上面这样做的目的,
- 有限程度的复用;
- 可扩展;
- 松耦合
- 模块化
- ...
模块设计的原则之一,【每个模块、函数,只做一件事情】
*/
new关键字
生成、创建,一个用户定义的函数的实例,
语法:new 函数名()
new操作符生成的实例,可以调用函数的内置的自定义的方法。
利用new关键字创建的函数可以称之为构造函数
构造函数中的this指向构造函数的实例
轮播图原理
/*
动态生成图片
*/
// 动态生成ul的宽度
var _ul_sliderId = gId('ul_sliderId');
//图片的宽度等于图片的数量乘以1142px
_ul_sliderId.style.width = _sliderArrData.length * 1142 + 'px';
// 生成li的dom节点
// 声明一个变量值为空
var _html = '';
for (var i = 0; i < _sliderArrData.length; i++) {
// console.log(_sliderArrData[i].img_url);
// 通过+=赋值运算符为变量赋值,将li img标签动态添加上去
_html += '<li><img src=' + _sliderArrData[i].img_url + ' > </li>'
// 将标签写入ul之中
gId('ul_sliderId').innerHTML = _html;
}
/*
让图片"动"起来实际上是修改ul的left值 -left值
*/
/*
左右按钮点击事件
*/
// 点击事件要写在生成节点之后
//设置计数器控制点击次数
var _num = 0;
_left_btn_id.onclick = function() {
if (_num > 0) {
_num--;
} else {
_num = _imgNum - 1;
}
_ul_sliderId.style.left = -1142 * _num + 'px';
}
_right_btn_id.onclick = function() {
if (_num < (_imgNum - 1)) {
_num++;
} else {
_num = 0;
}
_ul_sliderId.style.left = -1142 * _num + 'px';
}
/*
for循环动态生成小圆点的数量
*/
var _slider_circle_id = gId('slider_circle_id');
for (var i = 0; i < _imgNum; i++) {
var _span = cDom('span&