search

博客列表 >es6模块与vue简介

es6模块与vue简介

王佳祥
王佳祥原创
2020年09月08日 18:33:561344浏览

es6模块与vue简介

一、模块

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模块</title>
  7.   </head>
  8.   <body>
  9.     <script src="module/user.js" type="module"></script>
  10.     <script type="module">
  11.       //es6模块：静态
  12.       /*
  13.       ES6 的模块化分为导出（export） 与导入（import）两个模块。
  14.       */
  15.       function say() {}
  16.       import { id, username, email, say2 } from "./module/user.js";
  17.       console.log(id);
  18.       console.log(username);
  19.       console.log(email);
  20.       console.log(say2());
  21.       import { Product } from "./module/user.js";
  22.       console.log(new Product("冰淇淋", 3));
  23.     </script>
  24.   </body>
  25. </html>

user.js

  1. //导出模块
  2. //单个导出
  3. /* export let id = 1;
  4. export let username = "PHP中文网";
  5. export let email = "wang@php.com"; */
  6. //多个导出
  7. let id = 1;
  8. let username = "PHP中文网";
  9. let email = "wang@php.com";
  10. //首选
  11. export { id, username, email };
  13. //函数
  14. function say() {
  15.   return "Hello" + username;
  16. }
  18. //类
  19. class Product {
  20.   constructor(name, price) {
  21.     this.name = name;
  22.     this.price = price;
  23.   }
  24. }
  25. export { say as say2, Product };

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>统一导入全部成员</title>
  7.   </head>
  8.   <body>
  9.     <script src="./module/user.js" type="module"></script>
  10.     <script type="module">
  11.       //用*代码导入外部的全部模块成员
  12.       //用user对象表示所有模块导入的外部成员在脚本中的"挂载点/对象"
  13.       import * as user from "./module/user.js";
  14.       console.log(user);
  15.       console.log(user.username, user.email);
  16.       console.log(user.say2());
  17.       console.log(new user.Product("啤酒", 5));
  18.       console.log(new user.Product("啤酒", 5).name);
  19.       console.log(new user.Product("啤酒", 5).price);
  20.       //import()函数了解下和import不是同一个
  21.       //暂时不支持动态导入
  22.       /*
  23.       if(true){
  24.         import {id} from "./module/user.js";
  25.       }
  26.       */
  27.     </script>
  28.   </body>
  29. </html>

三、模块默认值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>模块默认值</title>
  7.   </head>
  8.   <body>
  9.     <script src="./module/user.js" type="module"></script>
  10.     <script type="module">
  11.       import a from "./module/default.js";
  12.       //不能写大括号，写了会报错 {a}
  13.       console.log(a());
  14.       //导入时，如果有默认成员，又有非默认成员
  15.       //默认成员写到前面
  16.       import b, { count, username } from "./module/default.js";
  17.       console.log(b());
  18.       console.log(count, username);
  19.     </script>
  20.   </body>
  21. </html>

default.js

  1. //export default 250;
  2. //因为一个模块仅允许有一个默认值
  3. //默认成员
  4. export default function () {
  5.   return "我是模块中的默认函数";
  6. }
  7. //非默认成员
  8. let count = 100;
  9. let username = "admin";
  10. export { count, username };
  11. //不导出的成员是私有成员
  12. let password = "123456";
  13. //只能在当前模块中访问

