VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > temp > JavaScript教程 >
  • 前端模块化开发

CommonJS规范

CommonJS使用 exports 和require 来导出、导入模块

每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的对其他文件不可见。

  1. 创建“module”文件夹

  2. 创建 mokuai-common-js/四则运算.js

    // 定义成员:
    const sum = function (a, b) {
        return a + b
    }
    const subtract = function (a, b) {
        return a - b
    }
    const multiply = function (a, b) {
        return a * b
    }
    const divide = function (a, b) {
        return a / b
    }
    
  3. 导出模块中的成员

    // 导出成员:
    module.exports = {
        sum: sum,
        subtract: subtract,
        multiply: multiply,
        divide: divide
    }
    //简写
    module.exports = {
        sum,
        subtract,
        multiply,
        divide
    }
    
  4. 创建 mokuai-common-js/引入模块.js

    //引入模块,注意:当前路径必须写 ./
    const m = require('./四则运算.js')
    console.log(m)
    const r1 = m.sum(1,2)
    const r2 = m.subtract(1,2)
    console.log(r1,r2)
    
  5. 运行程序

    node 引入模块.js
    

    image-20210315090317119

ES6模块化规范

ES6使用 export 和 import 来导出、导入模块

  1. 创建 mokuai-es6 文件夹

  2. 创建 src/userApi.js 文件,导出模块

    export function getList() {
        console.log('获取数据列表')
    }
    export function save() {
        console.log('保存数据')
    }
    
  3. 创建 src/userComponent.js文件,导入模块

    //只取需要的方法即可,多个方法用逗号分隔
    import { getList, save } from './userApi.js'
    getList()
    save()
    

    注意:这时的程序无法运行的,因为ES6的模块化无法在Node.js中执行,需要用Babel编辑成ES5
    后再执行

  4. 初始化项目

    npm init -y
    
  5. 配置 .babelrc

    {
        "presets": [
            "es2015"
        ],
        "plugins": []
    }
    
  6. 安装转码器,在项目中安装

    npm install --save-dev babel-preset-es2015
    
  7. 定义运行脚本,package.json中增加"build"

    image-20210315091657009

  8. 执行命令转码

    npm run build
    

    image-20210315091855122

  9. 运行程序

    node dist/userComponent.js
    

    image-20210315092021261

ES6模块化写法2

  1. 创建 src/userApi2.js ,导出模块

    export default {
        getList() {
            console.log('获取数据列表2')
        },
        save() {
            console.log('保存数据2')
        }
    }
    
  2. 创建 src/userComponent2.js,导入模块

    import user from "./userApi2.js"
    user.getList()
    user.save()
    
  3. 执行命令转码

    npm run build
    
  4. 运行程序

    node dist/userComponent2.js
    
 
出处:https://www.cnblogs.com/bleso/p/14535784.html


相关教程