秦声不是琴声-CSDN博客

原创一枚普通前端平淡无奇的一年 - 2021年终总结

写在开头hi，大家好我是蛙人。时间转瞬即逝，2021年只剩下没几天了，即将迎来新的一年，新的一年到来意味着将面临新的机遇和挑战，新的一年要加油哦。这里先提前祝大家happy new year !这是我第一次写年度总结，之前每年都是看朋友圈大佬们写。于是今年尝试写下了第一篇，第一次可能写不是太好大家先凑合看看~，但以后每年都会坚持写下去。年度总结是对这一年工作和生活的交代，也是记录这一年留下的痕迹。下面就来跟着我看看这一年的经历吧！谈谈运营我刚开始注册公众号是存在目的的，相信大部分做公众号的

2021-12-29 09:59:24 3294

原创连夜爆肝只为将它送到你的面前，写给初级前端快速转TypeScript指南

一、为什么要用TypeScriptTypeScript可以让我们开发中避免一些类型或者一些不是我们预期希望的代码结果错误。xxx is not defined 我们都知道JavaScript错误是在运行中才抛出的，但是TypeScript错误直接是在编辑器里告知我们的，这极大的提升了开发效率，也不用花大量的时间去写单测，同时也避免了大量的时间排查Bug。二、TypeScript优缺点优点一般我们在前后端联调时，都要去看接口文档上的字段类型，而TypeScript会自动帮我们识别当前的类型。节省.

2021-08-27 13:27:47 335

原创分分钟用这些操作删除项目中无用的console.log代码

前言说起console.log调试，不用多说，那是非常的好用，开发中帮助我们解决了不少Bug。我们经常能在开发环境中看见这一坨一坨的console调试。但是生产环境是绝不对不允许出现console信息代码的。你还在手动一个一个删除吗，那得多累啊！下面我们来看一下这几种方式清除生产环境console无用代码。基本操作Webpack配置uglifyjs-webpack-plugin我们可以看一下该插件介绍，该插件是用于减少我们代码js代码体积。并且如果安装运行该插件的话，node版本是在v6.9.

2021-08-05 15:55:03 1212

原创 Webpack配置环境变量 - 避免踩坑

