链式调用简单实例
2017-11-16 本文已影响10人
饥人谷_米弥轮
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>优雅的代码为面试加分 链式调用让面试官更青睐你的代码</title>
<script type="text/javascript">
// 链式调用，可以让我们的代码更加优雅，让我们用少量的代码表达复杂的操作。
// $("#abc").css({"width":"xxx","height":"xxx","position":"xxx"}).hide().show();
// * ==================================================================
// * 要求：
// * 1, 完成指定的位置填写自己的代码，本文件里的其他代码不能修改
// * 2, 所有题目都不允许添加全局变量名
// * 3, 代码运行后，可根据 第53行 代码所示，按照要求元素设置上name,class,style及value属性
// * 4, 代码的执行效率及逻辑思维能力作为评判的重要标准
// * ==================================================================
var $ = function (id) {
//+++++++++++答题区域+++++++++++
if (!(this instanceof $)) {
return new $(id)
}
this.ele = document.querySelector('#' + id)
};
$.prototype = {
setname: function (name) {
//+++++++++++答题区域+++++++++++
this.ele.name = name
return this
//+++++++++++答题结束+++++++++++
},
setclass: function (clsname) {
//+++++++++++答题区域+++++++++++
this.ele.className = clsname
return this
//+++++++++++答题结束+++++++++++
},
setstyle: function (k, v) //k=key v=value
{
//+++++++++++答题区域+++++++++++
let len = arguments.length
if (len == 1) {
for (let item in k) {
this.ele.style[item] = k[item]
}
} else if (len == 2) {
this.ele.style[itemk] = v
} else {
alert('参数无效')
}
return this
//+++++++++++答题结束+++++++++++
},
setval: function (v) {
//+++++++++++答题区域+++++++++++
this.ele.value = v
return this
//+++++++++++答题结束+++++++++++
}
};
window.onload = function () {
/*
var obj = new dom("username");
obj.
setclass("box").
setname("content").
setval("请输入用户名").
setstyle({"color":"#333", "border":"1px #d1d1d1 solid", "outline":"none", "font-size":"12px"});
*/
$("username").setname("content").setclass("box").setstyle({
"color": "#333",
"border": "1px #d1d1d1 solid",
"outline": "none",
"font-size": "12px"
}).setval("请输入用户名");
}
</script>
</head>
<body>
<input id="username" />
</body>
</html>
