个人心得
文章平均质量分 53
王贰拾888
前端小Coder
展开
-
用html制作一个五环,并让其一直保持在页面的最中央
这是我的第一篇博客,也是我通过几天的学习制作出来的第一个“网页”,虽然比较简陋,但是我还是很乐意把它记录在这里。 实现功能:随着页面的滑动,页面的缩放扩大,图像始终保持在相对页面的正中央。 首先得确定一些关键字的使用,和css样式的使用。在position中有一个绝对定位的样式关键字absolute。所以只要把第一个环(蓝色)的位置确定后,剩下的其他四个环只要以第一...原创 2018-07-21 21:01:37 · 1536 阅读 · 2 评论 -
margin: 0 auto; 的使用注意点
margin:0 auto;在不同场景下生效条件如下: 块级元素:给定要居中的块级元素的宽度。 行内元素:①设置display:block;②给定要居中的行内元素的宽度。(行内元素设置成块级元素后可以对其宽高进行设置) 行内块元素:设置display:block。(如input、button、img等元素,自带宽度可以不用设置其宽度) ...转载 2018-09-29 11:12:47 · 2097 阅读 · 0 评论 -
js中的函数作用域及预编译的理解
函数作用域初探:什么是函数作用域?我用很通俗的概念概括了一下:每一个函数在document的每个地方都相当于一个独立的空间,因为有这个独立的空间,所以同级函数之间是不能相互访问的。每一个函数在诞生的时候都会有一个自己独特的域用来存储自己的元素,这个域就是自己的作用域也就是上文所说的独立空间。(我觉得函数其实也可以被看作一个对象,而函数里的一些元素,可以被看做该函数的属性) 暗示全局变量...原创 2018-09-29 22:50:00 · 341 阅读 · 0 评论 -
js中try-catch的理解
最近在MatLab中看到了try-catch语句的应用,正好今天看到了js中的try-catch语句,就来简单的总结一下吧。try-catch 语句:作用捕获异常语句执行流程:先执行try中的语句,如果有错误,就会将错误抛出,并且被catch捕获并去执行,这时候就会执行catch里的语句,而且不论try中有没有抛出和错误,finally语句都会去执行其中自己的代码块<!DOCT...原创 2018-10-23 15:13:08 · 2094 阅读 · 0 评论 -
使用Vue-cli搭建脚手架的小总结
使用Vue-cli搭建脚手架一、使用Vue搭建项目的两种方式:1、CDN的方式2、使用脚手架的方式也就是使用webpack搭建的一个开发的环境,在这个环境中,可以使用一些浏览器目前还不支持的文件转换为浏览器可以识别的ES5的语法等,可以实时的更新打包好的库,从而实现同步化。还可以将其默认的部署在本地的服务器上边,更好的实现页面的实时刷新。二、搭建脚手架的步骤:1、依赖nod...原创 2018-12-22 10:21:03 · 305 阅读 · 0 评论 -
Vue生命周期中的钩子函数
VUE中生命周期的钩子函数一、VUE诞生的过程: beforeCreated方法: 实例vue对象 new Vue() 这个时候是没有创建出来我们的vue的对象,这个时候,只有我们的一些事件,一些data之类里边的东西,还有有真正的去识别我们对象中的东西。 created方法: 这个时候,我们的组件已经成功的创建完毕,属性也被成功的绑定,但是我们的DO...原创 2018-12-23 16:24:19 · 156 阅读 · 0 评论 -
检测表单提交时是否为空
一、表单不能为空提交提醒在做一个管理员系统的时候,有一个和后台对接的问题,就是前端表单提交过去的数据不能存在空白的字段。当时解决的方式是,使用原生js来进行DOM的操作,从而进行判断,弹框的操作。之后,在浏览社区的时候,发现,表单有一个事件onSubmit ,这个事件,可以理解为在表单提交前一刻会进行触发,这时候,我们可以给这个事件传递一个回调函数,并且在回调函数中,进行是否 存在空白...原创 2018-12-29 22:22:37 · 2109 阅读 · 0 评论 -
MVC与MVVM的特点及区别
一、什么是MVC和MVVM架构模式:MVC、MVVM是两种常见的前端架构模式,这种架构模式是抽象分离出来的为了解决某一类问题的方法。一种架构模式也可以派生出很多的设计模式,从而来解决不同的问题。MVC和MVVM中的特点: 相同点:其中M指的是MODEL,V指的是VIEW 不同点:这两种架构中,不同的只是MV之间的纽带部分。 二、MVC:MVC架构指的是MODEL...原创 2019-01-10 17:18:40 · 4548 阅读 · 0 评论 -
JS基础知识小总结
JS基础小总结 基础知识 原型、原型链 作用域 异步单线程 JS API DOM操作 Ajax 事件绑定及解绑 开发环境 版本管理 模块化 打包工具 运行环境 页面渲染 ...原创 2019-02-08 23:55:56 · 128 阅读 · 0 评论 -
JSAPI知识点
WEB API一、基础架构:我们常说的JS通常包含两大部分: ECMAScript基础知识 WEB API (w3c提供的,浏览器为我们自带的可以调用的API接口) BOM DOM 二、DOM (Document Object Model) 题目 DOM是哪种基本的数据结构 树 DOM...原创 2019-02-09 00:29:11 · 2965 阅读 · 0 评论 -
知道创宇前端一面面经
一面不到十四分钟,很快就结束了。心灰意冷的我,刚坐下五分钟就收到了HR的电话,让我准备二面,心情真的是大起大落。接下来总结一下问道的问题吧。1、react(我没深入学习过,主要的技术栈是Vue,也就没有多聊)react的生命周期等。2、跨域的几种方式3、HTTP的方法4、Promise介绍5、Js中的事件冒泡和事件捕获6、基本的数据类型大概就这么多,因为我比较能扯,...原创 2019-03-21 19:19:35 · 960 阅读 · 3 评论 -
使用chrome进行本地文件的请求会报跨域错误
在进行本地json文件获取的时候,惊奇的发现,mmp,竟然报跨域???跨域的原因于同源策略有关,什么是同源策略?端口、域名、协议有一个不同即为跨域,浏览器出于安全性的考虑,会利用同源策略防止跨域的从产生。那我请求我本地的文件为什么会报跨域呢。原来是有一个file协议,应该是访问本地文件的一个协议,这样其实也可以解释为什么会报跨域,协议不同嘛。但是我试了火狐,火狐只报了json的...原创 2019-04-13 11:14:40 · 4558 阅读 · 1 评论 -
js之闭包理解
在网上查看过一部分文档之后,才弱弱的打开博客,准备记录一下最近重新对闭包的认识。对于刚接触Javascript的同学们来说,闭包可以算是一个比较难理解的知识点了。因为刚开始对JS这门语言还是不是很熟悉,所以理解起来肯定是有一定难度的,而后来又因为接触到了很多新的东西,可能就对闭包这个知识点淡忘了,存留者的可能就是当初最开始接触闭包时候的印象吧。在网上翻看了一部分同学关于闭包的博客后,很明显的一...原创 2018-10-07 22:52:29 · 148 阅读 · 0 评论 -
DOM知识:文档中子节点或子元素获取时的兼容代码
子节点(node):包括子级里边所有的标签、空格、文本等。子元素:当前子级里的所有的标签元素。通过DOM获取第一个子节点的方法:getFirstChild;------->谷歌火狐支持,正常使用,但是IE8获取的是第一个子元素通过DOM获取第一个子元素的方法:getFirstElementChild -------->谷歌火狐支持,正常使用但是IE8是undefined...原创 2018-09-28 20:22:38 · 395 阅读 · 0 评论 -
在网页中引入图片字体
在我们查看网页代码的时候,会经常看到这样的符号可以看到红色框框里i标签里边的一个矩形框,这个矩形框实际上就是第一个红色框里的这个符号。这个符号仍然拥有字体样式的一些属性,我们也可以对它进行大小,加粗,倾斜等一系列的样式处理。这就是我们常说的字体图片。那么我们的字体图片是怎么引进我们网页中来的呢。这些图片其实都是我们通过网站来引进我们的网页中的推荐给大家几个比较好用...原创 2018-09-11 23:54:19 · 505 阅读 · 0 评论 -
CSS精灵图(sprite)
说到精灵图(雪碧图),大家肯定和我一样觉得这个很新鲜。在学习了有关精灵图(雪碧图)的一些知识后,就来和大家讨论一下,我个人对精灵图(雪碧图)的一些理解和实现方法吧。1、精灵图技术产生的目的:很多大型网页在首次加载的时候都需要加载很多的小图片,而考虑到在同一时间,服务器拥堵的情况下,为了解决这一问题,采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质...原创 2018-09-09 11:30:17 · 67897 阅读 · 17 评论 -
JavaScript函数简单理解(2)——预编译
线理清楚几个概念: 函数的预编译:一、什么是预编译:1、函数声明的整体提升(永远会提升在逻辑的最前边)2、变量声明的提升(只是提升了变量定义的语句,赋值语句是没有提升的) 二、全局变量和局部变量:1、Imply global(隐式全局变量):及时一个没有经过声明就被赋值的变量,可以在全局(window)的任何地方进行调用。全局对象(window):为一个2、...原创 2018-09-17 00:38:50 · 163 阅读 · 0 评论 -
JavaScript对象的学习(一)
在学习了js函数和对象之后,感觉这两者之间有着某种关系,哈哈哈。我觉得,函数就是为了实现某种特定的功能而将重复代码封装起来的一个容器,里边包含着实现某个功能的各个过程。而对象我觉得可以将它想做是一个可以将函数封装起来的一个容器,每个函数可以看作一个对象的属性,在需要的时候可以直接引用对象的属性或者方法即可,更加注重结果。综上:函数就是将过程封装起来的一个容器,是一个过程的集合。对象:是一个将函...原创 2018-09-17 23:50:46 · 173 阅读 · 0 评论 -
用CSS实现“滑动门”技术
在前几天无意中翻看网页代码的过程中,无意中发现了微信官网的nav里有一个很有意思的小细节。在跟着代码学习了一番,在网上阅读了相关资料,原来这就是传说中的滑动门技术。 接下来就来分享一下我个人对滑动门的理解及实现方法和代码吧。滑动门的效果: 这是原来版本的,可以看到“首页”的标签是有一个明显的凹下的效果。 在调整完这个nav的长度后,大家还是会看到一个凹下的...原创 2018-09-10 23:37:59 · 3370 阅读 · 2 评论 -
DOM来实现一个简单的事件的demo
DOM:document object model(文档对象模型):今天学习了通过三种方法来实现一个小demo------>点击button来实现alert弹框方法一://方法一、<input type="button" value="方法一" id="btn1"><!--设置弹框的类型和value值以及唯一的id--><script&原创 2018-09-19 00:15:40 · 280 阅读 · 0 评论 -
点击小图展现大图,实现画廊效果
画廊效果: 代码如下:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user原创 2018-09-23 23:32:02 · 1331 阅读 · 1 评论 -
javascript里的函数简单理解(1)
在编程语言中,函数是每种语言必不可少的一部分,那么今天就和大家一起分享一下我对js函数的一部分简单的理解吧。Js函数有两种定义方式:1、函数声明定义:形式:function 函数名 (形式参数) { 函数体; return 返回值;}调用的时候只要在函数名后边将实际参数传递上去即可。2、函数表达式定义顾名思义,这是一种表达式的定义方法形式:...原创 2018-09-15 00:11:35 · 225 阅读 · 0 评论 -
使用DOM实现tab操作
使用DOM操作,实现tab的对应切换效果可以看到,在tab切换的时候,下边的文本也是跟着切换的(style有点low,css样式有兴趣的话可以后边追加一下) 这里我是使用DOM追加的点击事件,并且在点击事件里边给节点添加了属性、序号,从而实现了tab和文本同步切换的效果 这里贴一下代码:<!doctype html><html...原创 2018-09-25 23:27:29 · 480 阅读 · 0 评论 -
用定时器实现简单时钟案例
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial原创 2018-10-05 00:24:08 · 1952 阅读 · 0 评论 -
js数组排序之哈希去重
在接触一门语言一段时间之后,就一定得去积累一些常用的算法,今天来和大家分享一个数组去重的算法——hash去重。以前在实现js的一些算法问题的时候还是用c的一些基础的编程思想来解决问题。在接触到对象之后,才发现,对象的真正的强大之处,而这个hash(哈希)数组去重的算法就是利用对象的一些特点进行编写的。上代码。<!DOCTYPE html><html lang="en"...原创 2018-10-13 23:30:31 · 750 阅读 · 0 评论 -
vue中解决双击屏幕放大,双手拉动放大的方法
在index.html中的meta标签的<meta name="viewport" content="width=device-width,initial-scale=1.0">置换为<metacontent="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" nam...原创 2019-06-25 21:40:06 · 6522 阅读 · 0 评论