微信公众号 讲师中心
首页
文章
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 UI设计 计算机基础
编程手册
大前端 JavaScript 后端开发 数据库 移动端 运维开发 UI设计 计算机基础 XML Web Services
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
web3.0 后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > es6模块与vue简介
博主信息
博文 55
粉丝 3
评论 0
访问量 70565
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
es6模块与vue简介
王佳祥
原创
2062人浏览过

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。

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

批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：js内部有许多地方, 坑很多, 需要多做一些练习才可以了解
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录