Barry's Blog

字符串的扩展本章介绍 ES6 对字符串的改造和增强，下一章介绍字符串对象的新增方法。 字符的 Unicode 表示法ES6 加强了对 Unicode 的支持，允许采用\uxxxx形式表示一个字符，其中xxxx表示字符的 Unicode 码点。 12"\u0061"// "a" 但是，这种表示法只限于码点在\u0000~`\uFFFF`之间的字符。超出这个范围的字符，必须用两个双字节的形式表示。 12345"\uD842\uDFB7"// "𠮷""\u20BB7"// " 7" 上面代码表示，如果直接在\u后面跟上超过0xFFFF的数值（比如\u20BB7），JavaScript 会理解成\u20BB+7。由于\u20BB是一个不可打印字符，所以只会显示一个空格，后面跟着一个7。 ES6 对这一点做出了改进，只要将码点放入大括号，就能正确解读该字符。 1234567891011"\u{20BB7}"//...

Module 的语法概述历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。 12345678// CommonJS模块let { stat, exists, readFile ...

Proxy概述Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。 12345678910var obj = new Proxy({}, { get: function (target, propKey, receiver) { console.log(`getting ${propKey}!`); return Reflect.get(target, propKey, receiver); }, set: function (target, propKey, value, receiver) { console.log(`setting $&...

JS随机打乱数组12345678910111213function shuffle(arr) { // 随机打乱数组 let _arr = arr.slice() // 调用数组副本，不改变原数组 for (let i = 0; i < _arr.length; i++) { let j = getRandomInt(0, i) let t = _arr[i] _arr[i] = _arr[j] _arr[j] = t } return _arr}function getRandomInt(min, max) { // 获取min到max的一个随机数，包含min和max本身 return Math.floor(Math.random() * (max - min + 1) + min)}

v-if vs v-showAPI v-if 根据渲染条件决定是否把元素渲染到DOM页面，而v-show不管渲染条件是什么，都会把元素渲染到DOM页面，只是简单的切换CSS的显示隐藏。 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/30.v-if vs v-show.md。原作者：xugaoyi。许可证：MIT。

计算属性 vs 方法 vs 侦听属性API 如果一个功能同时可以使用计算属性(computed)、方法(methods)、侦听属性(watch)来实现的时候推荐使用计算属性。 计算属性 方法 侦听属性 计算属性是基于它们的响应式依赖进行缓存的 每当触发重新渲染时，调用方法将总会再次执行函数 有缓存，但相比计算属性，实现起来要复杂很多。 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔记/01.基础/20.计算属性 vs 方法 vs 侦听属性.md。原作者：xugaoyi。许可证：MIT。

实例生命周期钩子实例生命周期钩子API 简单理解，生命周期钩子函数就是vue实例在某一个时间点会自动执行的函数。 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364<div id="app">{{msg}}</div>&lt;script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">&lt;/script>&lt;script> var vm = new Vue({ el: '#app', data: { msg: 'Vue的生命周期' }, beforeCreate: function() ...

vuex操作相关123456789101112131415161718192021222324import { mapActions, mapMutations, mapGetters } from 'vuex'computed: { ...mapGetters([ // 获取数据，内部为数组 'searchHistory' // 相当于在data插入searchHistory和获取到的数据 ])},methods: { 某方法(){ this.saveSearchHistory(传入值) }, ...mapActions([ // 提交actions修改数据，内部为数组 因为actions文件已对方法进行了封装所有是数组类型 'saveSearchHistory' // 相当于在methods绑定了事件saveSearchHistory ]), 某方法() { this.setFullScre...

兄弟组件传值子组件1中把值传到父组件,父组件获取值传入子组件2 父组件： 123456789101112131415<子组件1 @方法名x="方法名y"></子组件1><子组件2 :值名称x="值x"></子组件2 >data() { return { 值x: '' }},methods: { 方法名y(值) { this.值x = 值 }} 子组件1： 1this.$emit('方法名x', 值) // 传出值 子组件2： 123456props: { 值名称x: { // 接收父组件传入值 type: String, default: '' }} 来源：本文导入自 xugaoyi/vuepress-theme-vdoing 的 docs/《Vue》笔...

子组件派发事件和值给父组件API 子组件通过$emit派发事件和值给父组件（值可以有多个） 1this.$emit('fnX', value) 父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值 12345678<ComponentName @fnX="fnY"></ComponentName>methods: { fnY(value) { console.log(value) }} 父子组件间传递数据 demo See the Pen mdJVqgg by xugaoyi (@xugaoyi) on CodePen. 1&lt;script async src="https://static.codepen.io/assets/embed/ei.js">&lt;/script> 来源：本文导入自 xugaoyi/vuepress-theme-vdoing ...