userkang-CSDN博客

转载正则表达式查询手册

元字符元字符，又叫字符集，就是用一些特殊符号表示特定种类的字符或位置。匹配字符. 匹配除换行符以外的任意字符\w 匹配字母或数字或下划线或汉字\s 匹配任意的空白符\d 匹配数字匹配位置\b 匹配单词的开始或结束^ 匹配字符串的开始$ 匹配字符串的结束\G 上一个匹配的结尾（本次匹配开始）\A 字符串开头(类似^，但不受处理多行选项的影响)\Z 字符串结尾或行尾(不...

2019-03-22 13:51:28 359 1

原创如何匹配DOM中除a标签包裹的"abc"字符串？

题目：如何匹配DOM中除a标签包裹的"abc"字符串？如：<div>cccabcddd</div><a href="xxxx">sfabcop</a><div>abc<a>abc</a></div>现在需要匹配出第1行、第4行的“abc”。...

2019-03-22 11:15:43 234

总所周知，JavaScript 是以单线程的方式运行的。说到线程就自然联想到进程。那它们有什么联系呢？进程和线程都是操作系统的概念。进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过程中能够申请创建和使用系统资源（如独立的内存区域等），这些资源也会随着进程的终止而被销毁。而线程则是进程内的一个独立执行单元，在不同的线程之间是可以共享进程资...

2019-02-21 18:41:04 1375

原创 JS设计模式——中介者模式

什么是中介者模式？中介者模式（Mediator）是用来降低多个对象和类之间的通信复杂性。这种模式提供一个中介类，该类通常处理不同类的通信，并支持松耦合，使代码易于维护。中介者模式属于行为模式。实现var mediator = (function () { var topics = {} // 订阅一个 topic，提供一个回调函数，一旦 topic 被广播就执行该回调 ...

2019-02-14 18:45:07 485 2

原创 JS设计模式——发布/订阅模式

发布/订阅模式和观察者模式的区别有人说发布/订阅模式就是观察者模式，有人说发布/订阅模式是观察者的变种。不管怎样，必须承认他们之间是有区别的。其中最主要的区别就是在发布/订阅模式中多了一层主题/事件通道。回想在观察者模式中，主题和观察者是直接发生关系的，观察者需要注册到主题中去。而在发布/订阅模式中，发布者和订阅者并不知道彼此的存在，他们都直接和中间层（主题/事件通道）发生关系。我们还是...

2019-02-13 17:36:00 354

原创 JS设计模式——观察者模式

什么是观察者模式？一个或多个观察者对目标的状态感兴趣，它们通过将自己依附在目标对象上以便注册所感兴趣的内容。目标状态发生改变并且观察者可能对这些改变感兴趣，就会发送一个通知消息，调用每个观察这的更新方法。当观察者不再对目标状态感兴趣时，他们可以简单地将自己从中分离。看完后你会觉得这是什么破玩意？不要急，我们举个现实中的例子，来按段落顺序逐步分解下上面这段话的意思。去饭馆吃饭，点完餐会...

2019-01-31 18:57:28 624

原创 JS设计模式——单例模式

定义限制一个类只能有一个实例，并提供一个全局的单一访问点。简单的单例模式在 JS 中，可以通过对象字面量的方式去创建一个实例对象。var singleton = { prop1: 'foo', prop2: 'bar', method1: function() { console.log(123) }}上面就是一个简单单例模式的示例。如果需要添加私有变量和方法，可以把等号...

2019-01-30 18:36:41 187

原创 JS设计模式——揭示模块模式

由来揭示模块模式是对之前模块模式的一种改进。在模块模式中，公有属性和方法都是写在被返回的字面量对象中，这样，如果想在闭包内部调用公有属性和方法，就需要通过暴露在全局变量中的对象名称去调用。var nameSpace = (function(){ return { // 公有属性 firstName: 'Peppa', // 公有属性 lastName: 'Pig', g...

2019-01-29 15:07:24 348

原创 JS设计模式——模块模式

历史模块模式最早是在 2003 年提出来的，后来由 Douglas・Crockford （道格拉斯・克劳克福德）推广。Douglas・Crockford 著有《JavaScript 语言精粹》，相信很多人也看过。同时他还是 JSON、JSLint、JSMin 等工具的发明人，对 web 技术的发展功不可没。什么是模块模式？模块模式是一种解决软件中私有和公有的封装问题的方法。通过这种模式，...

2019-01-29 12:17:01 895

原创 JS设计模式——构造器模式

引入看过高程书的对这个设计模式应该很熟悉。构造器模式属于创建型设计模式。那么什么是创建型设计模式呢？创建型设计模式专注于处理对象的创建机制。也就是说这类模式，都和创建对象的过程密不可分。除了构造器模式属于这类模式。还有其他一些设计模式也属于创建型设计模式。比如：工厂模式抽象模式原型模式单例模式生成器模式下面还是先来谈谈构造器模式。什么是构造器？在面向对象的编程语言中，构造...

2019-01-28 17:02:15 401

原创面试中你需要知道的 JavaScript 概念

1、一切都是对象一切（引用类型）都是对象，对象是属性的集合。2、函数和对象的关系对象是通过函数创建的（字面量的创建方式只是一种语法糖），函数也是一种对象。3、prototype 原型函数是一种对象，对象是属性的集合，prototype 是其中一个默认的属性。每个函数都有这个属性。prototype 的属性值也是一个对象。4、_proto_ (隐式原型)每个函数都有一个 protot...

2019-01-24 16:27:00 232

原创 JS临时死区（TDZ）

临时死区（Temporal Dead Zone），简写为 TDZ。let 和 const 声明的变量不会被提升到作用域顶部，如果在声明前访问这些变量，会导致错误：console.log(typeof value) // ReferenceError: value is not definedlet value = 1这是因为 JavaScript 引擎在扫描代码发现变量声明时，要么将他们...

2019-01-22 15:48:29 2312 5

翻译 [译] JavaScript中{}+{}等于多少？

原文链接：http://www.2ality.com/2012/01/object-plus-object.html最近，Gary Bernhardt在一个简短的演讲视频“Wat”中指出了一个有趣的JavaScript怪癖：在把对象和数组混合相加时，会得到一些你意想不到的结果。本篇文章会依次讲解这些计算结果是如何得出的。> [] + []""> [] + {}"[objec...

2019-01-17 14:26:45 232

原创 js 提取字符串中的数字

第一版：如果不考虑小数的情况。var str = '123sdfsdf456sdffs789'var numArr = str.match(/\d+/g)console.log(numArr) // => ["123", "456", "789"]// 也可以把拼接起来console.log(+numArr.join('')) // => 123456789第二版...

2019-01-17 10:46:42 16177 1

原创几道C语言程序题

1、以下函数值的类型是fun (float x) { float y; y = 3*x - 4; return y;}A、int B、不确定C、voidD、float答案：A解析：C 语言中，函数值类型的定义可以缺省，此时函数值的隐含类型是整型。2、以下程序的输出结果是#include &amp;lt;string.h&amp;gt;#include &amp;lt;stdio.h&amp;gt;...

2018-12-27 14:45:59 1480 5

原创 chrome调试工具使用之js篇

如果您还在使用 console.log 来进行 js 的代码调试，那么可以考虑看看下面的内容，有效的提高工作效率。断点调试代码断点1、打开调试工具（Ctrl/Cmd + Shift + C）。2、单击 Sources 选项卡。3、打开包含要中断的代码行文件。4、在需要暂停的代码左侧的行号处，点击，行号处会显示一个蓝色的图标。5、现在刷新页面，当代码执行到这一行就会暂停。条件断点...

2018-12-26 16:59:47 14765 11

原创让vscode支持php函数跳转功能

1、正确安装了php。2、在命令行执行 whereis php 查看PHP安装路径3、在vscode中安装扩展插件 PHP IntelliSense, 如果已经安装跳过。4、打开vscode配置，在扩展配置中找到PHP IntelliSense的配置。5、点击配置文件，编辑 php.executablePath ，将 null 改为php的安装路径。6、重新启动 vscode。...

2018-12-24 16:02:36 21089

原创 chrome调试工具使用之css篇

查看元素的CSS1、打开调试工具，点击调试工具左上角的检查元素按钮或者快捷键（Ctrl/Cmd + Shift + C）2、在页面选中需要查看的元素，被检查的元素在DOM树中以蓝色背景突出显示，样式在右侧 styles 选项卡区域内。添加或更改CSS样式1、添加内联样式，点击 element.style 顶部附近区域，输入新添加的样式属性名，按 Tab 键，再输入样式属性值，并按 En...

2018-12-21 14:12:49 22757 3

原创 css 实现移动端横滑

效果实现 &lt;div class="tab-part-wrapper"&gt; &lt;div class="tab-part"&gt; &lt;ul class="scroll-hidden"&gt; &lt;li class="tab-item

2018-12-17 17:16:12 734

原创 android微信中刷新失效问题

在 android 微信中用 location.reload() 刷新当前页面是不起作用的。解决方法：// 简单的匹配下连接符var sign = /\?/.test(location.href) ? '&' : '?'location.href = location.href + sign + Date.now()...

2018-12-13 15:22:03 399

原创 JavaScript 浮点数陷阱

最近看了一篇关于 JavaScript 浮点数陷阱的文章，写的挺不错，怕以后找不到了，我在这里自己再总结一份。问题在 JS 的运算中经常会遇到这样的问题： 0.1 + 0.2 = 0.30000000000000004 1 - 0.9 = 0.09999999999999998这些都是由与浮点数误差导致的问题。具体的分析，请往下看。浮点数存储JavaScript 中所有数字...

2018-12-04 15:46:17 382

原创 svg之viewBox缩放

举个栗子

2018-12-03 16:22:03 12827 6

原创 svg圆圈loading的实现

效果：代码：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta name=&quot;viewport&quot; content=&quot;initial-scale=1, minimum-scale=1, maximum

2018-12-03 11:53:10 2056

原创 javascript 进制转换

十进制转其他进制toString 方法可以传入一个2到36之间的整数，表示需要把数字转化成几进制。如下：// 10进制转2进制(255).toString(2) // &amp;amp;quot;11111111&amp;amp;quot;// 10进制转8进制(255).toString(8) // &amp;amp;quot;377&amp;amp;quot;// 10进制转16进制(255).toString(16) //

2018-11-23 14:04:44 255

原创 CSS 多列等高的几种实现方式

什么是多列等高简单的说，就是多个列，但是所有列的高度都希望以最高的那个列为准。如下图，每个列的高度都靠里面的内容撑起来。但是有些情况我们需要每个列能与最高的那个列等齐。如下图：实现利用 padding、margin 来实现table 布局实现flex 布局实现来直接看看测试代码吧，可以直接复制代码，查看结果&lt;!DOCTYPE html&gt;&lt;html la...

2018-11-22 17:10:41 4997

原创最常用的移动端 1px 实现

关于移动端实现 1px 的方式有很多，这里只讲述最常使用也是兼容性较好的两种：1、利用 transfrom 的 scale 缩放来实现2、利用 background 的 line-gradient 线性渐变来实现实现效果代码<!DOCTYPE html><html lang="en"> <head> <meta charset="...

2018-11-22 14:38:15 1689

原创百度智能小程序踩坑之路

这篇博客记录做百度小程序中踩过的一些坑，也可能是自己使用上方法不对。相信以后都会越来越好。我使用的各个工具版本如下：开发者工具版本： 1.14.7编译工具版本：2.12.9调试基础库：1.13.401、image 标签加样式会无效image { border: 1px solid #222;}解决方法：改用.image { border: 1px solid #222...

2018-11-22 10:24:07 261

原创有趣的HTML标签 —— map、area

干什么用的&lt;map&gt; 标签一般与 &lt;area&gt; 标签一起使用，来定义一个图像映射（也就是一个可点击的链接区域）。这么来说吧，如果让你在一个区域添加一个点击热点，你怎么加？如上图，蓝色标记的区域，需要给这块区域添加一个点击，你可能说，加一个绝对定位的 div 块上去，然后给这个 div 块绑定事件就好了。嗯，对。这是很有效的一种方法。但如果不让用 js 来实现呢？...

2018-11-21 19:33:03 1595

原创聊一聊 vscode 的代码格式化

写在开头这篇文章来聊一聊我在 vscode 代码格式化上遇到的一些坑。如果你想快速配置自己的 vscode 支持保存自动格式化功能，请看另一篇文章：三步搞定 vscode 代码格式化先贴出最终的配置文件：{ // tab 大小为2个空格 "editor.tabSize": 2, // 100 列后换行 "editor.wordWrapColumn": 100, // 保...

2018-11-20 18:38:16 30296 1

原创三步搞定 vscode 代码格式化

一、安装以下几个 vscode 扩展程序：ESLintPrettier - Code formatterVetur如图：二、打开 settings 文件打开方式：先按步骤打开 setting 界面，Code --&amp;amp;amp;gt; preferences --&amp;amp;amp;gt;setting （也可以快捷键 command + ,（mac）直接打开）现在看到的是界面配置模式，点击右上角的三个...

2018-11-20 15:20:56 97402 30

原创 HTML 怎么发明的？

什么是 SGML？标准通用标记语言（Standard Generalized Markup Language，SGML）是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用 <> 的常规方式。由于它的复杂，因而难以普及。这是它的一个例子：<QUOTE TYPE="example">typically something like ...

2018-11-19 18:56:59 1499

翻译实战 webpack 4 配置解析四

WEBPACK.PROD.JS 解析现在让我们看看我们的 webpack.prod.js 配置文件，它包含了我们正在处理项目时用于生产构建的所有设置。它与 webpack.common.js 中的设置合并，形成一个完整的 webpack 配置。// webpack.prod.js - production buildsconst LEGACY_CONFIG = 'legacy';const...

2018-11-12 18:43:56 2599

翻译实战 webpack 4 配置解析三

接上篇：实战 webpack 4 解析二WEBPACK.DEV.JS 解析现在让我们看看我们的 webpack.dev.js 配置文件，它包含了我们项目开发时用于开发构建的所有设置。它与 webpack.common.js 中的设置合并形成了一个完整的webpack 配置。// webpack.dev.js - developmental buildsconst LEGACY_CONFI...

2018-11-11 19:44:31 496

翻译实战 webpack 4 配置解析二

接上篇：实战 webpack 4 解析一WEBPACK 配置的共同约定我为所有 webpack 配置文件（webpack.common.js，webpack.dev.js 和webpack.prod.js）采用了一些约定，以便一致性。每个配置文件都有两个内部配置：legacyConfig - 适用于旧版 ES5 构建的配置modernConfig - 适用于新版 ES6+ 构建的配...

2018-11-09 14:48:04 647

翻译实战 webpack 4 配置解析一

随着Web开发变得越来越复杂，我们需要工具来帮助我们构建现代网站。这是一个复杂的webpack 4配置的完整的现实生产示例。构建现代网站已成为自定义应用程序的开发。网站不仅仅被当作一个营销网站，因为它们还具备了传统应用的功能。当一个过程变得复杂时，我们就会将其分解为可管理的组件，并使用工具自动化构建过程。这种情况不论我们是在制造汽车、起草法律文件还是建立网站。使用正确的工具像 we...

2018-11-08 20:49:54 567

原创 CSS3 Multicol 的一些基本概念

多列布局（通常称为multicol）是一种规范，用于将内容布置到一组列框中，就像报纸中的列一样。本指南解释了规范如何与一些常见的用例示例一起使用。关键概念和术语Multicol与CSS中的任何其他布局方法不同，它将内容（包括所有后代元素）分段为列。这与在使用CSS Paged Media时将内容分段为页面的方式相同，例如通过创建打印样式表。规范定义的属性有：column-widthco...

2018-11-02 19:59:47 891

原创一个简易的 vue 框架 —— MyVue

MyVue一个简易的 Vue 框架：1、用来解释 vue 的响应式原理2、实现简单的模版指令{{}}、v-model 指令和事件指令项目地址https://github.com/userkang/MyVue用法1、安装依赖npm install2、启动本地服务npm run dev...

2018-10-29 13:40:27 1795

翻译阮一峰 Webpack 教程

写在开头：此 Webpack 教程是阮老师在 Webpack 1.x 的版本上做的。现在 Webpack 的版本已经改动较大，建议有基础的同学，就直接上官网看最新的就好了。这个教程可以用来了解下 Webpack 的前世今生。开始这个项目是一些简单的 Webpack 示例集合这些示例特意用简单明了的方式编写，你将会发现跟着这些例子学习这个强大的工具并非难事。如何使用首先，全局安装 Web...

2018-10-29 12:33:17 37551 2

原创 Webpack 4 教程：从0配置到生产模式

原文链接：Webpack 4 Tutorial: from 0 Conf to Production Modewebpack 4 问世了！除了大幅度的性能提升，而且增加了零配置的默认设置。webpack 4 ，零配置的模块打包工具webpack 是一个强力和有着很多独特功能的工具，但是他的一大痛点在于他的配置文件如果是大中型项目我添加配置文件没什么大问题，有时候也是必须的。但是有时候...

2018-10-25 18:53:28 2386 1

原创 keyup.enter 和 blur 事件冲突的问题

处理 keyup.enter 和 blur 事件冲突的问题有些场景想要在 input 里输入文字，当触发回车或者失去焦点时保存数据但是当按下回车时往往又会同时触发 blur 事件所以就会触发两次保存操作，对此有个小技巧，就是让回车触发失去焦点事件。直接看代码吧 <input v-model="newValue" type="text" @blur="saveValue" ...

2018-09-18 12:27:10 5854 7

空空如也

空空如也