MUI-Utils

最新推荐文章于 2022-07-04 14:24:16 发布

转载最新推荐文章于 2022-07-04 14:24:16 发布 · 518 阅读

MUI 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了JavaScript中DOM操作的基本方法，包括使用原生JS的选择器、HTML5的选择器以及如何通过构造自定义选择器来实现类似jQuery的功能。同时，还探讨了mui库提供的工具方法如mui(), each(), extend() 和 scrollTo() 的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网的Utils提供了四个
mui()
each()
extend()
scrollTo()

在原生JS我们的选择器常用的是
1、document.getElementById();
2、document.getElementsByClassName();
3、document.getElementsByName();
4、document.getElementsByTagName();

Id选择单个，获取的是[object HTMLDivElement]
Name选择多个,获取的是[object NodeList]
ClassName选择多个，获取的是[object HTMLCollection]
TagName选择多个，获取的是[object HTMLCollection]

除了ID，其余的都要加下标才能访问相应的DOM

例如

<code class="hljs applescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><p <span class="hljs-property" style="box-sizing: border-box;">id</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ap"</span> <span class="hljs-property" style="box-sizing: border-box;">name</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bp"</span> <span class="hljs-type" style="box-sizing: border-box;">class</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cp"</span>>P</p></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-reserved" style="box-sizing: border-box;">var</span> id=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementById(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ap"</span>);
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> tag=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByTagName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"p"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> cTag=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByClassName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"cp"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];
<span class="hljs-reserved" style="box-sizing: border-box;">var</span> name=<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.getElementsByName(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"bp"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>]</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

在JQUERY中，大家也使用过$(“”)进行选择；在考虑原生JS的情况下，要用类似的功能，我们可以使用HTML5相关的选择器去解决。
document.querySelector
document.querySelectorAll

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;">ele = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.querySelector(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'selectors'</span>);
eleList = <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">document</span>.querySelectorAll(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'selectors'</span>);</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

下面来解释下mui()
官网上面提到

若要将mui对象转化成dom对象，可使用如下方法（类似jquery对象转成dom对象）：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//obj1是mui对象</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> obj1 = mui(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#title"</span>);
<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//obj2是dom对象</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> obj2 = obj1[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

mui这个对象是怎么来的。
最简单的方法，我们来构造一个自己的选择器

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">KS</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">(selector)</span>
{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">return</span> document.querySelectorAll(selector);
}

KS(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#ap"</span>)[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>];<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//我们就选择到了上面的P</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

mui.each()跟 .each类似，不懂可自行科普JQ的 .each

extend()
把两个对象合并成一个对象
结构:

<code class="hljs css has-numbering" style="display: block; padding: 0px; background: transparent; color: inherit; box-sizing: border-box; font-family: "Source Code Pro", monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal;"><span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.extend</span>( <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">target</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">object1</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[, objectN]</span> )
<span class="hljs-class" style="box-sizing: border-box; color: rgb(155, 112, 63);">.extend</span>( <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">deep</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">target</span> , <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">object1</span> <span class="hljs-attr_selector" style="color: rgb(0, 136, 0); box-sizing: border-box;">[, objectN]</span> )</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; background-color: rgb(238, 238, 238); top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right: 1px solid rgb(221, 221, 221); list-style: none; text-align: right;"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

scrollTo()

滚动窗口屏幕到指定位置，该方法是对window.scrollTo()方法在手机端的增强实现，可设定滚动动画时间及滚动结束后的回调函数;鉴于手机屏幕大小，该方法仅可实现屏幕纵向滚动。

官网链接地址:http://dev.dcloud.net.cn/mui/util/#extend