前端
文章平均质量分 62
司_尘
前端 ing...
展开
-
vsCode里jsconfig.json无故报错
问题vscode里面我们配置完jsconfig.json文件后可能会报错。解决方法我们在settings中直接把这个打开就好了,解决报错原创 2020-08-18 09:44:24 · 8702 阅读 · 1 评论 -
es6-箭头函数this指向问题
这个问题困惑了小编很久之前的一个思路不对导致问题一直走向一个错误的方向,现在豁然开朗来跟大家一起分享一下收获无this绑定箭头函数准确来讲是没有this绑定的,在使用时它的this是继承下来的,关于箭头函数的this指向我们首先不要走进的误区就是作用域链,既然他自身都没有this那怎么会根据作用域链来找this指向呢?案例分析箭头函数中this指向只有两种情况:没有被函数包裹,...原创 2019-04-22 18:08:00 · 437 阅读 · 0 评论 -
正则表达式在JS中的运用
正则表达式不是单纯的js范畴,所以标题这样取比较好一点,正则表达式运用于检测字符串格式,他所表示的是一种字符串格式,根据他索引到字符串中相应位置进行想要的操作,前面主要是小编自身为了记忆做的比较繁琐的笔记,后面会结合常见案例来说。一、定义与方法转义字符 \ :转义字符 \ 将后面所跟的内容转为文本通过它可以实现多行文本var str = "我是\ 多行文...原创 2019-04-01 21:43:55 · 535 阅读 · 0 评论 -
封装异步(按需)加载js函数(考虑兼容)
这篇笔记标题是最终的一个目的,那么在此之前还有几个其他的点需要做介绍。一、html文档渲染模式通俗来讲就是说网页展现的一个流程,HTML文档解析过程是单线程的,起初以一个DOMTree解析html结构(深度优先原则),当碰到标签需下载文件时会异步的进行下载,所以标签解析完成时间肯定是先于页面加载的,DOMTree完成后加载CSSTree,两者结合形成最终的渲染树randerTree,DOM...原创 2019-03-26 17:45:24 · 634 阅读 · 0 评论 -
JS之try、catch(错误类型归类)
在之前学习java的时候小编就已经接触过try、catch,那么功能相同这边只是做个介绍。一、try、catchjs代码用他包裹,catch为空时当有错误时会直接跳过try包裹部分错误执行try之后的代码,catch不为空时try中出线错误那么try中截断代码跳到执行catch中执行,这个并不难理解。看一个实例: var arr=['a','b','c']; v...原创 2019-03-19 14:33:58 · 4580 阅读 · 0 评论 -
JS中数组乱序、去重
这是小编对之前数组环节内容的补充,介绍乱序以及去重,直接撸上代码。一、数组乱序主要是数组sort( )方法的一个引申,我们知道sort是根据参数正负值来做排序判定,那么实现当然是使其随机正负值var a = [1,2,3,4,5]; Array.prototype.muddled=function(){ this.sort(function()...原创 2019-03-12 16:18:01 · 1375 阅读 · 0 评论 -
JS事件类型+绑定+冒泡、捕获分析
JS事件绑定当然是为了实现与用户之间的交互效果,小编这边自己做笔记的同时也跟大家一起分享一下。一、事件绑定1.对象.on+事件=function(event){...} //这种方法兼容性好但只能为对象绑定单个事件。2.对象.addEventListener(事件,处理函数,false) //该方法常用,可以为对象绑定多个事件这边小编为第二个方法要补充的一点是,...原创 2019-03-20 21:08:54 · 242 阅读 · 0 评论 -
JS中this指向详细介绍(含案例)
JavaScript中this作用很大不仅一部分简化了代码更加使得函数功能更加强大,小编今天根据案例好好提及一下该知识点。小编这一段知识点都是有联系的如果有需要大家可以从前面几篇了解起。一、this指向总结1.全局中指向window2.函数预编译过程时指向window3.call apply改变this指向(在上一篇博客中详细提及了他们两个的作用今天就不包含在实际案例之中)4....原创 2019-03-11 18:24:10 · 792 阅读 · 2 评论 -
JS如何获取和修改CSS伪类属性
DOM操作是操作HTML文档,那么js如何与CSS相联系,标题是小编所要说的重点,但是不想再去写另外的一篇博客所以先还是总结一下JS如何读取标签CSS属性方法。1.对象.style.属性这种方法只能读取行间的CSS属性,但他特别在通过js只能采取这种方法去改变标签样式(也是相当于在行间加属性值),所以可以看出行间样式优先级大于写在CSS中(除非在属性后加上 !important)2.w...原创 2019-03-19 17:42:10 · 4408 阅读 · 0 评论 -
JS标签选择器以及节点操作
JS的DOM开始当然是从选择器开始的,小编这边先做一个归类。一、DOM选择器document代表整个文档这边就省略他的开头了1. getElementById( ) //显然是用作与获取id来获取标签(实战中不常用)2.getElementByTagName( ) //通过标签类型来获取节点(常用)3.getElementByClassName( ) //...原创 2019-03-19 15:21:21 · 17835 阅读 · 1 评论 -
JavaScript继承模式
小编在上一篇博客之中所提及到的原型链其实是一种抽象的继承模式,通过prototype继承父亲属性,但这样的实际操作在对象上,每当需要继承属性那么就是要创建实际对象去实现继承,显然不是一个很好的继承模式,知识补充今天小编在介绍几种继承模式。一、call、apply方法作用:改变this指向区别:传参列表不同我们通过一个实际案例来看function Father(name,age...原创 2019-03-10 13:40:05 · 218 阅读 · 0 评论 -
JavaScript闭包详细讲解(含案例)
小编上一篇博客所介绍的预编译问题,主要是给大家强调js中AO、GO对象,而这所有的都是为了闭包做一个铺垫,经历了一天的倒腾跟进化了一样,话不多说开始今天的分享,每一个知识点都会有实际案例,希望对大家有帮助。一、作用域链scope在介绍闭包之前我们要了解这样的一个东西——作用域链,在js代码执行时,所产生的的AO、GO对象存储在一个作用域链之中,我们把scope想象成一个数组每一个函数运行所...原创 2019-03-06 22:09:29 · 2127 阅读 · 4 评论 -
es6-迭代器生成器
简化循环生成器 // 生成器函数名称前带个* // 函数表达式let createIterator = function *(items){} function *createIterator() { yield 1; //yield关键字不能往深度嵌套只能存在于构造器中 yield 2; yield 3; } // 这边同样可以以参数循环方式去构造 /...原创 2019-04-21 19:21:49 · 166 阅读 · 0 评论 -
es6-变量声明、函数
变量声明var声明有变量提升,根据之前预编译过程分析,哪怕是函数中被条件语句包裹同样也会有变量提升,var在全局中的定义相当于是给window这个大对象定义变量,且在次声明就会直接覆盖住之前的变量let、constant块级声明也就是让所声明的变量在指定块的作用域外无法被访问,const 声明会阻止对于变量绑定与变量自身值的修改,这意味着 const 声明并不会阻止对变量成员的修改(例如...原创 2019-04-14 11:44:28 · 927 阅读 · 0 评论 -
Promise
基础理解定义定义promise函数会返回表示异步操作的promise对象,类似于承诺未来某个时刻完成。let promise = readFile("text.txt");promise.then((content)=> { console.log(content);}), function(err) { console.log(err);}三种状态...原创 2019-07-12 10:14:30 · 164 阅读 · 0 评论 -
深浅克隆实现
存储状态存储地址分为堆、栈这两种基本类型基本类型因为数据大小固定存储在栈之中引用类型引用类型因为数据大小不固定存储在堆之中深浅克隆基本类型克隆let a = 1;let b = a;b = 2;console.log(a); // 1console.log(b); // 2基本类型存入栈之中克隆后不会影响到被克隆对象引用类型克隆let arr...原创 2019-07-14 09:19:24 · 335 阅读 · 0 评论 -
git 详细解析
git 操作在实际应用中很作用很大,这项操作当然不仅限于我们怎样上传一个项目到git hub上,简单说就是用于管理多人协同开发项目的技术,很有必要好好了解一下工作区域在了解git指令之前熟悉他的工作区域是很有必要的,git操作实际上分为4个区域工作目录暂存区资源区远程仓库我们先通过一张图来看一下他们之间的联系在结合下面的指令介绍大家就能明白git实际是怎样工作的git指令...原创 2019-06-13 20:06:57 · 446 阅读 · 0 评论 -
CSS框架LESS-语法总结
变量使用变量less允许定义变量到全局样式中复用 @banner-color: #fff; .banner{ background-color: @banner-color; } // 局部定义 .banner(@banner-color: #fff){ background-color: @banner-color; }变量作用域变量定...原创 2019-06-06 16:52:18 · 2328 阅读 · 0 评论 -
vue-2(事件处理、表单绑定、组件)
继上一篇博客这边继续补充基础内容加强一下记忆监听事件v-on指令去监听DOM事件,后面可以接事件类型,如下案例<div id="example-3"><button v-on:click="say('hi')">Say hi</button><button v-on:click="say('what')">Say what</bu...原创 2019-05-29 12:33:18 · 576 阅读 · 0 评论 -
Vue-1(绑定、渲染)
vue是js的一个渐进式框架,在小编个人理解上来看,他更加方便的给我们提供了构造响应式布局的工具,那么小编这边主要是总结一下vue的基础语法,以及一些小的demo创建实例 let vue = new vue({ el:'类似于选择器,与CSS格式相同去选中DOM元素', data: { name:'司尘', hooby:[football,travel],...原创 2019-05-28 23:28:48 · 237 阅读 · 0 评论 -
媒体查询实现页面适配问题
通常的网络页面都会应对浏览器实际页面大小去做一些页面布局的适配,今天小编通过一个demo来实现一个简单的导航栏以及内容的适配,就是通过查询页面实际宽度来做一个响应式的布局一、视口首先我们了解一下视口这个概念,视口在pc端就等于浏览器实际页面宽度,移动端视口默认是厂家所定义的一个固定值。简单来讲媒体查询是基于视口宽度去做的一个判断,然后对应的去改变模块样式。 <!-- 这样的一行代...原创 2019-05-23 11:36:18 · 3715 阅读 · 0 评论 -
es6新数组功能
数组创建Array.of()在以new方法定义数组时会遇到这样的情况 let arr = new Array(2); // 如果本意是在arr数组里添加一个2元素这个就不能实现,而是定义的一个长度为2的数组容器 let arr1 = Array.of(2); //我们这样来解决该方法可以实现单参数创建Array.from()返回一个以arguments对象(类数组)组成的数组,对象...原创 2019-05-06 17:21:54 · 270 阅读 · 0 评论 -
es6-Set、Map
Set定义这是一种无重复值的有序列表(如果添加了重复项相当于添加无效,对象除外,因为他们不会被转为字符串类型相同的对象在其中就是两个object,也没有类型转换)。Set允许对它包含的数据进行快速访问,从而增加了一个追踪离散值的更有效方式。基本操作与方法 let set = new Set(); // 创建set对象 set.add(5); // 添加元素,也可以添加对象 set....原创 2019-04-20 15:42:10 · 112 阅读 · 0 评论 -
es6对象功能拓展+解构
es6拓展的对象方法Object .is()比较两个参数是否完全一致,与全等区分(例NAN全等返回false)Object.assign()将后面参数对象熟悉赋给参数1对象Object.setPrototypeOf(对象,新原型对象)改变对象原型,同理get…为得到原型super覆盖对象实例的一个方法、但依然要调用原型上的同名方法,我们之前知道对象与原型重名会调用自身,看一个实例...原创 2019-04-18 12:22:40 · 272 阅读 · 0 评论 -
深度分析JavaScript中预编译现象
在学习前端js过程中我们知道,js代码是单线程进行编译操作,但是这并不代表是完全按照代码顺序去执行一些语句,今天小编带大家来深度认识一下就是代码预编译过程到底实现了什么,(前提小编多啰嗦两句平时写代码过程之中我们只是刻意的去避免了预编译带来的问题,但是并不代表这个知识点我们不需要去了解)。前面是一些概念性的东西后面小编会通过很多案例去跟大家一起理解攻克。干货:一、什么是预编译预编译用通...原创 2019-03-03 20:08:45 · 257 阅读 · 0 评论 -
JavaScript构造函数及原型相关介绍
JS之中构造函数格式上与函数定义相同,之前java基础之中我们通常用new来生成对象,那么构造函数也如此。一、简单的构造函数function Obj(name,age){ this.name=name; this.age=age; } var obj1=new Obj("zhamg",12);构造函数我们...原创 2019-03-08 18:17:07 · 349 阅读 · 0 评论 -
CSS精灵(CSS雪碧技术)
小编简短的补充一下CSS精灵(也叫CSS雪碧技术)在实战中非常使用,使用也多我们不能遗漏。在一些站中我们经常能看到:(已放入fireworks) 这是京东的小图标的一个原图,当然我们在使用这些小图标时不可能是一个一个很小的图,一般都是小图标的一些集合然后在插图时以定位方式截取自己所需要的部分。那么实际操作非常简单我们将图片放入fireworks时将自己所需要的部分切片切...原创 2018-09-17 19:53:29 · 449 阅读 · 0 评论 -
CSS中三种定位介绍
在这段时间对CSS学习中到今天也终于能收个尾了,小编这篇会对CSS中的3种定位做一个详细介绍1.相对定位相对定位:相对于自己原来的位置进行移动。实际代码操作:对于标签样式先声明position:relative;再描述移动方向与像素大小left带正数向右移,以此类推正数情况下方向相反,那么在这种情况下对于初学的我门这种定位可以以带负数形式就与标签头方向相同了。值得我们注...原创 2018-09-17 19:31:07 · 3986 阅读 · 0 评论 -
CSS中background系列属性介绍
在CSS中background充当着背景图的意义,(在CSS3中会有更多的相关属性),这边小编介绍一下background系列属性中不存在兼容性问题的一些属性。之后再学习了CSS3后会在写博客进行对该类的补充。1.background-color从语义上看就是添加背景颜色方法一:直接以颜色英文来写 例:background-color:red;很明显这种表示方式不足以描述所有的颜色...原创 2018-09-10 17:13:01 · 388 阅读 · 0 评论 -
CSS超链接美化
在之前的HTML学习中我们知道超链接标签<a>,对于超链接反映给客户端的肯定不只是单一的一行字的链接,小编这篇文章就来先说一下CSS对超链接的美化功能。1.伪类在介绍操作前先说一个概念,伪类:根据用户不同状态会有不同的样式,<a>标签就是一个很好的伪类例子,客户端在触碰超链接时当然有交互才会更加美观,这里CSS对超链接的美化实现了相应功能。超链接有自己的伪类表述不具...原创 2018-09-09 14:14:32 · 9145 阅读 · 0 评论 -
margin扩充介绍
在CSS中margin有着自己独特的一些属性,这边小编一一介绍一下,防止知识的遗漏。1.margin塌陷现象首先margin塌陷现象只会在标准文档流中产生,浮动盒子没有margin塌陷现象。margin塌陷现象是指在竖直上两个盒子在使用margin分块时会只取大的一个来隔开。实例来讲的话就是:上一个盒子有个 margin-bottom:30px;下一个盒子有个margin-...原创 2018-09-05 17:04:37 · 219 阅读 · 0 评论 -
清除浮动方法介绍
在设计网页样式时我们所最需要的就是清除浮动,这样页面才可以按照我们所想去实现一些样式。标准文档流是做不出网页的。下面小编具体介绍一些清除浮动方法。首先我们要明确,浮动的清除不是指的是把浮动去掉而是关住浮动,使得浮动与浮动之间相互不影响。1.给盒子加高(不适用)浮动在一个有高度的盒子中就不会影响后面的浮动元素,给祖先元素加高是一种方法。2.clear:both;(该方法会使margi...原创 2018-08-15 18:02:42 · 126 阅读 · 0 评论 -
CSS基础介绍
在前端开发中我们了解到,CSS为为页面内容更改样式的,全称为层叠式样式表在编程是格式为写在title标签下<style type="text/css"> 描述内容 </style>一、CSS属性这边首先介绍一些CSS基础属性方便举例说明更多所要用到的之后会概述括号里内容为在sublime中快捷键 简写+Tab键1.颜色 color:red; ...原创 2018-07-21 18:48:00 · 170 阅读 · 0 评论 -
HTML基础介绍3
该篇是小编最后对HTML的补充了,总的来说小编三篇文章博客解释了HTML基础知识,如果直接看到该篇的话建议从第一篇看起在小编博客中能够找到,话不多说这里对HTML最后的补充。继上一篇博客这里从lable标签说起。lable标签lable标签通俗的理解来讲的话可以描述为将自身包裹的内容与所连接标签结合起来,这边以单选按钮举例:<input type="radio"name="s...原创 2018-07-21 10:17:44 · 151 阅读 · 0 评论 -
HTML基础介绍2
上一篇博客中小编介绍到了标签以及一些原理,此篇是对标签的补充同样是只有HTML。重点概念:用什么标签不是看是什么格式而是看语义。上一篇到了超链接以及锚点现在继续介绍:一、HTML表格1.无序列表(同样也是组标签)<ul></ul>包裹,每一项为<li><li>。ul表格默认小圆点开头,当然也可以用CSS操作当然这里不做介绍,重...原创 2018-07-19 23:04:21 · 138 阅读 · 0 评论 -
HTML基础介绍
html是java web的一个基础语言,这篇文章是单纯的HTML的介绍以及应用,无关CSS、JS,既然会查到这个那这些行外介绍就不多说,直接开始正题。可能会有一些啰嗦但这是在两天对html学习的总结,不是全部之后小编会在更新博客,基本概括到了每一个点,从点滴开始。先扯一些题外话,访问网页原理可能有些人初识前端都不所了解,打个很简单的比方,浏览网页时当我们输入网址进去时会有页面弹出,简单来...原创 2018-07-18 23:08:55 · 266 阅读 · 0 评论 -
CSS盒模型
盒模型拓展到了一些概念,该篇不只是单纯的对怎样产生一个盒模型来介绍的。首先CSS中元素分为块级元素和行内元素从语义上理解块级元素在网页中霸占一行不与其他元素并列。这是CSS中块级元素与行内元素的分类,那么盒子在CSS中用处很多,我们在未转换的情况下只能对块级元素添加盒子,盒子属性:width(宽)、height(高)、padding(填充)、border(边框)、margin(盒子...原创 2018-07-24 14:36:51 · 140 阅读 · 0 评论 -
JavaScript入门概念
前期因为一些事情的延误耽误了一些时间,近期开始了对JS的学习,那么在之前我们了解到HTML,CSS完成了页面的语义样式处理,那么就来到了JS页面交互效果。小编在此没有那么着急着去学习怎样在网页上去操作js使用js,而是通过推荐的一本书打算将JS细微概念屡清楚之后再去实战。那么多的不说记录一下今天的重点——JS入门概念。 JS基于java,基本语法与java相同,至于细微不同之处之后会一一...原创 2018-10-14 20:23:28 · 248 阅读 · 0 评论 -
JavaScript数组 Array引用类型详介
过了之前的基础概念那么就到了引用类型这边,以new创建类型变量。这边小编还是带一下Object类,因为创建方式有不一样,1.var 变量名=Object();2.var 变量名{ 直接写属性赋值}。这边只是带过一下。那么进入正题JavaScript数组 Array引用类型1.创建var 数组名=new Array();var 数组名=new Array(3...原创 2018-10-14 22:12:12 · 226 阅读 · 0 评论 -
JavaScript其他引用类型介绍
在结束了Array类型学习后小编在之后又接触了几种引用类型,但有很大一部分都跟之前自己在学习java时相同,所以今天归类到一个博客里面来介绍一下。1.Data类型在实际操作中这些方法都是定死了的相关方法很多,这边不一一介绍。归类详细所以还是在这边开了一栏。 2.RegExp类型在接触这个类型时我们先要明确正则表达式的概念。在实际运用中我们用该类型方法来索引字符串中的东西,起到索...原创 2018-10-18 16:29:38 · 131 阅读 · 0 评论