- 博客(70)
- 收藏
- 关注
RSS订阅原创 Babel/Plugin -支持JS新语法[可选链操作符/空值合并操作符/空值合并操作符]
最近在学习ES最新几个版本的新特性的时候发现 **?.**可选链操作符, **??**空值合并操作符, **??=**空值合并操作符等。大致的演示一下用法：?. 可选链操作符var obj = { a: 1},obj.a // 1obj.b // undefinedobj.a.b // undefinedobj.b.c // Error报错obj?.b?.c // undefined// 允许我们深层的检索有没有该属性?? 空值合并运算符// 当左侧的值为null和undef
2022-05-16 17:22:51
2061
原创 JS-时间日期
日期时间GMT // 格林尼治标准时间UTC // 协调世界时，又称世界统一时间，世界标准时间，国际协调时间，简称UTC（Universal Coordinated Time）。时间戳 // 1970年1月1日午夜到指定日期（字符串）的毫秒数// Q1: UTC和GMT的区别？1. UTC是根据原子钟来计算时间，而GMT是根据地球的自转和公转来计算时间。2. UTC是现在用的时间标准，GMT是老的时间计量标准。UTC更加精确，由于现在世界上最精确的原子钟50亿年才会误差1秒，可以说非常精确
2022-01-10 15:44:01
472
原创 CSS -文本溢出显示省略号
单行文本溢出.hidden { overflow: hidden;（文字长度超出限定宽度，则隐藏超出的内容） white-space: nowrap;（设置文字在一行显示，不能换行） text-overflow: ellipsis;（规定当文本溢出时，显示省略符号来代表被修剪的文本）}多行文本溢出.hidden { -webkit-line-clamp: 2;（用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性）
2021-12-30 13:41:26
199
原创 docker-安装-01
安装 (Linux环境)1. 卸载yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-latest-logrotate \ docker-logro
2021-12-16 22:43:10
132
原创 JS-js引擎解析过程（补充）
语法解析作用： 通过对JS的代码块进行基本的语法解析。如果发现低级的语法错误(SyntaxError)，就会抛出相应的语法错误(Error)，则继续对下一个代码块继续进行语法分析。如果该代码块解析成功，将会进入到下一个阶段预编译阶段。预编译完成语法分析的代码块会进入到这个阶段，预编译阶段涉及到执行环境问题。(全局环境和函数环境以及eval环境)当代码块进入到预编译阶段首先会进入全局环境，当每个函数函数被调用的时候才会进入函数环境，预编译四重奏：创建AO对象找形参和变量声明，
2021-07-12 18:03:25
248
原创 JS - API的封装：数组篇(1)
数组的API是居多的。 //创建一个方法，返回value值对应的key function findKey (obj,value, compare = (a, b) => a === b) { return Object.keys(obj).find(k => compare(obj[k], value)) } findKey(myObject, keyValue) // 在数组中寻找min/max
2021-07-12 18:01:48
187
原创 CSS - css样式选择器优先级
!important > 行内样式 > 内嵌样式 (ID选择器样式 > 伪类> 属性选择器 > class类选择器样式 > 标签选择器样式>*(通配符))> 外部样式具体的权重的问题：!important //权重为 无穷大style = “” // 行内样式 1000#div // id 选择器 权重为100.class // class类 权重为10element
2021-07-12 17:59:26
88
原创 CSS3 - css3的新特性
了解css3的新特性有助于我们了解css3的独特之处。选择器css3中新增了很多新的选择器供我们使用，解决了之前很多需要js才能解决的布局问题。 element1~element2: 选择element1元素后面的每个element2元素。 [attribute^=value]: 选择某元素attribute属性是以value开头的。 [attribute$=value]: 选择某元素attribute属性是以value结尾的。 [attribute*=value]: 选
2021-07-12 17:58:59
142
原创 ES6 - Promise详解
在了解Promise之前，我们来增加一些基础知识。在前端中，异步是JS的重要特点，可以说没有异步处理，就没有前后端分离这一说。固然异步处理有异步处理的好处，比如：防止单线程阻塞的问题等。但是异步也会给我们带来一些问题。所以这个时候就需要异步的同步化。问题来了，请问异步同步化的方法有几种？回调函数（容易导致回调地狱）PromiseGenerator (微任务)async/await接下来，我们来聊聊什么Promise，以及Promise是如何处理异步同步化问题的。Promise 对象为了
2021-07-12 17:58:19
311
原创 ES6 - Generator函数和async/await方法
今天我们来详细了解一下另外两种的处理异步同步化的方法。先来看一个实例。// 使得下面代码按照p2, p1的顺序打印let p1 = function () { return new Promise((resolve, reject) => { setTimeout(() => { console.log('p1'); resolve('p1'); }, 1000)
2021-07-12 17:57:24
191
原创 NodeJS-进程管理pm2/forever/nodemon/supervisor/ts-node-dev
无论在开发阶段还是在上线阶段，对进程的管理是大大解决时间和成本的。pm2node.js server tools// 1. 安装// 全局安装$ yarn global add pm2# OR$ npm install pm2 -g// 局部安装$ yarn add -D pm2# OR$ npm i -D pm2// 2. 使用# global$ pm2 start server/index.js// 3. 常用指令$ pm2 start app.js$ pm
2021-07-12 17:56:21
1047
转载 vue - params和query传递参数的不同
我们从vue-router和node接收两个方向讲讲区别路由传参的两种params和query点击之切换到w组件并传递id值和age值<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" /><router-link :to="{ A: 'xxx', parmas: { xx:'xxx' }}" />routes:{ ??? }query<router-link :to="{ name: 'W', quer.
2021-07-12 17:54:55
167
原创 DEMO-拖拽插件
Vue的拖拽插件拖拽插件vuedraggable 方式是标准的组件式封装，并且将可拖动元素放进了transition-group上面，过渡动画都比较好vuedraggable拖动可以在updated中监听到vuedraggable的拖动规则是 拖动元素后到新位置，后面元素依次退了一个位置1. 安装npm install vuedraggable --save2. 引入import vuedraggable from 'vuedraggable'components: {vuedragga
2021-07-05 14:34:56
200
原创 JS-事件流
事件就是⽂档或浏览器窗⼝中发⽣的⼀些特定的交互瞬间，⽽事件流(⼜叫事件传播)描述的是从⻚⾯中接收事件的顺序。事件冒泡事件冒泡(event bubbling)，即事件开始时由最具体的元素(⽂档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点。看如下例⼦：<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>Document</titl
2021-05-19 00:24:44
70
原创 babel-的认识和配置
Q1: babel.config.js 和.babelrc的区别// babel 7.x 以上支持两种- babelrc 只会影响本项目中的代码,相对文件的配置文件。- babel.config.js会影响整个项目中的代码，包含node_modules中的代码,当前项目维度的配置文件，相当于一份全局的配置文件。如果项目决定使用这个配置文件，就一定会应用到所有的文件转换中。babel : JS 的编译器。将ES6->ES5缺点： 不能够翻译es6新的API.<script typ
2021-05-17 11:56:08
170
原创 vue-vue.config.js的配置
vue.config.jsVue-cli3.x 脚手架创建之后需要手动创建vue.config.js进行配置请将其放在与pack.config.js同一个目录中。同时会被@vue/cli-service自动加载。// vue.config.js/** * @type {import('@vue/cli-service').ProjectOptions} */module.exports = { // 选项... publicePath: '/', // 部署应用包的基本url,
2021-05-17 11:54:58
484
原创 webpack-plugins的理解
Plugin （插件）plugin 就是对某个现有的框架进行扩展，webpack中的插件就是对webpack现有的功能进行扩展，比如打包优化，文件压缩等。Q1: plugin 和 loader的区别？loader主要转换某些类型的模块，相等于一个转换器plugin插件是对webpack本身的扩展，是一个扩展器。// 使用过程：// 版权名的插件steps1: 通过npm安装需要的插件steps2: 在webpack.config.js中配置插件{ plugins: [ n
2021-05-17 11:54:04
183
1
原创 webpack-loader的理解
loader详情：Webpack的一个核心概念对于webpack本身来说，不具备这些转化的能力。给webpack扩展对应的loader就可以。loader 的使用过程通过npm安装需要的loader//加载 CSS 文件并解析 import 的 CSS 文件，最终返回 CSS 代码npm install --save-dev css-loader// 负责将样式添加在DOM上npm install --save-dev style-loader//加载并编译 LESS 文件npm i
2021-05-17 11:53:27
149
原创 webpack-打包工具的比较
打包工具的分类？仅介绍 4 款主流的打包工具：grunt，gulpjs，webpack，Rollup,roadhog，create-react-app ,parcel以发布时间为顺序。Grunt：最老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，认知成本高，运用的时候需要明白各种插件的配置规则。Gulp：用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gu
2021-05-17 11:52:26
331
原创 webpack-核心概念
核心概念module.exports = { mode: 'development', //development环境 production环境 // 入口文件 告诉的webpack 要打包的文件 entry: './src/index.js', // 入口文件 // 输出文件：告诉webpack 打包后文件放在哪里 output: { path: path.resolve(__dirname, 'dist'), // 打包文件后的具体路径
2021-05-17 11:51:30
62
原创 webpack-初识
官网文档打包工具的分类？仅介绍 4 款主流的打包工具：grunt， gulp，webpack， rollup，以发布时间为顺序。Grunt：最老牌的打包工具，它运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同的插件可能会有自己扩展字段，认知成本高，运用的时候需要明白各种插件的配置规则。Gulp：用代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp..
2021-05-17 11:50:33
66
原创 vue-editorconfig的配置文件
.editorconfig作用是对项目进行编写的配置 包括：缩进# 告诉EditorConfig插件，这是根文件，不用继续往上查找root = true# 匹配全部文件[*]# 结尾换行符，可选"lf"、"cr"、"crlf"end_of_line = lf# 在文件结尾插入新行insert_final_newline = true# 删除一行中的前后空格trim_trailing_whitespace = true# 匹配js和py结尾的文件[*.{js,py}]# 设置字符
2021-05-17 11:47:19
212
原创 vue-Eslints配置
ESLint的规则有三种级别"off"或者0，不启用这个规则"warn"或者1，出现问题会有警告"error"或者2，出现问题会报错给项目配置 .eslintrc.js使用一个js文件，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。// https://eslint.org/docs/user-guide/configuringmodule.exports = { //此项是用来告诉eslint找当前配置文件不能往父级查找 root: true, //
2021-05-17 11:45:46
131
转载 微信小程序-自定义组件
自定义组件的目的是组件化的复用问题。组件的书写和页面的书写是一样的，当组件和数据结合之后会生成DOM树。当然可以在组件中预留插槽来来承载组件中预留的子节点。在模版中引用节点时候需要在json文件中显示定义，否则会被认为是无定义的节点。<!-- 引用组件的页面模板 --><view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>
2021-05-17 11:43:34
195
转载 组件-swiper
Swiperswiper6swiper5swiper4swiper3swiper2引入文件swiper-bundle.min.jsswiper-bundle.min.cssswiper-bundle.min.js swiper-bundle.min.cssswiper.min.js swiper.min.cssswiper.min.js swiper.min.cssswiper.min.js或swiper.jquery.min.js swiper.min.cssi
2021-05-16 20:58:22
379
原创 echarts-在vue中使用echarts
在vue中使用echarts表格Vue-Echarts V6使用方式有两种：// 安装echartsnpm i [email protected] ///引入方式是import echarts from 'echarts'// 如果版本大于@5.0.0版本 就会引入方式为 const echarts = require('echarts')// 方式一：// main.jsimport myCharts from './...myCharts.js'Vue.use(myCharts)//
2021-05-16 20:53:19
2714
原创 地图-百度地图的基本使用
在vue中使用百度地图// 1. 安装npm install -S vue-bmap-glnpm install -S vue-mapvgl// 2. 配置// 引入vue-bmap-glimport VueBMap from 'vue-bmap-gl';import VueMapvgl from 'vue-mapvgl';import 'vue-bmap-gl/dist/style.css';Vue.use(VueBMap);Vue.use(VueMapvgl);// 初始化vu
2021-05-16 20:49:53
141
原创 echarts-基本认识
常见的数据可视化库D3.js （入手难）Echarts.js 百度开发的JS开源数据可视化库Highcharts.js 国外的前端数据可视化库AntV 蚂蚁金服全新一代数据可视化解决方案注释： highcharts和echarts相当于office和WPS的关系Echarts 是一个使用JavaScript 实现的开源可视化库，可以运行在PC端和移动端，底层依赖矢量图形库ZRender.Echarts 使用五部曲下载并引入echarts.js 文件准备一个具备大小的DOM容器初始
2021-05-16 20:45:31
229
翻译 NodeJS-包管理器npm/yarn
每个工具或者开发语言都有相应的包管理器，好比 Ubuntu 的 apt-get、Centos 的 yum、Java 的 Maven 仓库等等。Node.js 中目前最出名的包管理器为 NPM 也是生态最好的。对于我们业务开发也很受益，相同的东西不必重复去造轮子。npmNPM 是 Node.js 中的包管理器。允许我们为 Node.js 安装各种模块，这个包管理器为我们提供了安装、删除等其它命令来管理模块。这里有一点我们需要注意，我们必须要有一个 package.json 文件或 node_modul
2021-05-16 19:54:42
165
原创 NodeJS-框架express-Koa-Hapi的区别
介绍Node.js是在各种环境中执行JavaScript的工具。JavaScript最初只是一种仅存在于Web浏览器中的语言，但起初却很不起眼，但是Node.js项目扩大了它的范围，并使其成为世界上最受欢迎的编程语言。Node.js具有Web开发经验，可以扩展人们的创造力，使新一代开发人员可以创建服务器，命令行工具，桌面应用程序甚至机器人。十二年之前的Ryan Dahl首次创建，现在是上最大的开源项目。这和NodeJS本身的特点息息相关。专为构建可扩展的Web服务端的应用而设计。自身具有高并发性和可扩.
2021-05-16 19:33:06
446
原创 VUE-demo01单选和多选 v-bind/v-for
demo01: 实现单选和多选<!-- 实现单选 --><div id="app"><ul><li v-for='(item, index) in movies' v-on:click = 'getClasses(index)' :class="{checked:index === n}">{{ index }} - {{ item }}</li></ul></div><script src="../vue.
2021-05-16 17:50:38
118
原创 ES6 - 箭头函数（=＞）
箭头函数是ES6的新的API。基本用法// f: 变量f 等于函数表达式 // v: 函数形参 不许参数() // v: 函数返回值 var f = v => v; // 等同于 var f = function(v) { return v; } // 不写形参 表达方式 var f = () => 5; // 等同于
2020-12-23 08:59:30
289
原创 JS- 浅谈原型(prototype)和原型链以及继承
使用原型的好处的：可以让所有对象实例共享它所包含的属性和方法，换句话说：不必在构造函数中定义对象实例的信息， 而是可以将这些信息直接添加到原型对象中。原型模式原型对象: 针对函数的原型对象, 为函数创建一个prototype属性，这个属性指向函数的原型对象。注意点实例中的属性优先级大于原型中的属性的优先级。也就实例中同名的属性会覆盖原型中的属性。hasOwnProperty() 方法可以检测一个属性是否属于某一个对象。也就是属性存在于实例对象中时候，才会返回true，所以可以通过使用此.
2020-12-23 08:58:05
135
原创 JS - undefined 数据类型
在了解undefined 数据类型之前，我们来复习一下js数据类型。JS 的数据类型包括:Boolean: true 和 falseNumber: 整数1 和浮点数 1.2String: Conan WangNull: nullUndefined: undefinedSymbol: Symbol("name") (ES2015)undefined 的数据类型：typeof undefined === “undefined”; //true2. 导致undefined的常见
2020-12-23 08:57:13
1082
原创 JS - 浅谈执行上下文以及执行上下文栈
执行上下文栈js代码执行顺序是什么，大部分人都知道同步执行var foo = function(){ console.log('foo1'); } foo(); // foo1 var foo = function(){ console.log('foo2'); } foo() // foo2然后看以下下面代码 function foo(){
2020-12-23 08:56:00
190
2
原创 JS -作用域链和执行上下文栈的联系
Q1: 作用域链是什么？直接解释为，由层级中多个执行上下文的变量对象组成的链表为作用域链。详情请看是上一篇的作用域以及作用域的介绍。Q2：执行上下文栈是什么？直接理解为: 用来管理和存储执行上下文的类数组结构。详情请看是上一篇的作用域以及作用域的介绍。Q3: 作用域链和执行上下文栈的关系？让我们用代码解释一下： // globalContext = { VO:{},this:window,Scope:go.[[scope]] } // 全局执行上下文
2020-12-22 20:55:36
203
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人