08 2021 档案
摘要：在前端项目开发与生产的过程中，“cannot read property of undefined”是一个常见的错误。从不可知得到一个空数据问题在所难免。面对这种问题我们该怎么办呢？ 针对于特定的业务和数据，前端即使预知数据不存在，也无法处理，任其崩溃即可。但大部分情况下，如果因为列表某条数据出现错
阅读全文
摘要：eslint 是很有名的 linter，地球上每一个 JavaScript 程序员都应该知道。 linter 是一种代码静态分析工具，它可以帮你找到代码中可能存在的错误与 bug，也能找出代码风格的问题，不过因为只是静态分析，对 js 这种动态类型的语言所能做的就比较有限了，毕竟在 js 中，变量的
阅读全文
摘要：一、需求描述 长度不定的一段文字，最多显示n行（比如3行），不超过n行正常显示；超过n行则在最后一行尾部显示“展开”或“查看全部”之类的按钮，点击按钮则展开显示全部内容，或者跳转到其它页面展示所有内容。 预期效果如下： 二、实现原理 纯css很难完美实现这个功能，所以还得借助js来实现，实现思路大体
阅读全文
摘要：记录一下怎样写出整洁规范的代码，用于共勉进步。对于什么是整洁的代码，书中给出了大师们的总结： Bjarne Stroustrup：优雅且高效；直截了当；减少依赖；只做好一件事Grady booch：简单直接Dave thomas：可读，可维护，单元测试Ron Jeffries：不要重复、单一职责，表
阅读全文
摘要：问题复现 一次扒某网站的前端代码，打开控制台要看Network，结果发现他们页面一打开控制台就不断的debugger，100ms一次，很影响看页面内容。 问题分析 每次在断点处停下来的时候页面都会跳到source这个tab页面，也能够看到他的debugger的代码，其实他的实现很简单，只有这一行代码
阅读全文
摘要：前言 在现在前端开发中，异步操作的频次已经越来越高了，特别对于数据接口请求和定时器的使用，使得我们不得不关注异步在业务中碰到的场景，以及对异步的优化。错误的异步处理可能会带来很多问题，诸如页面渲染、重复加载等问题。 下面我们就先简单的从 JavaScript 中有大致的哪几种异步类型为切入点，然后再
阅读全文
摘要：接口 例如我们这定义一个叫做printPost的函数，那这个函数可以接收一个文章对象参数post，然后在函数的内部去打印文章的title, 然后再去打印他的content属性。 function printPost (post) { console.log(post.title); console.
阅读全文
摘要：在创建一个函数并调用时可以传入一些参数或变量，不过函数究竟可以有多少可用的参数呢？ 函数中的变量 以下通过一个例子来检查在调用函数时会有哪些变量和参数，在这里可以在浏览器的“无痕窗口”中直接运行这段代码（无痕窗口能避免浏览器插件影响运行）。 注意：这里仅仅针对传统函数，箭头函数的运行变量与传统函数不
阅读全文
摘要：题目： 人民币由100元,50元,20元10元,5元1元,5毛，1毛面额组合。写一个方法随便传入一个数字参数，就输出人民币组合。比如传入1526.5就显示1526.5元由人民币100元15张，20元1张，5元一张1元一张5毛一张构成。无需考虑多种组合方式，只需考虑最简单的组合方式。 思考： 我们首先
阅读全文
摘要：对于JavaScript中比较运算符，可能大家用的比较多的是“==”、对于“ ”很多人可能很陌生。 表示恒等，首先比较两边的变量数据类型是否相等，其次比较两边的变量的数值是否相等；== 表示相等即仅仅比较两边变量的数值是否相等。 一、“ ”首先计算其操作数的值，然后比较这两个值，比较过程没有任何类型
阅读全文
摘要：这个问题在很多文章中都讨论过，在 ESlint 规范中也因为加不加分号而分为两大阵营，到于加不加分号，关键是需要了解分号对于 JavaScript 的影响，开始之前可以先看看下面这道面试题： 请问这段代码是否能够正常运行？ var a = 1 (function() { console.log(2)
阅读全文
摘要：上图是原生实现，下图是 css 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多人早已开始研究解决方案了。到底有哪些方案，到底好不好用呢？试过才知道，把我试过的结论记录一下。 有说用 0.5px 解决的 在2014年的 WWDC，“设计响应的Web体验” 一讲中，Ted O’Con
阅读全文
摘要：CSS 自定义属性 CSS 自定义属性现在也不算什么稀罕物了。自从浏览器开始支持以来，就能通过 JavaScript 操作自定义属性值。 具体来说，用 JavaScript 操作自定义属性有以下几种方式。第一个是 setProperty ： document.documentElement.styl
阅读全文
摘要：在网页的布局中几大段文字挤在一起总归是不好看的，这时候我们就需要来设置行间距来让文字看起来不拥挤，也让整个页面看起来美观整洁，那么，行间距该如何设置呢？本篇文章就来给大家介绍一下css行间距的设置方法。 html 行间距的设置方法与问题 设定一段文字内的行距： <p> 但我们怎么设定两段文字之间的行
阅读全文
摘要：object-fit: 指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框 平时写代码经常会在代码中插入图片，你是否会多少感觉插入的图片被拉伸或是被缩放，在这里我们就探讨object-fit对图片处理的应用 语法及作用 fill (充满) 整个对象将完全填充内容框。当对象的宽高与内容框不匹配
阅读全文
摘要：最近，我从 Grover网站 上发现以一个好玩儿的悬停动画，这个动画是将鼠标移动到订阅按钮上移动光标，会跟随光标实现相应的彩色渐变。 这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。 怎样才能达到这个效果，使我们的网站脱颖而出呢？其实，它并不像我们想象的那么难！
阅读全文
摘要：介绍 事件流描述的是从页面中接收事件的顺序。但是IE和Netscape却提出了两个完全相反的事件流，分别是事件冒泡流和事件捕获流。 事件冒泡 IE的事件流称为事件冒泡，从最具体的元素开始，然后逐渐向上传播到文档节点。如下图： 我们以下面代码展示事件冒泡： <!DOCTYPE html> <html>
阅读全文
摘要：<video> 标签定义视频，比如电影片段或其他视频流，可以放置视频资源，并添加视频控件。 支持的浏览器： Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <video> 标签。 注：Internet Explorer 8 以及更早
阅读全文
摘要：在css中，可以使用filter属性来模糊处理图像；filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。 语法： filter: blur() 属性值： ● blur()：给图像设置高斯模糊，值越大越模糊。如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比
阅读全文
摘要：<object>标签是一个html标签，用于在网页中显示音频，视频，图像，PDF和Flash等多媒体；它通常用于嵌入由浏览器插件处理的Flash页面元素，如Flash和Java项目。它还可以用于在html页面内显示另一个网页。 <object>标签可以和<param>标签一起使用以定义各种参数。当浏
阅读全文
摘要：css中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。 插入纯文字 content : ”插入的文章”，或者 content:none 不插入内容 #html
阅读全文
摘要：前言 由于html语言的定位问题，在网页中实现居中也不是如word中那么简单，尤其在内容样式多变，内容宽高不定的情况下，要实现合理的居中也是颇考验工程师经验的。网上讲居中的文章很多，但是都不太完整，所以小茄今天就来总结下纯css实现居中的各种方案。学疏才浅，文中如有不当之处，万望指出！ 6种方案 1
阅读全文
摘要：1. Django Django应该是Python最知名、最有代表性的Web框架了。它的名字来自于Django Reinhardt，一位法国作曲家和吉他演奏家。在2000年初有一个报社的两位程序员为了给报社的报纸开发线上应用，开始用 Python编写网站，最后把他们的工作总结出一套开源框架，就是今天
阅读全文
摘要：由于图片是web上最流行的内容类型之一，因此网站的页面加载时间很容易成为一个问题。 即使经过适当的优化，图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能，它们会失去耐心，转向其他地方，除非你能想出一个不影响速度感知的图像加载解决方案。 在本文中，您将学习有关
阅读全文
摘要：Web安全是前端开发人员经常忽略的主题。当我们评估网站的质量时，我们通常会查看性能，seo友好性和可访问性等指标，而网站抵御恶意攻击的能力却常常被忽略。即使敏感的用户数据存储在服务器端，后端开发人员也必须采取重要措施来保护服务器，但最终，保护数据的责任在后端和前端之间共享。虽然敏感数据可能被安全地锁
阅读全文
摘要：高度自适应第一种情况 1.高度不去设置，或者高度设置auto 内容撑开父元素的高度。2.内容撑开父元素的高度 -> 最小高度的设置 min-height3.浮动元素添加高度自适应 -> 添加浮动元素的父元素没有高度，会出现高度塌陷 解决高度塌陷的方法 (1)给出现高度塌陷的元素添加：overflow
阅读全文
