前端开发
关注
分享
扫一扫
门时
这个作者很懒，什么都没留下…
展开
-
JS 根据对象中的某个属性去重
我们涉及到列表渲染时，常涉及到列表去重问题，以防止key值重复导致的渲染异常。原创 2024-12-23 17:40:16 · 146 阅读 · 0 评论 -
如何在不引入第三个变量的情况下互换两个变量的值
如何在不引入第三个变量的情况下互换两个变量的值算术运算异或运算解构总结例：x = 4；y = 5。如何在不引入第三个变量的情况下互换x与y的值？算术运算第一种方法是加法。x = x + y;y = x - y;x = x - y;这个方案的缺陷在于，当x或者y足够大的时候，可能产生溢出。第二种方法，把加法变为减法，与方案一类似。x = x - y;y = x + y;x ...原创 2020-04-07 19:29:34 · 2905 阅读 · 0 评论 -
如何阅读源码？
看项目，首先看package.json。看其中的main配置项，这是整个项目的入口运行文件。看模块，首先看export。先看它导出的是什么，然后看它从哪里来，其中又进行了什么样的操作。...原创 2019-10-18 11:36:12 · 517 阅读 · 0 评论 -
程序员如何学习？
作为程序员，我们需要不停的学习才能保证自己不会退步。但是学习的路径那么多，我们应该如何选择呢？以下是我的结论：入门看视频；进阶看官方文档或书籍；精通看源码或书籍。▍入门入门看视频，因为看视频更易于了解，便于上手。强推B站（bilibili.com），这不是一个只有二次元的网站哦。在这个网站里，你搜索一下你需要的学习资料，你就能发现惊喜。另外看视频如何看呢？建议是第...原创 2019-10-18 10:37:17 · 470 阅读 · 0 评论 -
如何在不借助其他函数和第三个变量的情况下，更换两个变量的值？
如题，这是一个有趣的小题目。具体方法如下： ▍方法一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 显然，上...原创 2018-10-12 12:54:08 · 602 阅读 · 0 评论 -
Angular、Vue和React的区别
Angular、Vue和React都是目前比较流行的前端框架，不同的企业对其前端工作者有不同的要求，那么这三个框架之间有什么样的区别呢？ ▍Angular框架比较成熟完整，过于庞大，上手难； 指令以ng-xxx开头； 由谷歌开发和维护； 版本1比较适合PC端开发，版本2在往移动端靠； 不支持低版本浏览器； 内置指令和自定义指令； 内置过滤器和自定义过滤器； 支持双向数据...原创 2018-10-12 14:37:59 · 1741 阅读 · 0 评论 -
JS数组扁平化
一道笔试题，将一个嵌套数组扁平化处理。 ▍题目将[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...原创 2018-09-16 10:53:58 · 1912 阅读 · 0 评论 -
word-spacing、word-break、letter-spacing和white-space
在css中，有几个相似的属性：word-spacing、word-break、letter-spacing和white-space。 ▍word-spacing增加或减少单词间的空白（即字间隔）。允许指定负长度值，这会让字之间挤得更紧。示例：p { word-spacing: 25px | -20px | normal | inherit;} ▍word...原创 2018-09-19 19:00:28 · 2949 阅读 · 0 评论 -
在HTML中，url、href和src的应用
在前端开发过程中，会遇到三个比较相似的东西：url、href和src。这三个都是表示路径的，那它们之间有什么样的区别呢？又应该在什么时候应用它们呢？ ▍urlURL是一个网址。URL不是属性。在HTML中，一般仅用于引用图片路径。使用示例：.demo { background-image: url(http://www.yule.com.cn/uploadfile/2...原创 2018-09-20 12:11:30 · 1612 阅读 · 0 评论 -
CSS选择器优先级比较
CSS选择器中比较常见的有标签选择器、ID选择器、类选择器以及子选择器。而事实上，CSS选择器如果细分下来，竟然多达40多种。那么当我们在碰到通过多种形式对同一个元素进行设置样式时的情况时，如果不进行测试，如何预测其最终结果呢？以下是选择器的优先规则：1、!important > id > class > 标签；2、!important 比 内联优先...原创 2018-10-09 16:16:45 · 2767 阅读 · 0 评论 -
typeof与instanceof
在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方...原创 2018-10-09 17:49:45 · 167 阅读 · 0 评论 -
使用正则完成字符串的提取
提到正则，很容易就能想到它的校验功能。但其实正则不仅能校验，还能从字符串中捕获到符合自己要求的子字符串并进行提取。提取功能的实现是通过RegExp 对象方法和支持正则表达式的 String 对象的方法实现的。参考链接：https://www.w3school.com.cn/jsref/jsref_obj_regexp.asp...原创 2019-08-02 14:30:28 · 1133 阅读 · 0 评论 -
CSS斑马条纹背景
最近的一道面试题：css实现斑马条纹背景。▍效果▍源码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .container { display: fl...原创 2019-03-21 10:26:13 · 1504 阅读 · 0 评论 -
html特殊字符代码
前端在做一些文案的时候，有时会用到一些特殊字符，比如：空格、箭头、大于小于号等。代码 显示 含义 &lt; < 小于号 &gt; > 大于号 &amp; & 并且 &quot; " 引号 &reg; ® 已注册 &copy; ...原创 2018-12-22 23:37:46 · 8329 阅读 · 0 评论 -
捕获移动端键盘Enter事件
最近做了一个需求，其中有个细节是能搜索，点击键盘上的Enter时能进行搜索，这就需要捕获键盘上的Enter事件了。其实键盘上的每个键都有一个键盘码，我们能获取其键盘码从而判断事件。按键 键码 ESC键 VK_ESCAPE (27) 回车键 VK_RETURN (13) TAB键 VK_TAB (9) Caps Lock键 VK_CAPIT...原创 2018-12-22 11:19:20 · 6051 阅读 · 0 评论 -
React框架中setTimeout中的this作用域问题
前两天接到一个需求，需要在一个弹窗的“确定”按钮上加一个倒计时，试过setInterval，未成功，就想到了用setTimeout，但是其中的this作用域倒是令我困扰了好长时间。初始大致的结构如下：// 错误代码fun() { …… if (……) { …… } setTimeout(this.fun, 1000);}this.f...原创 2018-12-03 13:14:19 · 1269 阅读 · 0 评论 -
VS Code快捷键
同时打开多个窗口（查看多个项目）打开一个新窗口： Ctrl+Shift+N 关闭窗口： Ctrl+Shift+W同时打开多个编辑器（查看多个文件）新建文件 Ctrl+N 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名 左中右3个编辑器的快捷键Ctrl+1...转载 2018-11-28 12:34:37 · 165 阅读 · 0 评论 -
hasOwnProperty方法用法简介
hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。▍示例var obj = { a: 1, fn: function(){ }, c:{ d: 5 }};console.log(obj.hasOwnProperty('a')); // truecons...原创 2018-11-21 15:50:58 · 69026 阅读 · 2 评论 -
css中的filter滤镜和js中的filter方法
filter是滤镜，就是将某些东西过滤出来。 ▍css中的filter运用于对图像进行相关处理（就像P图一样，改变图片的颜色、饱和度等属性），详细解析可参考菜鸟教程。 ▍js中的filterfilter()函数是Array对象的一个方法。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素（返回值...原创 2018-11-21 11:36:21 · 1487 阅读 · 0 评论 -
Promise基本用法
Promise就是一个异步执行的解决方案，将原本异步发生的事情转化成同步。 ▍示例想让funA先执行，funB后执行 ▍初始代码funA: function () { if (xxx) { xxx; } else { xxx; }}funB: function () { if (xxx) { ...原创 2019-01-18 13:28:31 · 328 阅读 · 0 评论 -
微信小程序（7）——字符转义
在制作页面的时候，偶尔会需要用到一些特殊的字符。如果不使用键盘直接输入，那么如何在屏幕上显示它们呢？▍转义方法在<text></text>中设置属性decode为true。【注意】只能在text标签中设置属性decode为true，转义字符才能生效。【示例】<text decode="{{true}}"> </...原创 2018-08-04 15:52:07 · 6651 阅读 · 2 评论 -
微信小程序（6）——禁止页面滚动
▍写在前面（来访者请直接浏览下一条）最近在做一个美食类小程序的时候，需要用到一个购物车，自己不好构思，就仿照美团的购物车写了一个，然后就在这卡了一下：购物车列表是fixed脱离文本流的，在上下滚动购物车列表的时候，底部的页面竟然也会跟着滚动，这怎么成，所以我就找了一下关于这个问题的解决方案。▍效果预览首先小声说一句，为了节约时间，所以在做数据模拟显示的时候，所有的图片还有名...原创 2018-08-02 14:18:22 · 63719 阅读 · 4 评论 -
微信小程序（4）——CSS3渐变
CSS3 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。CSS3 定义了两种类型的渐变（gradients）：1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向；2、径向渐变（Radial Gradients）- 由它们的中心定义。▍demo.wxml<view class='container'> ...原创 2018-07-21 23:07:53 · 8730 阅读 · 0 评论 -
微信小程序（3）——引入百度api天气信息全过程
微信小程序本身是不提供天气api的，所以本文使用的是百度的api。▍效果图先附上个人制作的一个简易的效果图，为了排版方便，所以还有很多天气信息我没有放到页面上。▍事先准备如果想要达到预期效果，你的小程序必须满足以下条件：1、必须有【APPID】，没有APPID的小程序无法申请到请求天气信息所必需的【百度AK】；2、必须将【http://api.map.bai...原创 2018-07-21 13:04:28 · 6433 阅读 · 3 评论 -
简述传统盒子模型与FlexBox弹性盒子模型
前端开发人员在开发页面的时候，必定会涉及到一面布局。好像现在的页面布局方法大致有两种，一种是传统的盒子模型（margin、border、padding、content）；另外一种是比较新兴的技术FlexBox弹性盒子模型。 ▍传统盒子模型传统盒子模型就是由外边距（margin）、边框（border）、内边距（padding）以及内容（content）组成。示意图如下：利用这种盒...原创 2018-07-20 11:23:54 · 1934 阅读 · 0 评论 -
Javascript内存分配机制
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]存放在堆...转载 2018-06-25 12:21:32 · 676 阅读 · 0 评论 -
input框的23种类型
input框的类型到底有多少种呢？零零总总算起来有23种。▍总述常用的并且能为大多数浏览器所识别的类型大概有：text、password、number、button、reset、submit、hidden、radio、checkbox、file、image、color、range、date、month、week、time、datetime-local。另外还有一些类型：tel、e...原创 2018-06-24 13:32:52 · 19613 阅读 · 1 评论 -
使用pdfobject.js实现在线浏览PDF
闲来无事，就翻看了一个同学的作品，作品中有一个展示他的简历的页面，简历写在一个PDF中。然后在页面中直接显示出来了，可以下载，还可以打印，这个技术我还没有尝试过呢。正好想弄点新鲜玩意儿玩玩，忽然想起前段时间我也收藏过关于这个技术的几篇博客，就把这几篇收藏打开，看看怎么实现这个效果。▍特点1、能自由选择需要浏览的页面2、从左至右依次为...原创 2018-06-15 17:20:04 · 38850 阅读 · 36 评论 -
前端新手不可不知的JQuery插件网
我这个人对新奇的东西都比较感兴趣。 在一次实验课上，无意间瞟到同学的电脑界面上呈现不一样的东西，我仔细去看，这一看，就让我发现了另一番天地。 ▍jQuery插件库 简介 这是一个jQuery插件库（网址：http://www.jq22.com/），在网站中有许许多多的插件。 这些插件大部分都不需要购买的，可以直接下载使用。 当然也有一部...原创 2018-06-01 12:50:48 · 452 阅读 · 0 评论 -
JS时间格式与时间戳的相互转换
有些时候在写前端的时候，需要用到一些时间，但是时间的格式又比较多，除了时间戳之外，还有各种各样的格式。更多的时候还需要我们把这些格式进行相互转换。所以为了以后使用方便，在这里做个辑录。▍获取时间戳1、精确到秒：1527509444000var timestamp = Date.parse(new Date());2、精确到毫秒：152750944430...原创 2018-06-12 19:03:24 · 9059 阅读 · 1 评论 -
H5移动端网页头部标签模板
这是一篇转载的纯干货，绝对干货！ 之前自己也有参与过微信公众号服务的前端开发（移动端），所以了解过一点关于移动端头标签的使用，但是只是零散的内容，没有汇总过。 今天既然收获了这样一篇干货，就干脆转载过来，方便即时查用。 <head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'&g...转载 2018-06-04 10:50:53 · 4133 阅读 · 0 评论 -
简述XSS攻击及其防范措施
只要功能不是太过单一的网站，就肯定会有需要用户输入的地方，即使是最简单的登录，也是需要用户输入的地方。但是并不是每一个网站都对用户的输入进行了防范。言外之意，用户的输入可能对网站的安全性构成威胁，这是怎么回事呢？这就涉及到一个专业名词了：XSS。▍XSS（360百科）跨站脚本攻击(Cross Site Scripting)，为了不和层叠样式表...原创 2018-06-03 22:16:11 · 7482 阅读 · 7 评论 -
微信小程序（8）——五星级评分
▍写在前面在制作一个医院类小程序的前端时，有一个功能是对医院进行评价，通过查找资料并结合自身的知识花了一个下午终于解决了。（由于知识欠缺的原因，中间一个问题阻碍了几个小时，即为下文所陈列问题的第二条）。▍效果预览分别截取了无评分状态和评价状态的页面：未选中选中▍代码实现1、feedback.js// pages/more/feedback.jsP...原创 2018-08-05 18:10:06 · 7740 阅读 · 7 评论 -
前端小技巧集锦【持续更新中……】
记录一下前端开发过程中遇到的一些小问题以及解决方法。目录目录最近更新2019/10/23：在控制台使用document.designMode帮助进行调试知识汇总▍HTML篇一、加快audio标签音乐加载▍CSS篇一、图片剪裁防止图片变形二、消除input框选中时外边框三：带有透明度的渐变四：a标签的四个伪类定义顺序五、流光字六：使用伪元...原创 2018-08-10 10:17:55 · 2978 阅读 · 4 评论 -
js伪数组及其转化
在之前的笔试题中，遇到了一道题目：什么是伪数组？如何将伪数组转化为标准数组？ ▍什么是伪数组？一般符合以下三个条件的称之为伪数组：1、具有数组的length属性；2、按照索引方式存储数据（可以通过“[]”找到相应的项）；3、不具有数组的一些方法（push、pop等）。参考示例：var obj3 = { length: 0 };var obj4 = { 0: ...原创 2018-10-02 15:17:02 · 333 阅读 · 0 评论 -
浏览器重绘与重排
当我们在做前端开发的时候，肯定会碰到操作DOM的情况，在操作DOM的时候，就会引起浏览器的重绘与重排。 ▍重绘如果DOM变化仅仅影响的了visibility、outline、背景色等等非几何属性，此时就发生了重绘（repaint）而不是重排，因为布局没有发生改变。 ▍重排当DOM变化影响了元素的几何属性（宽、高改变等等），浏览器此时需要重新计算元素几何属性，并且页面中...原创 2018-09-20 16:34:35 · 908 阅读 · 0 评论 -
各种Web图片格式及其应用场景
通常网页在显示的图片（图形）的时候，有以下几种格式：GIF、PNG、JPG、SVG，还有个比较新的WebP格式。▍GIF优点：GIF是动态的；支持无损耗压缩和透明度。缺点：的详细的图片和写实摄影图像会丢失颜色信息；在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式；GIF 支持有限的透明度，没有半透明效果或褪色效果。适用场景：主要用于比较小的动态图...原创 2018-09-07 19:02:14 · 4129 阅读 · 0 评论 -
JS中==和===的区别
使用JS书写判断表达式的时候通常会遇到==和===，它们相差了一个“=”，意义上有什么样的区别呢？▍区别==表示等同，===表示恒等。==只比较内容，而===既比较内容也比较数据类型。▍==100 == "100" // true1 == true // truenull == null //...原创 2018-09-11 16:48:17 · 11516 阅读 · 1 评论 -
CSS引入样式的4种方式以及link和@import之间的区别
CSS引入样式的方式目前有四种：直接在div中使用css样式制作div+css网页； 在style标签中书写css样式； 使用@import引用外部CSS文件； 使用link引用外部CSS文件，推荐此方法。 ▍内联方式：直接在div中使用css样式<div style='width:200px;height:200px;background-color:red;'>...原创 2018-09-11 11:48:49 · 1991 阅读 · 0 评论 -
关于雪碧图
前端新手在入门的时候，一定会听到一个名词，叫做“雪碧图”，什么是雪碧图呢？ 注意：这个雪碧跟那个饮料雪碧不是一个玩意儿。。。 ▍含义也叫CSS sprites精灵图，通俗来说就是有很多小图标合成的一张大的图片就做雪碧图。 ▍为什么要用雪碧图在网页中使用雪碧图的主要目的是为了优化页面性能，因为页面中的每一张图片都需要提一次HTTP请求过去，当图片过多的时候会使得加载量...原创 2018-08-24 15:58:08 · 6585 阅读 · 2 评论