南乔几经秋、的博客

原创 Rollup.js: 开源JS库的打包利器

前言Rollup 是一个 JavaScript 模块打包器，说到模块打包器，自然就会想到 webpack。webpack 是一个现代 JavaScript 应用程序的静态模块打包器，那么在 webpack 已经成为前端构建主流的今天，为什么还要用 Rollup 呢？Rollup 中文文档 中介绍到，它可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。可以看到它的应用场景之一，就是打包 JS 库。自己写个 JS 库，在我们开发工作中和开源项目中还是比较常见的。可谓是生命不...

原创 ES6的展开运算符和剩余运算符

在ES6中， 三个点(...) 有2个含义。分别表示 展开运算符 和 剩余运算符。展开运算符/******************展开运算符(spread)********************/ // 1、传递数据代替多个字符串的形式 function func (a, b, c) { console.log(a); console.log(b); console.log(c); } v

转载 JavaScript执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，可以揍我。不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论： javascript是按照语句出现的顺序执行的 看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：let

原创 天地图、谷歌地图服务URL

一、谷歌地图服务1、谷歌地图（URL中lyrs=后的值为图层类型：m-地图，s-影像，h-注记，t-地形，y-混合影像与注记）http://mt3.google.cn/vt/lyrs=m@762&x=208&y=105&z=82、谷歌影像图层http://mt3.google.cn/vt/lyrs=s@762&x=208&y=105&z=83、谷歌注记图层http://mt3.google.cn/vt/lyrs=h@762&

转载 常用js正则表达式（持续更新...）

去除左侧空格function LTrim(str) { return str.replace(/^\s*/g,"");}去除右侧空格function RTrim(str) { return str.replace(/\s*$/g,""); }去掉字符串两端的空格function trim(str) { return str.replace(/(^\s*)|(\s*$)/g, ""); } 去除字符串中间空格function ...

转载 记录一些值得收藏的JS代码片段

延迟函数delayconst delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail') }) const getRes = async (data) => {

原创 记录JS中一些很实用的简写代码段

Boolean// 通过两个取反强制转换为Boolean型!!'foo'Number// string转为number+'45'+new DateArray1、数组去重Array.from(new Set([1, 2, 3, 1, 2, 4, 5, 4, 6]))[...new Set([1, 2, 3, 1, 2, 4, 5, 4, 6])]2、数组合并[1, 2, 3].concat([4, 5, 6])[...[1, 2, ..

转载 区分slice,splice和split方法

这三个函数长得比较像，容易混淆，在此记录。1.slice（数组）用法：array.slice(start, end)解释：该方法是对数组进行部分截取，并返回一个数组副本；参数start是截取的开始数组索引，end参数等于你要取的最后一个字符的位置值加上1（可选）// 如果不传入参数二，那么将从参数一的索引位置开始截取，一直到数组尾 var a = [1,2,3,4,5,6]; ...

原创 ES6的展开运算符和剩余运算符

在ES6中， 三个点(...) 有2个含义。分别表示 展开运算符 和 剩余运算符。展开运算符/******************展开运算符(spread)********************/ // 1、传递数据代替多个字符串的形式 function func (a, b, c) { console.log(a); cons...

转载 ES6常用新特性

