有用的代码总结
宋哈哈
2018. 7 本科毕业,从此步入前端。。。。。。。。。
展开
-
在线画图地址
记录一个在线画图软件地址。原创 2023-07-06 11:12:29 · 397 阅读 · 0 评论 -
eslint报错Parsing error: Unexpected token =eslint
如图 配置了eslint。原创 2023-04-21 01:26:18 · 1314 阅读 · 0 评论 -
mac 安装cnpm
cnpm安装原创 2021-12-06 22:37:24 · 1289 阅读 · 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 · 5244 阅读 · 3 评论 -
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 · 4285 阅读 · 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 · 7074 阅读 · 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 · 3451 阅读 · 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 · 2035 阅读 · 0 评论 -
vuecli3打包资源在html中的引用路径问题
在默认情况下,通过vuecli打包出来的路径是绝对路径。如果想修改vuecli的默认配置,通过在vue.config.js中进行配置,关于打包路径是通过publicPath属性进行配置。如果想使用相对资源地址 则将publicPath配置为'././' 打包出来的路径就是 这样的'./static/js/aaaa.js'了...原创 2020-04-08 14:51:08 · 1395 阅读 · 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 · 1557 阅读 · 0 评论 -
js如何实现一个继承?手写一个js继承
在js中,继承就是让一个对象拥有另一个对象的属性和方法。(Father代表父类构造函数,Son代表子类构造函数,默认构造函数的方法都是写在原型中,实例化对象共享原型中的方法,避免了内存空间的浪费)1.原型链继承 (有两种实现方式)//1.Son.prototype = Father.prototype/** * 弊端:Son.prototype.construct...原创 2019-12-04 18:28:56 · 2671 阅读 · 0 评论 -
如何实现一个bind方法,手写一个bind
bind()方法:会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )此外,bind实现需要考虑实例化后对原型链的影响。Function.prototype.mybind = function (context) { if (typeof this...原创 2019-11-29 08:47:29 · 879 阅读 · 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 · 1046 阅读 · 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 · 1847 阅读 · 2 评论 -
如何实现一个JSON.stringify() ,手写JSON.stringify
JSON.stringify()方法将一个 JavaScript 值(对象或者数组)转换为一个 JSON 字符串,如果指定了 replacer 是一个函数,则可以选择性地替换值,或者如果指定了 replacer 是一个数组,则可选择性地仅包含数组指定的属性。语法JSON.stringify(value[,replacer[,space]])参数1.value将要序列化成 一...原创 2019-11-19 08:51:09 · 2422 阅读 · 0 评论 -
如何实现一个new,手写一个new操作符
要想手写一个new 需要先知道new这个关键字做了哪些事情 它创建了一个全新的对象。 它会被执行[[Prototype]](也就是__proto__)链接。 它使this指向新创建的对象。 通过new创建的每个对象将最终被[[Prototype]]链接到这个函数的prototype对象上。 如果函数没有返回对象类型Object(包含...原创 2019-11-19 08:36:23 · 950 阅读 · 0 评论 -
前端网页字体科普
字体分类常见的字体可以分为两类:衬线体、无衬线体。1、serif(衬线体):在字的笔画开始、结束的地方有额外的装饰,而且笔画的粗细会有所不同。常见的衬线体有:•宋体、楷体•Times New Roman2、sans-serif(无衬线体):笔划粗细基本一致,只剩下主干,造型简明有力,起源也很晚。适用于标题、广告等,识别性高。常见的无衬线体有:•黑体•Wind...原创 2019-11-15 09:39:30 · 2940 阅读 · 1 评论 -
关于h5唤起App的方式
唤起 App 应该是很常见的问题了。我们在开发 H5 的时候,有一些链路上的功能在 H5 不支持,只能去 App 才能完成。比如,下单、支付等功能。那么在更多的场景能够唤起 App 就显得很重要了。 判断浏览器,动态加载对应浏览器的下载逻辑 通过universal link、URL Scheme、a 标签、iframe几种方式找出最适合这个浏览器的唤起方式。 如...原创 2019-11-15 08:55:29 · 3198 阅读 · 1 评论 -
chrome开发工具各种调试的办法
一:代码格式化有很多css/js的代码都会被 minify 掉,你可以点击代码窗口左下角的那个{ }标签,chrome会帮你给格式化掉。二:强制DOM状态有些HTML的DOM是有状态的,比如<a> 标签,其会有 active,hover, focus,visited这些状态,有时候,我们的CSS会来定关不同状态的样式,在分析网页查看网页上DOM的CSS样式时,我们...原创 2019-11-07 09:08:36 · 188 阅读 · 0 评论 -
vue启动报错Module build failed: Error: ENOENT: no such file or directory
vue启动项目报错,一大坨 如下Module build failed: Error: ENOENT: no such file or directory, scandir '/Users/songmengda/Desktop/aaa/xxx-aaa/develop/gmac/node_modules/node-sass/vendor' at Object.fs.readdirSy...原创 2019-11-05 16:37:40 · 28276 阅读 · 0 评论 -
Markdown编辑工具Typora教程
1. 基本操作1.1 内容目录语法[toc]1.2 标题语法# 一级标题 ## 二级标题 ### 三级标题 #### 四级标题 ##### 五级标题 ###### 六级标题 1.3 引用语法> 引用内容1> 引用内容2>> 引用内容3效果...原创 2019-11-05 11:01:59 · 246 阅读 · 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 · 4623 阅读 · 0 评论 -
浏览器性能优化
Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现: 页面加载时存在明显的...原创 2019-10-16 10:16:28 · 2499 阅读 · 0 评论 -
ios低版本有多少用户在使用,有多少量?
这个数据在苹果的官网上并没有找到具体的数据,苹果官网只公布了最新ios系统占比:https://developer.apple.com/support/app-store/对于其他的 比如ios8.0 、10以下系统占有量有多少,并没有公布。方式一:我们可以使用微信公众平台去查看(由于目前我个人的小程序账号已经注销,没办法进去看,所以一些开发过小程序的人应该有知道如何查看)方式...原创 2019-06-20 19:21:48 · 1275 阅读 · 0 评论 -
js内存管理机制
前言像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存。而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏。内存生命周...原创 2019-06-20 09:49:04 · 2410 阅读 · 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 · 251 阅读 · 0 评论 -
js中字符串的方法:replace;替换字符串中的某个字符
定义和用法 replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。 语法stringObject.replace(regexp/substr,replacement)参数 描述 regexp/substr 必需。规定子字符串或要替换的模式的 RegExp 对象。请注意,如果该值是一个字符串,则将它作为要检索的直接量文本模式,而不...原创 2018-10-22 09:38:52 · 14906 阅读 · 0 评论 -
深入学习ES6 Promise
Promise是es6中异步操作对象,在学习Promise之前我们首先要了解Javascript的一些有关异步操作、JS事件机制等方面的知识,这样才能更好的吸收今天所讲的内容。所以先从浏览器的进程讲起!浏览器进程浏览器是以多进程运行的,而我们的JS引擎是浏览器渲染进程中的一个线程(单线程),所谓的单线程就是一次只能执行一个任务,如果有多个任务需要处理的话,那么就需要排队,等待上一个任务...原创 2019-06-17 09:44:35 · 253 阅读 · 0 评论 -
JS 开发常用工具函数
1、isStatic:检测数据是不是除了symbol外的原始数据2、isPrimitive:检测数据是不是原始数据3、isObject:判断数据是不是引用类型的数据 (例如: arrays, functions, objects, regexes, new Number(0),以及 new String(''))4、isObjectLike:检查 value 是否是 类对象。 如果一个...原创 2019-07-02 09:29:14 · 576 阅读 · 1 评论 -
jsDoc注释规范
@param @argument 指定参数名和说明来描述一个函数参数@returns 描述函数的返回值@author 指示代码的作者@deprecated 指示一个函数已经废弃,而且在将来的代码版本中将彻底删除。要避免使用这段代码@see 创建一个HTML链接,指向指定类的描述@version 指定发布版本@requires 创建一个HTML链接,指向这个类所需的指定类@throws...原创 2019-07-12 15:31:30 · 1632 阅读 · 0 评论 -
什么是外边距重叠?重叠的结果是什么?
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。(当两个垂直外边距相遇时,它们将形成一个外边距。 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。)情况一:当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。情况二:当一个元素包含在另一个元素中时(...原创 2019-07-25 08:40:03 · 2036 阅读 · 0 评论 -
css选择器有哪些?
css选择器 选择器 示例 示例说明 css 备注 .clss .box 选择所有class="box"的元素 1 #id #box1 选择所有id="box1"的元素 1 * * 选择所有元素 2 element p 选择所有<p>元素 1...原创 2019-07-25 09:00:15 · 215 阅读 · 0 评论 -
js计算浮点数,js计算小数误差解决方案,js计算丢失精度,decimal.js的使用
众所周知,计算机在计算浮点数的过程中会丢失精度。这在编程语言中都会出现,js也不例外。0.1+0.2并不等于0.3这就导致了在某些情况下,如果单纯的采用四舍五入toFixed 会出现我们不想要的结果。尤其在计算金额方面,一分都不能出错。为此java中的JDK中提供了BigDecimal类来解决丢失精度的问题。js中也有这样一个库,叫做decimal.js。特点:整数型...原创 2019-08-27 09:26:14 · 535 阅读 · 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 · 3790 阅读 · 1 评论 -
移动端星星评分组件,支持半颗星,1/4颗星,展示与选择
写了一个简单的评分组件 ,已封装为组件 有注释,目前满足自身需求源代码地址:github地址原创 2019-05-10 11:11:53 · 1592 阅读 · 0 评论 -
关于node依赖库 event-stream 的3.3.6版本病毒
event-stream这个库,有很多比如vue-cli 、 gulp 之类的很多工具都在使用这个库。其实这个新闻在公布的第二天,我们就处理了,但是没来得及发文章。 事情的缘由是这样的:2018年11月21日,名为 FallingSnow的用户在知名JavaScript应用库event-stream在github Issuse中发布了针对植入的恶意代码的疑问,表示event-st...原创 2018-12-04 17:33:09 · 1806 阅读 · 0 评论 -
js正则判断是否是手机号,以1开头11位数字
let a=/^1\d{10}$/a.test("12345678901")原创 2018-11-20 18:27:35 · 13424 阅读 · 0 评论 -
css写div角上的三角形
如上图。 用css写出来这个三角形,做一个总结: <div class="top-left-triangle"></div> .top-left-triangle { width: 0; height: 0; border-width: 0 0 30rem / @r 30rem / @r; b...原创 2018-11-07 16:59:49 · 3360 阅读 · 0 评论 -
关于js中的 escape() 、 encodeURI() 、 encodeURIComponent()函数详解
首先看一下这三个函数在js版本中出现的时间 escape() javascript 1.0 encodeURI() javascript 1.5 encodeURIComponent() javascript 1.5 escape() : 采用ISO Latin字符...原创 2018-11-01 21:43:57 · 550 阅读 · 0 评论 -
如何设置cookie和删除cookie
cookie是运行在客户端的,可以用JS来设置cookie.首先需要稍微了解一下cookie的结构,简单地说:cookie是以键值对的形式保存的,即key=value的格式。各个cookie之间一般是以“;”分隔。JS设置cookie:假设在A页面中要保存变量username的值("jack")到cookie中,key值为name,则相应的JS代码为:document.coo...原创 2018-10-31 08:57:41 · 2782 阅读 · 0 评论