前端--基础
宋哈哈
2018. 7 本科毕业,从此步入前端。。。。。。。。。
展开
-
2.js判断变量类型:typeof、instanceof、constructor、Object.prototype.toString.call()的区别
typeof 判断 不能判断对象类型 typeof [] typeof {} typeof null // 都返回 'object' instanceof 判断谁是谁的实例 依据是 __proto__ constructor 可以找到这个变量是通过谁构造出来的 Object.prototype.toString.call() 不能细分谁是谁的实例定义一组变量let num = 123;let str = 'abcd';let bool = true;let obj = { a...原创 2022-03-06 12:07:10 · 248 阅读 · 0 评论 -
mac 安装cnpm
cnpm安装原创 2021-12-06 22:37:24 · 1283 阅读 · 0 评论 -
自己写的webpack项目如何使用可选链式操作符
一:安装转义babelnpm install --save-dev @babel/plugin-proposal-optional-chaining二:在项目根目录创建.babelrc文件配置如下内容{ "plugins": ["@babel/plugin-proposal-optional-chaining"]}三:在js中使用//链式写法if(res?.data?.obj){ // 判断data中是否有obj属性 并且非null非undefined.原创 2021-02-20 10:47:34 · 5190 阅读 · 3 评论 -
div高度固定,内容区不换行,不要滚动条
外部div:内容部分:样式 .swiper-box{ height: 30px; background-color: #161719; width: 100%; overflow: hidden; height: 30px; line-height: 30px; .swiper-content{ width: 100%; .原创 2020-12-07 17:54:06 · 293 阅读 · 0 评论 -
Node.js基础总结-5-NPM和第三方模块、package.json
在npm官网有大量的开源npm包,它作为一个包管理器存在。在node中想使用这些第三方包,需要先进行下载。一:下载包 silly-datetime1.安装 npm i silly-datetime2.引入 require('silly-datetime')3.使用 sd.format(new Date(),'YYYY-MM-DD')二:package.json的作用package.json记录着我们下载过的包,所以以上的npm install silly-dat..原创 2020-10-15 20:28:48 · 171 阅读 · 0 评论 -
Node.js基础总结-4-CommonJs和NodeJs
一:什么是CommonJs Js是一个强大的面向对象语言,他有很多快速高效的解释器,但是Js标准定义的API是为了构建基于浏览器的应用程序,并没有制定一个用于更广泛的应用程序的标准库。CommonJs规范的提出就是为了弥补当前Js没有标准的缺陷,而不只是停留在小脚本程序的阶段,用CommonJs编写的应用,不禁可以利用Js开发客户端程序,还可以编写:1.服务器端JS应用(nodejs)2.命令行工具3.桌面图形界面应用程序CommonJS是模块化的标准,nodejs是CommonJS原创 2020-10-14 21:01:13 · 198 阅读 · 0 评论 -
fatal: refusing to merge unrelated histories
最近使用git经常遇到这种情况因为本地的仓库和远程关联后 仓库的版本不一致,有不同的提交历史,所以需要进行同步当执行 git pull origin master 时出现fatal此时需要执行git pull origin master --allow-unrelated-histories执行完之后会出现冲突,冲突的内容就是本地版本和远程版本的差异,处理完冲突之后再依次执行git add .git commit -m"xxx"git push origin ..原创 2020-10-13 18:05:06 · 97 阅读 · 0 评论 -
Node.js基础总结-3-supervisor自动watch代码
之前都是每次修改完js代码后需要 先stop code run 来终止上一次的执行 然后再右键run执行修改之后的代码才能生效。现在有了supervisor就方便多了// supervisor 会不停的 watch 应用下面的所有文件,发现有文件被修改,就重新载入程序文件这样就实现了部署,修改了程序文件后马上就能看到变更后的结果。// 安装supervisor npm i -g supervisor/** cd 至当前目录 执行supervisor http-4-url.js..原创 2020-10-13 10:45:18 · 223 阅读 · 0 评论 -
Node.js基础总结-1-Http模块:
一:引入http模块var http = require("http");二:使用http.createServer()方法创建服务器使用 listen 方法绑定 8888 端口,函数通过 request, response 参数来接收和响应数据。// 1.引入httplet http = require('http');// 2.通过.createServer方法启动一个服务 并监听8881端口http .createServer((req, res) => {原创 2020-10-12 22:33:52 · 132 阅读 · 0 评论 -
移动端页面点击按钮出现点击效果
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>demo</title> <meta name="wap-font-scale" content="no"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-08-18 18:52:48 · 2247 阅读 · 0 评论 -
js中class声明的函数和function声明的函数有什么区别
1.class声明的函数会有变量提升,但是不会赋值(即进入了暂时性死区,类似let和const声明的变量),而function声明的函数既会提示,也会初始化暂时性死区:只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。var tmp = 123;if (true) { tmp = 'abc'; // ReferenceError let tmp;}上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量.原创 2020-08-04 10:59:19 · 4216 阅读 · 5 评论 -
纯css实现实心三角形,向右箭头
效果如下实现之前先了解一下css的一个属性:也就是说 这个属性可以设置透明的色值,举个例子:看这个形状是如何实现的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2020-07-14 21:28:06 · 6986 阅读 · 0 评论 -
flex布局实现最后一行左对齐
最终效果如下:源代码使用vue开发:其中keyboard_word_wrap样式如下:display: flex; justify-content: flex-start; flex-wrap: wrap; max-width: 37.5rem; margin: 0 auto; padding: 2rem 0;关键代码标红,如果justify-content为center,那么效果是不规定左右自适应 效果是(因为这页面本身没做font-size自适应 所以我也懒...原创 2020-07-07 21:08:56 · 3450 阅读 · 0 评论 -
script标签中的crossorigin属性详解
在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。而使用window.onerror事件来捕获 js脚本中的错误信息是 重要的手段 。但是对于跨域的资源 ,onerror事件通常会上报 "Script error"由于这并不是JavaScript的 bug,所以浏览器出于安全考虑,会主动隐藏其他域下js抛出的具体错误信息,但是onerror事件可不管 你这么多,就是直接上报 ,在不做过滤的情况下,你会在 监控平台中看到特别的"Script error"错误日志原创 2020-07-02 09:58:56 · 15200 阅读 · 0 评论 -
快速查看本机的ssh公钥
1.打开item2 切换进.ssh文件夹 cd ~/.ssh2.查看当前文件夹 ls (可以看到当前文件夹内有id_rsa id_rsa.pub known_hosts )3.ssh字符串就在id_rsa.pub中 输入 cat id_rsa.pub 回车可以拿到这个文件中的内容,即为ssh...原创 2020-06-16 14:10:55 · 536 阅读 · 0 评论 -
项目中只使用了Promise和async函数 如何正确的引入polyfill
项目中只使用到了Promise和async函数,如何正确的引入polyfill呢我们知道polyfill的作用是为一些低版本浏览器提供一些辅助函数,比如在ie中window下是没有promise对象的,那么polyfill的作用是为其window手动创建一个对象并挂载到window上。另外向一些数组的高级方法,polyfill也是为其提供兼容的处理。简单介绍下我的项目,我需要写一个插件发布到npm上去供其他同学使用,但是在开发过程中Promise和async太香了,所以就直接使用了,但是在处理w原创 2020-06-09 08:51:27 · 2017 阅读 · 0 评论 -
npm 切换源(nrm 用法详情)
由于node自带的npm包管理工具是从国外站拉取资源的 所以对于前端来说 下载node-sass是一件很头疼的事情,大家平时会改成淘宝镜像npm config set registry https://registry.npm.taobao.org由于近期在搞把包上传到公司私服,所以需要切换源。这样nrm使用起来就很方便了安装 sudo cnpm install -g nrm 查看所有源 nrm ls添加nrm add删除 nrm del切换..原创 2020-06-08 17:59:25 · 1408 阅读 · 0 评论 -
mac安装dart报错curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to storage.googleapis.co
!!!!!亲测有效mac安装dart报错curl: (35) LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to storage.googleapis.com:443安装brew:控制台操作:1.安装brew/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/Ho...转载 2020-04-22 21:08:01 · 21342 阅读 · 1 评论 -
HTTPS 原理,详细了解HTTPS
HTTPS随着 HTTPS 建站的成本下降,现在大部分的网站都已经开始用上 HTTPS 协议。大家都知道 HTTPS 比 HTTP 安全,也听说过与 HTTPS 协议相关的概念有 SSL 、非对称加密、 CA证书等,但对于以下灵魂三拷问可能就答不上了:1.为什么用了 HTTPS 就是安全的?2.HTTPS 的底层原理如何实现?3.用了 HTTPS 就一定安全吗?本文将层层深入,...原创 2020-01-06 18:01:08 · 377 阅读 · 0 评论 -
使用express在本地起动一个接口服务,并处理跨域问题
Express简介:Express中文网它是基于Node.js平台,快速、开放、极简的 Web 开发框架,说他极简,一点都不过分,因为他操作起来非常简单。1.首先确保你的机器上有有安装node2.安装npm install express --save3.使用 新建index.jslet express = require('express')let app...原创 2019-12-24 16:07:31 · 1523 阅读 · 0 评论 -
js如何实现一个继承?手写一个js继承
在js中,继承就是让一个对象拥有另一个对象的属性和方法。(Father代表父类构造函数,Son代表子类构造函数,默认构造函数的方法都是写在原型中,实例化对象共享原型中的方法,避免了内存空间的浪费)1.原型链继承 (有两种实现方式)//1.Son.prototype = Father.prototype/** * 弊端:Son.prototype.construct...原创 2019-12-04 18:28:56 · 2655 阅读 · 0 评论 -
如何实现一个bind方法,手写一个bind
bind()方法:会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )此外,bind实现需要考虑实例化后对原型链的影响。Function.prototype.mybind = function (context) { if (typeof this...原创 2019-11-29 08:47:29 · 875 阅读 · 0 评论 -
npm run dev报错 Module build failed: Error: Cannot find module 'node-sass'
一个项目,可能你从其他库里拉下来,或者换了一台电脑,或者出于其他原因,你需要重新安装依赖环境,有时候会遇到node-sass安装失败的情况,这个现象太正常了,比如:遇到报错不要慌,先看报错的开头,一般就能找到答案,他说没有找到这个模块 node-sass这时你可以去项目依赖node_module里边去找一下 ,发现确实没有这个包,那就重新装一下吧npmins...原创 2019-11-27 14:51:30 · 10352 阅读 · 2 评论 -
{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }
运行npm run dev 时 虽然项目可以正常启动。但是报了一条提醒 如下:{ parser: "babylon" }已被弃用;我们现在将其视为{ parser: "babel" }解决方法:找项目目录的\node_modules\vue-loader\lib\template-compiler\index.js将其改为bable重新运行运...原创 2019-11-26 09:30:15 · 2066 阅读 · 0 评论 -
如何实现一个call或 apply方法,手写一个call或apply
call语法:fun.call(thisArg,arg1,arg2,...),调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。apply语法:func.apply(thisArg,[argsArray]),调用一个函数,以及作为一个数组(或类似数组对象)提供的参数。Function.call按套路实现call核心: 将函数设为对象的属性...原创 2019-11-25 21:14:16 · 1042 阅读 · 0 评论 -
如何实现一个JSON.parse ,手写一个JSON.parse
JSON.parse()方法用来解析JSON字符串,构造由字符串描述的JavaScript值或对象。提供可选的reviver函数用以在返回之前对所得到的对象执行变换(操作)。语法JSON.parse(text[, reviver])参数text要被解析成JavaScript值的字符串,关于JSON的语法格式,请参考:JSON。reviver可选转换器, 如果传...原创 2019-11-21 09:40:08 · 1832 阅读 · 2 评论 -
如何实现一个JSON.stringify() ,手写JSON.stringify
JSON.stringify()方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串,如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。语法JSON.stringify(value[,replacer[,space]])参数1.value将要序列化成 一...原创 2019-11-19 08:51:09 · 2399 阅读 · 0 评论 -
如何实现一个new,手写一个new操作符
要想手写一个new 需要先知道new这个关键字做了哪些事情 它创建了一个全新的对象。 它会被执行[[Prototype]](也就是__proto__)链接。 它使this指向新创建的对象。 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。 如果函数没有返回对象类型Object(包含...原创 2019-11-19 08:36:23 · 946 阅读 · 0 评论 -
关于h5唤起App的方式
唤起 App 应该是很常见的问题了。我们在开发 H5 的时候,有一些链路上的功能在 H5 不支持,只能去 App 才能完成。比如,下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。 判断浏览器,动态加载对应浏览器的下载逻辑 通过universal link、URL Scheme、a 标签、iframe几种方式找出最适合这个浏览器的唤起方式。 如...原创 2019-11-15 08:55:29 · 3182 阅读 · 1 评论 -
chrome开发工具各种调试的办法
一:代码格式化有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个{ }标签,chrome会帮你给格式化掉。二:强制DOM状态有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们...原创 2019-11-07 09:08:36 · 186 阅读 · 0 评论 -
Markdown编辑工具Typora教程
1. 基本操作1.1 内容目录语法[toc]1.2 标题语法# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 1.3 引用语法> 引用内容1> 引用内容2>> 引用内容3效果...原创 2019-11-05 11:01:59 · 220 阅读 · 0 评论 -
css动画animation详细解读
以一个小球为例 向右匀速运动200px 然后再移动回来,然后再移动到200px处 停在那里效果如下 div{ width:40px; height:40px; border-radius:50%; background:#0ff; animation:move 2s linear 3 alternate both; } @keyframes ...原创 2019-10-22 09:59:42 · 4610 阅读 · 0 评论 -
浏览器性能优化
Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现: 页面加载时存在明显的...原创 2019-10-16 10:16:28 · 2478 阅读 · 0 评论 -
记录一组面试题 近期较忙,慢慢会把答案全部补齐
css 1、盒模型 2、flex 3、css单位 4、css选择器 5、bfc 清除浮动 6、层叠上下文 7、常见页面布局 8、响应式布局 9、css预处理,后处理 10、css3新特性 animation和transiton的相关属性 animate和translate ...原创 2019-06-19 08:44:47 · 248 阅读 · 0 评论 -
js正则 验证数字、小数、汉字、浮点数、字母汇总
let re = /^[0-9]*$/if(re.test(123)){ true}验证数字的正则表达式集 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数字:^\d{n,}$ 验证m-n位的数字:^\d{m,n}$ 验证零和非零开头的数字:^(0|[1-9][0-9]*)$ 验证有两位小数的正实数:^[0-9]+(.[0...原创 2019-05-16 22:03:21 · 3680 阅读 · 1 评论 -
js任务队列、运行机制解读
//输出内容async function async1() { console.log('async1 start'); await async2(); console.log('async1 end');}async function async2() { console.log('async2');}console.log('script start')...原创 2019-05-15 22:03:03 · 872 阅读 · 0 评论 -
01-关于vue、react在循环遍历时 :key=“**“的作用和好处
1.就像vue的文档中写的一样:为什么要绑定keykey的更多解释在下边2.大概了解之后 看看下边的详细的例子没有绑定key的情况下,并且在遍历模板简单的情况,会导致虚拟新旧节点对比更快,节点也会复用。而这种复用是就地复用,一种鸭子辩型的复用。以下为简单的例子:<div id="app"> <div v-for="...原创 2019-05-10 16:25:31 · 1307 阅读 · 0 评论 -
接口请求返回状态码总结
前端在调用接口时都要关注接口返回给我们的状态码,之前只是大概的了解比如404是前端的错,可能是路径错误等,300+可能是重定向了,500以上是服务端或者服务器的错误,并没有一个很好的总结。今天中午看群里有人问这问题,就搜集对比整理了一下,如下:1xx - 信息提示这些状态代码表示临时的响应。客户端在收到常规响应之前,应准备接收一个或多个 1xx 响应。· 100 - Continue 初始的请求已...原创 2018-07-03 12:49:22 · 34098 阅读 · 3 评论 -
js内存管理机制
前言像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存。而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏。内存生命周...原创 2019-06-20 09:49:04 · 2401 阅读 · 0 评论 -
ios低版本有多少用户在使用,有多少量?
这个数据在苹果的官网上并没有找到具体的数据,苹果官网只公布了最新ios系统占比:https://developer.apple.com/support/app-store/对于其他的 比如ios8.0 、10以下系统占有量有多少,并没有公布。方式一:我们可以使用微信公众平台去查看(由于目前我个人的小程序账号已经注销,没办法进去看,所以一些开发过小程序的人应该有知道如何查看)方式...原创 2019-06-20 19:21:48 · 1257 阅读 · 0 评论