![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端
文章平均质量分 75
iamchuancey
学得好编程 要做苦行僧
展开
-
DOM、HTML DOM、XML DOM关系的深度解析
首先讲一讲DOM是什么。W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准—DOM。 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。DOM“W3C 文档对象模型 (DOM) 是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式原创 2017-10-24 22:07:10 · 2758 阅读 · 0 评论 -
javascript执行上下文、作用域与闭包(第五篇)---一个例子的理解
在上一篇里,留下了一个例子,如果对那个例子不是太懂,没关系,我会在这一篇里详细讲一下我对这个例子的理解。下面是这个例子:function a(){var age=21;var height=178;var weight=70;function b(){ alert(age);//undefined alert(height);//178 var age=25;原创 2017-10-14 21:02:36 · 2073 阅读 · 2 评论 -
javascript执行上下文、作用域与闭包(第四篇)---作用域与执行上下文
上一篇我们讲了作用域,也留了一个问题,我们是真的在作用域里取到变量的值吗?在上一篇里也给出了答案,我们不是在作用域里取到变量的值,而是在作用域所对应的执行上下文取到变量的值,并且可能同样的作用域,相同的变量取到的值是不同的。在这里,提一句很重要的话,作用域在函数创建的时就已经确定了,而不是在函数调用时确定。下面我们将按照程序执行的顺序,一步一步把各个上下文环境加上。第一步,在加载程...原创 2017-10-14 19:43:16 · 2899 阅读 · 2 评论 -
javascript执行上下文、作用域与闭包(第三篇)---自由变量与作用域链
首先解释一下,什么是自由变量。在A作用域中使用的变量x,却没有在A作用域中声明(即在其他作用域中声明的),对于A作用域来说,x就是一个自由变量。简单的说,凡是跨了自己的作用域的变量都叫自由变量。如:var x=10;function foo(){var b=20;alert(x+b); //这里x就是自由变量}foo();//30在调用fn()函数时,函数体中第6行。取b的值就直接可以在翻译 2017-10-14 17:18:49 · 815 阅读 · 2 评论 -
总结篇---闭包问题从此再不难
在阅读完前两个系列文章,终于要厚积薄发了,这里,你将会发现,闭包真的很简单!仍旧是一个简单的例子:function foo() { var a=1; function plus(){ var b=2; alert(a+b); } return plus; } var f=foo(); f();//3在前面的积累后,你会有如下的分析过程:函数plus的[scope原创 2017-11-08 17:57:30 · 538 阅读 · 0 评论 -
javascript执行上下文、作用域与闭包(第七篇)---关于闭包典型例子的理解
在上一篇里,我留下了一个例子,如果理解了这个例子,我觉得闭包对你已经不是问题了。这个例子如下:function A(){ var count=0; function B(){ count++; alert(count); } return B;} var c=A(); c();//1 c();//2 c();//3咱们一步一步地原创 2017-10-15 11:10:40 · 703 阅读 · 3 评论 -
[JavaScript]ECMA-262-3 深入解析.第五章.闭包
概要本文将介绍一个在JavaScript经常会拿来讨论的话题 —— 闭包(closure)。闭包其实已经是个老生常谈的话题了; 有大量文章都介绍过闭包的内容(其中不失一些很好的文章,比如,扩展阅读中Richard Cornford的文章就非常好), 尽管如此,这里还是要试着从理论角度来讨论下闭包,看看ECMAScript中的闭包内部究竟是如何工作的。正如在此前文章中提到的,这些文章都是系列文章,相互翻译 2017-11-08 16:32:56 · 558 阅读 · 0 评论 -
javascript 原型继承(第四篇)---几种继承方式
今天要介绍的是,对象之间的”继承”的几种方式。首先有一个问题,为什么继承还有几种方式呢?你看不管是java还是C++,继承就是继承,哪有几种继承方式,不过Javascript 是一种灵活的语言,之所以灵活,说不好听点就是设计得太简单,连基本的继承都要自己去实现,下面就说一下最常用的几种继承方式。比如,现在有一个”动物”对象的构造函数。function Animal(){ this.speci原创 2017-10-10 14:44:11 · 1390 阅读 · 0 评论 -
javascript原型继承(第三篇)---prototype
Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类)。那么,如果我们要把”属性”(property)和”方法”(method)封装成一个对象(注意:在javascript中没有方法这一说,只有属性,这里是为了便于大家理解),甚至要从原型对象生成一个实例对象,我们...转载 2017-10-09 22:44:03 · 322 阅读 · 0 评论 -
javascript自动垃圾回收机制详解
Javascript具有自动垃圾回收机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。在编写JavaScript程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用的内存的回收完全实现了自动管理。这在垃圾回收机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔周期性地执行这一操作。垃圾收集器必须跟踪哪个变量有用,哪个变量无用,对原创 2017-11-05 21:00:24 · 1060 阅读 · 0 评论 -
详谈我对闭包的真正的理解
写在前面百度上有很多种文章解释闭包的,但90%的文章对闭包都解释不清,我之所以敢这么说,肯定是有这么说的底气的。原因如下:1.有能解释得清闭包的形式是什么? 2.有能真正解释得清为什么会出现闭包的吗?3.有能真正解释得清闭包背后的形成机制吗?闭包的形式是什么关于闭包,有一句话是“所有的函数都是闭包”,这句话我实在不敢苟同,那干脆函数直接叫闭包得了,或许这句话从某种意义上说得通,但对于开发人员来说,你原创 2018-03-18 17:37:13 · 624 阅读 · 0 评论 -
彻底弄懂原型链,不懂来找我
写在前面对于初学者而言,原型链是一个比较难懂的概念,而且百度上解释原型链的五花八门,看得越多就越觉得不懂,我就是这样,看得越多,就越觉得原型链这个概念深不可测,但幸好,看到最后,自己可以融会贯通了。弄懂原型链的作用原型链的作用是用来继承的,很多文章都在讲原型链的原理是怎么样,但对如何使用原型链实现继承都只字未提。在看这篇文章前,我希望读者们对原型链已经有一定程度的了解了,至于接不接受我对原型链的看法原创 2018-03-17 11:46:50 · 1243 阅读 · 0 评论 -
CSS 主干知识梳理
写在前面最近要找前端实习了,作为一名大三狗,心里很慌,又把CSS重新复习了一遍,这时候写博客的好处就可以看见了,以前写过的博客可以当复习资料了,在复习的过程中,我觉得有必要要把CSS主干知识梳理一下,毕竟CSS是一门包罗万象的语言。元素+模型+布局为什么在开头中说“元素+模型+布局”呢?个人觉得,CSS的骨干知识就是“两种元素分类+盒子模型+布局”,其他的CSS特性都是围绕这些展开的。两种元素分类第原创 2018-03-15 19:46:57 · 376 阅读 · 0 评论 -
关于CSS浮动原理的探究
本篇主要讲css浮动的原理和css浮动带来的一些问题的探究,主要参考了W3School以及相关博客,再谈一谈自己的理解。在谈CSS浮动原理前,先讲CSS浮动的两大原则: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框的排列可以认为浮动框不存在一样CSS float属性在CSS中,float属性实现元素原创 2017-10-06 15:50:33 · 711 阅读 · 0 评论 -
float之文字环绕问题
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。原创 2018-03-14 22:39:51 · 3900 阅读 · 0 评论 -
Mac上发布本地文件到Github仓库最快的方法!
准备工作安装Git(推荐由homebrew安装Git)注册Github账号开始上传1.登录Github2.如下图所示,点击Your profile,进入仓库管理3.如下图所示,输入仓库名字(Repository name)新建仓库注意不要勾选上Inistialize this respository with a README框!(这个很重要,因为勾选后会出现很多意料之外的问题!而且后面可以自己再创原创 2018-02-26 22:46:46 · 1326 阅读 · 0 评论 -
web开发入门课---web技术发展历程
讨论Web开发技术的历史,当然要先说说Web的起源。Web的前身是1980年Tim Berners-Lee负责的Enquire(Enquire Within Upon Everything的简称)项目。1990年11月,第一个Web服务器nxoc01.cern.ch开始运行,Tim Berners-Lee在自己编写的图形化Web浏览器”WorldWideWeb”上看到了最早的Web页面。1991年,转载 2017-11-24 21:30:22 · 978 阅读 · 0 评论 -
Javascript包含哪些内容
Javascript作为前端领域一门最重要的一门语言,从事软件行业的人几乎都知道,但是如果你问他Javascript是什么呢? 他就可能回答说一门前端语言啊,如果你再问他Javascript包含哪些内容呢?他就可能回答不上来了,而这个问题如果去问一些前端工程师,他可能也回答不出来。如果这个问题你拿来问我,之前的我也回答不上来,但是现在我可以告诉你说我回答的出。Javascript包含哪些内容?jav原创 2017-11-04 21:23:38 · 2685 阅读 · 1 评论 -
javascript原型继承(第二篇)---继承的设计思想
最初接触javascript,让我有一种感觉——javascript 原型继承到底讲的是什么? 看了很多关于Javascript原型继承的资料,仍旧弄不懂它要讲什么,不过今天在看了一篇博客后,顿时让我有种醍醐灌顶的感觉,下面就将这篇博客的内容贴出来。 javascript 没有”子类”和”父类”的概念,也没有”类”(class)和”实例”(instance)的区分,全靠一种很奇特的”原型链”(p转载 2017-10-09 22:00:04 · 420 阅读 · 0 评论 -
javascript原型继承(第一篇)---对象
面向对象是当代编程的主流思想。无论是C++还是Java,都是面向对象的。严格意义上来讲,JavaScript并不是面向对象的, 但Javascript的灵活性足以让我们将其用作一门面向对象语言. JavaScript是一种没有类的,面向对象的语言。它使用原型继承来代替类继承。在学习原型继承前,我们来了解一下在javascript中对象的概念。可以先告诉大家,javascript的对象是不同于原创 2017-10-09 18:13:47 · 439 阅读 · 0 评论 -
怎么理解CSS盒子模型?
怎样理解CSS盒子模型内边距、外边距?理解这个问题,首先得了解什么是CSS盒子模型。 CSS假定每个元素都会生成一个或多个矩形框,这称为元素框。 各元素框的中心有一个内容区。 这个内容区周围有可选的内边距,边框和外边距。再具体一点就是:实际上,我们可以看到的是border以内的东西,在border之外(即外边距的区域)对我们来说是不可见的,可以说是透明的,也没有任何手段能够显式地看见它,原创 2017-10-04 17:58:01 · 854 阅读 · 0 评论 -
优秀的前端程序员与菜鸟差别在哪里?(javascript篇)
大家都知道,前端程序员一项重要的技能就是能写出优秀的javascript代码。一个优秀的前端程序员与一个菜鸟程序员在写javascript代码上的差别在哪里呢?下面就来谈一谈我在学习Javascript中的一些心得。前言我一直很认同一句话:优秀和平凡就在于习惯。 所以,我认为一个优秀的前端程序员和菜鸟程序员的差别就在编程习惯上。大家都知道对于程序员来说,熬夜是家常便饭,但一个好的编程习惯可以让你不原创 2017-10-27 16:38:40 · 2205 阅读 · 0 评论 -
javascript原型继承(第五篇)---几种继承方式的优缺点
在讲几种继承方式的优缺点之前,先给大家介绍一下在javascript中对各种属性的分类 在javascript中,数据分为简单数据和复杂数据,简单数据在对象里称为基本属性,而数组,函数在对象里称为引用属性(数组,函数其实都是对象)对此不太清楚的,可以参考我之前的博客 javascript数据类型下面具体介绍一下在对象里各种属性的分类function Fun(){ // 私有属性翻译 2017-10-10 22:45:51 · 1310 阅读 · 1 评论 -
再也不用担心javascript的this---从代码去理解(第三篇)--关于this的典型例子
在看了本系列文章的前两篇之后,我收集了一些关于this的典型例子,和大家分享,也可以检查是否掌握了this。例1:var obj = { func: function () { alert("func():this=" + this); } }; obj.func();//func原创 2017-10-19 09:50:22 · 504 阅读 · 0 评论 -
再也不用担心javascript的this---从代码去理解(第二篇)---引用类型
上一篇中是不是对引用类型不太清楚?这一篇就主要来讲一讲引用类型。引用类型引用类型是javascript中一种内部类型。它主要是当做一个指代,代替一个变量或者函数,当然在需要真实值时,又可以通过它寻找到真实值。引用类型的结构引用类型由两部分构成,一是引用类型的值指代对象的所属对象,这里我们把它叫做base,二是base中的指代对象的对象名称。用伪代码来表示:var valueOfReferenceTy转载 2017-10-19 09:32:08 · 371 阅读 · 0 评论 -
再也不用担心javascript的this---从代码去理解(第一篇)---深析this原理
介绍在这篇文章里,我们将讨论跟执行上下文直接相关的更多细节。讨论的主题就是this关键字。 (如果在本篇有不懂的地方,一定要看第二篇)定义this是执行上下文中的一个属性:activeExecutionContext = { VO: {...}, this: thisValue};这里VO是我们在执行上下文讨论的变量对象。this与上下文中可执行代码的类型直接相关。this的值在进入上下转载 2017-10-18 17:19:16 · 500 阅读 · 0 评论 -
简单理解javascript中apply()和call()
所有的函数都默认包含apply和call这两种方法调用函数的apply或call方法,就相当于调用该函数.不考虑函数内的this引用的话,这和类似于 直接调用函数对方式是一样的。 apply和call的功能是,通过传参的方式,强制函数内的this指定某一对象下面是使用了apply方法和call方法的函数调用的例子:function say(){ console.log(this.name);原创 2017-10-08 20:09:55 · 275 阅读 · 0 评论 -
javascript执行上下文、作用域与闭包(第一篇)---执行上下文
在这个系列文章里,我首先要说的是,闭包是和执行上下文,作用域是有紧密的联系的,不能单独的去理解闭包,否则就容易走入死胡同。这篇讲执行上下文。一、什么是执行上下文我们可以将执行上下文看作代码当前运行的环境。代码的运行环境分为三种:全局级别的代码 – 这个是默认的代码运行环境,一旦代码被载入,js引擎最先进入的就是这个环境函数级别的代码 – 当执行一个函数时,运行函数体中的代码...原创 2017-10-13 21:57:41 · 1955 阅读 · 4 评论 -
javascript数据类型
数据 和 过程 是构成javascript世界的基本元素数据分两类 : 简单数据 和 复杂数据;过程只有一种形式,即 function简单数据有undefined,null,boolean,number和string这五种。复杂数据只有一种,即对象(object)。简单数据[1] undefined : 这个值表示变量不含有值。 若 typeof(data) 的返回值是字符串 ‘undefine原创 2017-10-07 21:46:24 · 408 阅读 · 0 评论 -
由CSS浮动、定位引发的对CSS标准流的思考
CSS标准流是一种CSS布局规则。之所以标准,是因为在不使用其它特殊的规则(如浮动、定位)下,CSS所默认的对html各种元素的排列规则。 标准流是指元素会自动从左往右,从上往下的流式排列。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。在html文档中,CSS将元素分为两大类:块级元素和行内元素。常见的块级元素有div标签 、p 标签等, 常见的行内元素有span标签、em标原创 2017-10-05 17:06:10 · 408 阅读 · 0 评论 -
CSS三种定位机制---定位
CSS三种定位机制CSS 有三种基本的定位机制:普通流、浮动和绝对定位。一、普通流普通流,也叫标准流,是指在不使用其它特殊的规则(如浮动、定位)下,CSS所默认的对html各种元素的排列规则,即元素会自动从左往右,从上往下的流式排列,并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。二、定位定位主要有相对定位、绝对定位、固定定位、正常定位absolute(绝对定位):生成绝对定位的元翻译 2017-10-06 17:13:57 · 982 阅读 · 0 评论 -
javascript执行上下文、作用域与闭包(第六篇)---闭包
终于讲到闭包了,当你在百度上搜索闭包时,你会被搜索出来的结果吓一跳,我的天,为什么说得都不一样?直到把所有的解释都看过了,我就只想说一句,到底谁说的是对的…在这么多的不同解释里,我认真思考了很久,到底该相信谁?最后我选择相信大道至简,因为我始终觉得理论来源于实践,而实践一定不是在象牙塔里,而是可以摸得到的简单的东西。下面就来讲最原始的闭包的示例:function fn(){var...转载 2017-10-15 10:01:20 · 833 阅读 · 1 评论 -
厚积薄发---从此再也不用担心闭包问题
说在前面至此,关于JavaScript闭包问题我已经写了两个系列的文章。可能你会很惊讶,为了一个知识点,写了两个系列文章,有必要吗? 我会回答有必要,而且很有必要,因为它不仅仅是一个知识点。两个系列文章+一个总结篇第一个系列的文章是参考了网上流行的博客,比如阮文峰老师的闭包系列文章,王福朋的闭包系列文章,还有搜索排名在百度前三页的各个博客文章。但我得说句实话,这个系列的文章大多数的观点是正确的,但不原创 2017-11-08 17:19:54 · 701 阅读 · 0 评论 -
[JavaScript]ECMA-262-3 深入解析.第四章.函数
概要本文将给大家介绍ECMAScript中的一般对象之一——函数。我们将着重介绍不同类型的函数以及不同类型的函数是如何影响上下文的变量对象以及函数的作用域链的。 我们还会解释经常会问到的问题,诸如:“不同方式创建出来的函数会不一样吗?(如果会,那么到底有什么不一样呢?)”:var foo = function () { ...};上述方式创建的函数和如下方式创建的有什么不同?function翻译 2017-11-08 15:37:56 · 480 阅读 · 0 评论 -
[JavaScript]ECMA-262-3 深入解析.第三章.作用域链
概要在第二章变量对象的时候, 已经介绍过执行上下文的数据是以变量对象的属性的形式进行存储的。还介绍了,每次进入执行上下文的时候,就会创建变量对象,并且赋予其属性初始值,随后在执行代码阶段会对属性值进行更新。本文要与执行上下文密切相关的另外一个重要的概念——作用域链(Scope Chain)。定义若要简单扼要对作用域脸做个解释,那就是:作用域链和内部函数息息相关。众所周知,ECMAScript允许创建翻译 2017-11-08 09:19:42 · 543 阅读 · 0 评论 -
全面解析javascript事件流模型以及各事件流模型在浏览器中的兼容性情况
首先,讲一下为什么会有事件流模型。举个简单的例子来说,当你看着纸上一组同心圆的时候,你拿着笔点着同心圆里最小的那个圆的时候,是不是也可以说你也在点着这组同心圆的所有圆?显然是可以说的。所以,当你点击页面上的一个button,你是不是也在点击着包含这个button的父级元素?同样,是的。这便是为什么会有事件流以及事件流模型。事件流事件流有两种:一种是微软公司提出的冒泡事件流,一种是网景公司提出捕获事件原创 2017-10-22 22:22:10 · 578 阅读 · 0 评论 -
[JavaScript]ECMA-262-3 深入解析.第二章.变量对象
写在前面ECMA-263(全称:ECMAScript-263)是现行javascript语法规范,全系列文章中,ECMAScript都可以理解为JavaScript。介绍我们在创建应用程序的时候,总免不了要声明变量和函数。那么,当我们需要使用这些东西的时候,解释器(interpreter)是怎么样、从哪里找到我们的数据(函数,变量)的,这个过程究竟发生了什么呢?大部分ECMAS...翻译 2017-11-07 15:28:15 · 508 阅读 · 0 评论 -
[JavaScript]ECMA-262-3 深入解析.第一章.执行上下文
说在前面ECMA-263(全称:ECMAScript-263)是现行javascript语法规范,全系列文章中,ECMAScript都可以理解为JavaScript。介绍这篇文章我们主要探讨ECMAScript执行上下文和相关的ECMAScript可执行代码。定义每次当控制器转到ECMAScript可执行代码的时候,即会进入到一个执行上下文。执行上下文(简称-EC)是一个抽象概念,ECMA-262标翻译 2017-11-07 15:01:29 · 622 阅读 · 0 评论 -
javascript事件处理--关于事件的一些基础定义
当web浏览器加载完文档,用户把鼠标指针移到超链接上或者敲击键盘时,web浏览器都会产生事件。请注意,事件本身不是一个需要定义的技术名词。简而言之,事件就是web浏览器通知应用程序发生了什么事情。事件不是javascript对象,然后会有一些与事件相关的对象出现在源代码中,它们需要技术说明,因此,本章从一些重要的定义开始。事件类型(event type)是一个用来说明发生什么类型事件的字符串。例如:原创 2017-10-21 21:31:34 · 483 阅读 · 0 评论 -
浅谈Javascript引擎的工作原理
javascript解析引擎javascript解析引擎(简称javascript引擎),是一个程序,是浏览器引擎的一部分。每个浏览器的javascript解析引擎都不一样(因为每个浏览器编写Javascript解析引擎的语言(C或者C++)以及解析原理都不相同)。标准的Javascript解析引擎会按照 ECMAScript文档来实现。虽然每个浏览器的Javascript解析引擎不同,但Javas转载 2017-11-05 22:39:02 · 909 阅读 · 0 评论