Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > es6模块与vue简介
Blogger Information
Blog 55
fans 3
comment 0
visits 54982
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
es6模块与vue简介
王佳祥
Original
1351 people have browsed it

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。

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

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：js内部有许多地方, 坑很多, 需要多做一些练习才可以了解
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post