• js学习笔记(九)


    JavaScript

    JavaScript 模块的导入与导出

    js模块的产生是便于代码的复用,可以从一个程序导出也可以导入到另一个程序中使用。
    - 代码的可维护性和易用性提高;
    - 复用代码的逻辑框架
    - 保护模块也保护不受其他模块影响
    - 解决命名空间问题和命名冲突问题

    一、模块modules的导出

    模块导出可以使用module.exports来导出

    let Animal ={}  //定义一个代表模块的对象
    Animal.name = 'dog'  //添加模块的属性
    Animal.age = 1
    module.exports = Animal  //将Animal对象作为模块导出,其中module代表了这一模块,exports将这一模块作为对象导出。
    //--------------------------------------
    
    //另一中导出的方法,利用module.exports={code集合}来定义需要导出的属性和方法,定制
    let plant = {}  //同样定义一个对象代表导出的模块
    module.exports{
        name: 'flower',
        age : 1,
        showName(){console.log(this.name)}, //使用this指针指代导出的对象。
    //注:对象的函数定义可以使用函数表达式,也可使用es6新方法》》但箭头表达式有疑问《《??
    //注:两种导出方法不要混用
    }
    //--------------------------------------
    
    //es6中导出模块可用export default代替module.exports
    let Micro = {
        name: 'cell',
        age: 'days',
        exportName: function(){return this.name},
    }
    export default Micro  //利用export default 来代替先前的module.exports
    //注:此时导入模块需要使用 import moduleNameVar from './modulefilename',无需js后缀,import name可以自定义
    //--------------------------------------
    
    //第四种方法称为命名导出named export,无需定义模块对象。直接将需要的数据函数对象变量导出即可,此方法得名于直接导出相应变量名。
    let sea = ['red sea','mediterranean sea']
    function showName(){console.log(sea[1])}
    export {sea, showName} //直接导出对应的变量名,可分行写导出多次多个变量
    //--------------------------------------
    
    //第四种方法可以直接在变量名前加注 关键字export 注明为可导出变量
    export let sky = 'blue'
    export function show(){console.log(sky)}
    //之间将变量名expose出去即可使用,export关键字标明了变量可以导出的属性 
    //导入变量时同样需要import {name}形式来导入
    //--------------------------------------
    
    //第五中方式是别名导出的方式 export {varName1 as alias,varName2 as alias2...}
    let animnalName = 'dog'
    function showAnimal(name){console.log(name)}
    //先定义变量与函数对象,随后利用别名导出
    export {animalName as Aname, showAnimal as showA}   //此时用Aname指代了animalName,showA指代了showAnimal()
    

    导出模块共分为三步:
    - 定义一个表示模块的对象
    - 为模块添加数据和方法(func)
    - 导出模块module.exports


    二、模块的导入require()

    利用require()函数导入模块,从而可以外部控制模块内部的数据和行为。

    const Animal=require('./animal.js')  //从animal.js这个文件中导入模块,需要用const定义一个变量来接收导入的模块,常量的命名自由
    console.log(Animal.name)  //操作模块内部的数据
    //--------------------------------------
    
    //当使用export default 形式导出时
    import moduleNameVar from './modulefilename'  // 需要使用import 的形式导入,其中moduleNameVar即为导入后代表模块的变量名,无需后缀
    //--------------------------------------
    
    //当使用export {varName1,varName2,...}形式导出时
    import {varName1,varName2,} from 'moduleFilePath/Name'   //从文件名导入无需js后缀
    //import {} 可以分行写导入,多次导入多个模块变量
    //--------------------------------------
    
    //当变量直接export前缀时,可以直接导入变量名,与上同
    import {varName1,..} from 'moduleFileName'
    //导入的变量名包含了方法和属性数据,可以直接通过变量名访问使用
    //若导出时使用了混合导出,既有export {},也有export default obj,
    //function isAnimalWow() {};
    //export default isAnimalWow;
    //则导入时需要另起一行import 导入default的对象
    //--------------------------------------
    
    //别名导入的方式 import 别名 from 'moduleFile'
    import {var_alias1,...} from './menu';
    //若没有用export导出别名,而是直接导出全名,则可利用import var1Name as alias来导入
    impot {varName1 as alias1,varName2 as alias2,...} from './moduleFileName'
    //--------------------------------------
    
    //整体导入,将所有的变量作为整体别名模块导入,类似python
    import * as Alias from 'moduleFileName'
    

    导入模块主要分为两步:
    - require('module/path')或者import导入模块所在js文件;
    - 可以利用函数、表达式操作代表模块的const变量,从而操作模块内部的属性数据和方法。


    三、总结

    利用module.exports 导出模块,利用require()导入模块
    ES6标准中可以利用export, export defaultexport as等导出,利用import 导入



    tips
    1.js**导出**模块时的一些迷惑 module.exports

    module.exports 初始值为一个空对象 {}
    exports 是指向的 module.exports 的引用
    require() 返回的是 module.exports 而不是 exports

    2.js的this指针
    3.老版本的定义方法
    4.import {}export {}可以分行写,导入多个模块或变量

  • 相关阅读:
    Android内存分析和调优(中)
    Android内存分析和调优(上)
    背包九讲之四:混合背包问题:01,完全,多重的混合
    背包九讲之三:多重背包问题:一个物品允许选有限次
    背包九讲之二:完全背包问题:一个物品允许选多次
    背包九讲之一:01背包问题:一个物品只允许选一次
    动态规划:最长递增子序列
    动态规划:采油区域
    Hankson的趣味题
    动态规划:传纸条
  • 原文地址:https://www.cnblogs.com/Tom-Ren/p/9897842.html
Copyright © 2020-2023  润新知