zoukankan      html  css  js  c++  java
  • vue之模块化开发

    模块化开发一之ES6的模块化

    javascript 原始功能

    • 在网页开发早起,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等。那个时候代码还很少的。
    • 那个时候的代码是怎么写的呢? 直接将代码写在script标签中
    • 随着ajax 异步请求额出现,慢慢形成了前后端分离:
    • 客户端需要完成的事情越来越多,代码量也与日俱增
    • 为了应对代码量的剧增,我们通常会见代码组织在多个js文件中,进行维护
    • 但是这种维护方式,依然不能避免一些灾难性问题
      • 比如说:全局 变量的同名的问题
        • 虽然匿名闭包函数解决了变量名冲突的问题,到时同事带来了函数不可复用的问题。
    //匿名闭包函数
    (function(){
      var flag = true
    })
    
    • 模块化思维解决冲突:
      • 在匿名函数中定义一个对象
      • 给对象添加各种需要暴露到外部的属性和方法(不需要暴露的直接定义即可)
      • 最后将这个对象返回,并且在外部使用MoudleA 接收。
    • 上述方法:是实现模块化雏形:
    • 常规的模块化规范:
      • CommonJS
      • AMD
      • CMD
      • 也有ES6的Modules
    • 模块化有两个核心:
      • 导入模块
      • 导出模块

    CommonJS导入和导出

    • 导出模块中的属性或方法
    flag = true
    module.exports = {
      flag:flag,
      test(a,b){
        return a+b
      },
      demo(a,b){
        return a*b
      }
    }
    
    • 导入模块中的属性或方法
    // commonjs 模块
    let { test,demo,flag} = require('moduleA')
    // 等同于
    let _mA = require('moduleA')
    let test = _mA.test;
    let demo = _mA.demo;
    let flag = _mA.flag;
    

    ES6的模块化实现(重点)

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
    </head>
    <body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="aaa.js" type="module"></script>
    <script src="bbb.js" type="module"></script>
    <script>
    
    </script>
    </body>
    </html>
    

    Aaa.js

    var name='qzk';
    var age = 18;
    var flag = true;
    
    function sum(a,b) {
      return a+b
    }
    
    
    // 导出变量
    export {
      flag,name,age,sum
    }
    
    // 导出变量方式二
    export var test1 = 'hahah';
    
    
    // 直接导出函数
    export function mul(num1,num2) {
      return num1+num2
    }
    
    // 直接导出类
    export class Person {
      run(){
        console.log('在running');
      }
    }
    
    // 使用default 默认导出
    // 在某些情况下,一个模块中包含某个功能,我们并不希望给这个功能命名,erqie可以让使用者自己命名 可以使用default
    const address = 'shanghai';
    export default address
    

    Bbb.js

    import {name,flag,age,sum} from "./aaa.js";
    if (flag){
      console.log("小明是天才");
      console.log(sum(10, 20));
    }
    // 直接导入 export 定义的变量
    import {test1} from "./aaa.js";
    console.log(test1);
    
    // 导入export 定义的函数
    import {mul,Person} from "./aaa.js";
    
    console.log(mul(10, 100));
    
    const p = new Person();
    p.run();
    
    
    // 导入 默认变量或方法:此时可以自己命名这个变量或方法
    import addr from "./aaa";
    
    console.log(addr);
    
    // 统一对某个js中的变量全部导出
    import * as aaa from "./aaa.js"
    
    console.log(aaa.mul(10, 20));
    
    
    
  • 相关阅读:
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(2)
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(9)
    《Microsoft Sql server 2008 Internals》读书笔记第九章Plan Caching and Recompilation(10)
    CKEditor在asp.net环境下的使用一例
    《Microsoft Sql server 2008 Internals》读书笔记第五章Table(7)
    《Microsoft Sql server 2008 Internals》读书笔记第九章Plan Caching and Recompilation(11)
    千万数据的连续ID表,快速读取其中指定的某1000条数据?
    javascript中的float运算精度
    .Net与Java的互操作(.NET StockTrader微软官方示例应用程序)
    《Microsoft Sql server 2008 Internals》读书笔记第十一章DBCC Internals(6)
  • 原文地址:https://www.cnblogs.com/qianzhengkai/p/12914864.html
Copyright © 2011-2022 走看看