初识EMCASCRIPT 模块化

Bamboy 发布于2019-08-20 15:28 / 3220人阅读

摘要：到目前为止，我们完成了模块的简易定义与使用。但是模块化的一大精髓是命名空间，就是按需导入，而此时却是一个全局变量。

为什么需要模块化？

当我们在html中调用一个js函数时，如果我们把这个函数写在另外的一个js文件中，那么调用的时候我们需要在html的头部引入那个js文件。

index.html


    


    Hello world

index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = "I am a boy";
}

此时，若我们需要在index.js中生成的文字是动态的，且由另一个js(matn.js)产生，那么如果在java中可以在index.js中使用import package+class模式引用另一个文件中的方法，但是对于javascript这种动态的语言来说是不可以的。因此如果我们要在index.js中能够调用math.js中的函数，那么我们需要同时在index.html中引入math.js。

index.html


    
    


    Hello world

index.js

//import "math.js" 不支持这种写法
function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = add(1,2);
}

math.js

function add(a,b){
    return a + b;
}

我们可以看到这种写法并不优雅，index.js对于math.js没有控制权，能不能调用到add()函数完全取决于自己的html有没有正确的引入math.js。
所以这边就产生了几个问题：
1.index.js无法import,依赖html的引用
2.index.js中无法对add方法的来源做区别分，缺少命名空间的概念
3.Js中只有两种作用域，一个是函数作用域，当函数执行完后变量会释放。而一个是全局作用域，从页面打开到关闭的过程中，变量会一直存在，就会造成全局变量的污染，所以js模块化编程很重要

初步模块化

解决第二个问题，也就是命名空间的概念。
我们把math中的函数放进去一个以math命名的对象中,这样就形成了一个简易版的命名空间了。

math.js

var math = {
    base: 5,
    add: function(a,b){
        return a + b;
    },
};

index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);//我们知道了这个方法来自math这个文件
}

但是这里math对象中的另一个属性base也会被暴露和修改,因此我们升级一下。

math.js

var math = (function(){
    var base = 7;
    return {
        add: function(a,b){
            return a + b + base;
        },
    };
})();

我们把math定义在一个闭包中，从而隐藏了内部属性。
index.js

function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);
    document.write(math.base);//undefine
}

到目前为止，我们完成了模块的简易定义与使用。但是模块化的一大精髓是命名空间，就是按需导入，而此时math却是一个全局变量。因此我们可以引入中间件来解决这个问题。

引入中间件

我们定义一个全局变量

global.js

var module = {
    export: {}
}

在math.js中

var math = (function(){
    var base = 7;
    return {
        add: function(a,b){
            return a + b + base;
        },
    };
})();
mmodule.export.math = math;//把math注册

index.js

var math = module.export.math;//指定了math.js中的math方法
function Girl(){
    var p = document.getElementById("boy");
    p.innerHTML = math.add(1,2);
}

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82281.html

细说 Javascript 拾遗篇（二） : undefined 和 null

摘要：有两个可以表示空的值，分别是和，比较有作用的是前者。访问声明但未初始化的变量。有返回值时函数的表达式没有显式的返回任何内容。然而，为了比较其他变量和值，我们需要提前取得的值。因此，从标准实行后，全局变量已经是不再可写。 Javascript 有两个可以表示空的值，分别是 undefined 和 null，比较有作用的是前者。 undefined undefined 是一种值为 un...

My_Oh_My 2019-08-19 14:45 评论0 收藏0
angular - 收藏集 - 掘金

摘要：如何在中使用动画前端掘金本文讲一下中动画应用的部分。与的快速入门指南推荐前端掘金是非常棒的框架，能够创建功能强大，动态功能的。自发布以来，已经广泛应用于开发中。如何在 Angular 中使用动画 - 前端 - 掘金本文讲一下Angular中动画应用的部分。首先，Angular本生不提供动画机制，需要在项目中加入Angular插件模块ngAnimate才能完成Angular的动画机制...

AlexTuan 2019-08-20 17:19 评论0 收藏0
Javascript简介

摘要：以下内容都是一些概念性的知识点弄懂这些基本的概念是我们在世界看得更远的垫脚石诞生于年年公司开发发布时临时将名字改为当时它的主要目的是处理以前由服务端语言负责的输入验证操作随着其发展现在已不再局限于数据验证而是具备了与浏览器窗口及其内容等几乎以下内容都是一些概念性的知识点,弄懂这些基本的概念是我们在JavaScript世界看得更远的垫脚石. Javascript Javascript诞...

Near_Li 2019-08-21 10:40 评论0 收藏0
ES2015入门系列1-初识ES2015

EcmaScript 其实是一种语言规范，常见的 JavaScript, ActionScript 等都是其具体实现，平时使用中一般可以将其和Javascript对等称呼，本系列教程主要讲述 EcmaScript2015(ES6) 为JavaScript带来的新的特性，并初步掌握如何利用其进行开发。本系列面向有一定基础知识的ES5使用者，不适合初学者。先来看两段代码： Human.js exp...

hellowoody 2019-08-20 17:37 评论0 收藏0
那些年初识Angular(1)

摘要：它包含多个属性，这些属性值叫做元数据。会根据元数据渲染组件，并执行组件逻辑。元数据会告诉图和将这个类处理成一个组件。元数据这段代码表示这个组件可以通过这个标签来调用。那些年初识Angular 由于工作需要初识了Angular，由于个人在学习一门新语言的时候喜欢买一本相关的书籍自己钻研，还记得自己的第一本Angular书籍是关于Angular2的学习，自此正式踏入Angular的学习。...

Flink_China 2019-08-02 11:36 评论0 收藏0