关注
分享
广积粮缓称王
读书使人充实，思考使人深邃，交谈使人清醒。
展开
-
前端安全配置之Content-Security-Policy(csp)
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源...转载 2021-02-04 18:41:51 · 3838 阅读 · 0 评论 -
js判断url链接是否可访问（服务可连接,可用）
electron 项目中通过loadURL() 方法加载用户输入的url服务，但是electron不管该url服务是否可用都会加载执行，所以需要在用户输入url后对该url进行可用性判断，记录一下解决方案：解决方案一: XMLHTTP方案 function getURL(url) { function getXmlHttpRequest() { if (window.XMLHttpRequest) { return new XMLHttpR.原创 2021-02-01 18:34:12 · 9937 阅读 · 1 评论 -
行内元素和块级元素的区别，为何img、input等行内元素可以设置宽高??（夯实基础）
我们习惯将html中元素分类为行内元素和块级元素，如下：·常见块级元素有：html、body、div、header、footer、nav、section、aside、article、p、hr、h1~h6、ul、ol、dl、form、table、tbody、thead、tfoot、tr等；·常见行内元素有：span、a、img、textarea、button、input、br、label、selec...原创 2018-07-16 14:19:42 · 9547 阅读 · 2 评论 -
绘制扇形的多种方式，包括border-radius、clip裁剪显示、canvas原点变换等方式的详细理解及demo
对clip的理解：clip是对使用了该样式的元素进行裁剪显示。使用方法是rect (top, right, bottom, left) 其中参数top代表显示的区域上边界离该元素顶部border-top相对距离，依此分别是右边界离该元素左侧border-left相对距离。参数top和left取值auto时候代表是取值0，bottom和right取值auto时候代表取值100%；注意：clip属性只...原创 2018-07-03 10:47:10 · 4199 阅读 · 0 评论 -
关于web前端性能优化总结
1、从DOM结构和标签上来优化·使用语义化的标签，代码清晰简洁；·减少Dom节点，增加渲染速度；·使用W3C标准书写闭合小写的标签；·给图片和table指定宽高，避免缩放；·防止src和href值为空，当为空时，浏览器会把当前页面当做属性值重新加载；·css在头部位置，js在body底部位置； 2、从CSS样式上来优化·使用link加载样式而不是@import（是css2提供的一种方式，不兼容，只...原创 2018-06-18 23:03:19 · 6542 阅读 · 0 评论 -
浏览器tab标签显示网站标志图标
对于不同的浏览器，方法是有差别的1.对于IE或TT浏览器：把需要显示的16x16像素的ICO图标命名为favicon.ICO放置在网站根目录下，浏览器会自动检索2.这大概是所有浏览器通用的在标签页加入指定图标的方法：把favicon.ico图标放到网站根目录下，在网页的<head></head>中加入<link rel="shortcut icon" h...转载 2018-06-18 22:48:25 · 2340 阅读 · 0 评论 -
详解var、let、const关键词声明变量的区别，以及变量提升、块级作用域的认识等。
首先回顾一下JavaScript中var声明变量的基础知识：• 在使用var关键词声明变量时，变量在函数外则是全局变量，有全局作用域，全局变量在页面关闭后销毁；变量在函数内则是局部变量，作用局部作用域（变量只能在该函数内有效，函数执行完将自动销毁）• 我们使用var来创建变量，声明后未赋值的变量输出会提示 “undefined”。在方法函数外声明的变量未使用var ，会报错“x is not de...原创 2018-06-18 20:11:47 · 6249 阅读 · 0 评论 -
JS闭包的简单理解。优缺点以及垃圾回收机制
闭包是什么？·了解闭包首先了解js的‘链式作用域’结构，对象可以一级一级的向上查找父对象的变量，所以父对象的变量对子对象可见，反之不成立；所以都可以访问全局变量·为了解决函数外部无法访问函数内局部变量的问题，就在父函数中定义一个子函数并让它访问了父函数的局部变量，再通过父函数返回该子函数就实现了调用局部变量的效果；·而上面中的子函数就是闭包，所以闭包的定义是“能够读取其他函数内部变量的函数”，其实...原创 2018-06-18 13:21:19 · 3221 阅读 · 0 评论 -
理解JavaScript中this的指向详解
this的定义和理解：this是JavaScript语言的一个关键字，它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内使用。 1、this和执行环境对象有关，和函数的声明无关。 var name="Tom"; var Bob={ name:'Bob', show:function(){ console.log...原创 2018-12-12 17:14:01 · 335 阅读 · 0 评论 -
深入理解call、apply、bind（改变函数中的this指向）
在JavaScript中call、apply、bind是Function 对象自带的三个方法，这三个方法的主要作用是改变函数中的 this 指向，从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解，并列出几个经典应用场景。 区分：1、call(object,arg1,arg2) ，call方法的第一个参数是函数中this重新指向的对象，剩下的参数是传入该函数的形参不传...原创 2018-12-13 17:47:31 · 7747 阅读 · 0 评论 -
隐藏浏览器滚动条但内容可以滚动的3种解决方式（简单清晰）
第一种：使用纯css样式属性隐藏滚动条 ：火狐浏览器的css写法不兼容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2018-12-05 10:36:29 · 18706 阅读 · 2 评论 -
null、undefined、NaN区分解析和条件判定，以及在IF条件中的判定
NaN的理解和用法：NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。Number.NaN 是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字。通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错...原创 2018-11-26 22:20:17 · 3817 阅读 · 0 评论 -
Chorme控制台console的用法；
前提：是谷歌浏览器！IE8- 不支持console.log();会报错，解决如下：(function (){ //创建空console对象，避免JS报错 if(!window.console) window.console = {}; var console = windo...原创 2018-11-24 15:45:53 · 532 阅读 · 0 评论 -
js遍历对象、遍历数组、js数组方法大全、区分map()和forEach()以及filter()、区分for...in...和for...of...
1、给对象添加属性：使用 object.prop 或object['prop'] 给对象添加属性 let obj={}; obj.name="zhangsan"; obj["age"]=23; obj["class"]="语文"; console.log(obj); //输出：{name: "zhangsan", age: 23, class: "语文"}2、删除对原创 2018-10-27 17:16:09 · 1044 阅读 · 0 评论 -
单行文字、多行文字溢出时省略号表示的多种解决方式；调整字符间距；段落首字母大写缩进效果；
文本溢出省略号表示的实现效果：1、解决单行文字溢出：解决方式：在文字容器样式中添加 overflow:hidden; text-overflow:ellipsis; white-space: nowrap; 其中overflow:hidden;是在超出元素宽度范围时候不使用滚动条，text-overflow:ellipsis;表示在文本溢出时候使用省略号表示，white-spac...原创 2018-10-09 16:24:44 · 2589 阅读 · 0 评论 -
常用html字符的转义字符串（html代码），全部转义字符备用
转义字符串，即字符实体（Character Entity）分成三部分： 第一部分是一个&符号； 第二部分是实体（Entity）名字或者是#加上实体（Entity）编号； 第三部分是一个分号（;）。注意：用实体（Entity）名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器...原创 2018-10-08 17:14:08 · 6731 阅读 · 0 评论 -
CSS文字或元素的水平垂直居中多种方式（简单明了）
前言：水平居中，我们可以很容易想到使用text-align实现文字水平居中，使用margin:0px auto;可以实现元素水平居中；所以重点将是怎么实现文字和元素的垂直居中？？ --- 本文将通过举栗子说明各种解决方式： 首先，单行文字、多行文字怎么水平垂直居中？？ ① 方案一：文本水平居中使用text-align:center即可，height设置和line-height一...原创 2018-07-19 10:14:53 · 757 阅读 · 1 评论 -
nodejs 安装后 npm-v 无效，node全局环境配置
Nodejs安装后使用 npm -v 命令无效果，解决办法是需要删除C:\Users\{账户}\下的.npmrc文件....，注意不是删除安装文件下的.npmrc文件.安装nodejs后的环境配置：说明：这里的环境配置主要配置的是npm安装的全局模块所在的路径，以及缓存cache的路径，之所以要配置，是因为以后在执行类似：npm install express [-g] （后面...原创 2019-05-19 13:53:37 · 21002 阅读 · 5 评论 -
css宽高自适应布局，实现Sticky Footer的三种布局方式
宽度自适应布局：1、使用场景：一侧（左侧或者右侧）为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小。这种布局结构可用于顶层布局结构亦可用于某个局部功能块，常见于各种web系统（OA系统，ERP系统）等。常见的有两列布局或者三列布局（甚至是多列布局）。2、实现原理：以两列布局为例，一侧固定宽float浮动，另一侧不浮动并使用margin属性给浮动层留...原创 2019-04-21 15:50:17 · 1027 阅读 · 0 评论 -
flex弹性布局笔记
学习自菜鸟教程的flex布局笔记布局的传统解决方案，基于盒装模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。简介：W3C提出了一种新的方案—-Flex布局，是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。可以简便、完整、响应式地实现各种页面布局。对...原创 2019-04-20 13:24:10 · 319 阅读 · 0 评论 -
笔记：区分文件头lang=”zh”和lang=”zh-cn”的使用？？
单一的 zh 和 zh-CN 均属于废弃用法。zh现在不是语言code了，而是macrolang，能作为语言code的是cmn（国语）、yue（粤语）、wuu（吴语）等。zh-CN 的问题还在于，其实多数情况下标记的是简体中文，但是不恰当的使用了地区，这导致同样用简体中文的 zh-SG（新加坡）等无法匹配。更典型的是 zh-TW 和 zh-HK。所以其实应该使用 zh-Hans / zh-Ha...原创 2019-04-16 16:27:19 · 2428 阅读 · 0 评论 -
websocket 学习--简单使用，nodejs搭建websocket服务器，到模拟股票，到实现聊天室
websocket简介：WebSocket协议是HTML5 开始提供的一种基于TCP的一种新的全双工通讯的网络通讯协议。它允许服务器主动发送信息给客户端。和http协议的不同？？HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起，服务端对请求做出应答处理。这种通信模型有一个弊端：HTTP 协议无法实现服务器主动向客户...原创 2019-04-16 15:59:29 · 5930 阅读 · 0 评论 -
js属性对象的hasOwnProperty方法
IE 5.5+、FireFox、Chrome、Safari、Opera等主流浏览器均支持该函数。Object的hasOwnProperty()方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。可以用于区分自身属性和继承属性，如下function foo() { this.name = 'foo' this.sayHi = function () { co...原创 2019-04-15 10:57:58 · 525 阅读 · 0 评论 -
形参和实参是什么？？ shim和polyfil是什么意思？？
形参和实参是什么？？实参(argument)： 全称为"实际参数"是在调用时传递给函数的参数. 实参可以是常量、变量、表达式、函数等， 无论实参是何种类型的量，在进行函数调用时，它们都必须具有确定的值， 以便把这些值传送给形参。 因此应预先用赋值，输入等办法使实参获得确定值。 形参(parameter)：全称为"形式参数" 由于它不是实际存在变量，所以又称虚拟变量。是在...原创 2018-12-13 23:24:07 · 1252 阅读 · 0 评论 -
mockjs语法规范、设置mockjs拦截响应时间、Mock.Random占位符生成随机数据
首先回顾vue-cli项目中使用mockjs步骤：1、安装mockjs、axios（http请求库）；cnpm install mockjs axios --save2、在项目中新建一个mock.js文件，用于定义接口返回的数据；const Mock = require('mockjs') // 获取mock对象const Random = Mock.Random //...原创 2019-08-20 11:27:19 · 7287 阅读 · 0 评论 -
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局，首先简单了解一下固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)和相应的使用技巧？固定布局(fixed layout)固定布局，例如豆瓣网，无论如何change浏览器的宽度，页面主体区域的宽度是固定不变了，里面的内容布局也是打死不动的；利任...原创 2019-07-14 11:33:40 · 4916 阅读 · 0 评论 -
浅谈Normalize.css
转载自简书：https://www.jianshu.com/p/3d21d1932aa0Normalize.css只是一个很小的css文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的css reset，Normalize.css是一种现代的，为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap，HTML5 Boi...转载 2019-07-13 23:16:29 · 203 阅读 · 0 评论 -
CSS3 @media媒体查询 适配不同尺寸设备的响应式布局（清晰详解）
随着宽屏的不断普及，CSS3出现了@media媒体查询技术一、了解@Media 相关知识1、了解Media QueriesMedia Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。其原理就是允许添加表达式用以媒体查询（包括媒体类型和媒体特性），以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@medi...原创 2019-07-13 23:04:53 · 36405 阅读 · 0 评论 -
px、em、rem区别介绍
PXpx像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。PX特点1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。EMem是相对长度单位。相对于当前对象内文本的字体...原创 2019-07-11 17:15:41 · 177 阅读 · 1 评论 -
浏览器兼容video视频播放的多种方法
前言：在 HTML 中播放视频并不容易！因为直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 比如windows平台的IE浏览器利用Activex控件来播放flash而其它的浏览器则使用Netscape插件技术来播放flash。而在HTML5 中规定了一种通过 video 元素来包含视频的标准方法，...原创 2019-07-11 14:42:46 · 30438 阅读 · 0 评论 -
常用MIME类型，解决IIS布署后字体文件、mp4视频文件等not found 的错误
前言：项目在本地运行正常，但部署在IIS服务器后使用浏览器访问项目会报：404 not found 错误，包括mp4视频文件和woff文件找不到。。如下原因：在IIS中没有将 .mp4和 .woff 后缀的相应的MIME类型，使得 .mp4等格式文件在IIS服务器上无法识别。什么是MIME？MIME(Multipurpose Internet Mail Extensions)...原创 2019-07-02 15:59:54 · 2539 阅读 · 0 评论 -
让IE6\7\8支持Html5和CSS3的各类JS和Htc归纳（html5shiv.js、respond.js、background-size.htc、ie-css3.htc、pie.htc等）
前言：由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个：1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是...原创 2019-07-03 16:50:19 · 1111 阅读 · 0 评论 -
伪类::selection自定义文本选中时的样式（CSS3样式），CSS3的word-break单次换行
1、::selection CSS3伪类自定义文本选中时的样式有的人在浏览网页时，喜欢一边选中文本一边阅读。在windows环境下，正常的文本选中应该是深蓝色背景白色文本的样式。那么想要修改文本选中样式，可以通过css中有这样的一个伪类::selection用于自定义文本选中时的样式设置。::selection 选择器匹配被用户选取的文本内容。只能向 ::selection 选择器应...原创 2019-07-12 10:18:38 · 942 阅读 · 0 评论 -
js基础中Null、undefined、NaN、false、0、{}的理解及使用
数据类型：值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。引用数据类型：对象(Object)、数组(Array)、函数(Function)。JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。注：Symbol 是 ES6 引入了一种新的原始数据类型...原创 2019-11-12 14:02:53 · 3673 阅读 · 0 评论 -
阮一峰的JavaScript 的 this 原理
一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。var obj = { foo: function () {}};var foo = obj.foo;// 写法一obj.foo()// 写法二foo()上面代码中，虽然obj.foo和foo指向同一个函数，但是执行结果可能不一样。请看下面的例子。...转载 2019-11-01 10:53:58 · 1030 阅读 · 0 评论 -
阮一峰的学习Javascript闭包（Closure）
闭包（closure）是Javascript语言的一个难点，也是它的特色，很多高级应用都要依靠闭包实现。下面就是我的学习笔记，对于Javascript初学者应该是很有用的。一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 v...转载 2019-11-01 10:45:23 · 695 阅读 · 0 评论 -
学习阮一峰Javascript模块化编程，requireJS使用
使用背景NOW：网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式。项目需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑，而项目业务逻辑是包含许多特定功能的模块组合而成，理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块...转载 2019-10-30 16:05:07 · 1259 阅读 · 0 评论 -
JS中的prototype、__proto__与constructor，原型和原型链
理解原型的几个关键点：1、所有的引用类型（数组、函数、对象）可以自由扩展属性（除null以外）;2、所有的引用类型（对象）都有一个’_ _ proto_ _'属性(也叫隐式原型，它是一个普通的对象)，指向原型对象；3、所有的函数都有一个’prototype’属性(这也叫显式原型，它也是一个普通的对象，该对象就是函数的原型对象，对象中包含所有实例对象可以共享的属性和方法)。’protot...转载 2019-09-15 10:54:59 · 241 阅读 · 1 评论 -
转：javascript方法--bind()
javascript方法--bind()bind方法，顾名思义，就是绑定的意思，到底是怎么绑定然后怎么用呢，下面就来说说我对这个方法的理解。语法fun.bind(this,arg1,arg2,...)bind()方法会创建一个新的函数，称为绑定函数,fun方法在this环境下调用该方法可传入两个参数，第一个参数作为this作用域，可以理解为让fun函数在this作用域下运...转载 2019-08-28 23:41:18 · 130 阅读 · 0 评论 -
JS中使用bignumber处理高精度小数运算
项目开发中发现精度丢失的问题，如0.1+0.2 = 0.30000000000000004的问题解决方式：引用bignumber.js用于数字精度要求较高的计算。1、安装或引用： 下载地址：https://github.com/MikeMcl/bignumber.js/releases 或 npm install bignumber.js --save 命令安装后使用import BigNumber from 'bignumber.js' 引用 ...原创 2021-01-22 13:57:49 · 12839 阅读 · 1 评论