• ES6模块化操作


    在ES5中我们要进行模块化操作需要引入第三方类库,随着前后端分离,前端的业务日渐复杂,ES6为我们增加了模块化操作。模块化操作主要包括两个方面。
    export :负责进行模块化,也是模块的输出。
    import : 负责把模块引,也是模块的引入操作。

    export的用法:

    export可以让我们把变量,函数,对象进行模块化,提供外部调用接口,让外部进行引用。先来看个最简单的例子,把一个变量模块化。我们新建一个temp.js文件,然后在文件中输出一个模块变量。
    export var a = 'js';
    然后可以在index.js中以import的形式引入。
    import {a} from './temp.js';
    console.log(a);
    这就是一个最简单的模块的输出和引入。

    多变量的输出

    这里声明了3个变量,需要把这3个变量都进行模块化输出,这时候我们给他们包装成对象就可以了。
    var a ='js';
    var b ='技术';
    var c = 'web';
    export {a,b,c}

    函数的模块化输出

    as的用法

    有些时候我们并不想暴露模块里边的变量名称,而给模块起一个更语义话的名称,这时候我们就可以使用as来操作。
    var a ='js';
    var b ='技术';
    var c = 'web';
    
    export {
        x as a,
        y as b,
        z as c
    }

    import用as方式引入 (多个变量用一个空对象来代理,你所有的方法和属性都是在types命名空间)

     const LOGIN = 'login';
    
     const LOGOUT = 'logout';
    
     const TITLE = 'title'
    
     export {LOGIN,LOGOUT,TITLE}
    import * as types from './temp.js' //你所有的方法和属性都是在types命名空间
    
    调用里面里面的值可以 这样做
    types.LOGIN 
    types.LOGOUT
    types.TITLE

    export default的使用

    加上default相当是一个默认的入口。在一个文件里export default只能有一个。我们来对比一下export和export   default的区别

    1.export

    export var a ='js';
    
    export function add(a,b){
        return a+b;
    }
    对应的导入方式
    import {a,add} form './temp';//也可以分开写

    2.export defalut

    export default var a='js';
    对应的引入方式
    import a from './temp';
    ES6的模块化不能直接在浏览器中预览,必须要使用Babel进行编译之后正常看到结果。这节课讲完我们ES6的课程就算结束了,你可能觉的没有书上的内容多,那是因为很多东西都归到了ES7中。甚至连Babel都不能很好的转换,这些知识我就不给大家讲解了。另外如果你想继续深入学习,可以搜索阮一峰大神的ES6在线图书。

     与es5对应的写法

    var App = require('./App')  等价写法   import App from './App'
    module.exports={ } 等价写法  export default { } 

     实例

    const formatStartTime = date => { 功能块代码 }
    
    module.exports = {
        formatStartTime: formatStartTime,
    }
    import formatStartTime from '../../assets/js/curData'
    var StartTime =formatStartTime.formatStartTime;
  • 相关阅读:
    vue之下拉菜单Dropdown的使用
    elinput输入框的readonly属性
    通过CollectionUtils工具类判断集合是否为空,通过StringUtils工具类判断字符串是否为空
    前端与后端之间参数的传递与接收和@RequestBody,@Requestparam,@Param三个注解的使用
    为什么数据库能查出两条id相同的数据
    js中函数调用时,对参数个数和类型没有要求
    避免创建不需要的对象,消除过期对象的引用
    避免使用终结方法
    避免使用终结方法
    快速排序
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/7230669.html
Copyright © 2020-2023  润新知