- 博客(193)
- 收藏
- 关注
RSS订阅转载 vscode sass
https://blog.csdn.net/weixin_43834227/article/details/106057473live sass compiler 插件可实时自动将sass解析成css,同时可以自动添加css 兼容性前缀，-webkit-,-moz-, -ms-,-o-等。我们平时在做一些简单项目，比如说单一活动页面，并不需要搭建前端自动化的框架时，可以使用vs code 的live sass compiler插件，自动将scss转换为css，以下为使用步骤。在vs code.
2021-03-15 14:20:10
244
原创 TypeScript
TypeScript的类型系统。TypeScript的主要优点在于，它可以突出显示代码中的意外行为，从而降低了发生错误的可能性。
2021-03-11 17:15:58
160
原创 为什么组件里的data是一个函数
在创建或注册模板的时候，传入一个data属性作为用来绑定的数据。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。vue.component('my-component',{template:'ok', data(){ return{}//返回一个唯一的对象，不要和其他组件共用一个对象进行返回 }, })你在前面看到，在new vue()的时候，是可以给data直接赋值为一个对象的。这是怎么回事，为什么到了组件这里就不行了。 你要理解，上面这个...
2021-02-07 15:49:01
129
转载 script标签属性sync和defer
<script src="a.js" defer></script>加了defer属性script标签的页面，运行流程如下：1.浏览器开始解析HTML页面2.遇到有defer属性的script标签，浏览器继续往下面解析页面，且会并行下载script标签的外部js文件3.解析完HTML页面，再执行刚下载的js脚本（在DOMContentLoaded事件触发前执行，即刚刚解析完</html>，且可保证执行顺序就是他们在页面上的先后顺序）...
2021-01-05 15:42:23
1215
转载 Lab.js加载JS文件
这篇文章主要介绍了Lab.js初次使用笔记,本文对比了普通动态加载JS文件的技术和使用Lab.js加载JS文件的技术,并给出了Lab.js加载示例,需要的朋友可以参考下动态加载JS函数一般性的，当我们需要加载js文件的时候都会使用script标签来实现，类似于如下代码：复制代码代码如下:<script type="text/javascript" src="example.js"></script>但是直接使用script标签来加载js文件会有如下一些缺点：
2020-12-31 14:18:06
320
转载 函数闭包
闭包的那些事儿怎么写一个闭包 闭包是什么就不解释了，直接写一个闭包函数： var f = function() { var num = 0; return function() { return num += 1; }; }js中，函数是一等公民，定义一个函数f，它返回另一个可执行函数function() { return num += 1; };js中的作用域，都是一层一层向上找的，在f内部函数里面，他的num向上找到父函数的作用域。..
2020-11-26 15:42:32
175
转载 vue-router
完整的导航解析流程导航被触发。 在失活的组件里调用beforeRouteLeave守卫。 调用全局的beforeEach守卫。 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。 在路由配置里调用beforeEnter。 解析异步路由组件。 在被激活的组件里调用beforeRouteEnter。 调用全局的beforeResolve守卫 (2.5+)。 导航被确认。 调用全局的afterEach钩子。 触发 DOM 更新。 调用bef...
2020-10-10 15:26:53
123
原创 排序算法
1 插入排序，从开头开始插入2快速排序 ：(1)首先设定一个分界值，通过该分界值将数组分成左右两部分。(2)将大于或等于分界值的数据集中到数组右边，小于分界值的数据集中到数组的左边。此时，左边部分中各元素都小于或等于分界值，而右边部分中各元素都大于或等于分界值。(3)然后，左边和右边的数据可以独立排序。对于左侧的数组数据，又可以取一个分界值，将该部分数据分成左右两部分，同样在左边放置较小值，右边放置较大值。右侧的数组数据也可以做类似处理。3选择排序：首先在未排序序列中找到最小（大）元..
2020-09-27 17:20:28
90
转载 前端路由
1.Hash模式window对象提供了onhashchange事件来监听hash值的改变,一旦url中的hash值发生改变,便会触发该事件。2.History 模式HTML5的History API 为浏览器的全局history对象增加的扩展方法。window对象提供了onpopstate事件来监听历史栈的改变,一旦历史栈信息发生改变,便会触发该事件。需要特别注意的是,调用history.pushState()或history.replaceState()不会触发pop.
2020-09-11 17:34:14
75
原创 layer
layer是一款近年来备受青睐的web弹层组件//初体验layer.alert('内容')//第三方扩展皮肤layer.alert('内容', { icon: 1, skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅})//询问框layer.confirm('您是如何看待前端开发？', { btn: ['重要','奇葩'] //按钮}, function(){ layer.msg.
2020-09-07 17:01:04
188
原创 iView
iView- 一套高质量的UI组件库Grid 栅格 i- 的样式 如 i-buttoni-inputi-tablei-select 首字母大写 如 IconCheckboxPoptipSpin（菊花）
2020-09-07 16:57:01
206
转载 Symbol Proxy Reflect Iterator async
ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin 模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（Strin
2020-08-28 16:57:18
78
转载 require/exports 和 import/export 形式不一样
链接：https://www.zhihu.com/question/56820346/answer/150724784require/exports 和 import/export 形式不一样require/exports 的用法只有以下三种简单的写法：const fs = require('fs')exports.fs = fsmodule.exports = fs而 import/export 的写法就多种多样：import fs from 'fs'import {d..
2020-08-26 09:30:10
134
转载 webpack中hash、chunkhash、contenthash区别
转载https://www.cnblogs.com/giggle/p/9583940.htmlwebpack中对于输出文件名可以有三种hash值：1. hash2. chunkhash3. contenthash这三者有什么区别呢？hash 如果都使用hash的话，因为这是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。如：可以从上图清晰的看见每个压缩后的文件的hash值是一样的，所以对于没有..
2020-08-25 10:55:34
191
原创 前端安全性问题
前端安全性问题当然，这个是老的话题，有的在初中级前端面试中也会提及到。但是在中高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。1、xss跨站脚本攻击（原理、如何进行的、防御手段是什么，要说清楚）2、CSRF跨站请求伪造（如何伪造法？怎么防御？等等都要说清楚）3、sql脚本注入（注入方式，防御方式）4、上传漏洞 （防御方式）...
2020-08-24 15:16:22
143
转载 web 文件上传漏洞
转载https://www.cnblogs.com/YGblood/p/10443600.html1.目标网站具有上传功能 上传攻击的前提是：目标网站具有上传功能，可以上传文件，并且上传文件，并且文件上传到服务器能被存储。2.上传的目标文件能够被Web服务器解析执行 由于上传文件需要依靠中间件解析执行，因此上传文件后缀应为可执行格式。在APache+PHP环境下，要求上传的web木马采 用.php后缀名（或者能有以PHP方式解析的后缀名），并且存放上传文件的目录要有执...
2020-08-24 15:14:33
119
转载 CSRF
转载：https://blog.csdn.net/qq_36711453/article/details/83714380CSRF跨站点请求伪造(Cross—Site Request Forgery)，跨站请求伪造：攻击者可以劫持其他用户进行的一些请求，利用用户身份进行恶意操作。例如：请求http://x.com/del.php?id=1是一个删除ID为1的账号，但是只有管理员才可以操作，如果攻击者把这个页面嵌套到其他网站中<img src=“http://x.com/del.php.
2020-08-24 14:58:14
174
转载 常见的加密方式
加密在我们前端的开发中也是经常遇见的。本文只把我们常用的加密方法进行总结。不去纠结加密的具体实现方式（密码学，太庞大了）。常见的加密方式常见的加密算法基本分为这几类，线性散列算法（签名算法）MD5 SHA1 对称性加密算法 AES DES 非对称性加密算法 RSAMd5加密 MD5是一种被广泛使用的线性散列算法，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。 MD5加密之后产生的是一个固定长度（32位或16位）的数据
2020-08-24 10:18:16
6108
转载 AMD,CMD,CommonJS是目前最常用的三种模块化书写规范。
AMD,CMD,CommonJS是目前最常用的三种模块化书写规范。CommonJSCommonJS规范是诞生比较早的。NodeJS就采用了CommonJS。是这样加载模块：var clock = require('clock');clock.start();这种写法适合服务端，因为在服务器读取模块都是在本地磁盘，加载速度很快。但是如果在客户端，加载模块的时候有可能出现“假死”状况。比如上面的例子中clock的调用必须等待clock.js请求成功，加载完毕。那么，能不能异步加载模块.
2020-08-21 10:31:07
218
转载 Promise
一、Promise1. 执行顺序let promise = new Promise(function(resolve, reject) { console.log('Promise'); resolve();});promise.then(function() { console.log('resolved.');});console.log('Hi!');// Promise// Hi!// resolved2.异步加载图片：function load
2020-08-18 14:17:28
169
转载 箭头函数表达式
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。const materials = [ 'Hydrogen', 'Helium', 'Lithium', 'Beryllium'];console.log(materials.map(material => material.length));// expected output:
2020-08-18 14:07:44
356
原创 post和get的区别
.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内 get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制 GET请求会被浏览器主动cache，而POST不会，除非手动设置 GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。 对参数的数据类型，
2020-08-17 15:44:46
100
转载 CORS
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。同源政策"（same-origin policy）协议相同 域名相同 端口相同判断是否是简单请求（1) 请求方法是以下三种方法之一：HEADGETPOST（2）HTTP的头信息.
2020-08-17 14:00:09
61
原创 fetch
rest api 是前后端分离最佳实践，是开发的一套标准或者说是一套规范，不是框架。Window和WorkerGlobalScope都实现了 WorkerOrGlobalScope。 ——这意味着基本在任何场景下只要你想获取资源，都可以使用 位于 WorkerOrGlobalScope 中的fetch()方法。当遇到网络错误时，fetch()返回的promise 会被reject，并传回TypeError，虽然这也可能因为权限或其它问题导致。成功的 fetch() 检查不仅要包括 ...
2020-08-14 14:04:59
102
原创 清除浮动
淘宝 清除浮动clearfix 伪元素.clearfix:after, .clearfix:before { content: " "; display: table;}.clearfix:after { height: 0; line-height: 0; visibility: hidden; clear: both;} ::after / <br> / clear: both 创建父级BFC...
2020-08-13 15:06:11
56
原创 Array和去重方法
1 计算数组中每个元素出现的次数let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];let nameNum = names.reduce((pre,cur)=>{ if(cur in pre){ pre[cur]++ }else{ pre[cur] = 1 } return pre},{})console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, ..
2020-08-12 14:37:05
1176
转载 设计模式
设计模式单例模式， 懒汉（开始创建）和饿汉（勇士创建），代理模式，1，虚拟代理，在对主体进行访问的时候，拒绝访问主体， 对敏感字符进行处理，就是虚拟代理 2 // 函数防抖，频繁操作中不处理，直到操作完成之后（再过 delay 的时间）才一次性处理function debounce(fn, delay) { delay = delay || 200; var timer = nul...
2020-08-12 13:49:26
80
转载 html渲染过程
Base64 虽有优点，但是缺点也很明显，在使用上存在一些明显的缺陷。1. 使用 Base64 不代表性能优化是的，使用 Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。而 CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。CRP（Critical Rendering Path，关键渲染路径）：当浏览器从服务器接收到一个HTML页面的请求时，到屏幕上渲染出来要经过很多个步骤。浏览器完成这一系列的运行，或者说渲染出来我
2020-08-12 09:24:55
185
原创 diff算法
v-once 指令，只渲染元素和组件一次，以后不会随M变化，<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doTh...
2020-08-11 17:56:06
351
原创 事件的捕获和冒泡
<!DOCTYPE html><html><head> <title>event</title></head><body> <div id="obj1"> obj1 <h5 id="obj2">obj2</h5> <h5 id="obj3">world</h5> </div>...
2020-08-11 15:33:28
537
原创 浮点数 加减乘除
/**** 加法函数，用来得到精确的加法结果** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。** 调用：accAdd(arg1,arg2)** 返回值：arg1加上arg2的精确结果**/function accAdd(arg1, arg2) { var r1, r2, m, c; t...
2019-09-06 14:47:16
1123
转载 ES6中Map与其他数据结构的互相转换
最近在学习ES6的基础知识，整理了一下Map与其他数据结构相互转换的写法。Map转为数组的方法 1 2 3 let myMap =newMap([[true,7], [{foo:3}, ['abc']]]); [...myMap] console.log([...myMap]); 数组转为Map的...
2019-05-08 11:40:29
361
转载 浅析前端页面渲染机制
作为一个前端开发，最常见的运行环境应该是浏览器吧，为了更好的通过浏览器把优秀的产品带给用户，也为了更好的发展自己的前端职业之路，有必要了解从我们在浏览器地址栏输入网址到看到页面这期间浏览器是如何进行工作的,进而了解如何更好的优化实践，本篇主要围绕这两点展开阐述。前端页面渲染机制可谓是老生常谈，但又很有必要再谈的话题，于是还是决定写一篇，即是对知识的回顾总结，又能与大家分享，何乐而不为。网上相...
2019-02-26 16:30:18
1058
转载 一款很好用的Jquery 打印插件——jQuery.print.js
https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.com/DoersGuild/jQuery.print，下载js文件，进行简单的配置即可使用啦！
2018-11-21 14:39:44
25374
转载 前端基础进阶（十三）：透彻掌握Promise的使用，读这篇就够了(转)
https://www.jianshu.com/p/fe5f173276bdPromise的重要性我认为我没有必要多讲，概括起来说就是必须得掌握，而且还要掌握透彻。这篇文章的开头，主要跟大家分析一下，为什么会有Promise出现。在实际的使用当中，有非常多的应用场景我们不能立即知道应该如何继续往下执行。最重要也是最主要的一个场景就是ajax请求。通俗来说，由于网速的不同，可能你得到返回值的...
2018-11-20 15:09:28
273
原创 es6 语法
//ie不支持var person = { name: 'tom', getName: function() { return this.name; }}// 我们试图用ES6的写法来重构上面的对象const person = { name: 'tom', getName: () => this.name}// 但是...
2018-11-08 21:34:02
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人