es6模块与vue简介

一、模块

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块</title>
  </head>
  <body>
    <script src="module/user.js" type="module"></script>
    <script type="module">
      //es6模块：静态
      /*
      ES6 的模块化分为导出（export） 与导入（import）两个模块。
      */
      function say() {}
      import { id, username, email, say2 } from "./module/user.js";
      console.log(id);
      console.log(username);
      console.log(email);
      console.log(say2());
      import { Product } from "./module/user.js";
      console.log(new Product("冰淇淋", 3));
    </script>
  </body>
</html>

user.js

//导出模块
//单个导出
/* export let id = 1;
export let username = "PHP中文网";
export let email = "wang@php.com"; */
//多个导出
let id = 1;
let username = "PHP中文网";
let email = "wang@php.com";
//首选
export { id, username, email };
//函数
function say() {
  return "Hello" + username;
}
//类
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
export { say as say2, Product };

二、模块统一导入全部成员

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>统一导入全部成员</title>
  </head>
  <body>
    <script src="./module/user.js" type="module"></script>
    <script type="module">
      //用*代码导入外部的全部模块成员
      //用user对象表示所有模块导入的外部成员在脚本中的"挂载点/对象"
      import * as user from "./module/user.js";
      console.log(user);
      console.log(user.username, user.email);
      console.log(user.say2());
      console.log(new user.Product("啤酒", 5));
      console.log(new user.Product("啤酒", 5).name);
      console.log(new user.Product("啤酒", 5).price);
      //import()函数了解下和import不是同一个
      //暂时不支持动态导入
      /*
      if(true){
        import {id} from "./module/user.js";
      }
      */
    </script>
  </body>
</html>

三、模块默认值

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模块默认值</title>
  </head>
  <body>
    <script src="./module/user.js" type="module"></script>
    <script type="module">
      import a from "./module/default.js";
      //不能写大括号，写了会报错 {a}
      console.log(a());
      //导入时，如果有默认成员，又有非默认成员
      //默认成员写到前面
      import b, { count, username } from "./module/default.js";
      console.log(b());
      console.log(count, username);
    </script>
  </body>
</html>

default.js

//export default 250;
//因为一个模块仅允许有一个默认值
//默认成员
export default function () {
  return "我是模块中的默认函数";
}
//非默认成员
let count = 100;
let username = "admin";
export { count, username };
//不导出的成员是私有成员
let password = "123456";
//只能在当前模块中访问

四、vue简介

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue简介</title>
    <script src="./module/vue.js"></script>
  </head>
  <body>
    <!--
    mvc:
      m:model,从后台获取的数据
      v:view,动态展示数据
      c:controller,处理用户请求，完成指定操作 
    整个数据流是单向的
    视图与模型之间的交互，必须通过控制器
    mvvm:
      view
      viewmodel：vue.js在这层工作
      model
    mvvm:纯数据驱动
    不需要用户主动去操作DOM元素
    文档片段
    -->
    <div class="app">hello php.cn</div>
    <script>
      //vue实例
      const vm = new Vue({
        //配置
        //1.挂载点
        //el: document.querySelector(".app"),
        el: ".app",
        //2.挂载点中的数据对象/Modle/模型
        data: {
          words: "Hello php中文网",
        },
      });
      //console.log(vm.words);
      //访问原生值
      console.log(vm.$data.words);
      console.log(vm.$data.words === vm.words);
    </script>
  </body>
</html>

