从前端到全栈
文章平均质量分 62
本专栏为记录本人从前端向全栈发展的过程,希望在2023年10月前,我可以终结此专栏
纵有千般好
前端小白前来报道,各位大佬多多关照
展开
-
从前端到全栈-基础能力-js-垃圾回收
javascript垃圾回收 JavaScript具有自动垃圾回收机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。开发人员不用关心内存使用问题,所需内存的分配以及无用内存的回收完全实现了自动管理。 这种垃圾回收机制原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存。为此,垃圾收集器会按照固定的时间间隔(或代码执行中预定的收集时间),周期性地执行这一操作。 局部变量的正常生命周期 局部变量只在函数执行的过程中存在。而在这个过程中,会为局部变量在栈(或堆)内存上分配相应的空间,以便存储它们原创 2021-06-01 16:11:00 · 141 阅读 · 0 评论 -
从前端到全栈-基础能力-js-函数优化
csdn:https://blog.csdn.net/qq_42183923/article/details/113484317 if多条件判断 // 冗余 if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {} // 简洁 if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {} if…else… // 冗余 let test: boolean; if (x > 100) {原创 2021-05-25 15:26:41 · 72 阅读 · 0 评论 -
从前端到全栈-基础能力-js-模块规范
抛出问题: 在开发中在导入模块时经常使用require和import; 导出模块时使用module.exports/exports或者export/export default; 有时候为了引用一个模块会使用require奇怪的是也可以使用import????它们之间有何区别呢? 于是有了菜鸟解惑的搜喽过程。。。。。。 追溯根源,来到Js模块化规范 CommonJS规范(同步加载模块) 允许模块通过require方法来同步加载所要依赖的其他模块,然后通过exports或module.exports来导出需要原创 2021-05-22 15:23:12 · 57 阅读 · 0 评论 -
从前端到全栈-基础能力-js-异步编程
深入解析Javascript异步编程 这里深入探讨下Javascript的异步编程技术。(P.S. 本文较长,请准备好瓜子可乐 ????) 一. Javascript异步编程简介 至少在语言级别上,Javascript是单线程的,因此异步编程对其尤为重要。 拿nodejs来说,外壳是一层js语言,这是用户操作的层面,在这个层次上它是单线程运行的,也就是说我们不能像Java、Python这类语言在语言级别使用多线程能力。取而代之的是,nodejs编程中大量使用了异步编程技术,这是为了高效使用硬件,同时也可以不原创 2021-05-20 16:43:35 · 67 阅读 · 0 评论 -
从前端到全栈-基础能力-js-事件循环
深入理解javascript中的事件循环 (1)JS为何设计为单线程 js设计为单线程还是跟他的用途有关 试想一下 如果js设计为多线程 那么同时修改和删除同一个dom 浏览器又该如何执行? #JS为何需要异步 for (var i=0;i<9999;i++){ console.log("我在执行 但用户不知道") } console.log("你好啊") 上面例子 for循环耗时会很久 这意味着 用户得不到 ‘你好啊’ 的响应 就会下意识会认为浏览器卡死了 所以js必须要有异步 js通过事件循原创 2021-05-19 14:32:42 · 44 阅读 · 0 评论 -
从前端到全栈-基础能力-js-作用声明
JS的作用域和声明提前 首先介绍下Javascript的函数作用域的概念,然后了解下什么是作用域和声明提前,最后通过一个例子剖析Javascript的作用域链。 1.变量的作用域 稍微有些编程背景的都知道,变量的作用域分为两种: 全局变量 和 局部变量 。 Javascript是一门 弱类型语言 。所有的变量声明都是通过var来接收,如 var num = 1; var str = “string”; var flag = true; 看似是一个非常省事的机制,但是也有让人头疼的时候,一些隐式的类型原创 2021-05-18 16:28:39 · 56 阅读 · 0 评论 -
从前端到全栈-基础能力-js-执行机制
JavaScript执行机制,重点有两点: 1.JavaScript是一门单线程语言。 2.Event Loop(事件循环)是JavaScript的执行机制。 既然说js是单线程,那就是在执行代码的时候是从上往下执行的,先来看一段代码: setTimeout(function(){ console.log('定时器开始') }); new Promise(function(resolve){ console.lo原创 2021-05-17 10:54:11 · 217 阅读 · 0 评论 -
从前端到全栈-基础能力-js-原型继承
Javascript 是面向对象的,每个实例对象都有一个__proto_属性,该属性指向它 原型对象,这个实例对象的构造函数有一个原型属性 prototype,与实例的__proto__属性 指向同一个对象。当一个对象在查找一个属性的时,自身没有就会根据__proto__ 向它的 原型进行查找,如果都没有,则向它的原型的原型继续查找,直到查到 Object.prototype._proto_为 null,这样也就形成了原型链。 原型链继承 思路:借助原型可以基于已有的对象创建对象,同时还不必因此创建自定义原创 2021-05-17 10:42:43 · 51 阅读 · 0 评论 -
从前端到全栈-基础能力-js-指针指向
JS中this指针的指向 this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象。 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window) console.log(this); // 普通函数是window的属性方法(window.fn();),所以指向的是window function fn() { console.log(this); } window.setTi原创 2021-05-17 10:35:57 · 80 阅读 · 0 评论 -
从前端到全栈-基础能力-js-数据类型
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。 Javascript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算术运算符及程序的基本程序框架。 JavaScript数据类型: 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、S原创 2021-05-17 10:29:56 · 51 阅读 · 0 评论 -
从前端到全栈-基础能力-js-jQuery
jQuery介绍:https://baike.baidu.com/item/jQuery/5385065?fr=aladdin jQuery文档:https://jquery.cuishifeng.cn/index.html 集百家之长,成就我的全栈路,该篇文章来源于百度原创 2021-05-14 11:16:51 · 73 阅读 · 0 评论 -
从前端到全栈-基础能力-js-常用api
JS常用API合集汇总 一、节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textContent //返回当前节点和它的所有后代节点的文本内容,可读写 Node.baseURI //返回当前网页的绝对路径 Node.ownerDocument //返回当前节点所在的顶层文档对象,即document Node.原创 2021-05-13 14:31:36 · 70 阅读 · 0 评论 -
从前端到全栈-基础能力-css-布局方式
CSS 的布局应该是 CSS 体系中的重中之重了,主要的布局方式有 table 表格布局(早期),float 浮动布局和 flex 布局,还有针对于移动端的响应式布局,不论是工作还是面试都是非常重要的知识。 1、table 布局 table 布局是最简单的布局方式了,下面我们来看一个简单的例子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS 布局<原创 2021-05-12 08:31:41 · 57 阅读 · 0 评论 -
从前端到全栈-基础能力-css-优先级别
CSS 样式优先级 当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。 CSS 的继承性 CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构: <div> <p></p> </div> 如果 <div> 有个属性 color: red,则这个属性将被 <p> 继承,即原创 2021-05-11 10:49:26 · 63 阅读 · 0 评论 -
从前端到全栈-基础能力-css-文档流
1. 标准文档流 文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。 2. 标准流的微观现象: 空白折叠现象。 // 比如,如果我们想让img标签之间没有空隙,必须紧密连接. <img src="img/00.jpg"/><img src="img/02.jpg"/> 高矮不齐,底边对齐 自动换行,一行写不完时,换行写 3.标准文档流等级 分为两种等级:块级元素和行内元素; 块级元素: 1转载 2021-05-11 10:25:46 · 57 阅读 · 0 评论 -
从前端到全栈-基础能力-css-格式化上下文
解析 CSS 格式化上下文 BFC(Block Formatting Contexts),块级格式化上下文。BFC 实际上就是页面中一块渲染区域,该区域与其他区域隔离开来。容器里面子元素不会影响到外部,外部的元素也不会影响到容器里面的子元素。 规范 BFC 内部的盒子会从上至下一个接着一个顺序排列。BFC 内的垂直方向的盒子距离以 margin 属性为准,上下 margin 会叠加。每个元素的左侧最外层边界与包含块 BFC 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。BFC 的区原创 2021-05-11 09:33:41 · 66 阅读 · 0 评论 -
从前端到全栈-基础能力-css-盒模型
前言 盒子模型,英文即box model。无论是div、span、还是a都是盒子。 但是,图片、表单元素一律看作是文本,它们并不是盒子。这个很好理解,比如说,一张图片里并不能放东西,它自己就是自己的内容。 盒子中的区域 一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: width和height:内容的宽度、高度(不是盒子的宽度、高度)。 padding:内边距。 border:边框。 margin:外边距。 盒子模型的示意图: 代码演示: 上面这个盒子原创 2021-05-10 09:44:21 · 68 阅读 · 0 评论 -
从前端到全栈-基础能力-css-常用属性
1. css颜色属性 1.1. 字体颜色 字体颜色相关属性设置: color:red color:#f90 color:rgb(250,250,0) color:rgba(r,g,b,透明度(0-1)) 1.2. 背景颜色 背景颜色相关属性设置: background:#f90; background:rgb(255,255,0); background:red; background:rgba() 2. 页面布局相关属性 2.1. display display block 设置元素为块状元素 <d原创 2021-05-06 11:20:37 · 129 阅读 · 0 评论 -
从前端到全栈-基础能力-html-常用标签
html文档结构 <!DOCTYPE html> <html lang="zh-CN"> #这个lang表示语言,zh-CN中文的意思,整个文档的内容以中文为主,如果以英文为主,就写成lang='en' <head> <meta charset="UTF-8"> <title>css样式优先级</title> </head> <body> </body> </html>原创 2021-04-29 09:24:05 · 172 阅读 · 0 评论 -
从前端到全栈
今天为自己立个长远的目标—在2023年成为全栈,原创 2021-04-28 10:45:17 · 106 阅读 · 0 评论