四、vue简介

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>vue简介</title>
  7.     <script src="./module/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <!--
  11.     mvc:
  12.       m:model,从后台获取的数据
  13.       v:view,动态展示数据
  14.       c:controller,处理用户请求，完成指定操作 
  15.     整个数据流是单向的
  16.     视图与模型之间的交互，必须通过控制器
  18.     mvvm:
  19.       view
  20.       viewmodel：vue.js在这层工作
  21.       model
  22.     mvvm:纯数据驱动
  23.     不需要用户主动去操作DOM元素
  24.     文档片段
  25.     -->
  26.     <div class="app">hello php.cn</div>
  27.     <script>
  28.       //vue实例
  29.       const vm = new Vue({
  30.         //配置
  31.         //1.挂载点
  32.         //el: document.querySelector(".app"),
  33.         el: ".app",
  34.         //2.挂载点中的数据对象/Modle/模型
  35.         data: {
  36.           words: "Hello php中文网",
  37.         },
  38.       });
  39.       //console.log(vm.words);
  40.       //访问原生值
  41.       console.log(vm.$data.words);
  43.       console.log(vm.$data.words === vm.words);
  44.     </script>
  45.   </body>
  46. </html>

五、数据代理/委托

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>数据代理/委托</title>
  7.     <script src="./module/vue.js"></script>
  8.   </head>
  9.   <body>
  10.     <script>
  11.       const user = {
  12.         $base: {
  13.           name: "peter",
  14.           email: "peter@php.cn",
  15.         },
  16.         $private: {
  17.           mobile: "188****3639",
  18.           salary: 5000,
  19.         },
  20.       };
  21.       console.log(user.$base.name);
  22.       console.log(user.$base.email);
  23.       console.log("-------------");
  25.       //数据访问代理
  27.       /*
  28.       语法：Object.defineProperty(obj, prop, descriptor)
  29.             obj：需要定义属性的对象
  30.             prop：需要定义的属性
  31.             descriptor：属性的描述描述符
  32.             返回值：返回此对象
  33.       在JS中对象具有两种属性，分别是数据属性和访问器属性，
  34.       所以其描述符也根据属性分类，分为数据描述符和访问器描述符。
  36.       数据描述符：
  38.           configurable：表示该属性能否通过delete删除，
  39.           能否修改属性的特性或者能否修改访问器属性，默认为false。
  41.           enumerable：表示该属性是否可以枚举，
  42.           即可否通过for..in访问属性。默认为false。
  44.           value：表示该属性的值。可以是任何有效的JS值。
  45.           默认为undefined。
  47.           writable：表示该属性的值是否可写，默认为false。
  49.       访问器描述符是一个有getter-setter函数对描述的属性的读写。
  51.           configurable：表示该属性能否通过delete删除，
  52.           能否修改属性的特性或者能否修改访问器属性，默认为false。
  54.           enumerable：表示该属性是否可以枚举，
  55.           即可否通过for..in访问属性。默认为false。
  57.           get：在读取属性时调用的函数，默认值为undefined。
  59.           set：在写入属性时调用的函数，默认值为undefined。
  61.       数据描述符和访问器描述符不能同时使用，否则会报错。
  63.       */
  64.       //user.$base.name,想用:user.name就能访问，绕过了$base
  65.       //name的访问代理
  66.       Object.defineProperty(user, "name", {
  67.         get: () => user.$base.name,
  68.         set: (value) => (user.$base.name = value),
  69.       });
  70.       console.log(user.name);
  71.       //user.$base.name = "jack";
  72.       user.name = "Mike";
  73.       console.log(user.name);
  74.       //email的访问代理
  75.       Object.defineProperty(user, "email", {
  76.         get: () => user.$base.email,
  77.         set: (value) => (user.$base.email = value),
  78.       });
  79.       console.log(user.email);
  80.       //user.$base.name = "jack";
  81.       user.email = "Mike@qq.com";
  82.       console.log(user.email);
  83.     </script>
  84.   </body>
  85. </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)
  1.         obj：需要定义属性的对象
  2.         prop：需要定义的属性
  3.         descriptor：属性的描述描述符
  4.         返回值：返回此对象
  6.  在JS中对象具有两种属性，分别是数据属性和访问器属性，
  7.  所以其描述符也根据属性分类，分为数据描述符和访问器描述符。

  • 数据描述符：

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

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

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

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

上一条：数组分类和遍历，以及数组函数下一条：考上大学办酒邀请函，升学宴邀请函模板
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多