链式调用简单实例
<!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. = 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>
作者：饥人谷_米弥轮
链接：https://www.jianshu.com/p/435630e54e9d
共同学习，写下你的评论
评论加载中...
作者其他优质文章
