- 博客(23)
- 收藏
- 关注
RSS订阅原创 object.defineproperty数据劫持
object.defineproperty()1.定义：该方法是在对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。监听对象下的某一个属性，做数据劫持处理。2.语法：Object.defineProperty(obj, prop, descriptor)（1） 参一：要定义属性的对象。（2） 参二：要定义或修改的属性的名称或 Symbol （被监听的属性）。（3） 参三：要定义或修改的属性描述符（存取描述符：options{getter,setter}）。（4） 返回值：被传递给函
2020-10-15 16:48:05
459
原创 跨域问题
那些年，那些跨域问题浏览器在请求不同域的资源时，会因为同源策略的影响请求不成功，这就是通常被提到的**“跨域问题”**。作为前端开发，解决跨域问题应该是一个被熟练掌握的技能。而随着技术不断的更迭，针对跨域问题的解决也衍生出了多种解决方案。我们通常会根据项目的不同需要，而采取不同的方式。这篇文章，将详细总结跨域问题的相关知识点，以便在遇到相同问题的时候，能有一个清晰的解决思路。跨域问题的产生背景早期为了防止CSRF（跨域请求伪造）的攻击，浏览器引入了同源策略(SOP)来提高安全性。CSRF（Cros
2020-07-17 23:21:31
167
原创 了解XMLHttpRequest
了解XMLHttpRequest前言最近与后端联调，后端问能不能发送get请求时，把请求参数放入请求体中，HTTP GET 请求在请求体中带参数的问题ajax介绍AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。function success(text) { var textarea = document.getElementById('test-res
2020-07-17 23:11:00
191
原创 防抖与节流
节流与防抖节流 Throttling节流限制了一个函数可以在短时间内被调用的次数。可以这样形容：在一毫秒内最多执行此函数 1 次。Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds.”再换句话说：节流会忽略在短时间内高频发生的事件，只按照计划好的频率触发。
2020-07-17 14:03:16
98
原创 回流与重绘
回流和重绘回流和重绘可以说是每一个web开发者都经常听到的两个词语，我也不例外，可是我之前一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享，所以对其进行了一些研究，看了一些博客和书籍，整理了一些内容并且结合一些例子，写了这篇文章，希望可以帮助到大家。浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘，如果大家想直接看如何减少回流和重绘，可以跳到后面。（这个渲染过程来自MDN）从上面这个图上，我们可以看到，浏览器渲染过程如下：解析HTML，生成DOM树，解析CSS
2020-07-17 13:53:36
164
1
原创 Git branch 操作
Git branch 操作创建分支git branch test: 基于当前commit创建test支。.git/HEAD 文件中记录了当前分支名字删除分支git branch -d test：删除本地test分支git branch -D test： test分支还没有合入当前分支，所以要用-D参数才能删掉。git push origin --delete test 删除远程test分支git push origin :test 删除远程test分支查看分支git branch
2020-07-16 22:58:11
540
原创 实施前端微服务化的六七种方式
实施前端微服务化的六七种方式微前端架构是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。由此带来的变化是，这些前端应用可以独立运行、独立开发、独立部署。以及，它们应该可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Tag、Git Submodule 来管理。注意：这里的前端应用指的是前后端分离的单应用页面，在这基础才谈论微前端才有意义。结合我最近半年在微前端方面的实践和研究来看，微前端架构一般
2020-07-16 22:44:44
560
原创 继承与原型链
继承与原型链对于使用过基于类的语言 (如 Java 或 C++) 的开发人员来说，JavaScript 有点令人困惑，因为它是动态的，并且本身不提供一个 class 实现。（在 ES2015/ES6 中引入了 class 关键字，但那只是语法糖，JavaScript 仍然是基于原型的）。当谈到继承时，JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）。该原型对象也有一个自己的原型对象( pr
2020-07-16 22:36:17
107
原创 正则表达式
正则表达式1、什么是正则表达式 正则表达式是一种特殊的字符串模式，用于匹配一组字符串，就好比用模具做产品，而正则就是这个模具，定义一种规则去匹配符合规则的字符。正则使用工具: http://regexper.com正则入门：https://www.jb51.net/tools/zhengze.html2、正则字符简单介绍2.1 元字符介绍"^" ：^会匹配行或者字符串的起始位置，有时还会匹配整个文档的起始位置。**""∗∗："** ："∗∗：会匹配行或字符串的结尾。"\b" :不会消
2020-07-16 22:24:32
97
原创 如何使用Github实现协同工作
如何使用Github实现协同工作（例子：两人合作写代码）Github 可以满足多人协作开发项目的需求。在这里我简单记录一下如何两人合作完成代码。方法一：邀请协同开发这种方法邀请者和被邀请者有几乎相同的权限，被邀请者的push 操作无法被拒绝。邀请者和被邀请者使用同一个repository。首先两个人（userA 和 userB）都需要有各自的github 账号，其中userA 邀请userB 来共同开发， 具体操作步骤如下：第一步：邀请userA 登入GitHub以后可以选择新建一个reposi
2020-07-16 22:08:17
667
原创 Flex 布局
一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: fle
2020-07-09 23:07:04
117
原创 DOM基本操作
DOM基本操作节点的类型：元素节点 1属性节点 2文本节点 3注释节点 8document 9DocumentFragment 11节点的四个属性：nodeName 元素的标签名，以大小写形式表示，只读nodeValue Text节点或Comment(注释)节点的文本内容，可读写nodeType 该节点的类型，只读attribute 节点的属性集合节点的一个方法： Note.hasChildNodes();获取节点document代表整个文档：doc
2020-07-09 22:58:40
112
原创 js闭包
js 之闭包泄漏闭包定义：闭包即一个函数，什么函数呢？就是能访问另一个函数作用域的函数。常用的方式创建闭包的常见方式，就是在一个函数内部创建另一个函数，即函数return返回函数function foo(){ var num =0; return function a(){ num++ console.log('这是一个 闭包',num) } }
2020-07-09 22:24:51
70
原创 JS的编译与执行顺序
浅谈js是如何解析的？js变量使用？前置知识1、代码块 js中的代码块是指由2、声明式函数与赋值式函数 JS中的函数定义分为两种：声明式函数与赋值式函数。声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。 javascript是解释型语言，自然就是编译一行，执行一行。js运行过程分为三步：1、语法分析 2、预编译 3、解释执行。预编译期JS会对本代码块中的所有声明的变量和函数进行处理（类似与C语言的编译），但需要注意的是此.
2020-07-06 23:19:18
1108
原创 BFC(块级格式化上下文)布局特性
BFC(块级格式化上下文)？块级格式化上下文就相当于页面上一个独立的容器，容器里面子元素的变化不会影响到外面元素的排列。包括浮动外边距合并等等。这个特性的出现使我们的 页面布局不会出现意外情况了。如何创建BFC?1 根元素(<html>)2 元素的display属性设置为 block table list-item inline-block inline-flex table-cell table-caption flex。3 float不为none。4 postion为abso
2020-07-06 23:01:21
254
原创 作用域、作用域链与执行上下文栈入门了解
作用域、作用域链与执行上下文栈入门前置知识变量对象（Variable Object）用来放这个执行上下文中可被访问 但是不能被delete的函数、标示符、形参等等。活动对象（active Object）活动对象就是作用域链上正在被执行和引用的变量对象。执行上下文当执行到一个函数时，就会进行一个准备工作，这里的准备工作用专业名词将就是执行上下文，（准备工作包括在执行栈中产生一个变量对象，这个执行对象我们并不可以直接使用，它包括变量对象，this ,作用域链）执行上下文栈我们写的函数多了去了
2020-07-06 21:22:29
250
原创 从js数据类型到 js深拷贝与浅拷贝讲解
从js数据类型到 js深拷贝与浅拷贝一、JS的基本数据类型数据类型基本数据类型String， Boolean，Number，Undefined，Null引用数据类型Object(Array，Date，RegExp，Function)保存位置不同基本数据类型保存在栈中引用数据类型保存在堆内存中，在栈内存中保存了一个对堆内存中实际对象的引用，即数据在堆内存中的地址，JS对引用数据类型的操作都是操作对象的引用而不是实际的对象，如果obj1拷贝了obj2，那么这两个引用数据类型
2020-06-29 13:47:39
149
原创 浅谈js是如何解析的？js变量使用？
浅谈js是如何解析的？js变量使用？ javascript是解释型语言，自然就是编译一行，执行一行。js运行过程分为三步：1、语法分析 2、预编译 3、解释执行一、语言分析 JS 会对全部的脚本代码进行解析，通过jS引擎检查你的代码是否存在错误，如果有格式错误就会抛出一个错误；否者语言分析完成。二、预编译 全局创建 1、创建GO空对象 2、变量声明提升 赋值undefined 3、函数声明提升 并把函数体赋值当有函数执行时：编译函数方法体 局部作用域
2020-06-29 13:01:12
435
原创 js函数声明
定义函数函数声明一个函数定义（也称为函数声明，或函数语句）由一系列的function关键字组成，依次为：函数的名称。函数参数列表，包围在括号中并由逗号分隔。定义函数的 JavaScript 语句，用大括号{}括起来。例如，以下的代码定义了一个简单的square函数：function square(number) { return number * number;}函数square使用了一个参数，叫作number。这个函数只有一个语句，它说明该函数将函数的参数（即number）自乘
2020-06-23 22:10:05
279
原创 JavaScript运算符
JavaScript运算符有哪些？JavaScript中的运算符有很多，主要分为算术运算符，等同全同运算符，比较运算符，字符串运算符，逻辑运算符，赋值运算符等。这些运算符都有一些属于自己的运算规则，下面就为大家介绍一下JavaScript中的运算符。一、JavaScript运算符的种类1、算术运算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、 ++ 、 –2、等同全同运算符：== 、 =、 ! 、 !===3、比较运算符：< 、 > 、 <= 、 >=4、字
2020-06-22 18:49:38
234
原创 浏览器兼容性
浏览器兼容性内容提纲常见的browserhacks解决方案1-- 浏览器css样式初始化解决方案2-- 浏览器私有属性解决方案3-- css hack解决方案4-- 自动化插件[slide] {:.flexbox.vleft}常见的browserhacks[slide] {:.flexbox.vleft}解决方案1-- 浏览器css样式初始化由于每个浏览器的css默认样式不尽相同，所以最简单有效的方式就是对其进行初始化，相信很多朋友都写过这样的代码，在所有CSS开始前，先把mar
2020-06-09 21:59:08
903
2
原创 web布局
web布局一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。2、设计方法：**PC：**居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向
2020-06-09 21:51:01
384
原创 css适配iphoneX
css适配iphoneX前言iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。以下是处理前后效果图：前置知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如
2020-06-08 19:48:44
617
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人