JavaScript进阶篇

最新推荐文章于 2024-09-09 21:28:04 发布

qq_33671032

最新推荐文章于 2024-09-09 21:28:04 发布

阅读量79

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_33671032/article/details/85291427

版权

JavaScript进阶篇(一):模块

什么是模块？

模块做为js中最基础的东西，应该是每个javascripter都了解的东西，这对于刚入门的前端开发者打好基础非常的重要，甚至可以影响到找工作的成功率，那么什么是模块？

模块就是将一个复杂的程序给分为几个块，放在一个内部作用域内，所有变量都是私有的，通过暴露接口来让其他模块调用模块内的函数(通常被称为模块暴露)。

举个栗子，做为已经入门的前端工程师，jquery应该都用过，它就是一个典型的js模块的例子，光说不练假把式，还是写个简单的例子来说明一下吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>componentsDemo</title>
</head>
<button id="btn" class="btn">click</button>
<body>
    <script>
    function api(id){
        var iden = id[0];
        var elemt = id.split(iden);
        var arr = ['#', '.'];
        var dom;
        if(arr.includes(iden)){
            if(iden === '#'){
                dom = document.getElementById(elemt[1]);
            }else{
                dom = document.getElementsByClassName(elemt[1])[0];
            }
        }else{
            dom = document.getElementsByTagName(id)[0];
        }
        function onClick(fn){
          dom.onclick = function(){
              fn();
          }
        }
        // return里的为暴露给外界调用的接口
        return {
            click:onClick
        }
    }
    var $ = api;
    $('#btn').click(function(){
        console.log('components');
    });
    </script>
</body>
</html>

这段代码就高仿了jquery的click函数，所有的函数和变量都是api里的私有变量，在外界访问不到，但是可以通过提供给外界的接口去调用api函数内的私有变量和函数，这个过程也称之为闭包。

对应的，在原有代码的基础上改进一下，可以高仿出jquery的其他函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>componentsDemo</title>
</head>
<button id="btn" class="btn">click</button>

<body>
      <script>
    function api(id){
        var iden = id[0];
        var elemt = id.split(iden);
        var arr = ['#', '.'];
        var dom;
        if(arr.includes(iden)){
            if(iden === '#'){
                dom = document.getElementById(elemt[1]);
            }else{
                dom = document.getElementsByClassName(elemt[1])[0];
            }
        }else{
            dom = document.getElementsByTagName(id)[0];
        }
        function onClick(fn){
          dom.onclick = function(){
              fn();
          }
        }
        function text(val){
            if(val){
                dom.innerText = val;
            }else{
                return dom.innerText;
            }
        }
        // return里的为暴露给外界调用的接口
        return {
            click:onClick,
            text:text
        }
    }
    var $ = api;
    $('#btn').click(function(){
        $('.text').text('this is test');
    });
    </script>
</body>
</html>