search

博客列表 >PartIII 06 模块与vue简介（0907mon）

PartIII 06 模块与vue简介（0907mon）

老黑
老黑原创
2020年09月12日 21:56:20886浏览

主要内容：模块与vue简介

  1. 模块理解：通过导入js来实现一定功能
  2. 在js文件中实现export，在html的js中import
    • 四个步骤：功能模块实现 -> export -> import -> 具体功能实现
    • 包括变量、函数、类都可以export、import
    • 如果具体模块（例如变量、函数、类）与html中的定义名重复，可以通过别名的方式来实现。
    • 可以单独export、import，也可以一次性或分批
    • 用*统一导入，用对象做“挂载点”，然后用key的方式来进行调用
    • js中的默认值设置只有一个，在import中可以随意设置名称来进行绑定
  3. 按照自己的理解：vue可以认定为一个帮助dom便捷绑定数据、改变属性等的工具或插件
  4. vue中的数据代理和委托

1. 模块理解：通过导入js来实现一定功能

  • 例如分别创建两个js，一个声明，一个调用使用

  • 然后在html调用两者，进行实现。

  • test1.js

  1. let username = "admin";
  • test2.js
  1. console.log(username);
  • demo1.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>通过不同的js文件来模拟模块</title>
  7.   </head>
  8.   <body>
  9.     <script src="test1.js"></script>
  10.     <script src="test2.js"></script>
  11.   </body>
  12. </html>

2. 在js中实现并export，在html在import并实现

  • 四个步骤：功能模块实现 -> export -> import -> 具体功能实现
  • 包括变量、函数、类
  • 两个小技巧：
    • 如果具体模块（例如变量、函数、类）与html中的定义名重复，可以通过别名的方式来实现。
    • 可以单独export、import，也可以一次性或分批
  • module目录下的user.js
  1. // 模块
  2. // export let id = 1;
  3. // export let username = "peter-zhu";
  4. // export let email = "peter@php.cn";
  6. let id = 1;
  7. let username = "peter-zhu";
  8. let email = "peter@php.cn";
  9. // 首选
  10. export { id, username, email };
  12. // 函数
  13. // export function say() {
  14. //   return "Hello " + username;
  15. // }
  17. // 类
  18. // export class Product {
  19. //   constructor(name, price) {
  20. //     this.name = name;
  21. //     this.price = price;
  22. //   }
  23. // }
  25. // 函数
  26. function say() {
  27.   return "Hello " + username;
  28. }
  30. // 类
  31. class Product {
  32.   constructor(name, price) {
  33.     this.name = name;
  34.     this.price = price;
  35.   }
  36. }
  37. // 统一导出
  38. // export { say, Product };
  39. export { say as sayHello, Product };
  40. // sayHello就是别名
  42. // 不支持下面这种动态导出，同样html中不支持动态导入
  43. // if (true) {
  44. //     export status = true;
  45. // }
  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.       import { id, username, email } from "./module/user.js";
  13.       console.log(id);
  14.       console.log(username);
  15.       console.log(email);
  17.       function say() {}
  19.       // 导入的别名函数
  20.       import { sayHello } from "./module/user.js";
  21.       console.log(sayHello());
  23.       import { Product } from "./module/user.js";
  25.       // 类的实例化
  26.       console.log(new Product("方便面", 10));
  27.     </script>
  28.   </body>
  29. </html>

3. 用*统一导入，用对象做“挂载点”

  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.       // 这个时候所有的导入变成一个对象，具体见下面的图。然后就可以像访问对象一样访问对象属性了。
  17.       console.log(user.username, user.email);
  18.       console.log(user.sayHello());
  19.       console.log(new user.Product("电脑", 8999));
  20.       console.log(new user.Product("电脑", 8999).name);
  21.       console.log(new user.Product("电脑", 8999).price);
  23.       //下面这种动态的模块目前是不支持的。
  24.       //   if (true) {
  25.       //     import { id } from "./module/user.js";
  26.       //   }
  27.     </script>
  28.   </body>
  29. </html>

将import中的所有东西变成一个对象。下面是通过console.log看到的东西。

4. 模块使用中的默认值

  • js中的默认值设置只有一个，在import中可以随意设置名称来进行绑定

  • default.js内容

  1. // export default 250;
  2. // 因为一个模块仅允许有一个默认值
  4. // export default function () {
  5. //   return "我是模块中的默认函数";
  6. // }
  7. function hello() {
  8.   return "我是模块中的默认函数";
  9. }
  11. // 默认成员
  12. export default hello;
  14. let count = 100;
  15. let username = "admin";
  17. // 非默认成员
  18. export { count, username };
  20. // 模块的私有成员
  21. let password = "88899";
  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 type="module">
  10.       //   import a from "./module/default.js";
  11.       //   console.log(a);
  12.       //   import b from "./module/default.js";
  13.       //   console.log(b());
  15.       // a或者b名称不重要，因为一般默认值只有一个。
  16.       // 导入时,如果既有默认成员 , 又有非默认成员。默认成员写到最前面。
  17.       import b, { count, username } from "./module/default.js";
  18.       console.log(b());
  19.       console.log(count, username);
  20.     </script>
  21.   </body>
  22. </html>

5. 认识vue.js

  • 网上有一段对vue.js作者的访谈。这人原来是设计出身，因此对前端很感兴趣。学了js。然后有一些出品，被google招聘。

  • 采访 Vue 作者尤雨溪（下面为部分摘录）