五、数据代理/委托

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>数据代理/委托</title>
    <script src="./module/vue.js"></script>
  </head>
  <body>
    <script>
      const user = {
        $base: {
          name: "peter",
          email: "peter@php.cn",
        },
        $private: {
          mobile: "188****3639",
          salary: 5000,
        },
      };
      console.log(user.$base.name);
      console.log(user.$base.email);
      console.log("-------------");
      //数据访问代理
      /*
      语法：Object.defineProperty(obj, prop, descriptor)
            obj：需要定义属性的对象
            prop：需要定义的属性
            descriptor：属性的描述描述符
            返回值：返回此对象
      在JS中对象具有两种属性，分别是数据属性和访问器属性，
      所以其描述符也根据属性分类，分为数据描述符和访问器描述符。
      数据描述符：
          configurable：表示该属性能否通过delete删除，
          能否修改属性的特性或者能否修改访问器属性，默认为false。
          enumerable：表示该属性是否可以枚举，
          即可否通过for..in访问属性。默认为false。
          value：表示该属性的值。可以是任何有效的JS值。
          默认为undefined。
          writable：表示该属性的值是否可写，默认为false。
      访问器描述符是一个有getter-setter函数对描述的属性的读写。
          configurable：表示该属性能否通过delete删除，
          能否修改属性的特性或者能否修改访问器属性，默认为false。
          enumerable：表示该属性是否可以枚举，
          即可否通过for..in访问属性。默认为false。
          get：在读取属性时调用的函数，默认值为undefined。
          set：在写入属性时调用的函数，默认值为undefined。
      数据描述符和访问器描述符不能同时使用，否则会报错。
      */
      //user.$base.name,想用:user.name就能访问，绕过了$base
      //name的访问代理
      Object.defineProperty(user, "name", {
        get: () => user.$base.name,
        set: (value) => (user.$base.name = value),
      });
      console.log(user.name);
      //user.$base.name = "jack";
      user.name = "Mike";
      console.log(user.name);
      //email的访问代理
      Object.defineProperty(user, "email", {
        get: () => user.$base.email,
        set: (value) => (user.$base.email = value),
      });
      console.log(user.email);
      //user.$base.name = "jack";
      user.email = "Mike@qq.com";
      console.log(user.email);
    </script>
  </body>
</html>

学习总结

1.模块

ES6 的模块化分为导出export与导入import两个模块
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取
import 命令会提升到整个模块的头部，首先执行
不同模块导出接口名称命名重复，使用 as 重新定义变量名
import 命令的特点

只读属性：不允许在加载模块的脚本里面，改写接口的引用指向，即可以改写 import 变量类型为对象的属性值，不能改写 import 变量类型为基本类型的值

单例模式：多次重复执行同一句 import 语句，那么只会执行一次，而不会执行多次

静态执行特性：import 是静态执行，所以不能使用表达式和变量

2.模块统一导入全部成员

用*代码导入外部的全部模块成员
用一个对象或者变量表示所有模块导入的外部成员在脚本中的”挂载点/对象”
import暂时不支持动态导入,会报语法错误
import()函数支持动态加载
import()函数返回一个 Promise 对象
import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。

3.模块默认值

一个模块仅允许有一个默认值
export defaul来定义默认值
通过 export 方式导出，在导入时要加{ }，export default 则不需要
export default是向外暴露的成员，可以使用任意变量来接收
导入默认成员时，不需要加大括号{}，否则会报语法错误
导入时，如果有默认成员，又有非默认成员，默认成员写到前面，非默认成员写到后面

4.vue简介

Vue是一套用于构建用户界面的渐进式框架
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

5.数据代理/委托

语法：Object.defineProperty(obj, prop, descriptor)

        obj：需要定义属性的对象
        prop：需要定义的属性
        descriptor：属性的描述描述符
        返回值：返回此对象
 在JS中对象具有两种属性，分别是数据属性和访问器属性，
 所以其描述符也根据属性分类，分为数据描述符和访问器描述符。

数据描述符：

   configurable：表示该属性能否通过delete删除，
   能否修改属性的特性或者能否修改访问器属性，默认为false。
   enumerable：表示该属性是否可以枚举，
   即可否通过for..in访问属性。默认为false。
   value：表示该属性的值。可以是任何有效的JS值。
   默认为undefined。
   writable：表示该属性的值是否可写，默认为false。

访问器描述符是一个有getter-setter函数对描述的属性的读写。

    configurable：表示该属性能否通过delete删除，
    能否修改属性的特性或者能否修改访问器属性，默认为false。
    enumerable：表示该属性是否可以枚举，
    即可否通过for..in访问属性。默认为false。
    get：在读取属性时调用的函数，默认值为undefined。
    set：在写入属性时调用的函数，默认值为undefined。

数据描述符和访问器描述符不能同时使用，否则会报错。

es6模块与vue简介

es6模块与vue简介

一、模块

二、模块统一导入全部成员

三、模块默认值

四、vue简介

五、数据代理/委托

学习总结

1.模块

2.模块统一导入全部成员

3.模块默认值

4.vue简介

5.数据代理/委托

相关文章