- 博客(70)
- 收藏
- 关注
RSS订阅原创 npm install 报错：gyp verb `which` failed Error: not found: python
今天新启动一个项目，在 npm install 安装依赖项时出现报错。$ npm install> husky@0.14.3 install D:\programs\rubik-web\node_modules\husky> node ./bin/install.jshuskysetting up Git hooksdone> node-sass@4.14.1 install D:\programs\rubik-web\node_modules\node-sass&
2020-07-21 16:00:23
20103
20
原创 asyncComputed 异步计算属性
asyncComputed 异步计算属性一、案例假设这样一个场景：一个列表数据 data 是通过接口返回，请求参数中有一个 id 的数据，这个 id 数据变化的话，需要重新请求接口获取数据。按照普通方法来的话，需要按以下步骤实现。data 中定义一个 list 数据需要在 methods 中定义一个 request 方法，请求接口赋值 list在页面创建时调用 request 方法，获得首次数据通过 watch 监听 id 数据，在变化时调用 request 方法（更新 list 数据）
2020-07-17 15:42:32
8421
7
原创 普通 div 模拟 placeholder
这是由于我们项目中使用的 quasar 组件里的 editor（实际是 div 元素）的占位符问题引起的探讨。首先说明一下，非表单元素如 div 可以通过加一个 contenteditable 为 true 来实现可编辑。然后给该元素添加占位符样式。最终采用的纯css实现普通div的placeholder效果的方法如下：html：<div class="rich-text" contenteditable="true" placeholder="请输入"></div>cs
2020-06-09 14:35:55
656
原创 vue 之 mixins 混入
混入mixins一、基础介绍什么是mixins？混入mixins：分发vue组件中可复用功能的灵活方式。混入对象可以包含任意组件选项。组件使用混入对象时，所有混入对象的选项将混入该组件本身的选项。什么时候使用Mixins？页面的风格不用，但是执行的方法和需要的数据类似，我们可以选择提取出公共部分，使用mixins。二、使用规则规则选项合并：组件选项和对象选项同名时，将以恰当方...
2019-12-20 17:27:42
204
原创 开发之前的电脑配置
开发之前的电脑配置1. 下载编辑器1）下载有些人口中说的IDE，一般也就是指的我们开发代码时使用的编辑器。我一般使用vscode，当然你也可以使用webstorm等其他工具。直接搜索或者进入官网：https://code.visualstudio.com/安装时直接使用默认配置，一路next。2）设置语言中文打开vscode，按快捷键“Ctrl+Shift+P”。在弹出的搜索框...
2019-12-11 11:27:52
529
原创 浏览器基础
一、浏览器基础介绍1. 五大浏览器ChromeIE(Edge)FirefoxSafariOpera2. 浏览器内核内核（Rendering Engine），即“渲染引擎”。作用：将网页代码 解析 并 渲染 出（显示）网页。常用浏览器的内核Trident：IEWebkit：SafariBlink(Webkit的升级版)：Chrome, OperaGecko：Fire...
2019-11-28 14:28:53
228
原创 js高级应用之闭包closure
js高级应用之闭包closure一、闭包的定义【JavaScript高级程序设计】闭包：指有权访问另一个函数作用域中的变量的函数。创建闭包的常见方式：在一个函数内部创建另一个函数。【百度百科 】闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接...
2019-10-17 14:42:11
158
原创 安装vue-devtools
一、vue调试工具一般情况下，可以使用chrome浏览器的应用商店，安装最新版的vue-devtools。特殊情况，需要自己下载安装，比如我需要安装较低版本。1. 参考地址git地址：https://github.com/vuejs/vue-devtools安装参考：https://www.cnblogs.com/james23dong/p/8250797.html4.1.5版本地址：...
2019-09-16 14:58:03
131
原创 js-新增数据类型symbol
一、symbol1. 数据类型Undefined、Null、Boolean、String、Number、Symbol、Object。2. 原因新增Symbol原因：保证每个属性的名字都是独一无二的，从根本上防止属性名的冲突。基本上，Symbol是一种类似于字符串的数据类型。3. 创建创建：Symbol函数var s = Symbol();typeof s; // symbol...
2019-09-12 17:19:59
567
原创 技术分享之JS基础
一、基础知识1. 组成三部分核心（ECMAScript）ECMAScript提供核心语言功能，规定了js的语法、类型、语句、关键字、保留字、操作符、对象文档对象模型（DOM）提供访问和操作网页内容的方法和接口浏览器对象模型（BOM）提供与浏览器交互的方法和接口2. 数据类型5种简单数据类型（基本数据类型）：Undefined、Null、Boolean、Number、Stri...
2019-09-10 18:27:46
440
原创 ts-了解TypeScript
一、TypeScript1. 安装有两种主要的方式来获取TypeScript工具：通过npm（Node.js包管理器）npm install -g typescript安装Visual Studio的TypeScript插件2. 构建第一个TypeScript文件1.greeter.ts文件：function greeter(person) { return "Hello, ...
2019-08-28 11:11:51
307
原创 0-JavaScript高级程序设计-序章
一、目录第 1 章“JavaScript 简介”第 2 章“在 HTML 中使用 JavaScript”第 3 章“基本概念” ⭐️第 4 章“变量、作用域和内存问题” ⭐️第 5 章“引用类型” ⭐️第 6 章“面向对象的程序设计” ⭐️第 7 章“函数表达式” ⭐️第 8 章“BOM” ⭐️第 9 章“客户端检测”第 10 章“DOM” ⭐️第 11 章“D...
2019-08-21 19:25:53
208
原创 54-附录-严格模式
一、严格模式ECMAScript 5 最早引入了“严格模式”(strict mode)的概念。通过严格模式，可以在函数内部选择进行较为严格的全局或局部的错误条件检测。使用严格模式的好处是可以提早知道代码中存在的错误，及时捕获一些可能导致编程错误的 ECMAScript 行为。支持严格模式的浏览器：IE10+、Firefox 4+、Safari 5.1+ 和 Chrome。1. 选择使用...
2019-08-21 19:00:29
135
原创 53-附录-ECMAScript Harmony
一、ECMAScript HarmonyHarmony（ECMAScript 6）与 ECMAScript 5 的指导思想一致：只进行增量调整，不彻底改造 JavaScript 语言。1. 一般性变化（1）常量const 关键字声明常量：const MAX_SIZE = 25;使用方式与 var 类似，但 const 声明的变量在初始赋值后，就不能再重新赋值。可以像声明变量一样在任何地...
2019-08-21 13:49:58
280
原创 52-JavaScript高级程序设计-新兴的API
一、requestAnimationFrame()1. 早期动画循环JavaScript 中创建动画的典型方式，就是使用 setInterval() 方法来控制所有动画。关键是要知道延迟时间多长合适，最平滑动画的最佳循环间隔是 1000ms/60，约等于 17ms。以这个循环间隔重绘的动画是最平滑的，因为这个速度最接近浏览器的最高限速。问题：间隔时间指定了把动画代码添加到浏览器 UI 线程...
2019-08-18 22:16:12
169
原创 51-JavaScript高级程序设计-最佳实践2性能&部署
二、性能1. 注意作用域访问全局变量总是要比访问局部变量慢，因为需要遍历作用域链。只要能减少花费在作用域链上的时间，就能增加脚本的整体性能。避免全局查找将一个函数中会用到多次的全局对象存储为局部变量，减少全局查找次数。避免 with 语句在性能非常重要的地方必须避免使用 with 语句。和函数类似，with 语句会创建自己的作用域，会增加其中执行的代码的作用域链的长度。with 语句...
2019-08-18 20:21:59
148
原创 50-JavaScript高级程序设计-最佳实践1可维护性
一、可维护性1. 什么是可维护的代码可理解性——其他人可以接手代码并理解它的意图和一般途径，而无需原开发人员的完整解释。直观性——代码中的东西一看就能明白，不管其操作过程多么复杂。可适应性——代码以一种数据上的变化不要求完全重写的方法撰写。可扩展性——在代码架构上已考虑到在未来允许对核心功能进行扩展。可调试性——当有地方出错时，代码可以给予你足够的信息来尽可能直接地确定问题所在。...
2019-08-17 22:09:58
201
原创 49-JavaScript高级程序设计-离线应用与客户端存储
一、离线应用离线 Web 应用：在设备不能上网的情况下仍然可以运行的应用。（HTML5 一个重点）开发离线 Web 应用的几个步骤：1）确保应用知道设备是否能上网，以便下一步执行正确的操作。2）应用必须能访问一定的资源（图像、JavaScript、CSS 等），只有这样才能正常工作。3）必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写。...
2019-08-16 21:55:30
143
原创 48-JavaScript高级程序设计-高级技巧3自定义事件&拖放
四、自定义事件事件是 JavaScript 与浏览器交互的主要途径。事件是一种叫做观察者的设计模式，这是一种创建松散耦合代码的技术。观察者模式由两类对象组成：主体和观察者。主体负责发布事件，同时观察者通过订阅这些事件来观察该主体。自定义事件背后的概念：创建一个管理事件的对象，让其他对象监听那些事件。基本模式：function EventTarget(){ this.handle...
2019-08-15 21:23:11
157
原创 47-JavaScript高级程序设计-高级技巧2防篡改对象&高级定时器
二、防篡改对象JavaScript 共享的本质，任何对象都可以被在同一环境中运行的代码修改。ECMAScript 5 致力于解决这个问题，可以让开发人员定义防篡改对象(tamper-proof object)。JavaScript对象，可以手工设置每个属性的 [[Configurable]]、[[Writable]]、[[Enumerable]]、[[Value]]、[[Get]] 以及 [...
2019-08-15 20:10:50
153
原创 46-JavaScript高级程序设计-高级技巧1高级函数
一、高级函数1. 安全的类型检测JavaScript 内置的类型检测机制并非完全可靠。问题：typeof 操作符，有一些无法预知的行为，经常会导致检测数据类型时得到不靠谱的结果。Safari(直至第 4 版)在对正则表达式应用 typeof 操作符时会返回 “function”。instanceof 操作符在存在多个全局作用域(像一个页面包含多个 frame)的情况下，也是问题多多。在...
2019-08-15 13:16:33
140
原创 45-JavaScript高级程序设计-跨域
一、跨源资源共享1. CORS通过 XHR 实现 Ajax 通信的一个主要限制，来源于跨域安全策略。默认情况下，XHR 对象只能访问与包含它的页面位于同一个域中的资源。这种安全策略可以预防某些恶意行为。CORS(Cross-Origin Resource Sharing，跨源资源共享)，定义了在必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS 背后的基本思想：使用自定义的 HTT...
2019-08-14 17:18:33
257
原创 44-JavaScript高级程序设计-XMLHttpRequest对象
AjaxAjax：Asynchronous JavaScript + XML 的简写，虽然名字包含 XML，但 Ajax 通信与数据格式无关。【无须刷新页面即可从服务器取得数据】核心：XMLHttpRequest 对象 (简称 XHR)
2019-08-07 18:34:44
152
原创 43-JavaScript高级程序设计-JSON
JSON是一种数据格式，不是一种编程语言。一、语法JSON 的语法可以表示以下三种类型的值：简单值：使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和 null。但 JSON 不支持 JavaScript 中的特殊值 undefined。对象：对象作为一种复杂数据类型，表示的是一组无序的键值对。每个键值对中的值可以是简单值，也可以是复杂数据类型的值。...
2019-08-06 23:33:28
150
原创 42-JavaScript高级程序设计-E4X
一、E4XE4X（ECMAScript for XML）：E4X 本身不是一门语言，它只是 ECMAScript 语言的可选扩展。就其本身而言，E4X 为处理 XML 定义了新的语法，也定义了特定于 XML 的对象。1. E4X 的类型E4X 定义了几个新的全局类型：XML：XML 结构中的任何一个独立的部分。XMLList：XML 对象的集合。Namespace：命名空间前缀与命名...
2019-08-04 14:06:49
210
原创 41-JavaScript高级程序设计-JavaScript与XML
一、JavaScript 与 XML1. 浏览器对 XML DOM 的支持document.implementation 引入方法 createDocument()。浏览器支持：IE9+、Firefox、Opera、Chrome 和 Safari。var xmldom = document.implementation.createDocument(namespaceUri, root, ...
2019-08-03 23:20:46
307
原创 40-JavaScript高级程序设计-错误处理与调试
一、错误处理与调试1. 浏览器报告的错误IE 是唯一一个在浏览器的界面窗体（chrome）中显示 JavaScript 错误信息的浏览器。在发生 JavaScript错误时，浏览器左下角会出现一个黄色的图标，图标旁边则显示着 “Error on page” （页面中有错误）。...
2019-08-02 23:49:24
227
原创 39-JavaScript高级程序设计-HTML5 脚本编程
HTML5 脚本编程一、跨文档消息传递跨文档消息传送(cross-document messaging)：有时候简称为 XDM，指的是在来自不同域的页面间传递消息。【核心】postMessage()：向另一个地方传递数据，对于 XDM 而言，“另一个地方”指的是包含在当前页面中的<iframe>元素，或者由当前页面弹出的窗口。两个参数：一条消息和一个表示消息接收方来自哪个域的字...
2019-08-01 21:14:06
266
原创 38-JavaScript高级程序设计-canvas
一、使用 canvas 绘图HTML5 添加 <canvas>元素，该元素负责在页面中设定一个区域，然后就可以通过 JavaScript 动态地在这个区域中绘制图形。浏览器支持：IE9+、Firefox 1.5+、Safari 2+、Opera 9+、Chrome、iOS 版 Safari 以及 Android 版 WebKit 都在某种程度上支持。1. 基本用法要使用<...
2019-07-31 18:24:14
567
原创 37-JavaScript高级程序设计-表单序列化和富文本编辑
一、表单序列化在 JavaScript 中，可以利用表单字段的 type 属性，连同 name 和 value 属性一起实现对表单的序列化。在表单提交期间，浏览器将数据发送给服务器遵循规则：对表单字段的名称和值进行 URL 编码，使用和号（&）分隔。不发送禁用的表单字段。只发送勾选的复选框和单选按钮。不发送 type 为 “reset” 和 “button” 的按钮。多选选...
2019-07-30 23:06:45
220
原创 36-JavaScript高级程序设计-选择框脚本
一、选择框脚本选择框是通过 <select> 和 <option> 元素创建的。除了所有表单字段共有的属性和方法外，HTMLSelectElement 类型提供下列属性和方法：multiple：布尔值，表示是否允许多项选择；等价于 HTML 中的 multiple 特性。options：控件中所有 <option> 元素的 HTMLCollection ...
2019-07-30 22:37:47
178
原创 35-JavaScript高级程序设计-文本框脚本
一、文本框脚本表现文本框的两种方式：（1）使用 <input> 元素的单行文本框type：“text”size：指定文本框中能够显示的字符数value：设置文本框的初始值maxlength：指定文本框可以接受的最大字符数<input type="text" size="25" maxlength="50" value="initial value">（2）使...
2019-07-29 23:16:36
264
原创 34-JavaScript高级程序设计-表单基础知识
一、表单的基础知识HTML 中，表单由 <form> 元素表示；JavaScript 中，表单对应 HTMLFormElement 类型（继承了 HTMLElement）。HTMLFormElement 独有的属性和方法：acceptCharset：服务器能够处理的字符集；等价于 HTML 中的 accept-charset 特性。action：接受请求的 URL；等价于 H...
2019-07-24 21:19:49
135
原创 33-JavaScript高级程序设计-性能&模拟事件
一、内存和性能性能问题：在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。原因是多方面的。首先，每个函数都是对象，都会占用内存；内存中的对象越多，性能就越差。其次，必须事先指定所有事件处理程序而导致的 DOM 访问次数，会延迟整个页面的交互就绪时间。1. 事件委托对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个...
2019-07-21 19:09:31
134
原创 32-JavaScript高级程序设计-事件类型(下)
一、事件类型接上篇4. 键盘与文本事件键盘事件：用户在使用键盘时会触发键盘事件3 个键盘事件：keydown：当用户按下键盘上的任意键时触发，按住不放会重复触发此事件。keypress：当用户按下键盘上的字符键时触发，按住不放会重复触发此事件。按下 Esc 键也会触发。keyup：当用户释放键盘上的键时触发。最常使用场景：用户通过文本框输入文本时。1个文本事件：textInpu...
2019-07-20 22:15:15
200
原创 31-JavaScript高级程序设计-事件类型(上)
一、事件类型1. UI事件UI(User Interface，用户界面)事件，指的是那些不一定与用户操作有关的事件，当用户与页面上的元素交互时触发。现有的 UI 事件，多数与 window 对象或表单控件相关。DOMActivate(废弃)、load、unload、abort、error、select、resize、scroll。（1）load 事件当页面完全加载后(包括所有图像、J...
2019-07-18 13:14:15
158
原创 30-JavaScript高级程序设计-事件对象
一、事件对象事件对象(event)：包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。1. DOM中的事件对象兼容 DOM 的浏览器，会将一个 event 对象传入到事件处理程序中。在通过 HTML 特性指定事件处理程序时，变量 event 中保存着 event 对象。// DOM0级btn.onclick = function(event){ ...
2019-07-17 18:00:47
122
原创 29-JavaScript高级程序设计-事件流&事件处理程序
一、事件1. 事件流事件流：描述从页面中接收事件的顺序。（1）事件冒泡 ⭐️事件冒泡(event bubbling)：事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。所有现代浏览器都支持事件冒泡。实现差别：IE5.5 及更早版本中的事件冒泡会跳过<html>元素，IE9、Firefox、Chrome 和 Safari...
2019-07-17 13:11:37
146
原创 28-JavaScript高级程序设计-DOM2&3范围
四、范围“DOM2 级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。1. DOM中的范围创建 DOM 范围：document.createRange()每个范围由一个 Range 类型的实例表示，这个实例拥有很多属性和方法：startContainer：包含范围起点的节点(即选区中第一个节点的...
2019-07-16 18:15:20
157
原创 27-JavaScript高级程序设计-DOM2&3遍历
三、遍历“DOM2 级遍历和范围”模块定义了两个用于辅助完成顺序遍历 DOM 结构的类型：NodeIterator 和 TreeWalker。这两个类型能够基于给定的起点对 DOM 结构执行深度优先(depth-first)的遍历操作。浏览器支持：Firefox 1+、Safari 1.3+、Opera 7.6+、Chrome 0.2+，IE不支持。1. NodeIterator2. T...
2019-07-16 13:09:17
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人