第五单元
json数据渲染
字符串拼接变量法
var a=" ";
for(var i=0;i<arr.length;i++){
a += "<dl><dt>"+arr[i].name+"</dt>";
for(var j=0;j<arr[i].content.length;j++){
a += "<dd class="+arr[i].content[j].hot+">"+arr[i].content[j].name+"</dd>";
}
a += "</dl>"
box.innerHTML = a; //别忘记获取对象追加页面
}
//渲染数据时字符串拼接比较麻烦-"字符串"+变量
//es6[现在es5语法]字符串拼接: `` 反引号代替'' , ${变量}代替原来变量写法
dom法
1.找最外层dom对象: oUl
2.遍历数据
3.创建内层元素 var oLi=obj.createElement('li')
4.追加到父元素里 oUl.appendChild(oLi);
5.拼接字符串 oLi.innerHTML='
创建面向对象的三步
1.创建构造函数或类(公有属性):
function Person(name1,gender1){ //声明一个构造函数
this.name=name1; // 把变量变成对象的属性用this
this.gender=gender1;
}
2.通过原型扩展构造函数功能:把函数变成对象的方法(用prototype)
Person.prototype.eat=function(){
console.log('姓名:'+this.name+'性 别:'+this.gender)
}
3.创建实例化对象,通过new
var man=new Person('奎哥','男');
调用方法:
man.eat();
man.say();
选项卡练习
选项卡-面向过程:
1.this指向问题
事件函数里直接调用方法指向当前对象 obj.onclick=tab;
2.如果又套一层函数,调用方法 obj.onclick=function(){tab()}this指向window;
解决方法:定义全局变量 var that=0;在函数里存储this obj.onclick=function(){
that=this;
tab()
}
相对应tab方法里用到的this,修改成相对应的that
选项卡-面向对象:
面向对象写法
// - 尽量不要出现函数嵌套函数
// - 可以有全局变量
// - 把onload中不是赋值的语句放到单独的函数中
1.构造函数里this指向:new出来的对象或当前父类
2.通过原型扩展的tab方法要通过构造函数里的this(new出来的对象)调用 This.tab();
修改步骤
1.把传统方法升级成不要函数嵌套的方法
2.把局部变量变成全局:同时页面内用到局部变量修改成对应的this调用
3.存储this:var This=this;//存储外面new对象的this,调用原型上的方法时用This.change();调用
自执行函数
特点
1.省个函数名
2.里面的变量也是局部变量
3.形成了封闭的空间,主要是用于隔离作用域。除了局部作用域避免污染，广告，第三方统计需求这种，也是需要自执行的
用法
1.自执行函数 (函数)()
(function (){
alert('a');
})();
2.第二种写法(function(){}()) -推荐用这种
(function(){
alert('b');
}());
3. 函数有名字也可以:
(function show(){
alert('c');
}());
作用
主要用于隔离作用域，形成封闭空间,互不影响,避免函数重名造成的问题
(function show(){
alert('c');
}());
function show(){
alert('c');
}
show();
链式运动
含义
链式运动:一个物体运动完，下一个运动开始
1.一个运动里怎么让一个物体同时加多个属性-可传入对象json={width: 400, height: 400}
for(var attr in json) //循环执行json里的值
{
}
2.怎么判断是否有没走完的{}目标值-可加开关进行判断
cur=parseInt(getStyle(obj, attr)) //获取非行间样式
if(cur!=json[attr]) //判断是否有没执行完的目标值-cur是获取对象里的值跟页面上的对象对比
bStop=false;
3.如何设置回调函数-一个对象走完后,接着另一个对象
if(bStop) // 如果目标值全部都执行完了，执行这一步，清除定时器,
{
clearInterval(obj.timer);
if(fnEnd)fnEnd(); //如果还有传入的目标值继续执行
}
4.多个物体运动时-清除定时器,要清除自己对象的,否则定时器会累加
obj.timer=setInterval(function(){},30)
clearInterval(obj.timer);
筛选数据内容
思路一：根据事件进行筛选
1.获取焦点事件
opt.oninput=function(){
//根据获取内容对比遍历所有数据里名字name,符合的显示-字符串indexOf方法
if(personArr[i].name.indexOf(txt)!=-1)
}
2.点击all事件
$$('span')[2].onclick=function(){
//两种情况:1.输入文本为空时 2.不为空
for(){
//为空时,全部数据渲染
$$('ul li')[i].style.display='block'
//不为空:获取内容对比遍历所有数据里name
}
}
3.点击男,女事件单独写-因为要遍历性别
obj.onclick=function(){
for(){
//为空时
if(txt==undefined){
//筛选性别出来
if(personArr[i].sex.indexOf(sexM)==-1){ }
}
}
//不为空
else{
//名字与性别同时满足才显示
if(personArr[i].name.indexOf(txt)!=-1&&personArr[i].sex.indexOf(sexM)!=-1)
{
$$('ul li')[i].style.display='block'
}
}
思路二：传入不同的数据调用统一的渲染方法渲染数据-数据改变,视图渲染就跟着改变
1.获取焦点事件根据名字渲染
$(".search-box").on("input", function () {
searchVal = $(this).val();
//调用共用筛选方法
all()
})
2.点击性别事件根据性别渲染
$("span").on("click", function () {
sexVal = $(this).attr("sex");
//调用共用筛选方法
all()
})
3. 共用筛选方法 all()-传入不同数据,渲染不同视图
function all() {
//根据名字筛选数组
var lastArr = nameFilter(searchVal, personArr);
//在筛选出全部名字基础上，在筛选性别
// console.log(lastArr)
lastArr = sexFilter(sexVal, lastArr)
//调用共用渲染方法,传入不同筛选数据
renderList(lastArr)
}
4.不同筛选过滤方法-传入不同值
//根据名字筛选数组
function nameFilter(name, arr) {
返回符合姓名条件的新数组
return ele.name.indexOf(name) != -1 ? true : false
}
}
//根据性别筛选数组
function sexFilter(sex, arr) {
返回符合性别条件的新数组
return ele.sex == sex;
}
原型链
含义
原型链:new出的对象的属性(__proto__)与构造函数原型(prototype)之间的关系
原型链关系
原型链的形成是真正是靠__proto__原型链关系:原型链的形成是真正是靠__proto__
// 构造函数有属性:prototype ,对象有隐式属性:__proto__ ,js中一切又都是对象
console.log(Person.prototype==man.__proto__) //true
console.log(Person.prototype.__proto__==Object.prototype) //true
console.log(Object.prototype.__proto__==null) //true