fanhaozhi-优快云博客

原创 JavaScript 的原型链

首先要明确的是，JavaScript 是面向对象的语言，但与 Java 、 C# 等语言有别，没有类的概念，而是基于原型链 (即使是ES6的"class"也是基于原型链的一种语法糖)。理解原型对象只要创建一个新函数，系统默认为其创建一个 prototype 属性，指向函数的原型对象。默认情况下，所有原型对象都自动获得一个 constructor 属性，指向prototype 属性所在...

2019-03-03 23:03:13 172

原创 JavaScript 的 this 指向

this 的定义this 是一个指针，指向的是函数执行的环境对象。用几个例子说明 this 的指向普通函数内的 this 指向执行环境对象，例子中的执行环境是 windowvar a = 'window'function fn(){ let a = 'fn' return this.a}fn(); // 'window'构造函数创建的对象的函数...

2019-03-03 17:09:37 143

原创 JavaScript 的闭包

词法作用域：首先我们看一个最简单的例子：var x = 100;function fn(){ console.log(x);}fn(); // 100毫无疑问，"fn()" 函数是可以访问到外部定义的变量 "x"。函数被创建时，都会创建其"作用域"。"fn" 函数被创建，其作用域内未声明变量 "x" ，只能到上一级的作用域(这里是全局作用域)找，这里的 "x" 称之...

2019-02-17 22:59:11 167

原创 Echarts (数据可视化库) 入门

安装：$ npm install echarts --save官网地址：https://echarts.baidu.com/index.htmlgithub项目地址：https://github.com/apache/incubator-echarts 引入：// 模块引入var echarts = require('echarts');// 或者通过 scri...

2019-02-11 18:14:10 1678

原创 Flex 布局

基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container）。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item）。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴开始点（与边框的交叉点）叫做 main start，主轴结束点叫做 main end；交叉轴的对应的是 cross st...

2019-01-26 23:45:47 132

原创回流( reflow ) 与重绘( repaint )

了解页面渲染过程：渲染过程如下：解析 HTML 生成 DOM Tree；解析 CSS 生成 Style Rules；两者合并生成 Render Tree；根据几何信息(位置、大小等)，生成页面布局 (Layout)；根据特征信息(颜色、透明度等)，绘制页面 (Painting)；显示 (Display) ，将像素发送给GPU，展示在页面上。注意，渲染(render)...

2019-01-19 23:09:22 252

原创 JavaScript 函数内的 arguments 对象

描述：arguments 是一个对应于传递给函数的参数的类数组对象。不是数组，但可以转化成数组。函数内部必定存在的一个对象。function fn () { console.log(arguments);}fn('a', 'b', '', 'd');// Arguments(4)["a", "b", "", "d", callee: ƒ, Symbol(Symbol.ite...

2019-01-06 21:29:28 206

原创关于响应式布局 [ 转 ]

原文地址前言：响应式，即设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。视口：电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。约束视口：<meta n...

2019-01-05 22:34:46 131

原创 CSS 常用样式

