Web前端开发
关注
分享
扫一扫
文章平均质量分 60
坤小
近20个项目经验，10个以上上线项目，独立开发过五个以上的上线项目。当过项目经理，负责过多款软件的架构……
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
ES6箭头函数中的this指向
1箭头函数中的this(1)箭头函数中没有this : 这意味着 call() apply() bind() 无法修改箭头函数中的this(2)箭头函数中的this指向 ：访问上一个作用域的this说人话：函数在哪个作用域声明，this就是谁 (本质是通过作用域链访问上一个作用域中的this)(3)箭头函数与function函数this区别function函数 ： 谁调用我,我...原创 2019-11-08 17:52:38 · 1107 阅读 · 0 评论 -
var与let区别-详解块级作用域与局部作用域
1.1-js三种作用域介绍1.作用域概念（Scope） : 变量可以起作用的范围区域1.1 ES5 有两种作用域a.全局作用域(Global Scope) ： 函数外面声明的变量,称之为全局变量。 可以在页面任何地方被访问全局变量生命周期 ： 从页面加载 -> 到页面关闭b.局部作用域(Local Scope) : 函数里面声明的变量,称之为局部变量。 只能在函数里面被访问局部变量生命周期 ： 从函数开始执行 -> 到函数执行结束1.2 ES6 在ES原创 2020-06-10 19:27:49 · 5896 阅读 · 8 评论 -
JS经典面试题05-变量连续声明var a = b = 1
函数里面声明的变量是局部变量，在函数外无法被访问。 怎么会有人出这么简单的面试题呢？1.1-答案揭晓1.2-原理解析 /*本题考点 a. 变量作用域 ： 函数里面声明的变量是局部变量，无法在全局访问 b. 冷门知识点 ： 变量如果没有使用var关键字声明，则没有作用域限制。 一定是全部变量（不标准语法） */ //声明函数 function fn() { /*变量连续赋值执行原理 ..原创 2020-06-10 12:03:06 · 1933 阅读 · 4 评论 -
JS经典面试题01-隐式类型转换
<!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"> <title>D.原创 2020-06-08 10:10:50 · 398 阅读 · 0 评论 -
JS经典面试题04-原型链Foo.getName
1.1-答案揭晓1.2-原理解析<!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">.原创 2020-06-08 10:21:46 · 1062 阅读 · 2 评论 -
JS经典面试题03-引用类型连续赋值a.x = a = { n: 2 }
1.1-答案揭晓<!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"> <t.原创 2020-06-08 10:18:39 · 476 阅读 · 0 评论 -
JS经典面试题02-只执行一次函数
<!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"> <title>Do.原创 2020-06-08 10:13:46 · 841 阅读 · 1 评论 -
网页性能优化03-函数防抖
1.1-函数防抖1.函数防抖介绍1.什么是函数防抖？ （debounce）网上主流解释：函数防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。参考博客：https://www.jianshu.com/p/f9f6b637fd6c参考博客：https://segmentfault.com/a/1190000018445196笔者解释：先理解什么是抖动？：例如用户鼠标轻微晃动，快速划过某一个元素（用户本身不想触发，只是鼠标误触原创 2020-05-23 23:30:59 · 530 阅读 · 0 评论 -
网页性能优化02-懒加载工作原理
懒加载工作原理1.1-懒加载介绍（以图片懒加载为例）1.为什么要有懒加载技术（1）img标签特点：不管图片隐藏还是显示 有src属性都会去加载例如电商类网站，一个页面有几百张图片。有时候假设用户不滚动，也会加载图片资源，此时非常损耗网页性能（2）那么如果页面上有太多的图片 而且有些图片不在可视窗口内 如果加载了会影响页面的渲染页面时间。判断网页是否使用图片懒加载技术：滚动网页的时候，图片会动态加载（一般会有一个渐变动画，例如京东）2.如何实现懒加载技术核心原理：延迟原创 2020-05-23 22:33:37 · 395 阅读 · 0 评论 -
网页性能优化01-精灵图利弊与应用场景
网页性能优化01-精灵图精灵图：通过减少页面网络请求的数量，来提高网页加载速度1.1-精灵图介绍1.什么是精灵图精灵图就是就是将几张较小的图片放在一张大图上，这张大图称之为精灵图，又叫雪碧图（CSS Sprites）2.为什么要有精灵图？因为浏览器在渲染DOM树的时候，会把所有的外部资源路径(例如img标签的src属性作为网络请求，向服务器发送资源)例如淘宝网页，一个首页会有300多以上的请求，每一个请求都需要占用网络资源，无形中会降低网页加载速度3.精灵图的作用将原创 2020-05-23 21:55:13 · 1099 阅读 · 0 评论 -
axios04-文件上传
axios上传文件没有兼容性问题，还是使用以前的FormData原因： FormData会自动帮你设置请求头为：multipart/form-data;<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <meta http-equiv=...原创 2020-04-08 23:43:03 · 486 阅读 · 3 评论 -
axios03-解决请求头兼容导致跨域报错问题
1.老版本的后台接口post请求头是：application/x-www-form-urlencodedaxios不支持解决方案1.设置axios请求头为application/x-www-form-urlencodedheaders: {'Content-type': 'application/x-www-form-urlencoded'}2.将参数拼接为...原创 2020-04-08 23:41:06 · 5630 阅读 · 0 评论 -
axios02-其他使用方式(推荐)
推荐这种方式原因： 和以前的$.ajax()非常类似不同点： 使用promise技术处理异步操作结果axios({ url:'请求路径', method:'请求方式', data:{ post请求参数 }, params:{ get请求参数 }}).then(res=>{ //成功回调 //console.log(res)}...原创 2020-04-08 23:39:50 · 333 阅读 · 0 评论 -
axios教程01-基本使用流程
axios官网文档：http://www.axios-js.com/jQuery与axios对比jQueryaxios1.ajax技术底层原理XMLHTTPRequestXMLHTTPRequest2.体积大小大（包含大量dom操作与ajax）小(只有ajax请求)3.是否支持ES6的Promise不支持（底层使用其他方案模拟实现）支持基于原生P...原创 2020-04-08 23:37:09 · 1464 阅读 · 0 评论 -
nodejs服务端MVC架构介绍
nodejs服务端MVC架构介绍MVC架构本质：确定每一个js文件的职责以nodejs数据管理系统为例，本文章代码仅为服务端演示代码，单独复制粘贴可能无效果。因为MVC并不是一门技术，而是一种项目架构思想index.js:负责接收请求router.js:负责将请求分发给C层controller.js:C层负责处理业务逻辑（V与M之间的沟通）views：V层：负责展示页面model：...原创 2019-10-21 23:49:40 · 3510 阅读 · 0 评论 -
Express中间件工作原理介绍
Express中间件工作原理介绍中间件是Express框架学习中最难的部分，同时也是最为核心的技术，我们的学习路线如下1.什么是中间件2.Express中间件的本质及工作原理3.自定义解析post请求参数的中间件4.第三方中间件使用1.1-什么是中间件下图是一个自来水净化的过程，这张图可以更好的理解什么是中间件水库的水并不是直接取出来就送到用户的家中使用，而是经过一些净...原创 2019-10-21 23:43:08 · 1576 阅读 · 0 评论 -
RSA完整加密流程总结
RSA完整加密流程总结1.1-RSA加密介绍1.RSA公钥加密算法是1977年由罗纳德·李维斯特（Ron Rivest）、阿迪·萨莫尔（Adi Shamir）和伦纳德·阿德曼（Leonard Adleman）一起提出的。1987年7月首次在美国公布，当时他们三人都在麻省理工学院工作实习。RSA就是他们三人姓氏开头字母拼在一起组成的。2.RSA是目前最有影响力和最常用的公钥加密算法，它...原创 2019-10-21 23:32:53 · 13774 阅读 · 4 评论 -
nodejs中art-template模板语法冲突解决方案
art-template的github地址：https://github.com/aui/art-template前端开发中，有非常多的模板引擎第三方框架，其中art-template属于写的比较好的一个，一般的模板引擎第三方都会支持一到两种模板语法，最常见的就是大胡子语法{{ }}和尖括号语法<%= %>本篇文章主要介绍一下在nodejs中，art-template如何解决模板引擎语法冲突1原创 2017-11-05 17:36:23 · 5025 阅读 · 8 评论 -
mongoose设置unique不生效问题解决
1.unique属于schema约束验证中的一员，他的作用主要就是让某一个字段的值具有唯一性（不能重复）2.保持字段的唯一性使用type值：{type:String,unique:true,dropDups: true}3.mongoose一旦修改了数据存储的机构，数据库一定要重启，很多新手在设置一些属性不生效时都是这个原因这里说的重启，不是简单的关闭mongoose数据库服务器重新打开，而是先原创 2017-11-05 19:23:50 · 7940 阅读 · 4 评论 -
nodejs接收get请求参数
nodejs接收get请求参数1.1-浏览器向服务器发送get请求参数的两种方式1.2-服务端使用url模块解析get请求参数在http协议中，一个完整的url路径如下图通过下图我们可以得知，get请求的参数是直接在url路径中显示。get的请求参数在path资源路径的后面添加，以?表示参数的开始，以key=value表示参数的键值对，多个参数以&符号分割 hash部分表示的是资源定位符（原创 2017-11-30 23:20:23 · 17833 阅读 · 0 评论 -
nodejs接收post请求参数
nodejs接收post请求参数1.1-浏览器发送post请求参数的方式1.2-服务端接收post请求参数的方式post请求参数不直接在url路径中拼接，而是放在请求体中发送给服务器请求三要素：请求行、请求头、请求体1.1-浏览器发送post请求参数的方式post请求参数不能直接在url路径中拼接，所以一般使用ajax请求来发送post请求参数 通常都是提交form表单数据使用post请原创 2017-11-30 23:23:46 · 51176 阅读 · 17 评论 -
input标签获取图片文件尺寸
思路分析 （1）给input标签设置一个onchange事件 当input标签的type属性为file时，我们可以给该input标签设置一个onchange事件来监听文件选择的变化（2）在onchange事件中使用FileReader读取选取文件的信息 FileReader类支持异步读取input标签文件信息（大小，时间，数据等）（3）使用一个img标签来显示获取的图片（如果不需要显示可以原创 2017-12-02 23:05:12 · 7295 阅读 · 5 评论 -
Nodejs项目部署阿里云完整流程
nodejs项目部署阿里云完整流程参考文档:http://blog.youkuaiyun.com/chenlinIT/article/details/73343793细节注意：1.启动nodejs服务需要开启两个阿里云主机窗口，一个是数据库mongoose服务，一个是nodejs服务器 2.如果nodejs服务器监听你的阿里云主机ip失败，可以尝试使用0.0.0.0。（因为阿里云限制了端口号的，官方原创 2018-01-11 19:37:34 · 32471 阅读 · 16 评论