前端
关注
分享
扫一扫
文章平均质量分 75
The_upside_of_down
这个作者很懒，什么都没留下…
展开
-
如何实现自适应布局
如何创建自适应布局百分比布局使用媒体查询（CSS3@media查询）rem响应式布局vw响应式布局flex弹性布局响应式网页设计是一种新的网站设计模式，从此构建的网站可自动适应不同的的访问设备，方便用户阅读和导航浏览，减少用户的放大/缩放/滑动的操作，提升良好的用户体验。百分比布局可以通过对属性的设置百分比来适配不同的屏幕，但是需要注意的是百分比是相对于父元素的。使用媒体查询（CSS3@media查询）利用媒体查询设置不同分辨率下的CSS样式，来适配不同的屏幕。body { backgro原创 2021-04-28 00:20:38 · 638 阅读 · 0 评论 -
函数绑定与函数柯里化
函数绑定与函数柯里化一、函数绑定（bind）什么是函数绑定？bind()二、函数柯里化利用柯里化实现复杂的bind()柯里化实现add(1)(2,3)(5)一、函数绑定（bind）什么是函数绑定？函数绑定需要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。常与回调函数及事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。var handler = { message: 'Event handled', handleClick: functio原创 2021-04-24 20:39:11 · 303 阅读 · 0 评论 -
JS之手写XX
JS之手写XX手动实现bind、apply及bind手动实现new手动实现浅拷贝、深拷贝手动实现节流、防抖手动实现instanceof原理手动实现Object.create原理手动实现数据双向绑定手动实现ajax手动实现bind、apply及bind实现call()// 实现call方法Function.prototype.myCall = function(obj) { const args = [...arguments].splice(1); //拿到除了第一个参数外的所有参数原创 2021-04-19 18:38:10 · 705 阅读 · 0 评论 -
从输入一个URL到页面展示这期间发生了什么？
从输入一个URL到页面展示这期间发生了什么？chrome进程从用户输入URL到页面显示发生了什么？chrome进程我们先了解一下多进程浏览器打开页面后都有哪些进程？从图中可以看出，现在的chrome浏览器包括：一个浏览器主进程、多个渲染进程、多个插件进程、网络进程、1个GPU进程。1.浏览器进程：主要负责界面显示、用户交互、子进程管理、提供存储功能等功能2.渲染进程：将HTML、CSS、Javascript转换为用户可以交互的界面，默认情况下，chrome会为每个Tab标签提供一个渲染进程，渲染进程原创 2021-04-10 21:47:48 · 129 阅读 · 0 评论 -
移动端开发兼容问题
移动端h5开发遇到的兼容问题ios兼容问题高版本兼容时间格式兼容ios执行document.execCommand("copy")不生效input框ios将数字当成电话。安卓系统兼容问题禁止安卓识别email。禁止图片点击放大。其他ios兼容问题高版本兼容1、场景。h5页面在touchmove时，由于ios自身的下拉回弹效果，底部会多出来一块空白屏。2、解决方案。直接禁止ios系统默认的滑动事件。3、代码。document.body.addEventListener('touchmove',原创 2020-06-17 17:57:49 · 674 阅读 · 0 评论 -
解析查询字符串参数
// 解析查询字符串参数 function getQueryStringArgs() { //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ?location.search.substring(1): " "), //保存数据的对象 args ...原创 2019-10-17 22:37:55 · 324 阅读 · 0 评论 -
闭包与变量
作用域链的这种配置机制引出了一个值得注意的副作用，即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象，而不是某个特殊的变量。function createFunctions() { var result = new Array(); for(var i = 0; i<10; i++){ result[i] = fu...原创 2019-10-17 21:59:35 · 194 阅读 · 0 评论 -
创建对象
虽然Object构造函数或对象字面量都可以用来创建单个对象，但是这些方式有明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。工厂模式工厂模式抽象了创建具体对象的过程，因js中无法创建类，因此用函数来封装以特定接口创建对象的细节。 // 工厂模式 function createPerson(name,age,job){ var o = new ...原创 2019-10-17 17:05:41 · 170 阅读 · 0 评论 -
变量、作用域和内存问题
基本类型：boolean、null、undefined、number、string。 基本类型指的是简单的数据段。可操作保存在变量中的实际的值。引用类型：array。 指哪些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。而js不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实...原创 2019-10-16 21:10:01 · 153 阅读 · 0 评论 -
CSS单位
CSS中单位很多，%、px、em、rem，以及比较新的vw，vh等。每个单位都有特定的用途。CSS布局时PC端和移动端会有差异，此时我们就会想到怎样让其兼容，就要讲到页面适配。页面适配：指的是同样的布局，在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式：使用px，结合Media Query进行阶梯式的适配； 使用%，按百分比自适应布局； 使用rem，结合h...原创 2019-09-05 14:48:24 · 145 阅读 · 0 评论 -
input 的type属性
input元素可根据type属性的值分为文本、日期、数值和按钮等。文本关键字关键字 功能 hidden 隐藏元素，可存储不让用户看见和编辑的数据 text 只能输入单行文本，并且文本中的换行符会自动消除 tel 可输入电话号码格式的文本，但与Email和url类型不同，不会强制执行特定的验证机制。 password 遮盖单行文本，一般用于密码输...原创 2019-09-05 13:15:26 · 315 阅读 · 0 评论 -
浅谈前端重排与重绘（Reflow &Repaint）
一、Reflow和Repaint是什么？首先，我们需要了解一下浏览器渲染的大致流程：解析HTML文档，构建DOM树 解析CSS属性，构建CSSOM树 结合DOM树和CSSOM树，构建render树 在render树的基础上进行布局，计算每个节点的几何结构 把每个节点绘制在屏幕上一个页面可以简单的看成两个部分：DOM节点：描述页面的结构 DOM节点的属性：描述DOM节点如...原创 2019-08-29 17:53:17 · 264 阅读 · 0 评论 -
JS字符串学习笔记
1、charAt(x)：charAt(x)返回字符串x位置的字符，下标从0开始。 var string = 'JiaoMaiQi is a cool boy!!' console.log(string.charAt(7)); //Q2、charCodeAt(x)：charCodeAt(x)返回字符串中‘x’位置处字符串的'unicode'值。var string1 =...原创 2019-09-01 13:34:13 · 179 阅读 · 0 评论 -
Canvas学习笔记之绘制重复图案
canvas的createPattern()可以用于绘制重复图案，它可以接受iamge元素、canvas元素或video元素作为图案参数，并且可以传入如何重复图案的字符串参数：repeat——为整个区域绘制重复图案 repeat-x——只在x方向绘制重复图案 repeat-y——只在y方向绘制重复图案 no-repeat——不重复，只绘制一张图案html代码：<select...原创 2019-09-01 14:27:31 · 855 阅读 · 0 评论 -
Vue学习笔记——生命周期
谈及Vue生命周期，我们总会想到：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数，创建=>挂载=>更新=>销毁。首先，我们看一下Vue官网怎样解释的？在谈到Vue生命周期的时候，我们首先需要创建一个实例，也就是在new Vue()的...转载 2019-09-01 15:03:04 · 241 阅读 · 0 评论 -
CSS3盒子模型
一、CSS盒子模型简介CSS中主要有以下盒模型：inline、inline-block、block、table、absolute 、float等。浏览器把每个元素看作一个盒子模型，每一个盒子模型是由以下属性组合所决定的：display、position、float、width、height、margin、padding和border等。不同类型的盒模型会产生不同的布局。二、盒子模型的两种模...原创 2019-09-01 17:31:01 · 576 阅读 · 0 评论 -
CSS3学习笔记——过渡
一、CSS3过渡CSS3的过渡功能像是一种黄油，通过一些CSS的简单动作触发样式平滑过渡。W3C标准中描述的transition功能很简单：CSS3的transition允许CSS的属性值在一定时间区间内平滑过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值。二、如何创建简单的过渡在以往WEB中的动画都是依赖于JavaScri...原创 2019-09-01 19:35:38 · 223 阅读 · 0 评论 -
CSS学习笔记——margin
一、margin入门css时，大部分人都是从css盒模型中的各个属性开始学习的。盒模型属性中有一margin元素。margin：盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中规范了margin的四种属性：margin-top、margin-right、margin-bottom、margin-left。二、margin重叠CSS1规范了定义了margin以及垂直ma...原创 2019-09-03 15:32:26 · 326 阅读 · 0 评论 -
浅谈CSS中display中常用的三属性
display中常用的三属性有：block、inline以及inline-block。 display：block 1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 2、block元素可以设置width，height属性。块级元素即使设置了宽度，仍然是独占一行。...原创 2019-09-03 21:03:40 · 555 阅读 · 0 评论 -
canvas实战——WPS分享PDF文件的小图标
一日，托姐姐给打印简历时。用wps分享简历文件的时候，看到分享文件上如下图小图标。因为，前几天有简单学习Canvas，所以想着能不能用canvas给它画出来。首先，我们设置一下canvas的画布：<body><canvas style="border: 1px solid #dadada" id="myCanvas" width="400" height="4...原创 2019-08-29 17:14:11 · 671 阅读 · 0 评论