会话尖角气泡：在线demo （效果图） <div class="bubble">泡内文字</div>.bubble{ color: #fff; text-align: center; line-height: 100px; width: 100px; height: 100px; border-radius:...

2019-01-05 21:19:32 182

原创 CSS 堆叠覆盖层级关系

如下图所示：其中需要注意的是，行元素是后定义的高于前定义的，"z-index≥0" 高于上下文所有元素。代码如下：<div class="parent"> <span>层叠上下文背景色及边框</span> <div class="minus-z-index"> z-index: -1

2019-01-05 16:21:25 3038

原创 Vue CLI 3 入门

官方文档安装// 若已安装 vue-cli 2.x/1.x 需要先卸载npm uninstall vue-cli -g// 需要全局安装npm install -g @vue/cli// 查看当前 vue-cli 版本vue --version 创建项目// 命令行创建vue create program-name// 可视化创建vue ui ...

2018-12-24 22:33:28 239

原创 Vue Router 入门

安装：官方文档官方API文档npm install vue-router// router/index.jsimport Vue from 'vue'import VueRouter from 'vue-router'// 模块化工程中，Vue.use() 是必须的Vue.use(VueRouter);// 抛出模块，用于跟组件注册const...

2018-12-16 00:19:49 189

原创 Vuex 入门

安装：npm install vuex --save// store/index.js import Vue from 'vue'import Vuex from 'vuex'// 模块化工程中，Vue.use() 是必须的Vue.use(Vuex);// 抛出模块，用于跟组件注册const store = new Vue.store({ // ...});e...

2018-12-16 00:16:00 181

原创 JavaScript 的 Symbol 类型

它是JavaScript的第七种原始类型：有别于6种原始类型：Undefined(未定义)、Null(空值)Boolean、(布尔类型)、Number(数字类型)、String(字符串类型)、Object(对象类型)ES6新特性中的symbol也是值，但它不是字符串，也不是对象，而是是全新的——第七种类型的原始值。常见的用途： symbol是程序创建并且可以用作属性键的值，并且...

2018-12-15 15:17:44 269

原创 JavaScript 的 RegExp 速查

创建正则对象：// 以下三种方法均可以const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi;let regex2 = new RegExp(/^[a-zA-Z]+[0-9]*\W?_$/, "gi");let regex3 = new RegExp("^[a-zA-Z]+[0-9]*\\W?_$", "gi");正则表达式中的特殊字符：修饰符 ...

2018-12-11 22:49:20 172

原创 Vue 渲染函数 (render)

简单例子：Vue.component('render-demo', { props: { num: { type: Number, required: true } }, render (createElement) { return createElement () { 'div', this.props.num } }}...

2018-12-11 22:48:42 339

原创 JavaScript 的 Object 类型

简单创建：// 构造函数体内的"this"将指向实例对象function Box(x, y){ this.x = x; this.y = y;};var box1 = new Box(4, 5); // {x:4,y:5}// 使用JS内置构造函数创建对应对象，如Object/Array/Function/RegExp/Stringvar obj = new Obj...

2018-12-06 22:44:39 193

原创 Vue 过渡动画

进入(v-enter)/离开(v-leave)/移动(v-move)&列表(transition-group)的过渡简单的例子：<div id="demo"> <button @click="show = !show"> Toggle </button> <transition name="fade">

2018-12-01 23:27:27 1759

原创前端的本地存储 --- cookie/session/localStorage/sessionStorage

1、cookie：本身用于客户端和服务端通信，每次http请求都会携带cookie。但具有本地存储的功能。缺点是容量少(4kb);安全性低;浪费带宽资源(每次请求携带)。Cookie中存放的信息包含cookie本身属性和用户自定义属性，cookie的信息由键/值对组成，但一个cookie只能包含一个自定义键/值对。Cookie本身属性有”Comment” 、”Domain”、”Max-Ag...

2018-11-29 23:04:35 365

原创 Vue 组件间通信

1、父 ---> 子传递 "props" 和 "$parent" 的用法：Vue.component('child-component', { template: ` <div> <p>{{parentData}}</p> <button @click="handleClick"&g

2018-11-28 22:48:20 165

原创其他 - 总结

目录Vue1. 子组件"mounted"钩子函数要早于父组件：2. 不能被检测更新的数据及 "强制更新"办法：3. 使用Element框架,获取子组件的"实际高度"：JavaScript1. JS获取/修改DOM元素的style：2. console.time和console.timeEnd用法CSS1. "padding" 和 "margin" 的百分...

2018-11-26 22:24:54 266

原创 JavaScript 中 && 和 || 的返回值

&&若两边的值都能转化成"true"，则返回右边的值；若其中一个能转化成false的值，则返回false。// 右边优先级高(其中一边false得到false)console.log(false && 1); // falseconsole.log(false && false); // falseconsole.log(...

2018-11-23 14:22:43 433

原创 Vue 入门

属性绑定 [ :attr="" ]：<span :title="msg1"> 数据绑定：{{ msg2 }}</span>事件绑定/事件处理 [ @click="" ]：<!-- 传递事件,'clickFn1(e)',

2018-11-20 22:59:21 285

原创 ES6中的迭代器(Iterator)和生成器(Generator)及关键字yield

迭代器(Iterator)：迭代器是一种特殊对象，它具有一些专门为迭代过程设计的专有接口，所有的迭代器对象都有一个next()方法，每次调用都返回一个结果对象。结果对象有两个属性：一个是value，表示下一个将要返回的值；另一个是done，它是一个布尔类型的值，当没有更多可返回数据时返回true。迭代器还会保存一个内部指针，用来指向当前集合中值的位置，每调用一次next()方法，都会返回...

2018-11-18 22:27:31 374

原创 JavaScript 的 Promise、async/await

Promise创建一个简单的promise对象：// 创建并执行Promise，传入匿名函数new Promise( (resolve, reject) => { let timeOut = Math.random() * 2; log('set timeout to: ' + timeOut + ' seconds.'); // 1秒后执行判断，小于1输出'成功'，...

2018-11-18 17:26:53 390

原创 CSS 超出两行省略

方法一（text-overflow）：<div class="box1"> <span> this is the test text!this is the test text!this is the test text!this is the test text!this is the test text!this is the test text...

2018-11-14 18:46:29 1418 1

原创 JavaScript 的 "export"和"import"

抛出具名模块：// people.jsexport const people1 = { name: 'zhangsan', age: 30}// 也以可以先定义后exportconst people2 = { name: 'lisi', age: 60}export people2// 导出其他类型数据的格式亦然抛出匿名模块：// people_def...

2018-11-08 20:26:21 510

原创 Vue 常用组件

1、Better-scroll （移动端实现页面滚动）// 安装npm install better-scroll --save<templat> <div ref="wrapper"> // ... </div></templat><script> import Bscorll from 'bett...

2018-10-15 09:24:28 4431

原创 webpack4--[未完]

1.使用 npm 初始化项目npm init2.安装webpacknpm install webpack -D// 若失败，可以使用cnpm淘宝镜像，配置方法如下：// npm config set registry https://registry.npm.taobao.org 3.创建“webpack.config.js”文件，以配置webpack。文件的配置内容：...

2018-10-14 15:12:27 97

原创 npm install -S -D -g 的区别

npm install module_name -S 即 npm install module_name --save 写入dependenciesnpm install module_name -D 即 npm install module_name --save-dev 写入devDependenciesnpm install module_name -g 全...

2018-10-11 13:41:38 1894

原创 Git 入门

起步：1. 安装：安装过程很简单，根据电脑系统安装即可，官网链接。2. 首次配置：# 配置用户名及邮箱$ git config --global user.name "Your Name"$ git config --global user.email "email@example.com"# 查看配置$ git config --list常用Git命令清单(阮一峰)。...

2018-10-10 21:35:53 155

原创关于 Linux 常用命令

ssh name@server //“name”为登陆账号名，“server”为服务地址，回车后会提示输入密码mkdir xxx // 创建文件夹xxxls/ll // 打印当前目录下的所有文件，“ll“以列形式显示cd xxx ...

2018-10-10 21:34:27 228

原创前端JavaScript面试技巧

一、JS基础知识1.变量类型和计算值类型：var a = 100 var b = aa = 200console.log(b) // 100引用类型：（对象、组数、函数）：var a = {age: 20}var b = ab.age = 21console.log(a.age) // 21特点：无限添加属性。设计原因：该三种类型可能较大，比较占用内...

2018-10-10 21:31:23 799

hozee的个人笔记