前端技能总结
csdn_haow
这个作者很懒,什么都没留下…
展开
-
多语言方案
多语言方案背景多语言(i18n)支持 是企业项目走向国际化的必经之路,也是前端工程师最佳实践的内容之一实现1.定义全局多语言状态,以中文、英语为例const contextValue = { lang, setLang,}switch (lang) { case 'zh-CN': return zhCN; case 'en-US': return enUS; default: return zhCN;}2.添加多语言配置文件,映射中英文原创 2022-04-24 15:20:40 · 1235 阅读 · 0 评论 -
完美解决HTML中footer保持在页面底部问题
很多人认为页面页脚部分不就是用footer主义化标签包起来嘛,然而不然;如果你足够细心的话就会发现当我们页面中主体内容不够多的时候会发生这样的情况:导致这一问题的原因是页面内容太少,无法将内容区域撑开,从而在 footer 下面留下一大块空白;但是我们又希望footer能在窗口最底端。今天给大家介绍两种方法来完美解决这个问题:方法一:footer高度固定+绝对定位思路:footer的...翻译 2019-05-20 14:28:40 · 2932 阅读 · 0 评论 -
浏览器的重绘与重排
1.简述重排的概念浏览器下载完页面中的所有组件(HTML、JavaScript、CSS、图片)之后会解析生成两个内部数据结构(DOM树和渲染树),DOM树表示页面结构,渲染树表示DOM节点如何显示。重排是DOM元素的几何属性变化,DOM树的结构变化,渲染树需要重新计算。浏览器重绘(redraw)和重排(reflow) 。2.简述重绘的概念重绘是一个元素外观的改变所触发的浏览器行为,例如改变vi...翻译 2019-06-12 21:13:57 · 725 阅读 · 0 评论 -
js让一个包含对象的数组去重
方法一:一个数组中的每一项都是对象,现在需要将这个对象中id相同的只保留一个,即根据id去重,通过以上方法可实现var person = [ { id: 0, name: "小明" }, { id: 1, name: "小张" }, { id: 2, name: "小李" }, { id: 3, name: "小孙" }, { id: 1, nam...转载 2019-06-16 09:37:01 · 1019 阅读 · 0 评论 -
Object.assign 属于浅拷贝还是深拷贝
Object.assign 可以把源对象拷贝到目标对象中去,如下let man = { key: { age: '123' } }let women = Object.assign({}, m)console.log(women)运行结果:{ key: { age: '123' } }那Object.assign深拷贝还是浅拷贝呢?答案是第一级属性深拷贝,第一级以下的级别属性浅...原创 2019-06-18 09:53:33 · 2667 阅读 · 2 评论 -
VUE单页应用首屏加载速度优化方案
单页应用会随着项目越大,导致首屏加载速度很慢!!!以下给出在下知道的几种优化方案使用CDN资源,减小服务器带宽压力 路由懒加载 将一些静态js css放到其他地方(如OSS),减小服务器压力 按需加载三方资源,如iview,建议按需引入iview中的组件 使用nginx开启gzip减小网络传输的流量大小 若首屏为登录页,可以做成多入口,登录页单独分离为一个入口 使用uglifyjs...转载 2019-07-04 10:56:41 · 3200 阅读 · 0 评论 -
浏览器的工作原理:新式网络浏览器幕后揭秘
序言这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。她写道:在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候...转载 2019-07-30 11:32:03 · 267 阅读 · 0 评论 -
css加载会造成阻塞吗?
终于考试完了,今天突然想起来前阵子找实习的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方 点击我画红圈的地方(No thrott...转载 2019-07-31 09:29:59 · 339 阅读 · 0 评论 -
用9种办法解决 JS 闭包经典面试题之 for 循环取 i
原文地址:https://segmentfault.com/a/1190000003818163 正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是属性),function scope内默认有个名为 Globe 的全局引用(有了这个引用,就可以直接调用 ...转载 2019-07-23 11:31:42 · 206 阅读 · 0 评论 -
JS获取子节点、父节点和兄弟节点的方法实例总结
本文实例讲述了JS获取子节点、父节点和兄弟节点的方法。分享给大家供大家参考,具体如下:一、js获取子节点的方式1. 通过获取dom方式直接获取子节点其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。? 1 var a = document.getEl...转载 2019-07-27 17:40:15 · 280 阅读 · 0 评论 -
nest.js、egg.js、midway,express、koa的区别
前言 随着nest.js框架逐渐火起来,对于没有接触过nest的小伙伴可能会疑惑nest是什么?在你了解了nest.js是什么的前提下,你可能会疑惑nest.js与传统的koa、express有什么区别?针对这两个问题,结合了网上的一些文章,做一个简单的总结。 nest是什么? nest的定义是一个渐进式的Node.js框...原创 2019-09-27 10:22:18 · 18754 阅读 · 0 评论 -
[react] react15、react16生命周期对比
一、react15生命周期react15生命周期 初始状态 点击“挂载Child Component”按钮后 从右边的console中可以看出Child组件首次挂载的时候,依次触发了Child组件的constructor, componentWillMount, render, componentDidMount。 3.点击“修改Ch...转载 2019-05-07 11:24:07 · 1461 阅读 · 0 评论 -
Vue和React的视图更新机制对比
Vue和React的其中一个最重要的区别是它们对于数据更新的管理方式不同,Vue基本上是一套基于getter/setter实现的依赖收集/依赖更新的订阅式机制,而React则是通过显式的触发函数调用来更新数据,比如setState。相比来说Vue的实现方式更细粒度一些, 通过依赖收集,Vue是能够知道一些数据的更新导致了哪些地方需要重新计算的,通过这种机制,Vue能够优雅地实现计算属性、watch...转载 2019-05-07 10:28:58 · 3267 阅读 · 0 评论 -
angularJS和requireJS和angularAMD
最近因为要用到angularJS开发项目,因为涉及到的静态资源比较多,所以想把js文件通过requireJS来按需加载,这两个框架以前都使用过,但是结合到一起还没有用过,那就试一下,看能否达到目的。requireJS是为了实现js文件异步加载和管理模块之间依赖性的框架,详情请看阮一峰 require.js的用法和RequireJS 中文网这里就不做介绍了。我们先来创建模版容器index.h...转载 2019-04-11 16:41:31 · 263 阅读 · 0 评论 -
防抖函数与节流函数
应用场景实际工作中,我们经常性的会通过监听某些事件完成对应的需求,比如:通过监听 scroll 事件,检测滚动位置,根据滚动位置显示返回顶部按钮 通过监听 resize 事件,对某些自适应页面调整DOM的渲染(通过CSS实现的自适应不再此范围内) 通过监听 keyup 事件,监听文字输入并调用接口进行模糊匹配常规实现,以监听 scroll 事件为例我们先来看一下scroll事件的...翻译 2019-04-03 12:51:53 · 139 阅读 · 0 评论 -
JavaScript中判断为整数的多种方式,以及保留两位小数
方式一、使用取余运算符判断任何整数都会被1整除,即余数是0。利用这个规则来判断是否是整数。 1 2 3 4 5 functionisInteger(obj) { returnobj%1 === 0 } isInteger(3)// true isInteger(3.3)// fals...翻译 2019-04-09 13:58:27 · 2184 阅读 · 0 评论 -
【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法
如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力。此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝。我们来举个浅拷贝例子:let a=[0,1,2,3,4], b=a;console.log(a===b);...转载 2019-04-16 17:29:02 · 290 阅读 · 0 评论 -
Web安全篇之SQL注入攻击
在网上找了一篇关于sql注入的解释文章,还有很多技术,走马观花吧文章来源:http://www.2cto.com/article/201310/250877.htmlps:直接copy,格式有点问题~大家早上好!今天由我给大家带来《web安全之SQL注入篇》系列晨讲,首先对课程进行简单介绍,SQL注入篇一共分为三讲: 第一讲:“纸上谈兵:我们需要在本地架设注入环境,构造注...转载 2019-04-16 17:35:44 · 540 阅读 · 0 评论 -
css鼠标悬浮控制元素隐藏与显示
在网页开发中经常有需求是鼠标移动到一个元素A身上时,另外一个元素B显示。当鼠标移到图片上时,相关的描述从下方显示出来。css实现原理与情景:A 是 B 的父元素 B 默认隐藏B{opacity:0,transition: all 0.3s; transform: translateY(100%)} 当鼠标在A上时,即 A:hover状态,B显示 css实现即A:hover B{...转载 2019-04-17 14:12:42 · 3691 阅读 · 0 评论 -
给一个div的一边做出一个凸起的小三角形
HTML:<div class="one"> <div class="one0"></div></div>CSS:.one{ width: 100px; height: 100px; background-color: #00B0E7; /*相对位置*/ posi...转载 2019-04-17 14:15:07 · 5661 阅读 · 0 评论 -
JavaScript常用的简洁高级技巧
前言编程是一件很快乐的事,实现一个目的,我们可以有很多方法路径,在这篇文章我们介绍一些JavaScript的奇技淫巧,仅供大家参考,各路大神在平时的代码编写时,如很多简洁高效的书写方式;欢迎各位在下方留言。一、数据类型检测1.1 typeoftypeof操作符返回一个字符串,表示未经计算的操作数的类型;该运算符数据类型(返回字符串,对应列表如图)1.2 instanceof...转载 2019-04-17 17:04:32 · 198 阅读 · 0 评论 -
JS正则表达式常见用法实例详解
这篇文章主要介绍了JS正则表达式常见用法,结合实例形式分析了javascript元字符、分组符、修饰符、量词基本含义,并结合具体案例形式分析了javascript正则基本使用技巧,需要的朋友可以参考下本文实例讲述了JS正则表达式常见用法。分享给大家供大家参考,具体如下:前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出...转载 2019-04-17 17:27:48 · 569 阅读 · 0 评论 -
JavaScript Object对象学习
目录1.介绍:阐述 Object 对象。2.构造函数:介绍 Object 对象的构造函数。3.实例属性:介绍 Object 对象的实例属性:prototype、constructor等等。4.实例方法:介绍 Object 对象的实例方法:hasOwnProperty、isPrototypeOf、propertyIsEnumerable等等。5.静态方法:介绍 Obj...转载 2019-04-18 11:28:06 · 142 阅读 · 0 评论 -
Git合并指定文件到另一个分支
经常被问到如何从一个分支合并特定的文件到另一个分支。其实,只合并你需要的那些commits,不需要的commits就不合并进去了。合并某个分支上的单个commit首先,用git log或sourcetree工具查看一下你想选择哪些commits进行合并,例如:比如feature 分支上的commit82ecb31 非常重要,它含有一个bug的修改,或其他人想访问的内容。无论什么原因,你...转载 2019-04-28 09:47:03 · 1202 阅读 · 0 评论 -
Git reset命令的使用以及git 放弃本地修改
Git reset 命令有三个主要选项:git reset --soft; git reset --mixed; git reset --hard;git reset --soft将HEAD引用指向给定提交。索引和工作目录的内容是不变的,在三个命令中对现有版本库状态改动最小。git reset --mixed(git reset默认的模式)HEAD引用指向给定提交,并且索引内容也跟...转载 2019-04-28 10:47:01 · 596 阅读 · 0 评论 -
javascript "==" 原理
Java代码S中有一个基本概念就是:JavaScript中undefined==null但undefined!==nullundefined与null转换成布尔值都是false如果按照常规想法,比如下面的代码Java代码vara=1; alert(Boolean(a));//返回true //那么下面的代码也应该返回tr...转载 2019-05-05 15:11:37 · 232 阅读 · 0 评论 -
JS中的块级作用域,var、let、const三者的区别
首先,ECMAScript和JavaScript关系:ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。1. 块作用域{ }JS中作用域有:全局作用域、函数作用域。没有块作用域的概...转载 2019-05-06 11:23:28 · 130 阅读 · 0 评论 -
JS中的“use strict” 严格模式
1、介绍严格模式2、严格模式影响范围变量: var、delete、变量关键字 对象:只读属性、对象字面量属性重复申明 函数:参数重名、arguments对象、申明 其他:this、eval、关键字...严格模式ECMAScript 5 引入严格模式('strict mode')概念。通过严格模式,在函数内部选择进行较为严格的全局或局部的错误条件检测,使用严格模式的好处是...转载 2019-05-09 11:21:07 · 466 阅读 · 0 评论 -
clientX、offsetX、layerX、screenX、pageX、x的区别
代码如下:<!Doctype><html><head> <title>HTML DOM Event 对象</title> <style> .div1 { position: relative; width: 100px; height: 100px; background: blac...原创 2019-04-08 10:22:31 · 943 阅读 · 0 评论