蜗牛先生

我们涉及到列表渲染时，常涉及到列表去重问题，以防止key值重复导致的渲染异常。

如何在不引入第三个变量的情况下互换两个变量的值算术运算异或运算解构总结例：x = 4；y = 5。如何在不引入第三个变量的情况下互换x与y的值？算术运算第一种方法是加法。x = x + y;y = x - y;x = x - y;这个方案的缺陷在于，当x或者y足够大的时候，可能产生溢出。第二种方法，把加法变为减法，与方案一类似。x = x - y;y = x + y;x ...

看项目，首先看package.json。看其中的main配置项，这是整个项目的入口运行文件。看模块，首先看export。先看它导出的是什么，然后看它从哪里来，其中又进行了什么样的操作。...

作为程序员，我们需要不停的学习才能保证自己不会退步。但是学习的路径那么多，我们应该如何选择呢？以下是我的结论：入门看视频；进阶看官方文档或书籍；精通看源码或书籍。▍入门入门看视频，因为看视频更易于了解，便于上手。强推B站（bilibili.com），这不是一个只有二次元的网站哦。在这个网站里，你搜索一下你需要的学习资料，你就能发现惊喜。另外看视频如何看呢？建议是第...

CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那么当我们在碰到通过多种形式对同一个元素进行设置样式时的情况时，如果不进行测试，如何预测其最终结果呢？以下是选择器的优先规则：1、!important > id > class > 标签；2、!important 比 内联优先...

如题，这是一个有趣的小题目。具体方法如下： ▍方法一var a = 3;var b = 4;a = a + b; // 7b = a - b; // 3a = a - b; // 4 ▍方法二var a = 3;var b = 4;a = a ^ b; // 7b = b ^ a; // 3a = a ^ b; // 4 显然，上...

Angular、Vue和React都是目前比较流行的前端框架，不同的企业对其前端工作者有不同的要求，那么这三个框架之间有什么样的区别呢？ ▍Angular框架比较成熟完整，过于庞大，上手难； 指令以ng-xxx开头； 由谷歌开发和维护； 版本1比较适合PC端开发，版本2在往移动端靠； 不支持低版本浏览器； 内置指令和自定义指令； 内置过滤器和自定义过滤器； 支持双向数据...

