摘要:
Vue.js官方提供了一套专用的路由工具库 Vue Router,其使用和配置都非常简单,而且代码清晰易懂,很容易上手。 提示 将单页面应用分割为功能合理的组件或者页面,路由起到一个非常重要的作用,它是连接单页面应用中各页面的链条。 项目使用支持 CommonJS 规范的模块化打包器 Webpack 阅读全文
摘要:
前端路由更多使用在单页面应用(SPA)上,因为单页面应用基本上都是前后端分离的,后端自然不会给前端提供路由。 来看一下前端路由的优缺点。 前端路由的优点 从性能和用户体验的层面来看,后端路由每次访问一个新页面都要向服务器发送请求,然后服务器再响应请求,这个过程肯定会有延迟。而前端路由在访问一个新页面 阅读全文
摘要:
前端路由和后端路由在技术实现上不一样,但原理是一样的。在 HTML5 的 history API 出现之前,前端路由都通过 hash 来实现,hash 能够兼容低版本的浏览器。如果把上一节的 URI 例子用 hash 来实现的话,它的 URI 规则中需要带上“#”。 http://10.0.0.1/ 阅读全文
摘要:
假设有一台提供 Web 服务的服务器的网址是 10.0.0.1,该 Web 服务又提供了 3 个可供用户访问的页面,其页面 URI 分别是 : http://10.0.0.1/ http://10.0.0.1/about http://10.0.0.1/concat 路径分别是/、/about、/c 阅读全文
摘要:
从示例 34 可以看出,使用 import 命令时,用户需要知道所要加载的变量名或函数名,否则无法加载。 为了给用户提供方便,不用阅读文档就能加载模块,需要用到 export default 命令,为模块指定默认输出。使用方法如示例 35 所示 。 示例 35 // export-default.j 阅读全文
摘要:
Promise 是异步编程的一种解决方案,比传统的解决方案一一回调函数和事件更合理、更强大。它由社区最早提出和实现,ES6 将其写进语言标准,统一了用法,原生提其了 Promise 对象 。 所谓 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作〉的结果。从语 阅读全文
摘要:
在使用 ES6 的模块化设计时最常遇到的问题就是如何导入、导出属性和方法,在创建或者使用对应的 js 文件时常用 export 命令导出对应的属性和方法、import 命令导入对应的属性和方法。 1. export 命令 一个模块就是一个独立的文件,文件内部的所有变量外部无法获取。如果希望外部能够读 阅读全文
摘要:
JavaScript 一直没有模块(module)体系,因此无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来,这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommnonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES 阅读全文
摘要:
1. size 属性 size 属性返回 Map 结构的成员总数。 示例26 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); console.log("hzhMap成员总数:") 阅读全文
摘要:
Map 可以接受一个数组作为参数,该数组的成员是一个个表示键值对的数组。查看示例 25 了解如何创建 Map 。 示例25 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); con 阅读全文
摘要:
JavaScript 的对象(Object)本质上是键值对的集合(Hash 结构),但是传统上只能使用字符串作为键,这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但其“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也 阅读全文
摘要:
了解了 ES6 箭头函数的优点,也看到了箭头函数的一些不足。那么在什么场景下不适合使用箭头函数呢? 1. 对象的方式 在对象的方法中不建议使用箭头函数,如果使用了会导致一些问题的产生,看下面这段代码。 示例23 const Hzh = { name: "黄子涵", age: '28', brothe 阅读全文
摘要:
与普通函数相比,箭头函数的优势主要表现在以下两个方面: 不绑定 this、arguments 更简化的代码语法 第二个特点不需要过多赘述,主要讲解不绑定 this 和 arguments 这两个特点。 1.不绑定 this 不绑定 this 可以理解为箭头函数的 this 在定义的时候就确定了,以后 阅读全文
摘要:
语法 (参数1, 参数2, ..., 参数N) => { 函数声明 } (参数1, 参数2, ..., 参数N) => 表达式(单一) // 相当于:(参数1, 参数2, ..., 参数N) => { return 表达式; } // 当只有一个参数时,圆括号是可选的 (单一参数) => { 函数声 阅读全文
摘要:
首先来看示例 17 代码 。 示例17 const Hzh = { name: "黄子涵", age: '28', brother: "黄春钦", mother: "陈兰英", say: function () { setInterval(function () { console.log("你好! 阅读全文