js进阶写法对象包含⽅法、数据及调⽤⽅式
刚开始写js的时候到之后很长的⼀段时间，js代码都是⽐较凌乱的，看起来零零乱乱很是苦恼，于是就在想⾃⼰什么时候才能写出⽐较好看的代码呐，所以纪实⼀篇，以作⼼灵上的终结。
var tvPlayFun = {
init:function () {
tvPlayFun.callFun();
js调用方法的三种写法},
callFun:function () {
mui('#offCanvasContentScroll').scroll();//主页⾯滚动
},
menuJudgeLoginFun:function () {
if (1) {
var tvUserList = document.querySelectorAll(".tvUserList")[0];
tvUserList.children[1].style.display = "none";
tvUserList.children[2].style.display = "none";
tvUserList.children[3].style.display = "none";
} else {
// 登录代码
}
}
}
tvPlayFun.init();
由以上代码可以看到，我们只需要创建⼀个对象变量，然后以键值对的形式创建函数就好了，⽽且可以根据具体要求，⼀种功能对应⼀个函数，然后根据要求在不同的函数⾥调⽤别的函数，既看起来美观好看，⼜对⽇后的维护起到了很⼤的⽅便，最重要的是，只要写得好，⼀个js⽂件夹⾥所有的函数就可能都只会写在这⼀个⼤的对象变量⾥，到时候看起来，多舒坦，多舒畅。
另外，还可以继续在对象⽅法⾥⾯添加⾃⼰的对象变量，继续在⾥⾯添加对应的对象⽅法，看起来层层嵌套，很是优美，如果想要调⽤数据，还可以再对象变量⾥⾯添加对象，在⾥⾯放置数据，代码如下：
var searchpage = {
data:{
searchBarInput:document.querySelectorAll(".searchBarInput")[0],
searchConDel:document.querySelectorAll(".searchConDel")[0],
say:"hello world"
},
init:function () {
searchpage.callFun();
},
callFun:function () {
},
onloadFun:function () {
searchpage.data.searchBarInput.focus();
console.log(searchpage.data.say);
// 计算历史搜索框⾼度
$(".historialSearchList").height($(window).height()-$(".searchBar").height()-$(".hotWords").height()-$(".historialSearchTitle").height()-$(".historialSearch").css("margin-top").replace("px",""));    },
grandfatherFun:function () {
var fatherFun = {
bigsonFun:function () {
console.log("我是⼤⼉⼦");
fatherFun.middlesonFun();
},
middlesonFun:function () {
console.log("我是⼆⼉⼦");
fatherFun.smallsonFun();
},
smallsonFun:function () {
console.log("我是⼩⼉⼦");
}
}
fatherFun.bigsonFun();
}
}
searchpage.init();
由以上代码中的onloadFun()⽅法中的console.log()可以得到专门存储数据的data对象⾥的say属性的内容，由grandfatherFun进⼀步印证层层嵌套的⽅法，可粘贴复制下来查看控制台输出，把不⽤的代码注释掉就好，完美结束。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。