YIDAN CHEN
YIDAN CHEN
- 本文首发于`https://escawn.github.io/(已废弃)` - 发表时间2017/07/30 ### 简介 > vue-devtools是一款基于chrome浏览器的调试vue.js应用的扩展程序 长这样:  [安装及介绍在这](https://github.com/vuejs/vue-devtools) ### 原因&解决 #### 正常情况 正常情况下,使用vue-devtools进行调试,如上图,主要有两个条件 1. 右上角chrome扩展的vue标识亮,这表示当前页面检测到引用了vue文件 2. chrome调试窗口出现vue一栏,这表示能够对当前页面进行调试 如果1不正常,则一定不会出现2,即1是2的必要条件,由这两点出发,看看"不出问题的人是相似的,出问题的人则各有各的问(bu)题(xing)"是个什么情况 #### 右上角vue标识变灰 点击时会出现提示,Vue.js not detected.(未检测到vue.js) 可是我明明用了vue呀,怎么回事? ##### chrome扩展程序选项的问题 打开chrome的扩展程序管理界面,检查...
- 本文首发于`https://escawn.github.io/(已废弃)` - 发表时间2017/07/20 eventBus是一个vue实例,上面挂载了许多监听事件,通过触发相应的监听事件,可以实现不同层级的组件之间的通信。 ### eventBus简介 eventBus是为小型项目等组件层级不深,状态不复杂的项目提供的组件通信方案,它本质上可以看做是一个挂载了许多事件的vue实例,在所需组件中引入这个实例,以此为桥梁,触发不同层级组件中监听的事件。 #### 基础用法 ##### 单独的eventBus文件 ```js // 单独声明一个eventBus.js,里面仅需声明一个vue实例 // eventBus.js import vue from "vue" const eventBus = new Vue({}) export default eventBus //...
- 本文首发于知乎《百度外卖前端专栏》[如何不择手段提升scroll事件的性能](https://zhuanlan.zhihu.com/p/30078937) - 发表时间2017/10/18 `` ## TL;DR 1. chrome devtool 是诊断页面滚动性能的有效工具 2. 提升滚动时性能,就是要达到fps高且稳。 3. 具体可以从以下方面着手 - 使用web worker分离无页面渲染无关的逻辑计算 - 触发监听事件时使用函数节流与函数去抖 - 使用requestAnimationFrame与requestIdleCallback代替定时器 - 避免强制重排 - 提升合成层 ## 场景 滚动行为无时无刻不出现在我们浏览网页的行为中,在许多场景中,我们有有意识地、主动地去使用滚动操作,比如: -...
- 本文首发于`https://escawn.github.io/(已废弃)` - 发表时间2017/07/20 ### 摘要 webpack是当下流行的前端工程打包工具,本文较深入地分析了其运作原理,以及一些常用功能的实现思路。 --- ### 简介 > Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。 ### 概念介绍 #### Entry ##### 介绍...
- 本文首发于简书 - 发表日期:2016/09/04 ### 数组 js中本身就有数组对象,数组中的每一项都可以保存**任何类型**的数据.且ECMAScript 数组的大小是可以**动态调整**的,即可以随着数据的添加自动增长以容纳新增数据。接下来创建的列表、队列、链表等对象都是**基于数组**的。 #### 数组的构造 数组的创建也有构造函数和对象字面量两种方法。在使用 Array 构造函数时也可以省略 new 操作符。 ```js var colors = Array(3); // 创建一个包含 3 项的数组 var names = Array("Greg"); // 创建一个包含...