img标签的src为空或者加载失败,浏览器都会自动加上一个边框,一定程度上影响美观。
刚开始前端的时候,工具得用好,就能事半功倍,咱们知道前端开发比较常用的包管理器有两种,那就是yarn和npm,那到底有什么区别呢?来看看。 执行以下命令安装 cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org 2、验证是否安装成功,执行以下命令:cnpm
var list=[1,2,3,4,5,6,7,8,9,10,11,12,13];list=list.map(ele=>('0' + ele).slice(-2));console.log(list); (revert);数组去重let arrNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0,1, 2, 3, 4, 5, 6, 7, 8, 9, 0];let arrString = let arrMixed = [1, "1", "2", true, false, false, 1, 2, "2"];arrNum = Array.from(new Set(arrNum));arrString (arrMixed); // [1, "1", "2", true, false, 2]数组转化为对象const arr = [1,2,3]const obj = {...arr}console.log (obj)合并对象const obj1 = { a: 1 }const obj2 = { b: 2 }const combinObj = { ...obj1, ...obj2 }console.log(
2、把你的 .js 库文件地址替换成 Google CDN的地址: 跟着 jquery 和 mootools 等js库的运用需求加载的.js文件越来越多也越来越大,一般传统的网站是上载到网站自身的目录
this.commit('m_cart/saveToStorage') 1. this : 在Vue.js 组件中,this 通常指向当前组件的实例,因此 this 表示当前 Vue 组件的实例 2.
oInput.remove(); } 出生日期转年龄【正则】 function getAge(str) { var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2} )\2(\d{1,2})$/); r === null ? new Date().getFullYear(); return (Y - r[1]); } return '输入有误,请检查格式'; } 随即打乱顺序 var arr = [1,2,3,4,5,6,7,8,9,0 <script> // 注,此方法的box可为n个 $(function () { // 中心点横坐标 var ow = $('.container').width() / 2; // 中心点纵坐标 var ot = $('.container').height() / 2; // 起始角度 var start = 0; // 半径
2、把你的 .js 库文件地址替换成 Google CDN的地址: 跟着 jquery 和 mootools 等js库的运用需求加载的.js文件越来越多也越来越大,一般传统的网站是上载到网站自身的目录
+) { } 简写为: for (let i = 0; i < 1e7; i++) { } 1.6 多行字符串 如果需要在代码中编写多行字符串,就像下面这样: 但是还有一个更简单的方法,只使用引号: 2. 可以通过编写一个包含多个条件的判断语句来实现: 或者简写为以下的形式: const variable2 = variable1 || 'new'; 可以将下面的代码粘贴到 es6console 中,自己测试 简写为: 2. 6 默认参数值 可以使用 if 语句来定义函数参数的默认值。ES6 中规定了可以在函数声明中定义默认值。 } = { a: 1, b: 2, c: 3, d: 4 }; console.log(a) // 1 console.log(b) // 2 console.log(z) // { c: 3, d: Math.floor(4.9) === 4 //true 简写为: ~~4.9 === 4 //true 总结 上述是一些常用的 JavaScript 简写技巧,如果有其它未提及的简写技巧,也欢迎大家补充
2.合并压缩静态资源 关于css、js的优化的话,一般情况下建议css和js采用外联式。 如果同时只有2个并发连接数数量,那网页打开的时候只能依赖于这2条线程,前面如果有打开慢的内容,就会直接影响到后面的内容打开。这个常见的例子,就是百度图片啦。下面是一些浏览器的并发数量,仅供参考。
**** 导读 今天分享一下开测前端代码的一些优化,及使用的一些小技巧,来优化我们的网站,前端开发中最常见的问题就是很少使用ES6方法导致代码冗余,不够清晰,定时器和闭包导致内存溢出及泄露,网站中css ES6语法和JS优化技巧 **** 逻辑与运算 if() else() 可以简化为 flag==1? arr=arr.map((v)=>Number(v)); var str=['1','2','2','3']; every:"一假则假" 注意哦 every不会对空数组进行检测 arr.every((currentValue 网页中CSS使用技巧 采用CSS雪碧图(CSS Sprit / CSS 图片精灵)技术,把一些小图合并在一张大图上,使用的时候通过背景图片定位,比如我们的icon图标可以汇总为一张图片。 2.重排(Reflow) 渲染对象在创建完成并添加到渲染树时,并不包含位置和大小信息。计算这些值的过程称为布局或重排。
2020最全的前端面试指南,一个多月 1.8w 字的面试经验积累,凭借它最终成功入职大厂…… 今年的金三银四刚好赶上疫情,很多大公司都停止招聘甚至裁员,想跳槽的小伙伴被打的措手不及。 需求减少要求肯定随之提高,谨以此面经献给在如此艰难之时逆风而动、勇敢坚强的你~ 与面试贴合度更高的 前端面试必备技巧(二)重难点梳理 整理好啦,两篇文章结合起来看效果更佳~ 最近掘金有点不稳定,文章偶尔看不到 ,没有删除,过会儿再看看有没有…… 前言 今年问的难度和深度应该比前几年有所增加,下面从总体分析和重要点两个维度来分析一下: 总体分析 前端问的最多的还是 js基础、计算机网络基础等,建议在此处多下功夫 : @ & = + $ # 九、算法 算法前端问的不太多,建议先复习其他的,有精力了再复习算法。 十三、错误监控 13.1 前端错误分类 前端错误分为两大类: 即时运行错误(代码错误) 资源加载错误 13.2 错误的捕获方式 即时运行错误的捕获方式 try...catch window.onerror
前端发展至此,前端性能随之变成了一个很有意思的话题。从入门级别的初级工程师,到高级别的专家,都离不开性能问题。那么前端性能该如何理解呢? 总论 前端时间学习前淘宝前端总负责人winter的课程,受益颇深。前面三个性能比较的例子,在社区或者论坛中大家对此的讨论从未断过,也乐此不疲。 性能问题大致分为三个层次: 页面加载; 动画与操作; 内存,电耗; 2. 建立指标 从这三个方面来看,如果一个页面在经历了几秒的白屏才打开,那注定用户流失率会极其高。 但是会碰到一个新的问题,就是少数极端网络用户(如2g网络)加载时间会极长,在统计后,会极大的拉低平均加载时长,从而影响整体的指标。因此,指标不能反应大多数的用户体验。 参考:《极客时间》之《重学前端》
总结下pandas使用的技巧 读取json数据并转成Python格式 计数功能实现 # 方法1 def get_counts(sequence): counts = {} # 将计数值保存在字典中 counts[x] += 1 # 存在则计数加1 else: counts[x] = 1 # 不存在则定为1 return counts # 方法2 from collections import defaultdict def get_counts2(sequence): counts = defaultdict(int) for x in
在前端开发中,Chrome 调试工具几乎是必不可少的利器。本文将详细介绍 Chrome 调试工具的使用方法和技巧,让大家更加高效地排查和解决网页开发中的问题。 Chrome 1. 2. 调试工具的基本界面介绍 开发者工具打开之后,会看到整个界面分为多个部分,常用的有以下几个主要面板: Elements 面板:用于查看和调试 HTML 结构和 CSS 样式。 接下来,我们会详细介绍 Elements 面板的使用方法,以及在调试 HTML 和 CSS 时的实用技巧。 实用的调试技巧 8.1 快速定位元素 我们可以使用开发者工具的 “元素选择器” 功能快速定位页面中的某个元素。 熟练掌握 Chrome 调试工具,可以大大提高我们开发和调试网页的效率,让我们的前端开发之路更加轻松愉快。
相关博客: Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中,this 绑定全局对象,浏览器环境全局对象为 window = { test: 'obj2test', getAge2: function () { console.log(this.test) } } return obj2; } }; obj.getAge().getAge2() // 'obj2test' // ============== var obj = { birth :@&=+$#")); 输出: http%3A%2F%2Fwww.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F %2C%2F 清除浮动的技巧 ---- 浮动元素脱离文档流,不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 使用空标签清除浮动。
但对于前端 er 来说,平日里开发大多时候都只是专注于业务,根本不需要也没机会涉及到 Nginx 这一块的内容,也就导致我们也对它的了解少之甚少。 然而事实上并不是这样的,Node 的兴起让前端工程师开始涉足后端领域,我们可以独立维护一些 BFF 服务,即使这只是一些简单的应用,也需要你掌握一定的运维技巧。 所以,懂得一些简单易用的 Nginx 技巧,对于前端开发者来说,是非常必要的。 所谓 “技多不压身”,在你还在思考学不学的时候,有些人已经学完了。 了解完一些 Nginx 的基础语法,我们再来看看在前端人手里,Nginx 可以有哪些实用的场景及技巧。 尾言 以上是一些简单实用的 Nginx 应用场景和使用技巧,对于前端开发来说,Nginx 依然还是很有必要深入了解的。
但对于前端 er 来说,平日里开发大多时候都只是专注于业务,根本不需要也没机会涉及到 Nginx 这一块的内容,也就导致我们也对它的了解少之甚少。 然而事实上并不是这样的,Node 的兴起让前端工程师开始涉足后端领域,我们可以独立维护一些 BFF 服务,即使这只是一些简单的应用,也需要你掌握一定的运维技巧。 所以,懂得一些简单易用的 Nginx 技巧,对于前端开发者来说,是非常必要的。 所谓 “技多不压身”,在你还在思考学不学的时候,有些人已经学完了。 了解完一些 Nginx 的基础语法,我们再来看看在前端人手里,Nginx 可以有哪些实用的场景及技巧。 尾言 以上是一些简单实用的 Nginx 应用场景和使用技巧,对于前端开发来说,Nginx 依然还是很有必要深入了解的。
ElementUI前端开发技巧整理笔记,本博客不定时更新,整理工作中遇到的问题,整理成笔记 文章目录 1、实现页面加载效果 2、设置表格序号 3、实现表格分页效果 4、加载表格树形结构数据 5、设置表格只能单选效果 2、设置表格序号 var vm = new Vue({ el: '#app', data:{ currentPage: 1, //当前页 pageSize
作者 | Ahmad 译者 | 飘飘
原文 | https://ishadeed.com/article/image-techniques/
前端开发者在构建网站时需要做的一个决定是添加图片的技术 img {
object-fit: cover;
object-position: 50% 50%;
}
现在我们已经对 元素做了一个介绍,现在是时候继续前进,探索第二个技巧了。 demo:https://codepen.io/shadeed/pen/17978a2d824fd51a3b27c2c2d099a522
英雄 - 解决方案2
在这个解决方案中,我们将使用一个HTML图片 内联式SVG
背景图片
下面我们就来学习一下用什么技巧,以及如何选择合适的技巧。
一个有很多细节的标志
当一个LOGO有很多细节或形状时,用内嵌式SVG可能没有那么多好处。 .avatar {
border: 2px solid #f2f2f2;
}
我们的目标是要有一个与图像相融合的内部边框。有实体边框并不实用。
2 内容概要 文中列举了常用调试技巧,如下: Debugger 在代码中插入 debugger 可以在其位置触发断点调试。 结构化打印对象瞬时状态 JSON.stringify(obj, null, 2) 可以结构化打印出对象,因为是字符串,不用担心引用问题。 找到控制台最后一个对象 有了 $_,我们就不需要定义新的对象来打印值了,比如: > [1, 2, 3, 4] < [1, 2, 3, 4] > $_.length // < 4 更多控制台相关技巧可以查看 3 总结 虽然在抛砖引玉,但整理完之后发现仍然是块砖头,调试技巧繁多,里面包含了通用的、不通用的,精读不可能一一列举。希望大家能根据自己的业务场景,掌握相关的调试技巧,让工作更加高效。 讨论地址是:精读《前端调试技巧》 · Issue #17 · dt-fe/weekly