2018年11月_Talon不会写代码

原创 JavaScript栈和队列方法（Array类型）

Array 是 ECMAScript 中的数组类型，它提供了一种让数组的行为类似于其他数据结构的方法。栈方法栈是一种 LIFO（Last-In-First-Out，后进先出）的数据结构，也就是最后添加的项最先被移除。栈中项的插入（推入，push）和移除（弹出，pop）只发生在栈顶。ECMAScript 为数组专门提供了 push( ) 和 pop( ) 方法，来实现类似栈的行为。push(...

2018-11-30 14:03:29 304

原创 JavaScript中的Array类型

Array 类型Array 类型是除 Object 外 ECMAScript 中最常用的类型。ECMAScript 中的数组与其他语言中的数组有很大的区别：ECMAScript 中数组的每一项可以保存任何类型的数据。也就是说，数组中可以第一位用来保存字符串，而第二位用来保存数值。ECMAScript 中数组的大小是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。创建数组...

2018-11-29 22:01:21 158

原创 JavaScript中的Object类型

Object 类型使我们使用最多的一种引用类型。创建实例创建 Object 实例的方式有两种：1. new 操作符 + 构造函数例如：var person = new Object();person.name = "Talon";person.age = 20;2. 对象字面量表示法对象字面量表示法是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。例如：v...

2018-11-29 20:11:05 279

原创 JavaScript中的垃圾收集机制（标记清除和引用计数）

垃圾收集机制JavaScript 具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。这样我们在编写 JavaScript 代码时就不需在关心内存使用问题了，所需内存分配和已用内存的回收完全实现了自动管理。这种垃圾收集机制的原理其实非常简单：找出那些不再使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间），周期性的执行这...

2018-11-28 23:03:12 2363 1

原创 JavaScript检测数据类型（typeof和instanceof）

typeoftypeof 操作符是比较常用的，用来确定一个变量的数据类型。typeof的规则：undefined：值未定义boolean：布尔值string：字符串number：数值object：对象或 nullfunction：函数instanceoftypeof 操作符用来检测基本数据类型非常方便，但是用来检测引用类型时就比较鸡肋了。有时候我们并不是想知道...

2018-11-28 20:00:19 383

原创如何理解JavaScript中的参数按值传递

开始之前先说一下 ES 中的两种数据类型的值：基本类型值和引用类型值。基本数据类型：Undefined、Null、Boolean、Number、String。引用数据类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是操作对象的引用而不是实际的对象。这一部分对下面理解参数传递非常重要。传...

2018-11-27 19:13:10 326

原创 JavaScript性能优化方案(事件委托详解）

事件处理程序过多导致性能下降在 JavaScript 中，添加到页面上的事件处理程序数量会直接关系到页面的整体运行性能。导致这一问题的原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中对象越多，性能就越差。其次，必须事先指定所有事件处理程序所造成的 DOM 访问次数，也会延迟整个页面的交互就绪时间。在事件处理程序角度来提升性能主要有两张方式：事件委托、及时移除事件处理程序。事件委...

2018-11-26 17:14:53 495 1

原创 JavaScript变动事件详解（删除节点与插入节点事件）

变动事件DOM2 级的变动（mutation）事件能在 DOM 中的某一部分发生变化时触发。常见变动事件主要有：DOMSubtreeModified：在 DOM 结构发生任何变化时触发。这个事件在其他事件触发后都会触发。DOMNodeInserted：在一个节点作为子节点被插入到另一个节点时触发。DOMNodeRemoved：在节点从其父节点中被移除时触发。DOMNodeIns...

2018-11-24 22:57:40 1936

原创 JavaScript中textInput事件详解（事件对象及与keypress事件的区别）

textInput 事件textInput 事件是 DOM3 级事件中新加的事件，当用户在可编辑区域中输入字符时，就会触发这个事件。textInput 和 keypress 区别textInput 事件与 keypress 事件类似，但还是有一些区别：任何可以获得焦点的元素都可以触发 keypress 事件，但只有可编辑区域才能触发 textInput 事件。textInput 事件...

2018-11-24 16:21:04 3736

原创 JavaScript键盘与文本事件（keydown、keypress和keyup触发顺序及其区别）

键盘事件键盘事件主要有三个，也是平常开发过程中，尤其是在文本框输入时，非常常用的。keydown：当用户按下键盘上的任意键时触发，如果按住不放会重复触发。keypress：当用户按下键盘上的字符键时触发，如果按住不放会重复触发。（ESC 键也会触发）keyup：当用户释放键盘上的键时触发。虽然所有的元素都支持上面的三个事件，但是只有在用户通过文本输入时才最常用。触发顺序：当...

2018-11-22 21:11:33 2336 1

原创 JavaScript鼠标事件对象的相关元素属性（relatedTarget）

在发生鼠标事件 mouseover 和 mouseout 事件时，还会涉及到一些其他鼠标事件不涉及的元素。对于 mouseover 而言，事件的主要目标是获得光标的元素，而相关元素就是那个失去光标的元素；类似的对于 mouseout 而言则恰恰相反。相关元素DOM 通过 event 对象的 relatedTarget 属性提供相关元素的信息。这个属性只对于 mouseover 和 mous...

2018-11-22 15:22:42 858

原创 CSS隐藏元素 display:none 和 visibility:hidden 区别

display 属性设置一个元素如何显示，visibility 属性指定一个元素可见还是隐藏。CSS 常用隐藏元素的方式有两种，分别是 display:none 和 visibility:hidden。但是这两种方式有一些区别：visibility:hidden 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。display:...

2018-11-21 21:44:08 508

原创 JavaScript鼠标事件对象中的修改键（Shift、Ctrl、Alt、Meta）

虽然鼠标事件主要是使用鼠标来触发的，但在按下鼠标时键盘上的某些键的状态也可以影响所要采取的操作。修改键这些修改键就是：Shift、Ctrl、Alt、Meta（Window 键或 Cmd 键）。DOM 为此规定了 4 个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey 和 metaKey这些属性都是布尔值，如果相应的键被按下，则值为 true，否则为 false。...

2018-11-20 16:55:07 1062

原创 JavaScript鼠标事件对象中的坐标位置（客户区、页面、屏幕）详解及区别

坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。客户区坐标位置鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中，分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。所有的浏览器都支持这两个属性。用法：var div = document.getElementById('myDiv');EventUtil.ad...

2018-11-20 16:20:36 997 1

原创 JavaScript事件类型——鼠标与滚轮事件及鼠标事件对象

鼠标事件是 Web 开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。DOM3 级事件中定义了 9 个鼠标事件。鼠标事件：click：用户单击主鼠标按钮（一般为左键）或者按下回车键时触发。这一点对确保易访问性很重要，意味着 onclick 事件处理程序即可以通过键盘也可以通过鼠标执行。dblclick：在用户双击主鼠标按钮时触发。mousedown：用户按下任意鼠标按钮时触发。...

2018-11-20 15:09:00 448

原创 JavaScript焦点事件（blur、focus与focusin、focusout的区别，焦点事件触发顺序）

焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与 document.hasFocus( ) 方法及 document.activeElement 属性配合，可以知晓用户在页面上的行踪。焦点事件：blur：元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持focusin：在元素获得焦点时触发，与 HTML ...

2018-11-20 13:35:11 16392

原创 CSS轮廓（outline）属性详解及 outline 与 border 的区别

轮廓（outline）轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。在浏览器里，当鼠标点击或使用Tab键让一个链接或者一个radio获得焦点的时候，该元素将会被一个轮廓虚线框围绕。这个轮廓虚线框就是 outline 。轮廓（outline）属性指定元素轮廓的样式、颜色和宽度。简写格式：outline: outline-color outlin...

2018-11-19 23:08:40 3830

原创 JavaScript事件类型

JavaScript 事件类型是在实际开发中非常重要的一部分，有很多常用的事件已经非常熟悉了，所以就只记录一下重要和之前未了解过的事件。Web 浏览器中可能发生的事件有很多类型，“DOM3 级事件”规定了以下几类：UI事件焦点事件鼠标事件滚轮事件文本事件键盘事件合成事件变动事件...

2018-11-19 16:55:40 220

原创 JavaScript事件类型——UI事件

UI （User Interface）事件，当用户与页面上的元素交互时触发。多数事件都与 window 对象或表单控件相关。现有 UI 事件主要包括：load：当页面完全加载后在 window 上面触发，当所有框架都加载完毕时在框架集上面触发，当图像加载完毕后在 <img> 元素上面触发，或者当嵌入的内容加载完毕时在 <object> 元素上面触发。unload：...

2018-11-19 16:54:26 330

原创 CSS边框（Border）

边框样式边框样式属性指定要显示什么样的边界。border-style属性用来定义边框的样式边框宽度可以通过 border-width 属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)；或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。例如p.one {...

2018-11-19 14:21:13 475

原创 CSS盒子模型（Box Model）

CSS盒子模型（Box Model）所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外...

2018-11-17 20:56:43 328

原创 vue过滤器

Vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。语法过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：{{ message | capitalize }}<!-- 在 `v-bind` 中 --&gt...

2018-11-16 17:49:00 145

原创 vue生命周期——超详细

每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。生命周期关于 Vue 生命周期，先放一张官方文档的图在这个图中我们可以清楚地看到 Vue 的整个生命周期和它所提供的钩子函数。钩子函数beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatebeforeDestroydestroye...

2018-11-15 21:52:43 7296 1

原创 JavaScript事件对象

在触发 DOM 上的某个事件时，会产生一个事件对象 event，这个对象中包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。DOM 中的事件对象兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用的是何种方式（DOM0 级或 DOM2 级），都会传入 event 对象（当事件处理程序执行完毕，event 对象会...

2018-11-13 16:37:20 387

原创 JavaScript事件处理程序（HTML、DOM0、DOM2、IE、跨浏览器）

前言事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以 on 开头，因此 click 事件的事件处理程序就是 onclick。为事件指定处理程序的方式有很多种。HTML 事件处理程序某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的 HTML ...

2018-11-12 17:57:29 177

原创 JavaScript事件流

前言JavaScript 与 HTML 之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流当我们在页面上单击按钮时，也单击了按钮的容器元素，甚至也单击了整个页面。事件流描述的就是从页面中接收事件的顺序。下面介绍一些主要的事件流：事件冒泡IE的事件流叫做事件冒泡，即时间开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较...

2018-11-12 17:09:29 136

原创 Node.js EventEmitter

Node.js EventEmitterNode.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。Node.js 里面的许多对象都会分发事件：一个 net.Server 对象会在每次有新连接时触发一个事件，一个 fs.readStream 对象会在文件被打开的时候触发一个事件。所有这些产生事件的对象都是 events.EventEmitter 的实例。EventEmi...

2018-11-05 17:21:16 152

原创 Nodejs异步非阻塞式IO/事件驱动IO原理

关于 node.jsNode.js 是单进程单线程应用程序，但是因为 V8 引擎提供的异步执行回调接口，通过这些接口可以处理大量的并发，所以性能非常高。Node.js 几乎每一个 API 都是支持回调函数的。Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现。Node.js 单线程类似进入一个while(true)的事件循环，直到没有事件观察者退出，每个异步事件都生成一个事...

2018-11-04 23:07:48 2167

原创 brew: command not found

Mac 下 brew 安装软件报错解决方案：安装 brew ：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 结果又报错：curl: (6) Could not resolve host: raw.githubusercontent.co...

2018-11-04 13:57:26 1699

原创 express路由

express设置路由有多种方式：express版本：express 4.0.0express设置路由的方式有很多，但是归根结底是一样的。当我们添加不同的路由时，可以根据需要，看情况使用下列方式。1. 添加 js 文件在 routes 新建 event.jsvar express=require('express');var router=express.Router();route...

2018-11-01 23:37:48 171

原创 Ubuntu安装nodejs

能用命令行解决的问题就别整别的了sudo apt-get install nodejs-legacy nodejsnode -v当然如果需要最新版本的话要去官网下 →_→nodejs中文网

2018-11-01 22:17:59 212

原创 fatal: Not a valid object name: 'master'

问题在使用 Git 新建分支时报错fatal: Not a valid object name: 'master'原因报错原因就是当前没有 master 分支，无法新建分支。可以使用以下命令查看当前分支：git branch发现当前确实没有分支。解决方案新建 master 分支：git 提交一次代码就会自动保存到 master 分支。例如：sudo touch READM...

2018-11-01 21:10:54 10217

原创 MacOS:xcrun: error: invalid active developer path

mac下执行git操作或者make编译时，可能会出现如下错误：xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrun可能是由于xcode问题造成的，可...

2018-11-01 17:37:13 304

TalonZhang的博客