大华阿大华-CSDN博客

原创 js 知识点复习 javascript 继承的几种方式

javascript 继承可以理解为将一个对象所拥有的属性复制到另一个对象。这里记录几种实现的方式。首先定义一个父级构造函数： // 父级构造函数 A function A () { this.name = 'A' this.age = 16 } A.prototype.sayHi = function () { console.log('Hi i am A') }一、原型继承原型继承是通过将子类的原型 prototype 赋值为父类实例的方式来实现。

2021-12-06 11:13:58 133

原创 white-space 处理 textarea 文本内容的换行空格

一、前言前端开发可能会遇到这样的场景，用户通过 <textarea> 文本域输入文本，前端拿到数据后需要对文本内容进行空白符处理，进行换行等。如果直接就将字符串显示在界面中，得到的可能不是我们所期待的效果。接下来记录通过 css 的 white-space 或 word-break 实现文本处理空白格，文本换行。二、默认情况下，文本空白符的处理空白符，指的是空格、换行、制表符。如下图，通过 <textarea> 输入几种测试格式的文本。<style>

2021-11-30 11:20:31 1970

原创从 a == 1 && a == 2 && a == 3 来回顾 js 隐式转换

/**ToString将其他类型的值转换为 string 类型。*/// null 转为 “null”console.log(String(null)) // “null”// undefined 转为 “undefined”console.log(String(undefined)) // “undefined”// number 转为对应的字符串。console.log(String(10)) // “10”console.log(String(-10)) // “-10”c

2021-03-02 10:59:09 335

原创前端面试题 - 可以手写一个new()吗？new 的原理

可以手写一个new()吗？首先了解下 new 执行的大致原理：1.创建新对象。2.对象的原型与构造函数挂钩。3.将对象作为上下文，执行构造函数。4.判断构造函数是否有返回对象或函数，有则返回，没有则返回创建的对象。// 模拟 new function myNew (constructor, ...args) { // 步骤1：创建新的对象 let targe = {} // 步骤2：将该对象的 __proto__ 与构造函数的 prototype 进行挂钩。 targe.__pro

2021-02-03 20:05:01 709 3

原创 javascript的 Map 对象和 Set 对象，做个笔记

/**map1.保存键值对。2.迭代时会根据元素的原始插入顺序进行循环，每次迭代后会返回一个形式为 [key, value] 的数组。3.任何值（对象或原始值）都可以做为键或值。*/let myMap = new Map()let keyObj = {};let keyFunc = function() {};let keyString = ‘a string’;// 添加键myMap.set(keyString, “和键 ‘a string’ 关联的值”);myMap.set(

2021-01-28 22:54:19 209

原创 Vue 服务端渲染原理拆分成三步个步骤简单的实现一个案例