当我在美国上大学的时候，老实说，我不知道我想要做什么，而且我的专业是室内艺术和艺术史。当我快毕业时，我感觉很难找到和专业相关的工作。

我盘算着或许我可以去一个适合我的硕士课程，学习更多的技能。我去了 Parsons，读了一个美术设计和技术的硕士。这是一个非常好的专业，因为每个人都是既学习设计也学习编程。他们会教一些比如 openFrameworks，处理，动画算法之类的课程，而且你也必须写应用程序和交互界面。

Parsons 没有真正涉及很多的 JavaScript，但是 JavaScript 很吸引我，因为它能够快速构建一些东西并分享给别人。把它放在网上，通过一个网址，任何有浏览器的人都可以看到。这就是吸引我开始 Web 开发和 JavaScript 编程的原因。

当时 Chrome experiments 这个网站刚刚发布，我深深的被震撼了。我立即开始学习 JavaScript，并开始开发类似 Chrome experiments 的项目。我把这些项目放在我的简历上，然后被 Google 创意实验室的招聘人员注意到了。我加入了Five program。每年创意实验室会招五名应届毕业生，组成一个小组，一个人写文案，一个人搞技术，一个人做平面设计，一个人统筹安排和一个打杂的。

我在 Google 的工作需要在浏览器上进行大量原型设计，于是我想要尽快获得有形的东西。当时有些项目使用了 Angular。Angular 提供了一些用数据绑定和数据驱动来处理 DOM 的方法，所以你不必自己碰 DOM。它也有一些副作用，就是按照它规定的方式来构建代码。对于当时的场景而言实在是太重了。

我想，我可以只把我​​喜欢的部分从 Angular 中提出来，建立一个非常轻巧的库，不需要那些额外的逻辑。我也很好奇 Angular 的源码到底是怎么设计的。我最开始只是想着手提取 Angular 里面很小的功能，如声明式数据绑定。Vue 大概就是这么开始的。

作者：Threeki水机
链接：https://www.jianshu.com/p/3092b382ee80
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

  • 这样的话，按照自己的理解：vue可以认定为一个帮助dom便捷绑定数据、改变属性等的工具或插件

  • vue是MVVM的一个实现，纯数据驱动。MVC对服务器的压力相对大一些？

5-1. MVC

  • M: Model, 从后台获取的数据
  • V: View, 动态展示数据
  • C: Controller, 处理用户请求,完成指定操作
  • 整个数据流是单向的

5-2. MVVM

  • mvc 的扩展。很多东西都放到了前端来执行，而非给服务器太多压力。
  • mvvm: 纯数据驱动
  • 不需要用户主动去操作 DOM 元素

" class="reference-link">

6. Vue实例

  • o：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.     <!-- 引入vue.js库 -->
  7.     <script src="lib/vue.js"></script>
  8.     <title>Vue实例</title>
  9.   </head>
  10.   <body>
  11.     <!-- 在页面的挂载点中使用插值来显示变量表达式的值。也叫“大胡子模式” -->
  12.     <!-- vue的一个作用就是将页面中需要展示的数据不断承接、接管过来 -->
  13.     <div class="app">{{words}}</div>
  14.     <script>
  15.       // vue实例
  16.       const vm = new Vue({
  17.         // 配置
  18.         // 1. 挂载点
  19.         // el: document.querySelector(".app"), 也可以简化为下面的
  20.         el: ".app",
  21.         // 2. 挂载点中的数据对象/ Model / 模型层
  22.         data: {
  23.           words: "Hello php中文网",
  24.         },
  25.       });
  27.       // 下面两个是一致的，第一个是原生访问，data前面必须加$。这个叫"数据代理/委托"
  28.       console.log(vm.$data.words);
  29.       //   console.log(vm.words);
  31.       console.log(vm.$data.words === vm.words);
  34.     </script>
  35.   </body>
  36. </html>

7. 数据代理/委托

  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>
  10.       const user = {
  11.         $base: {
  12.           name: "peter zhu",
  13.           email: "peter@php.cn",
  14.         },
  15.         $private: {
  16.           mobile: "139*********",
  17.           salary: 999999,
  18.         },
  19.       };
  21.       console.log(user.$base.name);
  22.       console.log(user.$base.email);
  23.       console.log("-------------------");
  25.       // 数据访问代理。o：相当于做了一个快捷方式。
  26.       //   user.$base.name , 想用: user.name就能访问,绕过了$base
  27.       // name的访问代理
  28.       Object.defineProperty(user, "name", {
  29.         get: () => user.$base.name,
  30.         set: (value) => (user.$base.name = value),
  31.       });
  33.       console.log(user.name);
  34.       //   user.$base.name = "jack";
  35.       user.name = "Mike";
  36.       console.log(user.name);
  38.       // email的访问代理
  39.       Object.defineProperty(user, "email", {
  40.         get: () => user.$base.email,
  41.         set: (value) => (user.$base.email = value),
  42.       });
  44.       console.log(user.email);
  45.       user.email = "a@qq.com";
  46.       console.log(user.email);
  47.     </script>
  48.   </body>
  49. </html>
上一条：PartIII 07 vue常用指令与语法基础（0908tue）下一条：PartIII 05 类成员与类继承（0904fri）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多