详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以c 文件为例,介绍实现两种方法:
项目目录:
如上图所示,现在我需要将项目中的scBtn.c 文件单独打包出来。在不做任何配置,直接打包出来的c 文件是压缩合并成了一个了,如下图,当我...[2018/10/29]
js使用formData实现批量上传
最近项目需要批量上传附件,查了下资料,网上很多但看着一脸懵,只贴部分代码,介绍也不详细,这里记录一下自己的采坑与多种实现,以免以后忘记。
这里先介绍下FormData对象,以下内容摘自地址
XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData...[2018/10/29]
element-ui 的el-button组件中添加自定义颜色和图标的实现方法element-ui 的el-button组件中添加自定义颜色和图标的实现方法
我使用的element-ui的版本是V1.4.13。
如上图所示,如果使用el-button,加颜色是可以通过设置type属性的值,加图标就设置icon属性的值。
现在产品给了一个需求,就是自定义的很多种类别,不同的类别的按钮显示不同的颜色和图标。如下图所示:
为了方便开发...[2018/10/29]
详解ES6 系列之异步处理实战
前言
我们以查找指定目录下的最大文件为例,感受从
回调函数 -> Promise -> Generator -> Async
异步处理方式的改变。
API 介绍
为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下。
...[2018/10/29]
如何用Node写页面爬虫的工具集如何用Node写页面爬虫的工具集
最近做了几个写爬虫的小项目(从页面端到APP端的都有),在网上搜寻了一番好用的爬虫工具,做了个工具集整理:
Puppeteer
简介
Puppeteer 是一个Node库,它提供了一个高级 API 来通过 DevTools协议控制Chromium或Chrome。简单点说,就是使...[2018/10/29]
iview通过Dropdown(下拉菜单)实现的右键菜单
官方目前不提供右键菜单,这里借助Dropdown(下拉菜单)来实现,故为“官方“。
既然Dropdown有类似功能,如果将其文字隐藏,并且在合适时机弹出,便可实现,其自身就是iview中一个组件,不言而喻,功能强大、简洁。
源码之下,了无秘密,简单陈述下思路,在模板中正常使用Dro...[2018/10/29]
Node.js 使用axios读写influxDB的方法示例
Node.js读写数据到influxDB,目前已经有一个库node-influx, 这个库功能非常强大,但是我个人使用这个库的时候,遇到无法解决的问题。
使用curl都可以写数据到influxDB,但是用node-influx总是报错,搞了半天也无法解决,就索性不用它了。
influxDB...[2018/10/29]
报错集锦
1.在node后端使用expre 中的multer中间件来实现文件上传时报错
node multer 报错Unexpected field
1 var expre =require(''expre '');
2
3 var router=expre .Router();
4
5 var...[2018/10/26]
tab下拉显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D...[2018/10/26]
js实现QQ、微信、新浪微博分享功能
使用js实现QQ、微信、新浪微博分享功能。
微信分享需要手机扫描二维码,需要对url进行编码。
js代码:
1 var shareModel = {
2
3 /**
4 * 分享QQ好友
5 * @param {[type]...[2018/10/26]
前端安全 xss
整体的 XSS 防范是非常复杂和繁琐的,不仅需要在全部需要转义的位置,对数据进行对应的转义。而且要防止多余和错误的转义,避免正常的用户输入出现乱码。
虽然很难通过技术手段完全避免 XSS,但可以总结以下原则减少漏洞的产生:
利用模板引擎 开启模板引擎自带的 HTML 转义功能。例如: 在 e...[2018/10/26]
正则表达式-语法
正则表达式——语法
正则:就是用有限的符号,表达无限的序列。 两条斜线中间是正则主体,这部分可以有很多字符组成; i部分是修饰符,i的意思是忽略大小写。 eg: /^abc/i 简单字符: 没有特殊意义的字符都是简单字符,简单字符就代表自身,绝大部分字符都是简单字符。eg: ...[2018/10/26]
Javascript 对象 - 数组对象
JavaScript核心对象
数组对象Array
字符串对象String
日期对象Date
数学对象Math
数组对象
数组对象是用来在单一的变量名中存储一系列的值。数组是在编程语言中经常使用的一种数据结构,可以用来存储一系列的值,在JavaScript中同...[2018/10/26]
webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件
在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以c 文件为例,介绍实现两种方法:
项目目录:
如上图所示,现在我需要将项目中的scBtn.c 文件单独打包出来。在不做任何配置,直接打包出来的c 文件是压缩合并成了一个了,如下图,当我想要改某一...[2018/10/26]
如何实现一个webpack模块解析器
最近在学习 webpack源码,由于源码比较复杂,就先梳理了一下整体流程,就参考官网的例子,手写一个最基本的 webpack 模块解析器。
代码很少,github地址:手写webpack模块解析器
整体流程分析
1、读取入口文件。
2、将内容转换成 ast 语法树。
3、...[2018/10/26]
webpack打包非模块化js的方法
本文主要记录了非模块化js如何使用webpack打包
模块化打包实现方式
webpack是模块打包工具,通过入口文件递归遍历其依赖图谱,绝对是打包神器。
bar.js
export default function bar() {
}
foo.js
...[2018/10/26]
详解js访问对象的属性和方法
对象的属性和方法统称为对象的成员。
访问对象的属性
在JavaScript中,可以使用“ . ”和“ [ ] ”来访问对象的属性。
二者区别:“ . ”表示法一般作为静态对象使用时来存取属性。而“[ ]”表示法在动态存取属性时就非常有用。
var object = {nam...[2018/10/26]
使用ECharts实现状态区间图
需求背景
假如有如下图所示的图表需要显示多个网口在一段时间内的多个状态:y轴用于展示各网口,x轴用于展示时间(分钟),使用条形图的不同颜色来表示不同时间区间段的状态,使用深蓝、浅蓝、橙色、红色分别代表正常、繁忙、故障、离线四种状态。以WAN0为例,图中则表示了0~10分钟为正常,10~25分钟...[2018/10/26]
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单业务的明细数据的时候,看起来会比弹出窗口录入方便一些,也高大上一点。本篇主要介绍在Bootstra...[2018/10/26]
小程序云开发实战小结
1. 云开发简介
由于小程序本身存储数据的能力有限,所以不可能将大量的数据保存在客户端,而且将数据保存在本地既不安全,也无法与其他小程序用户共享,所以大多数小程序都需要一个服务端,服务端可以用多种技术实现,如PHP、Node.js、Python、ASP.NET、Java EE等。不管使用哪种技...[2018/10/26]
小程序使用Canvas画饼图小程序使用Canvas画饼图
先上效果图
-------------------------------------------------------------wxml代码开始---------------------------------------------------------------
<vi...[2018/10/25]
co-dialog弹出框组件-版本v2.0.1
具体案例查看co-dialog:https: koringz.github.io/co-dialog/index.html
2.0.1版本优化项,代码压缩,修复PC和移动端自适应,修复显示弹出框浏览器边框隐藏对body产生内容错位,添加 onResize 默认为 true, 添加选项 type ...[2018/10/25]
js中获取URL参数的共通方法getRequest()方法
getRequest : function() {
var url = location.search; 获取url中"?"符后的字串
var theRequest = new Object();
...[2018/10/25]
五大浏览器内核介绍
浏览器的内核是分为两个部分的,一是渲染引擎,另一个是JS引擎。现在JS引擎比较独立,内核更加倾向于说渲染引擎。
1、Trident内核:(三叉戟)代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台,且不是开源的。代表作...[2018/10/25]
js获取地址栏中的数据
window.location.href:设置或获取整个 URL 为字符串 window.location.pathname:设置或获取对象指定的文件名或路径 window.location.search:设置或获取 href 属性中跟在问号后面的部分 要获取变量的值可以试试: var urlPa...[2018/10/25]
您只能在 HTML 输出流中使用 document.write,啥意思
JavaScript ;写入到HTML输出语法 注意:只能在HTML输出中使用,如果在文档已经加载后使用(比如在函数中) 会覆盖到整个文档 <!DOCTYPE html> <html> <body>
<p> JavaScri...[2018/10/25]
Ajax如何实现从前端不刷新页面就可以到后端取到数据
提到axaj很多人总说很难,什么回调函数呀等等就让人心烦,其实懂得ajax在js里面是如何实现向服务器请求数据的原理,那么理解ajax也就不是很难了,现在我们一起来看看。
&...[2018/10/25]
牛客网字符串排序编程题
一、题目描述
编写一个程序,将输入字符串中的字符按如下规则排序(一个测试用例可能包含多组数据,请注意处理)。
规则 1 :英文字母从 A 到 Z 排列,不区分大小写。
如,输入: Type 输出:&n...[2018/10/25]
关于截取字符串substr和substring两者的区别关于截取字符串substr和substring两者的区别
写在前面的话: 苍天啊,大地啊 ,看,看,这是啥? 鸡冻啊,博客还是有人在看的~,哈哈哈,继续加油~ 今天分辨一下js中substr和substring的区别 1.w3school 二者的定义 1)substr 定义:substr...[2018/10/25]
js原型链和vue构造函数
一、什么是原型链?
简单回顾下构造函数,原型和实例的关系:
每个构造函数(constructor)都有一个原型对象(prototype),原型对象都包含一个指向构造函数的指针,而实例(instance)都包含一个指向原型对象的...[2018/10/25]
值得记录的 (一)值得记录的 (一)
简要记录维护 jQuery 项目相关需求实现的细节,方便日后回顾。
样式相关
flex 布局justify-content: flex-start; 和 justify-content: center;flex-wrap: wrap;&nbs...[2018/10/25]
Vue双向绑定原理,教你一步一步实现双向绑定Vue双向绑定原理,教你一步一步实现双向绑定
当今前端天下以 Angular、React、vue 三足鼎立的局面,你不选择一个阵营基本上无法立足于前端,甚至是两个或者三个阵营都要选择,大势所趋。 所以我们要时刻保持好奇心,拥抱变化,只有在不断的变化中你才能利于不败之地,保守只能等死。 最近在学习 Vue,一直以来对它的双向绑定只能算了解并不深...[2018/10/25]
使用hexo+coding搭建免费个人博客使用hexo+coding搭建免费个人博客
1.检测node和npm
先检测一下有没有node.js和npm
$ node -v
如果有,说明node.js安装成功!
$ node -v
v8.4.0
如果有,说明npm安装成功!
$npm -v
$ npm -v
5.3.0
2.安装hexo
在git-bash中运行以下命令安...[2018/10/25]
js实现input密码框显示/隐藏功能js实现input密码框显示/隐藏功能
JavaScript实现input密码框显示/隐藏的功能,供大家参考,具体内容如下
实现代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
<styl...[2018/10/24]
深入浅析Node.js 事件循环、定时器和process.nextTick()深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环
尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作。
由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多个操作。 当其中一个操作完成时,内核会告诉Node.js,以便可以将相应的回调添加到 轮询...[2018/10/24]
js实现动态增加文件域表单功能js实现动态增加文件域表单功能
本文实例为大家分享了js实现动态增加文件域表单的具体代码,供大家参考,具体内容如下
实现代码:
<html>
<head>
<title>动态添加表单元素</title>
</head>
<scr...[2018/10/24]
Javascript 实现 Excel 导入生成图表功能Javascript 实现 Excel 导入生成图表功能
前一段时间做了一个用 JS 实现图表显示的功能,加上这次的Excel 导入功能,最终的效果是这样的:
怎么样?如果看了心动的话,就接着往下看吧。 本次的这个设计需要用到几个插件:jquery.js、xlsx.js、echarts.js,大家需要提前进行下载,之后新建demo.html,d...[2018/10/24]
js实现动态添加上传文件页面js实现动态添加上传文件页面
发邮件是需要添加一些文件,每添加一个文件,页面上可以显示一个表单文件上传选项。
此功能为:初始时刻只有一个添加按钮,当点击添加文件时,会增加一个选择文件和删除区域,同时显示上传按钮,当点击删除,此行选择文件行消失,当所有选择文件项都消失时,上传按钮将被隐藏起来。下面是实例代码:
...[2018/10/24]
js异步上传多张图片插件的使用方法js异步上传多张图片插件的使用方法
本文为大家分享了js异步上传多张图片插件的使用方法,供大家参考,具体内容如下 效果展示: 功能描述: 1.实现图片预览,预览图片移除,任意张数异步上传,上传进度条指示,已选中且上传的图片不会重复上传,且不能移除 使用方法: 界面顶部引入IMGUP.c ,2.0版本以下的Jquery,页面底部...[2018/10/24]
详解微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓。
内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究,总算打通了两边的交互。
大概流程
1、先说明涉及到的文件,下面会用到
1.1...[2018/10/24]
微信小程序引用iconfont图标的方法
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是:
@font-face {
font-family: ''iconfont'';
src: url(''iconfont.eot'');
src: url(''iconfont.eot?#...[2018/10/24]
electron实现qq快捷登录的方法示例
之前本来想不写这个功能的,结果客户死活要qq登录! 实在没办法就写了,顺便写个文章!
在写之前有两个问题:
1: 打开qq授权页面点击页面中的链接会又打开一个页面! .....
2: 授权之后是否成功很难去判断
不过脑海中有一个想法就是,electron就是一个类似于浏览器一...[2018/10/24]
javaScript变量
JavaScript的类型有:数字、字符串、布尔值、函数和对象。还有undefined和null,以及数组、日期和正则表达式。
1 var num = 1; {1}
2 num = 3; {2}
3 var price = 1.5; {3}
4 var name = "Mark"; {...[2018/10/24]
JS获取访客IP+判断归属地+自动跳转
由于公司业务需要,需要对网站特定地区的访客进行不同跳转。比如,上海的用户跳转到“shanghai.url.cn”,南京的用户跳转到“nanjing.url.cn”。下面就是我的实现方法,分享出来,顺便做个记录。
第一步,获取IP并判断归属地
直接使用搜狐的IP库查询接口
<script...[2018/10/24]
JS 正则表达式从地址中提取省市县
直接上代码,一看就懂, 一般国内地址返回Array前三项就是省市县,若要扩展到社区、街道等可自行扩展。
var add1 = ''四川省成都市都江堰市天马镇34号'';
var add2 = ''北京市北京市东城区前门大街1号''
var add3 = ''新...[2018/10/24]
原生JS实现Ajax
一般来说,大家可能都会习惯用JQuery提供的Ajax方法,但是用原生的js怎么去实现Ajax方法呢?
JQuery提供的Ajax方法:
$.ajax({
url: ,
type: '''',
dataType: '''',
da...[2018/10/24]
javaScript操作符
在JavaScript中有算数操作符、赋值操作符、比较操作符、逻辑操作符、位操作符、一元操作符和其他操作符
算数操作符:
赋值操作符:
比较操作符:
逻辑操作符:
位操作符:
另外,还有typeof操作符,他可以返回变量或者表达式的类型:
console.log...[2018/10/24]
VSCode调试网页JavaScript代码VSCode调试网页JavaScript代码
一、调试准备
Windows10 64bits
IDE:Visual Studio Code1.28.2
安装插件:Chrome(安装方法:Debug -> Install Additional Debuggers... -> Debugger for Chrome,重新启动vscode...[2018/10/24]
videojs
1 <link href="http: vjs.zencdn.net/5.5.3/video-js.c " rel="stylesheet">
2 <script src="http: vjs.zencdn.net/5.5.3/video.js">&l...[2018/10/24]
http协议中的状态码(status code),超文本传输协议状态码
HTTP协议,又叫超文本传输协议。
在项目的开发过程中,前后端交互,这个用的是最多的,在后端给我的的接口调用时,我们往往先查看这个协议的状态码,状态码正常了,才进一步去看我们从后太拿的数据,是否为我们所需要的数据。
但是,协议中状态码有很多很多,除了几个常用了,都什么意思,很难有人说全...[2018/10/24]