badmoonc的博客

element-ui级联选择器懒加载回显终极解决方案

vue-dragline项目根据react-dragline 改写为vue。支持拖拽辅助线，改变元素大小，元素拖拽功能Installationnpmnpm install vue-dragline --saveyarnyarn add install vue-draglineExample<template> <draggable-container> <draggable-child v-for="item in initia

从0开始搭建webpack-seslint配置教程前言为了提高代码可读性，以及团队风格统一。便于日后维护，代码风格统一就显得尤为重要。本文从0开始为生成的vue项目增加webpack，脚手架使用webpack simple1、准备工作首先初始化项目，打开命令行执行vue init webpack-simple eslint-demo,接下来我们进入项目文件夹内。项目目前是没有eslin...

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;

优先级 运算类型 关联性 运算符 20 圆括号 n/a ( … ) 19 成员访问 从左到右 … . … 需计算的成员访问 从左到右 … [ … ] new (带参数列表) n/a new … ( … ) 函数调用 从左到右 … ( … ) 18 new (无参数列表) 从...

举例时间：var time = new Date(); //Tue Aug 28 2018 09:16:06 GMT+0800 (中国标准时间)时间戳：var timestamp = Date.parse(time); //1535419062000 （Date.parse() 默认不取毫秒，即后三位毫秒为0）moment转时间：moment(time).valueOf(); //...

背景：由于浏览器同源策略的限制，非同源下的请求，都会产生跨域问题，jsonp即是为了解决这个问题出现的一种简便解决方案。同源策略即：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题。举个简单的例子：http://www.abc.com:3000到https://www.abc.com:3000的请求会出现跨域（域名、端口相同但协议不同） http:/...

简介CORS：全称"跨域资源共享"（Cross-origin resource sharing）。CORS需要浏览器和服务器同时支持，才可以实现跨域请求，目前几乎所有浏览器都支持CORS，IE则不能低于IE10。CORS的整个过程都由浏览器自动完成，前端无需做任何设置，跟平时发送ajax请求并无差异。so，实现CORS的关键在于服务器，只要服务器实现CORS接口，就可以实现跨域通信。请...

虽然算法在前端开发中很少会得以使用，不过面试中总是会有一些经典的算法面试题。显然，学习算法对于任何工程师提高编程能力和提高理解分析问题的能力都是有帮助的，接下来放几道常见的前端面试中出现的算法题供大家学习，当然，这些题目的解法未必是最优的，仅供大家学习参考。 // 判断是否回文 var str = 'resiviser'; function reserve(str) { ...

众所周知，chrome浏览器在18年4月起，就在桌面浏览器全面禁止了音视频的自动播放功能。不光是这样，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，使用js直接调用.play() 方法的话，chrome都会抛出如下错误：直到用户有交互之后，再次调用play()方法才会正常播放。但是对于开发来说，很多情况下我们还是需要让音频自动播放的，比如实时消息通知...

今天接到一个需求，需要在浏览器tab页的icon上显示消息的数量，无奈只能用canvas来实现。实现的过程中就碰到文字居中，对canvas完全没用过的我来说简直是让人抓狂，百度出来的答案要么太复杂，要么说的不清楚。接下来我们就来看下，在canvas中如何让文字在画布中水平居中首先呢，我们先在html中加入canvas标签，如下：&lt;canvas id="myCanvas" width...

sudo /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --unsafely-treat-insecure-origin-as-secure="http://your.domain.com" --user-data-dir="/Users/baidu/ChromeTestProfile"命令行执行该命令，将红色文本...

//1验证手机号 var reg_phone=/^[1][356789][0-9]{9}$/;//验证手机号 var phone=16657111330; console.log(reg_phone.test(phone),'verify phone'); //2 url参数转为json对象 var url='htt...

直接进入正文：我们有时候处理数据，可能会遇到一些不规则(无法预料的数据结构)，那么拿到这种数据我们如何进行遍历操作呢？举个例子：var data= { a: { one: 1, two: 2, three: {four:'2',five:'4'} }, b: { six: 4, seven: 5, eight: 6 }, c: { nine: 7, ...

promise对象是es6中提出的解决异步回调的一种方案，作为一个新手，最近刚刚把这个玩意给弄明白些。来写这篇文章，希望能得到一些高人的指点，同时我也觉得对于新手不了解promise的朋友们会有一些帮助。废话不多说，关于介绍promise的话不多说了，有同学不明白的可以自行百度，本文只写一个promise的简单实例，相信稍微看过一些promise的朋友，但是对他又比较畏惧的(因为之前我不懂这个

事件委托（也叫事件代理），其实这个问题也简单，要想弄明白事件委托，我们先要把事件冒泡的机制搞清楚。举个事件冒泡的例子： 点击 var ul=document.getElementsByTagName('ul')[0]; var li=document.getElementsByTagName('li')[0]; ul.addEventListener('cl

简要说明：本项目使用vue+vuex+vue-router+axios，比较适合vue初学者学习研究，项目实现也比较简单，对初学者学习比较友好。对于单纯想学习vuex的同学，也可以看一下，本项目使用vuex也比较简单，学习起来也会容易一些。如果此项目对您的学习有一定帮助，请把star点亮（非常感谢），我会在后期不断维护本项目。请直接点此链接进入https://github.com/BadMoonc...

最近在复习基础知识的时候，看到Math对象的max方法时，突然想起来前一段经常看的数组排序方法，但是没有发现有用Math.max方法实现的排序，于是闲来无聊，就自己写了一个比较逗的排序方式，此排序法纯属娱乐，似乎我目前看起来也没什么实用价值，不过，还是写篇文章分享下思路，毕竟有点个人想法不容易。思路：通过利用Math.max()方法的特性(传入几个参数，返回其中最大一项)，我们可以把一个无序数组a...

推荐一篇讲解promise内部原理的博文，个人感觉讲的还是比较清晰的-《三十分钟让你彻底明白promise对象》然后配合下边的草图理解起来或许会容易些。本图如有问题，烦请指正。...

var rem=(function(doc, win) { var docEl = doc.documentElement,//获取整个文档元素 resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',//兼容safari和其他浏...

最近在看js犀牛书巩固js的基础知识，突然感觉打开了新世界的大门。看到相等运算符(==)与严格相等运算符也叫恒等运算符(===)这一块时，觉得以前对这两个的了解真的是知之甚少。所以决定写篇文档，一方面可以在日后回顾，另一方面也希望有更多入坑的同学看到，能够对js的提升有所帮助。先来说下严格相等运算(既===)有哪些特性(区别特性在一下代码片段中详解)//1，如果两个值类型不同，则他们不相等，代码如...

我们在日常开发中有时会通过js创建一些元素，但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;