- 博客(33)
- 收藏
- 关注
RSS订阅转载 单页面应用程序（SPA）的优缺点
我们通常所说的单页面应用程序通常通过前端框架（angular、react、vue）进行开发，单页面应用程序将所有的活动局限于一个Web页面中，仅在该Web页面初始化时加载相应的HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA不会因为用户的操作而进行页面的重新加载或跳转。取而代之的是利用 JavaScript 动态的变换HTML的内容，从而实现UI与用户的交互。由于避免了页面的重新加载，SPA 可以提供较为流畅的用户体验。一、优点1.良好的交互体验 单页应用的内容的改变不需要重新
2021-03-29 11:03:21
2311
转载 什么是跨域？怎么解决跨域问题？
什么是跨域？跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）http://abc.123.co
2021-03-27 10:24:58
197
转载 -webkit-line-clamp 多行文字溢出...
一、应用CSS代码：.box { width: 100px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}HTML代码：<div class="box"> 美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片</div>效果：美国进口Culturelle
2021-03-05 13:58:08
343
前端浏览器兼容性问题总结
常见的浏览器内核可以分四种：Trident、Gecko、Blink、WebkitIE浏览器：Trident内核，也称为IE内核Chrome浏览器：Webkit内核，现在是Blink内核Firefox浏览器：Gecko内核，俗称Firefox内核Safari浏览器：Webkit内核Opera浏览器：最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；360浏览器：IE+Chrome双内核猎豹浏览器：IE+Chrome双内核百度浏览器：IE内核QQ浏览器：Tri
2021-01-27 10:42:55
95
原创 清除浮动
一、浮动浮动元素脱离文档流，不占据空间。二、浮动元素引起的问题（1）父元素的高度无法被撑开。（2）与浮动元素同级的非浮动元素（内联元素）会跟随其后。（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。示例代码： <style> * { margin: 0; padding: 0; } .main { border: 5px solid red; } .div1 {
2021-01-26 15:33:20
67
原创 双飞翼布局
写一个左中右布局占满屏幕，其中左、右两块固定宽200px，中间自适应宽，要求先加载中间快，请写出结构和样式。结构：<div class="main"> <div class="container"> <div class="content">中间</div> </div> <div class="left">左边</div> <div class="right
2021-01-26 14:39:40
46
原创 浏览器内核
浏览器内核主要分为两部分：渲染引擎和js引擎。一、渲染引擎负责取得网页的内容（HTML、XML、图像等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其他需要编辑、显示网络内容的应用程序都需要内核。二、js引擎解析和执行JavaScript来实现网页的动态效果。最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只指渲染引擎。
2021-01-21 13:58:41
58
原创 页面导入样式时，使用link和@import的区别
（1）link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS。（2）页面被加载的时候，link会同时被加载；而@import引用的CSS会等到页面被加载完再加载。（3）link是XHTML标签，无兼容问题；import是CSS2.1提出的，只在IE5以上才能被识别。...
2021-01-20 14:34:17
62
原创 行内元素、块级元素及空（void）元素
CSS规范规定，每个元素都有display属性，确定该元素的类型。每个元素都有默认的display类型，如div的display默认值“block”，则为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（1）行内元素：a、b、span、img、input、select、strong（强调的语气）（2）块级元素：div、ul、ol、li、dl、dt、dd、h1、h2…p（3）常见的空元素：<br>、<hr>、<img>、<in
2021-01-20 14:22:30
197
原创 HTML5为什么只需要写＜!DOCTYPE HTML＞
HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。...
2021-01-20 14:09:57
238
原创 Doctype作用及兼容模式与标准模式的区别
一、Doctype作用<!DOCTYPE>声明位于HTML文档中的第一行，处于<html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。二、兼容模式与标准模式的区别标准模式的排版和js运作模式，都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。...
2021-01-20 14:05:04
642
原创 企业级规范
一、引号的使用单引号优先（如果不是引号嵌套，不要使用双引号）二、变量命名str、num、bol、obj、fun、arr：作用域不大的情况下使用循环：i、j、k变量命名前缀：数组：a字符串：s数值：n逻辑：b函数：f对象：o正则：r...
2021-01-07 00:29:27
86
2
原创 数据类型
数据类型：（1）基本数据类型（又称原始数据类型）string: 字符串。基本上加入引号的都是字符串类型number: 数值boolean: 布尔 。两个值true、falseundefined：表示“缺少值”。应该是有一个值,但是还没有赋值null： 表示“没有对象”。即该处不应该有值（特殊的object）undefined与null的区别：null表示无对象,把他转换成数值是0undefined表示“缺少值”,把他转换成数值是NaN（2）引用数据类型objec
2021-01-07 00:27:41
113
原创 变量和注释
一、js中的变量命名规则（1）首位：字母、_、$（2）严格区分大小写（3）采用驼峰命名声明变量 var注：变量名禁止使用关键字二、 js中的注释单行: //多行: /**/企业级注释:(1)公共的js文件：/** * 文件用途说明 * 作者姓名、联系方式 * 制作日期 **/（2）大的模块注释方法： //=================== // 代码用途 //===================...
2021-01-07 00:25:06
118
原创 延迟和异步加载js
一、如何延迟加载js：deferdefer：js脚本可以延迟到文档完全被解析和显示之后执行 <script type="text/javascript" defer></script>二、如何异步加载js：asyncasync：立即执行脚本，但不妨碍页面其他操作（谁先加载完谁执行） <script type="text/javascript" async></script>...
2021-01-07 00:22:48
86
原创 关于javascript
一、什么是javascript（1）“弱类型”的脚本语言（2）基于“原型”的脚本语言二、js的作用（1）主要用于web页面使用（2）被非浏览器环境中去使用（nodejs）三、js的构成ECMAScript：核心语法、基本对象DOM：文档对象模型BOM：浏览器对象模型四、在html中如何使用js（1）在本页写入（2）外部引入五、输出语句（程序员调试代码时使用）document.write( ) 在文档中打印内容console.log( ); 在控制台打印内容注：写完用
2021-01-07 00:21:09
77
原创 typeof 和 instanceof 的区别
typeof：对某个变量类型的检测，基本类型除了 null 之外，都能正常地显示为对应的类型，引用类型除了函数会显示为 function，其他都显示为 object。instanceof 主要用于检测某个构造函数的原型对象在不在某个对象的原型链上。typeof 会对 null 显示错误是个历史 Bug，typeof null 输出的是 object，因为 JavaScript 早起版本是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象然而 null 表示为全零，所以它错误判
2021-01-07 00:18:40
90
原创 setTimeout 实现 setInterval
内部使用setTimeout延迟1000ms输出数据，并使用递归实现循环setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。timerFun();function timerFun() { let timer = setTimeout(function () { console.log('setTimeout 实现 setInterval'); timerFun(); clearTimeout(timer); }, 1000);
2021-01-07 00:16:50
159
1
原创 null 和 undefined 的区别
null 表示 无 的对象，也就是此处不应该有值；而 undefined 表示未定义。<script> console.log(typeof null); // object</script>在转换数字的时候，Number(null) 为 0，而 Number(undefined) 为 NaN。使用场景细分如下：null：作为函数的参数，表示该函数的参数不是对象。作为对象原型链的终点。Object.prototype.__proto__ === nul
2021-01-07 00:14:53
55
原创 JS位置
clientHeight：表示可视区域的高度，不包含 border 和滚动条offsetHeight：表示可视区域的高度，包含了 border 和滚动条scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分clientTop：表示边框 border 的高度，在未指定的情况下一般为0scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标（CSS 定位的元素或 body 元素）距离顶端的高度。...
2021-01-07 00:12:25
82
原创 JS 拖拽
一、通过 mousedown、mousemove、mouseup 方法实现如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。（1）onmousedown：鼠标按下事件（2）onmousemove：鼠标移动事件（3）onmouseup：鼠标抬起事件重点：（1）一定要绝对定位，脱离文档流才可以移动。（2）绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。（3）点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内
2021-01-07 00:10:34
421
原创 DOM常用API
可以使用 document 或 window 元素的 API 来操作文档本身或获取文档的子类（Web 页面中的各种元素）。获取元素const node = document.getElementById(id); // 或者 querySelector(".class|#id|name"); 创建元素const heading = document.createElement(name); // name: p、div、h1...添加元素document.body.appendChild(h
2021-01-06 23:55:19
134
原创 执行上下文
执行环境又被称为：执行上下文执行环境定义了变量或者函数有权或无权访问其他数据，决定了各自的行为。一、执行上下文类型JavaScript 中有 3 种执行上下文类型。（1）全局执行上下文：这是默认或者说基础的上下文，任何不在函数内部的代码都在全局上下文中。它会执行两件事：创建一个全局的 window 对象（浏览器的情况下），并且设置 this 的值等于这个全局对象。一个程序中只会有一个全局执行上下文。var num = 10; // 全局变量function fun() {} // 全局函数fu
2021-01-06 23:51:46
813
1
原创 一句话描述this
对于函数而言，指向最后调用函数的那个对象，是函数运行时内部自动生成的一个内部对象，只能在函数内部使用；对于全局而言，this 指向 window。
2021-01-06 23:40:41
101
原创 事件流
什么是事件流：事件流描述的是从页面中接收事件的顺序，DOM 2级事件流包括下面几个阶段。(1) 事件捕获阶段(2) 处于目标阶段(3) 事件冒泡阶段如何让事件先冒泡后捕获：在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。一、addEventListeneraddEventListener 方法将指定的监听器注册到 EventTarget 上，当该
2021-01-06 23:39:26
1145
原创 实现sleep
sleep函数作用是让线程休眠，等到指定时间在重新唤起。const sleep = time => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(time); }, time); });};sleep(1000).then((res) => { console.log(res);});...
2021-01-06 23:30:28
43
原创 渐进式网络应用（PWA）
渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 Web 应用程序，但在外观和感觉上与原生 App 类似。支持 PWA 的网站可以提供脱机工作、推送通知和设备硬件访问等功能。一、优点更小更快: 渐进式的 Web 应用程序比原生应用程序小得多。他们甚至不需要安装。这使他们没有浪费磁盘空间和加载速度非常快。响应式界面: PWA 支持的网页能够自动适应各种屏幕大小。它可以是手机、平板、台式机或笔记本。无需更新: 大多数移动应用程序需要每周定期更新。与普通网站一样，每当用户交互发生且不
2021-01-06 23:29:11
496
原创 函数式编程
函数式编程（Functional Programming，简称 FP），通过对面向对象式编程代码的拆分，将各个功能独立出来，从而达到功能独立、易复用等目的。举例：代码转换[‘john-reese’, ‘harold-finch’, ‘sameen-shaw’]转换成 [{ name: 'John Reese'}, { name: 'Harold Finch' }, { name: 'Sameen Shaw' }]对上面代码进行转换。(1)拆分数组中字符串，将
2021-01-06 23:26:33
71
原创 前端规范化
CommonJS 规范、AMD 规范、CMD 规范、ES6 Modules 规范这 4 者都是前端规范化的内容，那么它们之间区别是啥呢？在没有这些之前，我们通过：一个函数就是一个模块。 function fn() {}一个对象就是一个模块。 let obj = new Object({ ... })立即执行函数（IIFE）。 (function() {})()一、CommonJS 规范这之后，就有了 CommonJS 规范，其实 CommonJS 我们见得不少，就是 Node 的
2021-01-06 23:20:44
175
原创 js数据结构与算法之队列结构
一、队列（Queue）指：一种受限的线性表，先进先出（FIFO）。受限之处：它只允许在表的前端进行删除操作，而表的后端进行插入操作。二、队列的应用打印队列有五份文档需要打印, 这些文档会按照次序放入到打印队列中。打印机会依次从队列中取出文档, 优先放入的文档, 优先被取出, 并且对该文档进行打印。以此类推, 直到队列中不再有新的文档。线程队列在开发中, 为了让任务可以并行处理，通常会开启多个线程。但是我们不能让大量的线程同时运行处理任务，占用过多的资源 。这个时候如果有需要开启线
2020-12-12 08:39:51
72
原创 js数据结构与算法之栈结构
一、栈（stack）指：一种受限的线性表，后进先出（LIFO）其限制是仅允许在 表的一端 进行插入和删除运算。这一端被称为栈顶, 相对地, 把另一端称为栈底。LIFO(last in first out) 表示就是后进入的元素, 第一个弹出栈空间.类似于自动餐托盘, 最后放上的托盘, 往往先拿出去使用。向一个栈插入新元素又称作进栈、 入栈或压栈, 它是把新元素放到栈顶元素的上面, 使之成为新的栈顶元素。从一个栈删除元素又称作岀栈或退栈, 它是把栈顶元素删除掉, 使其相邻的元素成为新的栈顶元素。
2020-12-06 14:00:22
710
转载 标准的CSS的盒子模型与低版本IE的盒子模型有什么不同
CSS中盒子模型的组成由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。对于盒子模型，W3C标准和低版本IE浏览器是不一样的，主要区别是内容部分的width和height的定义不同。我们常说的盒子模型一般指W3C标准的盒子模型。下面对此做一个区分：如果一个元素各组成部分如下：margin：10px； border：2px； padding：5px； width：200px；height：100px，那么：W3C标准内容部分的width就单单
2020-11-27 13:22:47
807
原创 HTML中的＜script＞标签
在js学习阶段，一直使用<script>元素，但对它了解较少。看了大家推荐的红宝书之后，学到了许多关于它的知识，收获颇多。本篇文章围绕<script>元素简单讲一下使用、行内脚本与外部脚本等。一、<script>使用两种方式：通过它直接在网页中嵌入JavaScript代码、通过它在网页中包含外部JavaScript文件。直接在网页中嵌入JavaScript代码<script> // 嵌入行内JavaScript代码，直接把代码放在<scr
2020-11-23 18:21:24
1463
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人