前端
文章平均质量分 72
xiao xu
前端开发
展开
-
Cookie
文章目录概述Cookie的属性Expires、Max-AgeDomain、PathSecure、HttpOnlydocument.cookieCookie与http协议http response 生成cookiehttp request 发送cookie概述Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie的大小一般不能超过4KB。浏览器每次向服务器发出请求,就会自动附上这段信息。Cookie主要用来分辨两个请求是否来自同一客户端,以及用来保存一些状态信息。不推荐使用Coo原创 2021-10-10 15:29:07 · 261 阅读 · 0 评论 -
stopPropagation与stopImmediatePropagation的区别
stopPropagationevent.stopPropagation();阻止事件冒泡。stopImmediatePropagationevent.stopImmediatePropagation(); 阻止事件冒泡并且阻止该元素上同事件类型的监听器被触发。例如:没有阻止事件冒泡:import React, { Component } from 'react';export d...原创 2020-03-01 14:22:20 · 10895 阅读 · 1 评论 -
style-loader、mini-css-extract-plugin的区别
webpack初入门时强调处理css文件时一定要使用style-loader,使用loader的顺序为:[“style-loader”, “css-loader”, “sass-loader”],webpack调用loader是从右往左的,先使用sass-loader将.less或.scss文件转换成css,再使用css-loader加载css文件,最后使用style-loader将css-lo...原创 2019-12-28 19:26:11 · 4458 阅读 · 2 评论 -
继承
文章目录4.1 为什么需要继承4.2 类式继承4.2.1 原型链4.2.2 extend函数4.3 原型式继承4.3.1 对继承而来的成员的读和写的不对等性4.3.2 clone函数4.4 类式继承和原型链继承的对比4.5 继承与封装4.6 掺元类4.7 示例:就地编辑4.7.1 类式继承解决方案4.7.2 原型式继承解决方案4.7.3 掺元类解决方案4.8 继承的适用场合4.9 小结在Jav...原创 2019-12-01 15:15:15 · 1209 阅读 · 1 评论 -
TypeScript
文章目录变量声明基本类型变量声明TypeScript支持var、let、const声明变量,我们知道,JavaScript是弱类型语言,声明变量时不指定变量的数据类型,可以给变量赋予任何数据类型的值,TypeScript与JavaScript不同的是在使用var、let、const声明变量时,可以指定变量的基本类型(当然也可以不指定)。例如:var a:number;a = 123;le...原创 2019-11-28 00:03:02 · 475 阅读 · 0 评论 -
nginx从零开始配置
文章目录Nginx介绍Nginx环境准备配置文件Nginx启动、停止自定义错误页访问控制虚拟主机设置基于端口号基于域名基于ip反向代理设置适配PC或移动设备Gzip压缩配置也入门前端挺久的了,但一直对Nginx的理解比较模糊,每次需要的时候就去百度如何配置,学习比较零散,本周末终于奋起看了一个非常系统的教程技术胖的博客,里面有非常详细的视频教程,而且免费!!!非常感谢技术胖的技术分享。Ngin...原创 2019-11-17 16:56:19 · 393 阅读 · 0 评论 -
Object.assign是浅拷贝
一直以为Object.assign是深拷贝原创 2019-11-06 20:43:47 · 489 阅读 · 0 评论 -
关于window.getSelection
文章目录selection对象术语属性方法window.getSelection(),返回一个Selection对象,表示用户选择的文本范围或光标的当前位置。selection对象先来看下面两个selection结果:selection对象一:selection对象二:很奇怪,为什么同样选中一段文字,为什么selection对象的属性会不一样呢?那就需要明确一下Selection...原创 2018-12-08 19:20:56 · 32066 阅读 · 1 评论 -
nodejs--process对象
文章目录前言process对象前言相信前端开发的同学看到下面这些命令都会很熟悉吧:npm startnpm build...这其实是执行了start脚本,build脚本,在项目代码中我们也可以看到这些脚本的代码下面是我的项目中的start脚本'use strict';const path = require('path');const fs = require('fs');...原创 2018-11-19 20:36:21 · 2627 阅读 · 0 评论 -
dangerouslySetInnerHTML
将HTML字符串解析为html样式显示在table的扩展中。使用如下:其中必须将要渲染的字段变为 var html = {__html:description} 形式 。参照react官方文档例子:调用remarkable 的库,实时转换渲染 <textarea> 里的内容。class MarkdownEditor extends React.Component { co...原创 2018-11-17 10:02:03 · 2248 阅读 · 0 评论 -
封装和信息隐藏
文章目录3.1 信息隐藏原则3.1.1 封装与信息隐藏3.1.2 接口扮演的角色3.2 创建对象的基本模式3.2.1 门户大开型对象3.2.2 用命名规范区别私用成员3.2.3 作用域、嵌套函数和闭包3.2.4 用闭包实现私用成员3.3 更多高级对象创建模式3.3.1 静态方法和属性3.3.2 常量3.3.3 单体和对象工厂3.4 封装之利3.5 封装之弊3.6 小结为对象创建私用成员是任何面...原创 2018-11-08 19:45:24 · 6697 阅读 · 0 评论 -
接口
文章目录2.1 什么是接口2.1.1 接口之利2.1.1 接口之弊2.2 其他面向对象语言处理接口的方式2.3 在JavaScript中模仿接口2.3.1 用注释描述接口2.3.2 用属性检查模仿接口2.3.3 用鸭式辨型模仿接口2.4 本书采用的接口实现方式2.5 Interface类2.5.1 Interface类的使用场合2.5.2 Interface类的用法2.5.3 示例:使用Inter...原创 2018-11-07 10:03:43 · 488 阅读 · 0 评论 -
伪类和伪元素的区别
文章目录前言伪类伪元素区别前言在CSS1和CSS2中对伪类和伪元素没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。伪类伪类用于选择DOM树之外的信息,包含那些 匹配指定状态的元素 ,比如:visited,:active;或是 不能用简单选择器进行...原创 2018-12-08 19:21:29 · 6860 阅读 · 1 评论 -
div模拟input的placeholder属性
今天有做到这么一个需求,一个div输入框,它模拟input输入框,并且也模拟input输入框的placeholder属性,但是现在这个placeholder属性值并不是唯一确定不变的。这个div输入框其实是一个类似微信朋友圈的回复输入框一样,当输入为空的时候,要显示给用户 @了谁,所以这个placeholder的内容是会变化的。在网上查了几种方式,使用js操作代价太大,行内css又不支持伪类,...原创 2018-12-03 20:42:32 · 1378 阅读 · 0 评论 -
前端笔试题
是先捕获还是先冒泡? post 和get的提交有没有长度限制?function A(){}A.prototype.logB=function(){console.log('B');}function B(){}//your codevar b=new B();b.logB();//'B'A. B.prototype=A.prototype B. B.prototy...原创 2018-09-20 17:29:05 · 4104 阅读 · 1 评论 -
require.ensure:代码分割、按需加载
文章目录语法:dependenciescallbackchunkNamewebpack在编译时,会静态地解析代码中的require.ensure(),同时将模块添加到一个分开的chunk中,这个新的chunk会被webpack通过jsonp来按需加载。语法:require.ensure( [dependencies1, dependencies2], callback: functio...原创 2019-09-12 17:01:31 · 420 阅读 · 0 评论 -
YAML语言教程
文章目录YAML是什么YAML基础语法规则YAML例子说明YAML是什么YAML是专门用来写配置文件的语言,非常简介强大,远比JSON格式方便。YAML基础语法规则大小写敏感空格缩进表示层级关系,不允许使用tab缩进空格数目不重要,相同层级的元素左侧对其即可#表示注释,而json不允许有注释支持三种数据结构:对象、数组、纯量(单个的不可再分的值)数组以一组“-”开头的行...原创 2019-09-12 14:36:56 · 221 阅读 · 0 评论 -
js监听页面元素变化window.MutationObserver
相信前端开发同学都熟悉各种各样的监听事件,比如元素点击事件onClick,鼠标事件onMouseDown、onMouseHover,键盘按键onKeyDown,浏览器窗口改变事件onResize等等。那我们如何监听页面某个元素的属性变化呢?window.MutationObserver(callback)该接口用来观察节点变化,MutationObserver是一个构造器,接收一个回调函数c...原创 2019-08-20 23:30:10 · 14791 阅读 · 0 评论 -
如何将clone下来的项目添加到自己的远程仓库
最近入职新公司在培训阶段,需要把培训需要开发的demo复制到自己的仓库,总结一下步骤:clone你需要的项目:git clone 代码地址进入项目目录:cd app-demo删除原有git信息,有问题一直回车即可rm -r .git初始化.git:git init将本地代码添加到仓库git add .git commit -m “说明…”...原创 2019-07-26 15:39:54 · 5553 阅读 · 3 评论 -
iframe跨域通信方法详解window.postMessage
文章目录window.postMessage()用法实例今天接到个需求,A页面中要嵌入一个iframe,这个iframe是B页面,此时A页面需要得到B页面的一些信息。window.postMessage()我们都知道浏览器的同源策略,即对于两个不同页面的脚本,只有当他们的页面具有相同的协议,端口号和主机(document.domain)时,两个脚本才能互相通信。window.postMes...原创 2019-08-03 14:15:57 · 7705 阅读 · 3 评论 -
JavaScript中window对象的函数btoa和atob
前言atob和btoa是window对象的两个函数,用来编码解码Base64。有关Base64的编码解码规则可参考我的博客:js实现基于Base64的编码及解码btoabinary to ascii,用于将binary数据用ascii码表示。常用于编码字符串。var str = &quot;This is a string&quot;;var encoded_str = btoa(str);consol...原创 2019-03-12 16:34:07 · 8376 阅读 · 0 评论 -
《JavaScript设计模式》谢廷晟 译
文章目录单体模式工厂模式内置工厂对象迭代器模式装饰者模式策略模式外观模式代理模式中介者模式观察者模式单体模式单体模式思想在于保证一个特定类仅有一个实例,意味着当你第二次使用同一个类创建新对象时,应得到和第一次创建对象完全相同。工厂模式工厂模式是为了创建对象内置工厂对象Object()构造函数即为内置工厂对象。迭代器模式有一个包含某种数据集合的对象,该数据可能存储在一个复杂数据结构内...原创 2018-11-04 15:04:26 · 681 阅读 · 0 评论 -
富有表现力的JavaScript
文章目录1.1 JavaScript的灵活性1.2 弱类型语言1.3 函数是一等对象1.4 对象的易变性1.5 继承1.6 JavaScript中的设计模式1.7 小结本章将探讨一些令JavaScript如此富有表现力的特性。从中你可以体会到,这种语言允许你用各种方式完成同样的任务,还允许你在面向对象编程的过程中借用函数式编程中的概念来丰富其实现方式。本章揭示了究竟为什么应该使用设计模式,以...原创 2018-11-04 15:01:39 · 595 阅读 · 0 评论 -
JavaScript实现各种排序算法
插入排序function insertSort(arr){ for(var i=1;i&amp;amp;lt;arr.length;i++){ var temp=arr[i]; for(var j=i-1;j&amp;amp;gt;=0;j--){ if(temp&amp;amp;lt;...原创 2018-09-22 20:43:58 · 443 阅读 · 0 评论 -
详解CSS——display各个属性值(带例子)
各个属性详解原创 2018-09-21 23:42:19 · 10714 阅读 · 0 评论 -
HEAD detached from XXX
今天提交代码时不知道做了什么,使用git status查看状态时提示:HEAD detached from XXX这是HEAD处于游离状态了了,解决方案如下:创建一个新分支,并切换到该分支,将当前代码提交到该分支git branch tempgit checkout tempgit add .git commit -m &quot;[xiaoxu][网络请求修改+代码bug修复]&quot;git ...原创 2018-10-11 16:38:37 · 8758 阅读 · 1 评论 -
找出数组中移除的数与重复的数
题目描述:数组arr为一乱序数组,但排序后是[1,2,3,4,5,…,n-1,n];从其中随机取出一个数,再随机将其中的一个数重复,数组大小还是为n,请设计一个O(n)的算法,找出取出的数与移除的数。例如:输入:6 4 5 1 5 3输出:2(移除的数),5(重复的数)思路:如果先将数组排序的话,可以很容易的找到了,可是排序算法时间复杂度最低为O(nlogn),不符合题目的O(n...原创 2018-09-21 10:30:38 · 361 阅读 · 0 评论 -
将网页的dom节点转换成img并下载下来
这里需要用到一个依赖html2canvas,使用npm安装即可:npm install html2canvas --save-dev然后在页面中引入即可使用。利用了a标签的下载功能 dom保存为img的代码如下 function saveAsImg() { // 先获取你要转换为img的dom节点 var node = document.getEleme...原创 2018-09-14 16:07:09 · 1784 阅读 · 1 评论 -
深入理解BFC
分别都介绍一下原创 2018-09-19 15:20:20 · 900 阅读 · 0 评论 -
null和undefined的区别
test原创 2018-09-08 23:04:28 · 684 阅读 · 0 评论 -
JavaScript中的==与===
先来看看这个会输出什么?[12]==12;这里大家可以先思考一下是返回false,还是true。其实这是个很简单的问题,只是不太了解“==”和“===”的比较规则,所以就比较懵。“==” 的比较规则先检查两个操作数的数据类型是否相同如果相同,则比较两个数是否相等如果不同,则先将两个数转换为相同数据类型,再进行比较上几个例子: 这里可以看到,数字型的 1 竟...原创 2018-09-08 17:04:14 · 16849 阅读 · 1 评论 -
call、apply、bind区别
分析《笔试题》最后一题原创 2018-10-18 14:38:01 · 651 阅读 · 0 评论 -
深入理解setTimeout
文章目录什么是setTimeout?今天认认真真的去了解了一下setTimeout之后,我才发现,我以前可能对setTimeout有什么误解…什么是setTimeout?setTimeout(fun,time);//fun为一个函数,time为等待的时间。等待time时间后,把要执行的任务(fun)加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太...原创 2018-10-08 20:11:26 · 681 阅读 · 0 评论 -
移动端Web基础--Viewport
文章目录移动端的三个视口布局视口视觉视口理想视口要想深刻理解Viewport,需知道像素的有关知识。大家可以参照我前面总结的关于像素的博客:移动端Web基础–像素我们常常会看到这样一个标签&amp;amp;amp;lt;meta name=&amp;amp;quot;viewport&amp;amp;quot; content=&amp;amp;quot;width=device-width, initial-scale=1.0, m原创 2018-11-02 10:46:48 · 1180 阅读 · 0 评论 -
移动端Web基础--像素
文章目录设备像素物理像素独立像素像素密度(PPI)Retina设备像素对于设备来说,有两个设备像素:物理像素、独立像素。物理像素也可以称为屏幕分辨率,指设备屏幕上的显示的最小单元。比如iPhone 6 的屏幕分辨率为750像素*1334像素,表示在宽度上,有750个像素点,高度上有1334个像素点。可通过此链接查询设备物理像素。独立像素又称为CSS像素,这是一个抽象的概念,指的是W...原创 2018-11-01 10:30:24 · 498 阅读 · 0 评论 -
为什么JavaScript是单线程的?
单线程原创 2018-10-24 10:04:50 · 1319 阅读 · 0 评论 -
如何解决行内元素换行符产生的间隙
行内元素之间如果有换行,那么两个元素显示在一行的时候,会有一个间隙&amp;amp;lt;!DOCTYPE html&amp;amp;gt;&amp;amp;lt;html&amp;amp;gt;&amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&amp;amp;gt;&amp;amp;lt;/title&a原创 2018-10-20 21:28:42 · 1349 阅读 · 0 评论 -
src与href的区别
文章目录hrefsrchrefhref(Hypertext Reference)超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。例如:&amp;amp;amp;lt;link href=&amp;amp;quot;reset.css&amp;amp;quot; rel=”stylesheet“/&amp;amp;amp;gt;浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理。这也是建议原创 2018-10-20 15:56:42 · 213 阅读 · 0 评论 -
link与@import的区别
两者都是外部引入CSS的方式,那么二者有什么区别呢?@import是CSS提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS,rel连接属性等;加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载;link标签作为HTML元素,不存在兼容性问题,而@import是CSS2.1才有的语法,故老版...原创 2018-10-20 15:53:42 · 9657 阅读 · 0 评论 -
纯CSS实现垂直居中
CSS垂直居中的方法原创 2018-10-22 23:31:30 · 376 阅读 · 0 评论