前言[文章地址](https://juejin.im/post/5d04aee66fb9a07ed2246bcd)可能我们平常接触比较多的是使用 vue + vue全家桶来搭建起一个单页（SPA）应用。用 ssr 搭建项目比较少，本文是记录我在学习 ssr 过程中的一些见解，如有出错或疏漏，麻烦帮忙指正！文章共分为三个步骤来实现搭建一个简单 ssr 项目：1.搭建 SPA 项目（实现客户...

2021-01-27 15:42:19 1474

原创内元素宽度设为100%为什么会超出外元素

前言一个元素(外元素)嵌套着另一个元素(内元素)，外元素固定宽度，内元素宽度设置为 100%，但是内元素却溢出了，如图：看下代码，来分析下什么原因造成的： <style type="text/css"> .wrap { width: 500px; height: 500px; background-color: #ccc; margin: 30px auto; } .inner { width: 100%; height: 300px;

2020-10-14 22:46:04 5068 1

原创 vue 双向数据绑定 v-model 和 .sync 修饰符就是一个语法糖

方式一v-model 指令只能用于 input、textarea、单选框、复选框等类型的输入控件，也可以用于组件上，他是一个语法糖，可用于子父组件的双向通信// home.vue<template> <div class="home"> <div>在父组件的值：：： {{ testVal }}</div> <hr&g...

2020-01-22 16:00:08 402

原创 git 基础命令的使用

前言将 git 基础用到的命令记录下来。一、把文件添加到缓存区git add readme.txt二、把文件提交到仓库，缓存区的内容提交到单前分支git commit -m '提交内容的描述'-m 后面带的是本次提交的说明。可以不写 -m 及其后面的内容。小结git commit 可以一次性提交多个文件git add 文件后再 git commit 只添加一个文件，...

2019-12-09 21:47:33 195

原创 new Date() 在 ios上的兼容

前言new Date() 在 ios 中存在兼容问题。在 ios 中使用 new Date(‘2019-12-02 10:00:00’) 会出现 Invalid Date 的报错，所以使用 new Date(‘2019-12-02 10:00:00’).getTime() 会出现 NaN。因为 ios 不支持这种时间格式。解决方式如下：// 将时间格式转化为 '2019/12/02 10:...

2019-12-02 22:57:35 602

原创 typescript的基础知识

/*原始数据类型*/// 字符串let a: string = ‘1’// let a2: string = 1// 数值let b: number = 12let b2: number = Infinitylet b3: number = NaN// 布尔值let c: boolean = true// new Boolean() 会生成一个 Boolean 对象，不...

2019-11-26 21:03:15 263

原创 js正则表达式语法

// 一、方括号 [] 用法let a = ‘abcd’let a2 = ‘532405’// [ab] 匹配方括号里任意字符console.log( a.match(/[ab]/g) ) // [‘a’, ‘b’]console.log( a.match(/[^ab]/g) ) // [‘c’, ‘d’]console.log( a2.match(/[0-3]/) ) // 第一次匹...

2019-10-14 21:33:53 246

原创 vue js日期时间格式化

// /utils/index.jsfunction dateFormatInit() { String.prototype.dateFormat = Number.prototype.dateFormat = function( fmt = "yyyy-mm-dd HH:MM:SS" ) { let date = new Date(this); let fmtD...

2019-10-11 10:01:15 7906

原创 vue cli3 element-ui懒加载按需加载ui组件

前言vue cli3.x + UI框架开发时，经常实际只用到的 UI框架提供的几个组件，而每次我们是全部引入，这会照成程序需要消耗更多的资源，尤其是在移动端（例如使用 mint ui）,在性能上会有更大的影响，照成不好的用户体验。接下来记录以 vue cli3.x +element ui 为例实现按需加载组件。未引入 element 插件时引入 element ui（npm i e...

2019-10-08 10:23:23 2451 3

原创 vue+Element-ui实现前端读取 excel 表格数据转换为 JSON 数据进行展示

前言vue Element Ui 通过 el-upload 来读取表格文件，借助 XLSX（安装： npm i XLSX -S）来实现读取到的表格转为 JSON 数据格式，然后展示在 el-table 中。<template> <div>  <el-upload class="upload"...

2019-09-26 14:58:47 10402 6

原创前端 js 读取上传文件 - FileReader

前言前端通过标签可以进行文件的读取，例如读取上传图片文件信息等，再对其进行进一步的操作。这时可以用到 FileReader 接口来进行文件数据的处理。FileReader 的方法abort() - 可用于中止读取readAsArrayBuffer() - 读取文件并且将一个包含文件内容的ArrayBuffer保存咋result属性中。readAsBinaryString() - ...

2019-09-24 23:06:23 2078

原创 nuxt.config,js 配置 Element-ui 懒加载，实现ui框架按需加载，优化 vendors 大小

前言nuxt 学习之路 - nuxt.config.js 配置篇。通过实现框架懒加载来实现优化项目打包体积大小。（本篇使用 element-ui 为例，使用插件 babel-plugin-component）。一、未优化前// plugins/element-ui.jsimport Vue from 'vue'import { Button, Loading, Notification...

2019-08-30 11:03:44 3269

原创 nuxt.config,js 配置 scss（less），实现全局样式，全局变量，全局混合

前言nuxt 学习之路 - nuxt.config.js 配置篇，进行 scss 配置，实现全局样式，全局变量，全局混合（以 scss 为例， LESS 和 Stylus的配置方式相同）### 一、配置全局 scss，每个页面都引入要使用 scss 就要先安装 **node-sass** 和 **sass-loader** （npm install --save-dev node-sass...

2019-08-28 17:21:28 7192 4

原创 vue cli3 优化配置生产去除console.log - from UglifyJs `warnings` is not a supported option

使用 vue cli 3.x 配置生产去除 console.log 时出现了报错，如下，写法一：// vue.config.jsmodule.exports = { optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { comp...

2019-08-16 11:14:33 11483 4

原创 foreach无法 return 如何中断foreach循环

前言数组的 forEach 用于循环遍历数据，会对数组中有效的每一项执行一次回调函数，但是在遍历回调中使用 break 或 continue 会报错，使用 return 也无法终止循环。语法Array.forEach((currentValue, index, array, thisArg) => {})currentValue: 数组中正在处理的当前元素。index(可选)...

2019-08-09 09:08:09 7029 3

原创 js获取元素高度和宽度的方式 - cientHeight、offsetHeight、getComputedStyle、getBoundingClientRect

javascript获取元素高度可以通过这几种方式获取：cientHeight、offsetHeight、getComputedStyle、getBoundingClientRectclientHeight 获取的元素高度包括内边距。如果元素是 display: inline; 那么得到的结果是 0 。offsetHeight 获取元素的高度，包括内边距和边框的宽度。如果元素是 displa...

2019-07-17 17:46:13 1622

原创 vue报错Uncaught SyntaxError: Unexpected token <

vue 项目运行时遇到一个报错，如下图：点开后是这样的提示：可能是资源路径的引用出错了，例如 vue.config.js 配置里 publicPath: ‘./’ 而浏览器是 http://192.168.1.12:8080/test/#/ 这样去访问项目，多了一个二级目录 /test/，就造成了资源找不到。方法一：把 vue.config.js 配置里 publicPath: '...

2019-07-04 17:47:43 13147 2

原创 vue使用javascript动态创建script - 动态引入外部js文件

// 创建script标签，引入外部文件let script = document.createElement('script')script.type = 'text/javascript'script.src = 'http://xxx.xxx.js'document.getElementsByTagName('head')[0].appendChild(script)// 创建s...

2019-07-01 17:44:05 25405 1

原创 vue - cli3.x - 使用 postcss-px2rem 自动将 css 的px单位转换为 rem 单位 - postcss.config.js 配置

开发移动端的时候，经常需要自己手动去将 px 单位计算成 rem 单位，这很消耗时间。我们可以使用 postcss-px2rem 插件来实现将 px 自动转换为rem，这样就省去的计算的步骤，加快开发速度。安装：执行 npm i postcss-px2rem --save-dev配置：postcss.config.js ：如下：module.exports = { plugins: ...

2019-06-18 16:49:44 2493 1

原创 vue - webpack - 打包出现 - There are multiple modules with names that only differ in casing.

vue 在使用 webpack 打包时出现警告，There are multiple modules with names that only differ in casing.如下图：There are multiple modules with names that only differ in casing. 是有多个模块同名了仅大小写不同，可能是重复引用了，或者引用的文件名大小写不一致...

2019-06-17 20:02:01 1029

原创 pm2配置文件修改日志路径不生效 ecosystem.json

pm2配置不生效在pm2的配置文件中修改了日志输出路径后不生效，解决方法是使用 pm2 delete xx(指对应pm2列表的id)杀掉进程后，重新开启。原文地址 https://juejin.im/post/5cc2f53a518825251241215e...

2019-04-26 20:42:54 1338

原创前端面试题 - css布局中对 BFC 的了解？BFC 的应用？BFC 的创建？解决float高度问题 margin重叠问题

哈喽，各位小伙伴好！今天来整理下前端关于css布局的一个知识点 - BFC(Block fomatting context)，如果知识点梳理有出错的地方，望伙伴们帮忙指出，一起进步~一、什么是 BFCBFC 可以理解为建立一个布局容器，容器里按自己的方式来布局，且与容器外界的元素互不影响。二、BFC 特性1.BFC里的布局跟常规流里的一样，例如盒子会在垂直方向排列。2.属于同一个BF...

2019-04-20 15:32:47 338

原创 vue cli 3 配置分环境打包,配置多环境打包,cross-env没有效果,cross-env在vue-cli 3中的使用

vue-cli 3 实现分环境打包vue 分环境打包模式vue 分环境打包在开发过程中，可能会遇到这样一个问题，在开发环境，测试环境和生产环境中我们会用到不一样的接口，每次在不同环境中都要手动去切换接口地址，只会很麻烦，有时还可能出现操作失误。这时候就需要用到分环境打包了，根据不同的环境，我们使用对应的接口，这样也就不用手动去操作。模式vue-cli项目下默认有三种模式：develop...

2019-03-07 20:49:39 5532

原创 vue-cli 3 路由懒加载不生效。vue-cli 3 路由懒加载。vue-cli 3 配置路由

按照推荐将vue的路由配置如下来实现懒加载，但是路由懒加载不生效，还是会把所有的chunk加载出来： { //首页 path: '/index', name: 'index', component: () => import('@/views/index/index.vue'), }, { //列表 ...

2019-02-27 14:05:43 9196 1

原创 koa接受不到post的参数。不支持 form-data类型数据，ctx.request.body为空

在使用 koa-bodyparser 中间件时，为前端提供的接口如果post传过来的数据是 form-data 类型的，此时通过 ctx.request.body 获取不到 post 的参数。原因是 koa-bodyparser 中间件不支持 form-data 类型。可以使用 koa-body 中间件代替，用法跟 koa-bodyparser 差不多：//安装npm i koa...

2019-02-12 20:57:19 9501 1

原创 linux安装node.js。解决node -v 不是命令的问题

一、在linux系统里有几种安装node的方式，这里推荐的是直接安装编译好的node.js。步骤：下载对应的二进制文件，wget https://nodejs.org/dist/v6.9.2/node-v6.9.2-linux-x64.tar.xz 解压为tar类型，xz -d node-v6.9.2-linux-x64.tar.xz 解压，tar -xvf node-v6.9.2-l...

2019-02-12 20:44:08 4502

原创 input type=“file” 在移动端H5页面实现调用本地相册、拍照、录音

<input type="file" accept="image/*" mutiple="mutiple" capture="camera" />三个属性：accept - 规定可提交的文件类型。capture - 系统所捕获的默认设备。camera(照相机)，camcorder(摄像机)，microphone(录音)mutiple - 支持多选。当支持多选时，mult...

2019-01-07 13:08:15 16391 2

原创 javascript的浅拷贝与深拷贝

一、数据类型JavaScript有lia两种数据类型：1.基本数据类型：Number、String、Undefined、Null、Boolean、Symbol。这六种数据类型数据段简单，大小可以确定，存放在栈中，是直接按值存放的，也可以直接访问。2.引用类型：如对象、数组等。这些对象的大小不一定，是存放在堆中的，其在栈中的值只是一个指向堆的指针。二、引发的问题1.复制基本...

2019-01-05 15:06:17 138

原创 nuxt配置实现axios在开发时的跨域代理

最近在使用nuxt搭建项目遇到跨域的问题，这里记录下nuxt配置实现axios代理，解决跨域的问题。一、用nuxt提供的模板搭建项目时已经安装了axios，接下来在 nuxt.config.js里进行配置，如下：module.exports = { modules: [ '@nuxtjs/axios', ], axios: { proxy: true, ...

2018-11-13 17:27:54 8015 1

原创 npm的命令参数 --save-dev和 --save两者有什么区别?npm install的 -D 和 -S

我们在安装npm包的时候经常会遇到 --save-dev 和 --save 这两个命令参数，两个命令都是往package.json文件里写入信息，两者有什么区别呢？1. --save 会把依赖包名称添加到 package.json 的 dependencies 键下，而 --save-dev 会添加到 devDependencies 键下。2.dependencies 是运行时的依赖，而d...

2018-08-09 21:27:10 2915

原创解决在手机端输入法软键盘把底部的固定定位按钮撑起来的问题

在手机端开发过程可能会遇到这样一个问题：底部有一个固定定位的按钮，然而每次一点击输入框，弹出输入法的时候，这个底部的按钮会随着输入法被顶上去。解决方法是，调用浏览器窗口改变时执行的函数。//原生 JSwindow.onresize = function(){ console.log("窗口发生改变了哟！");}//css.btns { position: fixed...

2018-08-02 17:52:34 4859

原创 js获取浏览器当前屏幕的宽度和高度

1.获取HTML元素 document.documentElement2.获取body元素 document.body3.兼容所有浏览器获取当前屏幕的宽度。 var winWidth = document.body.clientWidth || document.documentElement.clientWidth;4.兼容所有浏览器获取当前屏幕的高度。...

2018-07-23 22:50:26 10918

大华阿大华的博客