前言今天来讲一下Webpack配置环境变量，那么环境变量是干啥的。我们在开发项目中都会遇到这种场景，区分开发环境、生产环境、测试环境，不同场景请求不同的接口Api。这时候项目中配置的环境变量就登场啦~，下面来讲一下配置环境变量的方式吧。配置方法Set or Export该方式有个棘手的问题就是windows和mac使用的方式还不同，不同系统使用启动项目还得更改代码，这就有点难受，我们来看一下。package.jsonwindows系统如下配置{ "scripts": { "dev"

2021-06-09 11:01:04 788

原创一文带你掌握Vue3新特性，再也不怕面试官啦

前言记录一下笔记，给各位小伙伴们分享一些常用的Vue3新特性及哪些方法发生了变更。我这里只写一些常用的，更多请看Vue3官网这里有兴趣的可以关注公众号：前端娱乐圈组件v-model支持参数在Vue2.x时，我们要想给子组件传值，还得单独传入。Vue3.x直接以v-model:xxx形式传入参数，并且配合修饰符.sync进行数据同步更新。App.vue<template> <div> {{title}} <Input v-model:title=.

2021-04-19 13:30:02 439

原创面试官：请说说什么是BFC？大白话讲清楚

BFC到底是什么东西BFC 全称：Block Formatting Context，名为 “块级格式化上下文”。W3C官方解释为：BFC它决定了元素如何对其内容进行定位，以及与其它元素的关系和相互作用，当涉及到可视化布局时，Block Formatting Context提供了一个环境，HTML在这个环境中按照一定的规则进行布局。简单来说就是，BFC是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。那么怎么使用BFC呢，BFC可以看做是一个CSS元素属性怎样触发BFC这里.

2021-04-12 12:45:14 11437 8

原创还在傻傻分不清ES5、Es6数组方法？各大姿势来袭

前言初衷：在面试中，面试官经常问到说一下Es5和Es6的数组方法有哪些，有很多同学老是分不清楚，今天笔者就来分享一下。适合人群：前端初级开发Es5系列indexOf用途：用于查找数组中是否存在某个值，如果存在则返回某个值的下标，否则返回-1let list = [1, 2, 3];console.log(list.indexOf(2)) // 1console.log(list.indexOf("蛙人")) // -1map用途： map是一个数组函数方法，接收三个参数，val

2021-04-01 12:37:18 317

原创分享15个Webpack实用的插件！！！

前言初衷：分享一下工作中实用的几个Plugin，希望对大家有些帮助，不喜勿喷。html-webpack-plugin用途：将一个页面模板打包到dist目录下，默认都是自动引入js or css安装cnpm i html-webpack-plugin@3.2.0 -D配置index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m

2021-03-29 10:26:49 638 4

原创手把手教你写一个Vue组件发布到npm且可外链引入使用

前言我们为什么要写个组件上传到npm镜像上呢，我们肯定遇到过这样一个场景，项目中有很多地方与某个功能相似，你想到的肯定是把该功能封装成Component组件，后续方便我们调用。但是过了一段时间，你的Leader让你去开发另一个项目，结果你在哪个项目中又看见了类似的功能，你这时会怎么做? 你也可以使用Ctrl + c + v大法，拿过来上一个项目封装好的代码，但是如果需求有些变动，你得维护两套项目的代码，甚至以后更多的项目…，这时你就可以封装一个功能上传到你们公司内网的npm上(或者自己的账号上)，这样

2021-03-27 12:08:44 810 1

原创分享12个Webpack中常用的Loader

前言初衷：整理一些常用的loader分享给大家，方便知道在什么场景下该用什么loader。如果有大佬都懂悄悄左滑就行，不喜勿喷。适合人群：前端初级开发。style-loader用途：用于将css编译完成的样式，挂载到页面style标签上。需要注意loader执行顺序，style-loader放到第一位，因为loader都是从下往上执行，最后全部编译完成挂载到style上安装cnpm i style-loader -D配置webpack.config.jsmodule.exports

2021-03-22 12:20:11 2602 2

原创带你入门Webpack及它能干什么？

前言初衷：本文我们讲一下Webpack，说说它能干什么及为什么要使用它。把我整理的笔记分享给大家，如有错误请各位指出，不喜勿喷。适合人群：前端初级开发，大佬绕道。本文讲解是Webpack4.x，注意版本。为什么要使用Webpack在之前我们都是用传统的方式去开发一个系统，html、css、js，就这些。开发完之后直接给后台人员去部署，当然这没什么问题。当我们的项目需求不断增加，代码也就越多，越不好维护，一个文件代码都上百甚至上千行，里面代码甚至都是重复的,还需要担心script标签依赖顺序问题

2021-03-17 10:02:28 454

原创聊聊在Vue项目中使用Decorator装饰器

前言初衷：前几天我在公司其它Vue项目中，发现了是用Decorator装饰器模式开发的，看起来整体代码还不错，于是就做了一下笔记分享给大家，不喜勿喷。适合人群：初级前端开发，大佬绕道。本项目是使用js和Decorator装饰器搭建，如果大家项目用的是ts，那么使用装饰器方法跟本文介绍的不同，请自行参考ts 使用装饰器。需要注意，使用这种模式，变量会存在污染，所以不能出现重名变量什么是DecoratorDecorator装饰器是一种类class相关的语法，所以Decorator装饰器只能用在cl

2021-03-15 13:48:06 1486

原创聊聊什么是CommonJs和Es Module及它们的区别

前言初衷：将我整理的笔记分享给大家，希望本篇文章能给你带来不一样的认知，不喜勿喷。适合人群：前端初级开发，大佬绕道。内容结构：为什么有模块化 -> 基本语法 -> 两者区别。为什么会有CommonJs和Es Module呢我们都知道在早期JavaScript模块这一概念，都是通过script标签引入js文件代码。当然这写基本简单需求没有什么问题，但当我们的项目越来越庞大时，我们引入的js文件就会越多，这时就会出现以下问题：js文件作用域都是顶层，这会造成变量污染js文件多

2021-03-12 10:35:39 1113

原创带你轻松理解数据结构之Map

前言初衷：最近在读《深入理解Es6》这本书，之前没好好全面学过Es6语法，也是趁着不忙的阶段重新好好阅读整理一下笔记分享给大家，不喜勿喷。适合人群：前端初级开发，大佬绕道。内容结构：认识Map -> 基础用法 -> 应用场景Map结构跟我们上节讲解的set结构语法差不多《理解数据结构之Set，只要5分钟》，不同是Map语法是一种数组键值对格式，Map也是处理了防止对象键值强制类型转换问题。Map是利用数组特性解决的，我们都知道数组可以传入任意类型值，所以Map结构也接收所有类型值

2021-03-10 09:28:24 460

原创这些工作中用到的JavaScript小技巧你都知道吗？

前言初衷：整理一下工作中常用的JavaScript小技巧分享给大家，希望能帮助到各位小伙伴们，在工作中提升开发效率。适合人群：前端初级开发，大佬绕道。1.函数参数默认值在Es6之前，我们要写参数默认值的话，还需要在函数体内写一堆判断逻辑，而Es6之后新出参数默认值语法，我们来看一下。function person(name, age, sex = "male") { console.log(name, age, sex) // 蛙人 24 male}person("蛙人", 24)2

2021-03-08 09:38:32 148

原创理解数据结构之Set，只要5分钟！

前言初衷：最近在读《深入理解Es6》这本书，之前没好好全面学过Es6语法，也是趁着不忙的阶段重新好好研究一下整理一下笔记分享给大家，不喜勿喷。适合人群：前端初级开发，大佬绕道。内容结构：概念 -> 基本语法 -> 应用场景在Es6之前，数组一直是JavaScript中唯一的集合类型，不过有一些开发者们认为非数组对象的也是集合，只不过是键值对集合。但是在Es6之前，开发者们只能使用数组集合，但是数组是用下标索引index取值，所以经常被用于创建队列和栈，如果开发者们要使用非数组索

2021-03-02 21:46:05 447

原创【建议收藏】分享一些工作中常用的Git命令及特殊问题场景怎么解决

前言初衷：记得刚入行时，Git工具使不明白老是代码有冲突，甚至跟同事的代码都不同步（想想那时候都难）。最近整理一下Git笔记命令分享给大家，避免大家出错。适合人群：前端初级开发，大佬绕道。内容结构：常用的基本操作命令 -> 特殊问题的场景怎么解决。常用的基本操作git init这个git init不用多说，大家都知道这个命令是初始化当前目录变成可以使用git管理的仓库，并且是空的。git clone 远程地址[url]通过git clone命令从远程地址下载出来，这个也不用过多

2021-03-01 09:28:54 144 1

原创解构：使数据访问更便捷！

前言初衷：最近在读《深入理解Es6》这本书，之前没好好全面学过Es6语法，也是趁着不忙的阶段重新好好研究一下整理一下笔记分享给大家，不喜勿喷。适合人群：前端初级开发，大佬绕道。内容结构：基本语法 -> 语法利弊 -> 应用场景为何使用解构功能在Es5中，我们之前要想从对象或数组对象中获取特定的数据，通常都是这么做的。来看下面例子let person = { name: "蛙人", age: 24}let name = person.namelet ag

2021-02-25 13:13:15 265

原创总结Es6对象扩展了哪些功能？

前言在JavaScript中，几乎每一个值都是某种特定的类型的对象。Es6也着重提升了对象的功能性，Es6通过多种方式来加强对象的使用，通过简单的语法扩展，提供更多操作对象及与对象交互的方法。下面来介绍它们。对象字面量语法扩展对象字面量如此就行，就是我们想创建对象，不在需要编写冗余的代码。直接通过的它的简洁语法就可以实现。那么看看Es6为对象做了那些特性吧。属性初始值的简写在Es5中，对象字面量只是简单的键值和集合，这意味着初始化属性有一些重复。function person(name) {

2021-02-23 12:59:31 178

原创你真的了解ES6函数特性么?

hello大家好，又见面了。假期转瞬即逝，年后开工的第一天，早上是真的不想起床吖，为了不迟到闭着眼睛就穿衣服。好啦好啦，步入正题啦，打起精神哦！前言函数是所有编程语言中重要的组成部分，在Es6出现之前 JavaScript的函数语法一直没有太大的变化，从而遗留了很多问题和隐晦的做法，导致实现一些功能需要编写很多代码。函数形参默认值JavaScript函数有一个特别的地方，就是无论在函数形参里定义了多少参数，都可以传入任意数量的参数，但是有的情况下，我们的参数只是可填，这样的话我们还在函数体呢写一

2021-02-18 11:06:16 2824 18

原创 Gulp还能这么玩？

哈喽大家好，我依旧是那个可爱的蛙人。我在北京某个角落和某人苦苦逼逼在写码，你在那里过得好的嘛，某人会给你加需求嘛。话不多说，直接楼代码。演示我们先来演示一下完整效果我写这个例子呢，就是我在写vue项目中，每次创建一个文件还得手动敲<template> <script> <style>标签，这样就很繁琐。我最近呢也在捣鼓Gulp发现它还能这样玩，“输出文件”，“模板注入”。如果对这个demo感兴趣的小伙伴继续往下看，我贴上代码。配置环境如果还没装Gulp环

2021-02-07 11:11:27 2470 8

原创一看就懂的var、let、const三者区别

哈喽大家好，又见面啦，我依旧是那个可爱的蛙人。今天又周五了啊，划水人的一天，开心。话不多说哈，直接搂代码var 变量提升机制我们在全局作用域中或还是在局部作用域中，使用var关键字声明的变量，都会被提升到该作用域的最顶部，这就是我们常说的变量提升。function person(status) { if (status) { var value = "蛙人" } else { console.log(value) // undefined

2021-02-05 13:12:17 2865 8

原创探索JavaScript对象构造函数都有哪些模式

为什么要出模式这概念，每个模式的出现都是解决一种问题，当然每个模式都是有利有弊的。模式它能干什么，它能帮助我们代码简洁，且更容易维护，代码不冗余。这里借用修言大佬的理解:设计模式是“拿来主义”在软件领域的贯彻实践。和很多人的主观臆断相反，设计模式不是一堆空空如也、晦涩鸡肋的理论，它是一套现成的工具 —— 就好像你想要做饭的时候，会拿起厨具直接烹饪，而不会自己去铸一口锅、磨一把菜刀一样工厂模式工厂模式在软件工程领域是一种广为人知的设计模式，这种模式抽象了创建对象的具体过程。该模式防止一个接口创

2021-02-02 09:49:35 466

原创 JavaScript基本包装类型

基本包装类js中为了便于基本类型操作，提供了3个特殊的引用类型：Boolean、Number、String它们具有基本类型特殊行为。实际上，每当读取一个基本类型的时候，js内部会自动创建一个基本包装类型对象，可以让我们调用一些方法来操作。let str = 'hello 蛙人'let str1 = str.substring(2)上面example中，str是一个字符串类型，然而它调用了substring方法，并将结果保存在了str1中，我们知道基本类型不是对象，我们就会想，哎它不是对象为什么

2021-01-29 13:30:27 1120 2

翻译深入理解js对象

定义对象两种方式定义对象let person = new Object()obj.name = '蛙人'obj.age = 23obj.sex = 'male'obj.getAge = function() { return this.age}上面的例子创建了一个person对象实例，并为它添加了属性及方法,在早期js开发人员经常使用这种方式，但是现在对象字面量成了首先方式，看一下字面量定义对象。let person = { name: '蛙人', age: 23,

2021-01-26 13:13:38 131

原创快速掌握js字符串方法

js字符串常用方法也是面试中经常遇到到问题。话不多说，直接code一把梭indexOfindexOf该方法是字符串里最常用的,一般使用在判断情况下。查找字符串首次出现的位置,如果找到返回该字符串的下标值,下标从0开始查找,找不到返回-1。有很多小伙伴们，不知道indexOf第二个参数，默认可填，第二个参数理解就是从第几位开始查找, 如果找不到返回 -1 演示:var str = 'hello 秦司令';console.log(str.indexOf('秦')) // 6 console.

2021-01-25 15:26:17 459

原创 js查找某个字符串出现了多少次, 快速掌握

js查找某个字符串出现了多少次, 快速掌握如何查找某个字符串出现了多少次，这是面试中经常被问到的。话不多说，直接code 一把梭1. 通过for循环遍历查找/*** str { String } 完整字符串* tatget { String } 目标对象，要查找的字符串*/function searchStrEach(str, target) { let sum = 0 for (let key of str) { if (key == target) {

2021-01-25 12:45:33 4919

翻译 Es6对象新方法

Object.freeze()该方法可以冻结一个对象,冻结对象指的是不能向这个对象,添加属性、删除属性、修改属性、以及不能修改该对象已有属性的可枚举型、可写性、可配置性，该方法返回被冻结的对象。演示:var json = { name:'秦司令'};var obj = Object.freeze(json);obj.age = 20; // 不生效obj.name ...

2018-12-20 11:31:18 554