2rever的前端小站

2rever的前端小站

跨界前端的自我修养

防抖和节流
debounce与trottle函数的适用场景有什么不同? 连续多次执行的事件只需要触发最后一次,就用debounce 如果只是需要降低事件处理函数的执行频率,则用throttle 简易实现 debounce123456789function debounce(f, duration) { var timeoutId return function(...args) { clearTimeout(timeoutId) timeoutId = setTimeout(() => { f.call(this, ...args) ...
少儿编程浅谈
少儿编程浅谈 缘由 最近大学的班主任向我咨询少儿编程的问题,作为一个从建筑学毕业,班里唯一一个干编程的人,问我也是情有可原。老师想让五岁的儿子学习一下编程,真应验了那句话,21世纪不会编程就是新世纪的文盲。故晚上花了一点时间了解了一下少儿编程相关领域的问题,权当抛砖引玉,简单的谈一谈少儿编程。 少儿编程 编程语言: Scratch 语言介绍 Scratch是由麻省理工学院开发的免费儿童编程语言,辅以入门教程,给家长的课程指导和强大的用户社区。没有电脑的情况下,您还可以使用下载好的卡片来学习Scratch编程。 Scratch使用模块来让界面可视化,为孩子和家长创造更多直观的体...
摄影笔记
摄影笔记 摄影学习笔记 什么是好照片 要有一个鲜明的主体 要把注意力吸引向主体 画面必须足够简洁 ###三个问题 这张照片主体是什么 如何把注意力集中到主体上 画面中还能减去什么 摄影是剪发 这张照片主体是什么 如何把注意力集中到主体 画面中还能减去什么 好照片 = 突出主体 布局:把主体放在分割线处,获得画面的平衡感。透过不同的视角,比如比较低的机位或者仰拍让画面生动有趣,加入不稳定元素让画面不name死板 大小:通过元素的大小对比,强调主体,比如拍动物经常低机位拍主体 搭框:通过框架形状突出主体,比如建筑窗口或人物中女性的眼影突出眼睛,男性胡子突出面部 光线:在一定的时间内...
webpack学习笔记
webpack学习笔记 webpack学习笔记 1234567891011121314151617# 初始化项目npm init# 在项目里安装webpacknpm i webpack webpack-cli -D# 查看webpack 的版本号npm info webpack# 安装特定版本的webpacknpm i webpack@4.16.5 webpack-cli -D# 运行项目内部命令npx webpack -v# 以 webpackconfig.js 这个配置文件为webpack配置文件npx webpack --config webpackconfig.js 新建 ...
xss攻击解释及防御
xss攻击 XSS攻击全称跨站脚本攻击 反射型 发出请求时,XSS代码出现在url上,作为输入提交到服务器端,服务器端解析响应后,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码。这个过程像一次反射,故叫反射型XSS。 通过诱导链接等手段在url上拼接一段脚本,这段脚本可能是12345678自动执行<img src="null" onerror="xxx" alt="">触发执行<p onclick="xxx"></p>内嵌入广告、攻击页面、csrf引诱页面等<iframe src="xxx" frameborder="0"...
实现Vue双向绑定
Vue双向绑定的实现es5123456789101112131415161718192021222324252627282930313233343536<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"&...
在循环中调用异步函数
如何在循环中调用异步函数 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647// 预先设定一个数组const arr = [1,2,3,4,5]// forEach是并行执行的,并不会等待await返回的结果,同 Promise.all()// 加不加上 async await 是一样的arr.forEach(async (item) => { await delay(item)})// 要执行串行执行的要用for循环来执行,并且使用aw...
数组对象的排序
数组对象的排序因为最近工作遇到要对数组对象进行排序,所以根据冒泡排序进行修改,实现对简单数组对象的排序12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152function sortArray(array, val, order = "up") { for (var i = 0; i < array.length; i++) { for (var k = 0; k < array.length - i - 1; ...
数组的结构赋值
数组的结构赋值 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182// 1. 数组对应的解构赋值let a = 1, b = 2 , c = 3;console.log('a :', a);console.log('b :', b);console.log('c :', c);let a = 1;let b = 2;let c...
let以及const笔记
let 及 const let 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475// {// var a = 10;// console.log(a); //=> 10// }// console.log(a); // a => 10// 变量提升和函数提升fun();function fun() { ...
2rever
建筑系 => 前端