一道笔试题，将一个嵌套数组扁平化处理。 ▍题目将[1,2,[3,[4,5]]]转化成[1,2,3,4,5]。 ▍方法一：递归var arr = [1, 2, [3, [4, 5]]];function flatten(arr) { var res = []; for(var i = 0; i < arr.length; i++) { if(Array...

在css中，有几个相似的属性：word-spacing、word-break、letter-spacing和white-space。 ▍word-spacing增加或减少单词间的空白（即字间隔）。允许指定负长度值，这会让字之间挤得更紧。示例：p { word-spacing: 25px | -20px | normal | inherit;} ▍word...

在前端开发过程中，会遇到三个比较相似的东西：url、href和src。这三个都是表示路径的，那它们之间有什么样的区别呢？又应该在什么时候应用它们呢？ ▍urlURL是一个网址。URL不是属性。在HTML中，一般仅用于引用图片路径。使用示例：.demo { background-image: url(http://www.yule.com.cn/uploadfile/2...

在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方...

Promise就是一个异步执行的解决方案，将原本异步发生的事情转化成同步。 ▍示例想让funA先执行，funB后执行 ▍初始代码funA: function () { if (xxx) { xxx; } else { xxx; }}funB: function () { if (xxx) { ...

filter是滤镜，就是将某些东西过滤出来。 ▍css中的filter运用于对图像进行相关处理（就像P图一样，改变图片的颜色、饱和度等属性），详细解析可参考菜鸟教程。 ▍js中的filterfilter()函数是Array对象的一个方法。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素（返回值...

hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。▍示例var obj = { a: 1, fn: function(){ }, c:{ d: 5 }};console.log(obj.hasOwnProperty('a')); // truecons...

同时打开多个窗口（查看多个项目）打开一个新窗口： Ctrl+Shift+N 关闭窗口： Ctrl+Shift+W同时打开多个编辑器（查看多个文件）新建文件 Ctrl+N 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名 左中右3个编辑器的快捷键Ctrl+1...

前两天接到一个需求，需要在一个弹窗的“确定”按钮上加一个倒计时，试过setInterval，未成功，就想到了用setTimeout，但是其中的this作用域倒是令我困扰了好长时间。初始大致的结构如下：// 错误代码fun() { …… if (……) { …… } setTimeout(this.fun, 1000);}this.f...

最近做了一个需求，其中有个细节是能搜索，点击键盘上的Enter时能进行搜索，这就需要捕获键盘上的Enter事件了。其实键盘上的每个键都有一个键盘码，我们能获取其键盘码从而判断事件。按键 键码 ESC键 VK_ESCAPE (27) 回车键 VK_RETURN (13) TAB键 VK_TAB (9) Caps Lock键 VK_CAPIT...

前端在做一些文案的时候，有时会用到一些特殊字符，比如：空格、箭头、大于小于号等。代码 显示 含义 < < 小于号 > > 大于号 & & 并且 " " 引号 ® ® 已注册 © ...

最近的一道面试题：css实现斑马条纹背景。▍效果▍源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { display: fl...

提到正则，很容易就能想到它的校验功能。但其实正则不仅能校验，还能从字符串中捕获到符合自己要求的子字符串并进行提取。提取功能的实现是通过RegExp 对象方法和支持正则表达式的 String 对象的方法实现的。参考链接：https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp...

记录一下前端开发过程中遇到的一些小问题以及解决方法。目录目录最近更新2019/10/23：在控制台使用document.designMode帮助进行调试知识汇总▍HTML篇一、加快audio标签音乐加载▍CSS篇一、图片剪裁防止图片变形二、消除input框选中时外边框三：带有透明度的渐变四：a标签的四个伪类定义顺序五、流光字六：使用伪元...

只要功能不是太过单一的网站，就肯定会有需要用户输入的地方，即使是最简单的登录，也是需要用户输入的地方。但是并不是每一个网站都对用户的输入进行了防范。言外之意，用户的输入可能对网站的安全性构成威胁，这是怎么回事呢？这就涉及到一个专业名词了：XSS。▍XSS（360百科）跨站脚本攻击(Cross Site Scripting)，为了不和层叠样式表...

这是一篇转载的纯干货，绝对干货！  之前自己也有参与过微信公众号服务的前端开发（移动端），所以了解过一点关于移动端头标签的使用，但是只是零散的内容，没有汇总过。 今天既然收获了这样一篇干货，就干脆转载过来，方便即时查用。 &lt;head&gt; &lt;!-- 声明文档使用的字符编码 --&gt; &lt;meta charset='utf-8'&g...

有些时候在写前端的时候，需要用到一些时间，但是时间的格式又比较多，除了时间戳之外，还有各种各样的格式。更多的时候还需要我们把这些格式进行相互转换。所以为了以后使用方便，在这里做个辑录。▍获取时间戳1、精确到秒：1527509444000var timestamp = Date.parse(new Date());2、精确到毫秒：152750944430...

我这个人对新奇的东西都比较感兴趣。 在一次实验课上，无意间瞟到同学的电脑界面上呈现不一样的东西，我仔细去看，这一看，就让我发现了另一番天地。  ▍jQuery插件库 简介 这是一个jQuery插件库（网址：http://www.jq22.com/），在网站中有许许多多的插件。   这些插件大部分都不需要购买的，可以直接下载使用。 当然也有一部...

闲来无事，就翻看了一个同学的作品，作品中有一个展示他的简历的页面，简历写在一个PDF中。然后在页面中直接显示出来了，可以下载，还可以打印，这个技术我还没有尝试过呢。正好想弄点新鲜玩意儿玩玩，忽然想起前段时间我也收藏过关于这个技术的几篇博客，就把这几篇收藏打开，看看怎么实现这个效果。▍特点1、能自由选择需要浏览的页面2、从左至右依次为...

input框的类型到底有多少种呢？零零总总算起来有23种。▍总述常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。另外还有一些类型：tel、e...

JS内存空间分为栈、堆、池（一般也会归类为栈中）。其中栈存放变量，堆存放复杂对象，池存放常量。 ▍举个栗子// a1、a2、a3都存放在栈中var a1 = 0;var a2 = "This is string.";var a3 = null;// b1存放在栈中，{m:20}存放在堆中var b1 = { m: 20};// b2存放在栈中，[1,2,3]存放在堆...

前端开发人员在开发页面的时候，必定会涉及到一面布局。好像现在的页面布局方法大致有两种，一种是传统的盒子模型（margin、border、padding、content）；另外一种是比较新兴的技术FlexBox弹性盒子模型。 ▍传统盒子模型传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。示意图如下：利用这种盒...

微信小程序本身是不提供天气api的，所以本文使用的是百度的api。▍效果图先附上个人制作的一个简易的效果图，为了排版方便，所以还有很多天气信息我没有放到页面上。▍事先准备如果想要达到预期效果，你的小程序必须满足以下条件：1、必须有【APPID】，没有APPID的小程序无法申请到请求天气信息所必需的【百度AK】；2、必须将【http://api.map.bai...

CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；2、径向渐变（Radial Gradients）- 由它们的中心定义。▍demo.wxml<view class='container'> ...

▍写在前面（来访者请直接浏览下一条）最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。▍效果预览首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名...

在制作页面的时候，偶尔会需要用到一些特殊的字符。如果不使用键盘直接输入，那么如何在屏幕上显示它们呢？▍转义方法在<text></text>中设置属性decode为true。【注意】只能在text标签中设置属性decode为true，转义字符才能生效。【示例】<text decode="{{true}}">&nbsp;</...

▍写在前面在制作一个医院类小程序的前端时，有一个功能是对医院进行评价，通过查找资料并结合自身的知识花了一个下午终于解决了。（由于知识欠缺的原因，中间一个问题阻碍了几个小时，即为下文所陈列问题的第二条）。▍效果预览分别截取了无评分状态和评价状态的页面：未选中选中▍代码实现1、feedback.js// pages/more/feedback.jsP...

在做页面的过程中，应用到一些前端框架，很多时候都需要对框架的原始设计进行微调，但是如果直接在框架文件里面去搜索，有时候一搜就会有一大堆差不多的，还得一个个去比对到底哪个才是我想要找的，这样一趟下来就要花费不少时间，更何况这种情况还不算少。这个时候，就要改变策略了！而使用浏览器中的“审查元素”功能就是一个非常好的，也是非常明智的选择。正好自己今天做页面的时候又用到了审查元素，所以...

▍写在前面（来访者请直接浏览下一条）在写页面的时候遇到一个问题：需要对某件商品进行描述，但是往往描述文字过长，如果全部一次性显示可能对样式的一致性造成破坏，影响页面美观，于是我联想到了之前在很多网站上见过省略部分文字的方法，决定自己实践一次。▍效果预览先贴上最终实践效果：▍实现方法【注意】为了能更清晰的了解文字超限断尾的使用方法，以下所有css代码将省略全部关于...

跟着教学视频了解到websocket和socket.io的通信方法之后，自己写了一个交互效果更好的聊天室。▍小插曲2019.1.24：今天在聊天室后台无意间看到了这样一段聊天，希望这位名叫luke所说的是假的，如果是真的，请相信，这世界上还有更好的人在等着你。▍演示效果▍实现过程（Windows系统）1、在nodeJS中文网下载nodeJS客户端...

一般来说是针对不同的浏览器写不同的CSS,就是 CSS Hack。 如果是做一个大型web网站，就一定会考虑到浏览器兼容的问题。不同的浏览器因为其内核不同所以对应的可以解析到的CSS写法也是不同的。 ▍条件注释法只在IE下生效&lt;!--[if IE]&gt;这段文字只在IE浏览器显示&lt;![endif]--&gt;    只在IE6下生效&lt;!--[i...

突然发现几个HTML5新增的属性中有几个有趣的，在这里分享一下。 ▍contentEditable：元素内容是否可编辑&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt

在HTML5新增的标签中，&lt;article&gt;与&lt;section&gt;看起来有些相似，但是在内涵上是有一定差别的。&lt;article&gt;更侧重于表现独立的区块，可以用于表现一段文章或者引入一个插件；而&lt;section&gt;更重要的表现形式为分段，可以用来划分文档结构。&lt;article&gt;与&lt;section&gt;可以互相嵌套使用，但是在使用...