1.变量声明const和let我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如: function aa() { if(bool) { var test = 'hello man' } else { console.log(test)...

原创 JS之继承

一、概念一个类获取另一个或者多个类的属性或者方法。继承可以使得子类具有父类的各种方法和属性。以免重复输出很多代码。二、原理复制父类的方法和属性来重写子类的原型对象。下面总结了多种实现继承的方式及各自的优缺点——三、原型链继承实现function Father () { this.text = '1';}Father.prototype.som...

转载 js中的require、import和export

首先，require、import/export都是为了JS模块化编程使用。为什么有模块概念模块就是实现特定功能的一组方法。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，在es6以前，它是不支持”类”（class），所以也就没有”模块”（module）了。require时代Javascr...

原创 CSS选择器总结

1、基本选择器（1）标签选择器，示例表示选择所有p元素p { font-size:15px; color:#00796b; }（2）类选择器，示例表示选择 class="my-font" 的所有元素.my-font { font-size: 18px; font-weight: bold;}（3）ID选择器，示例表示选择 id="poe...

原创 webApp实现打开相机、打开相册、打开文件管理功能并上传文件

最近做的一个webapp里有一个聊天功能，聊天时可以发送相册图片、发送拍照图片及发送文件。一看这个功能，简单呐，我记得之前就做过类似的上传头像的功能，于是<input type="file" accept="image/*" capture="camera">一顿操作后打包真机测试，结果...凉凉，我的手机直接给出多个选项，相机相册文件等等，连美图秀秀都出现了。这不对啊，我...

原创 vue-router 内嵌 iframe，导致this.$router.go(-1)返回上一页异常

问题描述：在使用vue-router跳转过来的页面中内嵌了一个iframe，通过选择不同项替换iframe的src，但是在使用this.$router.go(-1)返回之前的页面时发现页面刷新，点击多次才能返回之前的页面原因：浏览器机制的原因，在 iframe 导航变化后手动点击浏览器的后退按钮也依然只是后退 iframe 中的导航。类似window.history.go解决方法：...

原创 记：flex布局遇到white-space:nowrap失效的问题

在写界面时遇到一个问题：在flex布局中想实现文字超出隐藏并显示省略号，结果使用white-space:nowrap后，flex布局失效了....想实现的效果：结果：解决办法：给包含文字元素的父元素设置min-width: 0总结：white-space:nowrap会影响flex布局下未设定宽度的元素，而只要对元素的宽度有一个下限设定就可以解决这个问题，不管是最小...

原创 Js中的delete关键字

delete关键字的作用：删除对象的属性 语法：delete 对象.属性 返回值类型为布尔值（true / false），删除成功返回truedelete关键字的使用注意：也可以用于删除数组元素 删除未使用var/let/const关键字声明的全局变量（直接定义在window上面的属性） var、let、const创建的属性不能被delete操作删除。 删除对象中不存在的属性或数...

转载 解决iview和elementUI组件样式覆盖无效的问题

iview和elementUI是我们在用vue开发项目时比较常用到的ui组件，在我们使用第三方UI组件库开发时有时需要对这些组件进行一些样式修改。为了vue页面样式模块化，不对全局样式造成污染，我们往往都会加入scoped属性用来限制样式的作用域，然而这也会导致当我们修改部分ui组件样式失效。为了避免这种情况，我们常用以下方式来解决。一、新建一个不含scoped的style标签覆盖组件样式...

转载 单页应用（SPA）与多页应用（MPA）

原创 css常见单位px、em、rem、vh、vw、vmin、vmax说明

1、px相对单位，像素，相对于显示器屏幕分辨率而言2、em相对单位，相对于父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值3、rem相对单位，可理解为”root em”， 相对根节点html的字体大小来计算，CSS3新加属性4、vwvw：viewpoint width，视窗宽度，1vw等于视窗宽度...

原创 Vue组件间的传值——父子组件、非父子组件、组件跳转传值

一、父子组件之间的传值( props down, events up )（1）父组件到子组件（通过props）父组件：（在注册声明的子组件上加 :xxx 表示要传递到子组件的参数或方法）<template> <div class="wrap"> <!-- 要传递的参数和方法, 静态prop值直接添加占位符（name（数字除外，...

原创 JS之arguments、arguments.callee、caller介绍

arguments：调用函数时产生的，保存实参。arguments.callee：被调用时指向函数自身。caller：指向调用某函数的那个函数。下面通过一段代码说明它们的用处：function A (n) { console.log(arguments); // Arguments[1, callee: ƒ, Symbol(Sym...

原创 call、apply、bind使用方法及区别

首先，这三个都是Function函数对象自带的非继承来的方法，都可以用来改变函数运行时this的指向（调用函数时，this指向指定的对象thisObj）（1）语法：/*apply()方法*/function.apply(thisObj, [argArray])/*call()方法*/function.call(thisObj, arg1, arg2, ..., argN);/...

原创 Git常用命令

先上一张图（之后有没有涉及到的后续更新）：More：1、新建# 新建一个目录，将其初始化为Git代码库$ git init [project-name]2、配置Git的设置文件为.gitconfig，它可以在用户主目录下（全局配置），也可以在项目目录下（项目配置）。# 显示当前的Git配置$ git config --list# 编辑Git配置文件$...

原创 markdown基本语法

markdown（.md文件）是一种纯文本格式的标记语言。通过简单的标记语法，它可以使普通文本内容具有一定的格式。编写README.md等文件时会使用到，下面介绍一些基本用法：一、标题在想要设置为标题的文字前面加#来表示（注：标准语法一般在#后跟个空格再写文字）一个#是一级标题，二个#是二级标题，以此类推。支持六级标题。示例：# 这是一级标题## 这是二级标题##...

原创 浅谈css3的box-sizing属性

CSS3中的box-sizing 属性允许以特定的方式来指定盒模型，其属性值有两种：content-box：标准盒模型，又叫做 W3C盒模型，一般在现代浏览器中使用的都是这个盒模型 border-box：怪异盒模型，低版本IE浏览器中的盒模型现代浏览器和IE9+默认值是content-box。区别： content-box：padding和border不被包含在定义的w...

原创 js将数组按固定长度分割

最近遇到这个问题，需要每隔n个将数组分开进行操作，开始想想觉得很简单，结果楞是废了一会儿功夫才实现，感觉最近业务逻辑写少了，脑子也不太转得动了，方法一是我当时写的，后来发现其实很简单（捂脸），此处做个记录...方法一：function cutArray (array, subLength) { let count = 1; let newArr = []; let...

原创 自定义滑动条input[type="range"]样式

有时候我们需要修改浏览器的原始滑动条样式，并针对不同浏览器兼容，首先来看一下不同的浏览器的原始滑动条：chrome： firefox： IE： 下面是我们要达到的效果：chrome、firefox： IE： 直接上代码：&lt;!DOCTYPE html...

原创 Flex布局

1 基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。Flex项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做...

转载 前端冷知识锦集

前端已经被玩儿坏了！像console.log()可以向控制台输出图片等炫酷的玩意已经不是什么新闻了，像用||操作符给变量赋默认值也是人尽皆知的旧闻了，今天看到Quora上一个帖子，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来。现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容。HTML篇浏览器地址栏运行JavaScript代码这个...

原创 Performance：前端页面性能监控

Performance 接口可以获取到当前页面中与性能相关的信息。该类型的对象可以通过调用只读属性 Window.performance 来获得。1、属性（1）Performance.navigation提供了在指定时间内发生的操作相关信息，包括redirectCount和type两个属性：    redirectCount：重定向属性，返回当前页面发生了几次重定向。    t...

原创 Less 颜色操作函数Mix的计算方法

Less Mix混合两种颜色以及不透明度描述它用于混合两种颜色以及不透明度。 它有以下参数： color1 ：它代表一个颜色对象。 color2 ：它代表一个颜色对象。 weight ：这是一个可选参数，通过在两种颜色之间提供百分比平衡点来指定元素的权重。默认的比例是 50%，这意味着两个颜色各占一半，如果指定的比例是 25%，这意味着第一个颜色所占比例为 25%...

转载 knockoutjs data-bind 声明式绑定整理

一、Visible绑定1.功能　　Visible绑定通过绑定一个值来确定DOM元素显示或隐藏2.示例&lt;div data-bind="visible: shouldShowMessage"&gt; You will see this message only when "shouldShowMessage" holds a true value.&lt;/di...

原创 TortoiseGit 记住用户名和密码

使用git的时候，每次在操作git pull 和git push等命令操作的时候， 都要用户输入用户名和密码，在C:\Documents and Settings\Administrator\ 目录下找到  .gitconfig 的文件，只需要在下面加一行：[credential] helper = store 下次使用git操作时，再输入用户名 和密码 ，git就会...

转载 将DOM对象转换成图片

网上偶尔看到的一篇文章，觉得挺有意思的，在此mark一下。其实这种需求可以直接使用相关插件的：html2canvas，源码也容易看懂... 有一种新玩法：将DOM对象转换成图片，很神奇，很神奇，很神奇！我们要做的，就是将DOM的内容原原本本复制，并绘制成图片。svg的foreignObject元素可以包含html片段，这样就可以将整个DOM片段转换成svg。然后我们可以有两个选择，第...

转载 iframe和frame的区别及框架间的数据调用

1、frame不能脱离frameSet单独使用，iframe可以； 2、frame不能放在body中；如下可以正常显示： &lt;!--&lt;body&gt;--&gt; &lt;frameset rows="50%,*"&gt;    &lt;frame   name="frame1"   src="test1.htm"/&gt;     &lt;frame  

转载 vs Code的常用快捷键

VS Code 的常用快捷键和插件一、vs code 的常用快捷键1、注释：　　a) 单行注释：[ctrl+k,ctrl+c] 或 ctrl+/　　b) 取消单行注释：[ctrl+k,ctrl+u] (按下ctrl不放，再按k + u)　　c) 多行注释：[alt+shift+A]　　d) 多行注释：/**2、移动行：alt+up/down3、显示/隐藏左侧目录栏 ...

转载 vue插件集合

UI组件element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一...

原创 滚动条样式修改

废话不说，直接上代码----IE（只支持修改颜色）：scrollBar{ width: 250px; height: 700px; padding: 10px; overflow: auto; /*三角箭头的颜色*/ scrollbar-arro...

转载 常用gulp插件介绍

匹配符 *、**、！、{}gulp.src('./js/*.js') // * 匹配js文件夹下所有.js格式的文件gulp.src('./js/**/*.js') // ** 匹配js文件夹的0个或多个子文件夹gulp.src(['./js/*.js','!./js/index.js']) // ! 匹配除了index.js之外的...