正则表达式 - (?!), (?:), (?=)(?:pattern)非获取匹配，匹配pattern但不获取匹配结果，不进行存储供以后使用。这在使用或字符“(|)”来组合一个模式的各个部分是很有用。例如“industr(?:y|ies)”就是一个比“industry|industries”更简略的表达式。(?=pattern)非获取匹配，正向肯定预查，在任何匹配pattern的字符串开始处匹配查找字符串，该匹配不需要获取供以后使用。例如，“Windows(?=95|98|NT|2000)”能匹配“

JavaScript中，函数是一等（first-class）对象；也就是说，函数是 Object 类型并且可以像其他一等对象（String，Array，Number等）一样使用。它们可以“保存在变量中，作为参数传递给函数，在函数内创建，以及被函数返回”。由于函数是一等对象，我们可以把一个函数作为参数传递给另一个函数，然后在那个函数内执行，甚至也可以被那个函数返回，然后再执行。这就是 JavaSc...

vue 绑定样式对象语法1.v-bind:class设置一个对象，动态切换class<div :class="{'active':isActive}">xxx</div>样式是否起作用，根据isActive的布尔值是否为true2.:class可以和class共存<div class="static" :class="{'active':isActiv...

在使用vue + element-ui 搭建后台管理页面的时候，做了一个头部、侧栏、面包屑固定的布局，导航栏和主要内容区域当内容超出时自动滚动。使用的原因：原来是采用优化浏览器样式的方式，对滚动条进行样式调整。但这个方法并不兼容火狐浏览器，在火狐访问时依然是浏览器默认的滚动条样式。.sidebar { position: fixed; border-right: 1px solid ...

不设置word-warp和word-break的时候，一行单词，超过了容器的宽度是，会将最后一个单词下移一行进行显示，如果下移的那个单词长度还是超过了容器宽度，则会溢出word-wrap设置word-wrap: break-word时，先把长单词移动到下一行，然后如果还是超出容器宽度，则进行单词内的断句换行后面的单词同上述规则word-break当上述情况，长单词移动到下一行的时候，...

浮动1. 什么是浮动当元素的 float 属性不为 none 时就产生了浮动。&lt;div class="float"&gt;float&lt;/div&gt;.float { float: left; width: 100px; height: 100px; background-color: #ddd;}2. 浮动的影响浮动会使元素脱离文档流，具体表现为：...

外边距合并在排版上带来非常大的便利，但是人们对其不甚了解，导致使用外边距的时候总是出现繁多问题，今日写下一片文章，总结一下外边距合并。三种基本的外边距合并只有上外边距和下外边距才会触发外边距合并，左外边距和右外边距不会。外边距合并都是基于以下三种基本的外边距合并。1. 相邻的同胞元素我们考虑两个连续的 div，他们的上下左右的边距都是 50px。此时，第一个区域的下外边距 和 第二个区域的...

浮动在我看来浮动元素都是脱离了躯壳的灵魂，有其神而无其形(没有高度)，他们存在于世间，但世人却无法看见他们（脱离文档流，块级元素可占据他们的位置），但是风雨等大自然因素却可以洞察到他们的存在，从而环绕其周围（不脱离文本流，内联元素可环绕在其周围）。浮动元素的外边距不会合并浮动非替换元素时必须设定宽度浮动元素会脱离文档流但不会脱离文本流，因而会造成文本环绕效果，而这也是浮动的...

前言现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。其实，我们可能经常在聊组件化，咋地咋地。但是，回过头来思考一下，如果你看到一张设计稿的时候，连布局都不清不楚，谈何组件化呢。所以，我们需要在分清楚组件之前，先来分清楚布局。废话说了这么多，只是想告诉你，布局这个东西真的很重要。本篇内容概...

前端布局非常重要的一环就是页面框架的搭建，也是最基础的一环。在页面框架的搭建之中，又有居中布局、多列布局以及全局布局，今天我们就来总结总结前端干货中的CSS布局。居中布局水平居中1）使用inline-block+text-align（1）原理、用法原理：先将子框由块级元素改变为行内块元素，再通过设置行内块元素居中以达到水平居中。用法：对子框设置display:inline-bl...

编者注：在移动端中利用rem的相对于根HTML进行改变，通过一段JS实现了移动端自适应，本文则使用纯CSS视口单位来自行自适应，虽然现在的兼容性还没法完全能够接受，但不妨碍你认识这个vw和vh的强大。响应式布局的实现依靠媒体查询（ Media Queries ）来实现，选取主流设备宽度尺寸作为断点针对性写额外的样式进行适配，但这样做会比较麻烦，只能在选取的几个主流设备尺寸下呈现完美适配。即使是...

首先明确一点是， flex 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：flex 的默认值是以上三个属性值的组合。假设以上三个属性同样取默认值，则 flex 的默认值是 0 1 auto。同理，如下是等同的：.item {flex: 2333 3222 234px;}.item { flex-grow: 2333; f...

flex为css的布局带来了新的时代，作为一个重构工程师，我们再也不用局限于float和position，特别是在移动端，我们可以利用flex轻松实现以往float和psition很难实现甚至是无法实现的布局。 本文主要讲解flex的三个子属性：flex-grow、flex-shrink、flex-basis。他们只是博大精深的flex中的一部分，本文默认你对flex已经有初步的了解，如果不了解，...

1.em在做手机端的时候经常会用到的做字体的尺寸单位说白了 em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放，参照后面的例子。2.rem这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终...

2009年，W3C提出了一种新的方案–Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。 flex浏览器支持一、Flex布局是什么？Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: -webkit-flex;...

CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。在深入研究CSS选择器之前，我们应该先搞懂CSS优先级是如何工作的。比如给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。当我们写CSS的时候需要注意有些选择器在...

例如： .ui.item {…}和 .ui .item {…}还有 .ui &gt; .item {…}第一个匹配： ；无法匹配： 和 ；第二个匹配： 中间的 div；第三个匹配： 中间的 div；无法匹配：。三个的区别是：规则 .ul.item 匹配 class 属性同时含有 ul 和 item 的元素；规则 .ul .item 匹配 class 属性包含 ul 的元素中 任意的 c...

在使用 JavaScript 时，我们常常要写不少的条件语句。这里有五个小技巧，可以让你写出更干净、漂亮的条件语句。1. 使用 Array.includes 来处理多重条件举个栗子 ：// 条件语句function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red');...

第一步:区分:函数声明 / 函数表达式 / 匿名函数函数声明: 格式: function 函数名称(){…};使用function关键字声明一个函数,并指定一个函数名称,叫做函数声明; 函数表达式: 格式: var 函数名称=function(){....}; 使用function关键字声明一个函数,但未给函数命名,最后将函数赋予一个变量,叫做函数表达式; ...

块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定块盒子的布局。在定位体系（Positioning Scheme）中它属于常规流（Normal Flow）。根据W3C所言：浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格 display:tab...

在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个：widow.document.body.offsetWidth;window.screen.availWidth;window.screen.width;一上图（PC端）为例，A区域 表示的网页的区域（屏幕下面虚线地方表示的是网页可以滑动的区域）：widow.document.body.o...

upload上传是前端开发很常用的一个功能，在Vue开发中常用的Element组件库也提供了非常好用的upload组件。upload上传是前端开发很常用的一个功能，在Vue开发中常用的Element组件库也提供了非常好用的upload组件。基本用法代码：<el-upload :action="uploadActionUrl"> <el-button size="s...

最近公司老项目改用vue开发，前端框架采用element ui，这个框架风格还是很漂亮的，只是上传功能有一些问题，比如:limit=1限制上传数量后，后面的添加按钮没有隐藏，再用就是如果上传图片组，很多需求需要对图片组进行排序修改，基于这两个需求，对element的el-upload组件进行了二次封装。首先引入sortable.js这个插件，这个是一个很强大的排序插件，下面直接上我封装的上传代码...

vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要，那么组件之间如何进行数据通信的呢？ 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家，坐着一屋子的陌生人，相互之间怎么称呼，这时就需要先知道自己和他们之间是什么样的关系。 vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间...

工作中碰到error的处理问题，需要分不同的statusCode进行不同的错误提示。axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code ...

Vue的实例是Vue框架的入口，其实也就是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然它也有自己的一系列的生命周期的事件钩子，辅助我们进行对整个Vue实例生成、编译、挂着、销毁等过程进行js控制。1. Vue实例初始化的选项配置对象详解前面我们已经用了很多次 new Vue({…})的代码，而且Vue初始化的选项都已经用了data、methods、el、comput...

在使用element ui 进行表单校验的时候。混用了resetFields和clearValidate造成了个莫名奇妙的bug记录下。this.refs.form.resetFields();//移除校验结果并重置字段值this.refs.form.resetFields(); //移除校验结果并重置字段值this.refs.form.resetFields();//移除校验结果并重置...

eleme写的基于vue2.0的前端组件库: http://element.eleme.io我在平时使用过程中，遇到的问题。自定义表单验证出坑:1: validate/resetFields 未定义。原因：1：要验证的DOM，还没有加载出来。2：有可能this.refs[ruleForm].validate()方式不识别。需要使用:this.refs[ruleForm].validat...

本人开发的系统中有个添加数据与编辑数据的功能。为了减少代码量，两者使用了同一个dialog，通过不同按钮点击使用对应的方案进行显示。对了方便，本人在添加数据的按钮的click事件中直接写入了resetFields。之后正常运行过一段时间，但是就在最近（添加了很多代码）开始报错：TypeError: Cannot read property ‘resetFields’ of undefined...

idea 添加 VUE 的语法支持和开发《一》VUE的开发分两种，一种是直接在HTML文件中使用，一种是VUE文件的形式开发1，首先我们先让 HTML 文件支持 VUE 的语法指令提示2，File -> Setting -> Edit -> Inspections -> html3，点击上图最右侧红框内的按钮，在弹框内输入一下内容，还可以根据自己的喜好，设置更多的提...

需求：防止时间范围内的查询到数据过多，希望设置最大可选一周的是时间范围完成效果：见下图知道了怎么禁用时间，想要达到预期的效果，要拿到第一次选择的日期查看element文档，onPick可返回每次选中的时间完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="...

日常开发中经常会遇到 this 指向的 bug，郁闷好久才猛然醒悟，痛定思痛，将 this 做个汇总，以便在日后的开发工作中少走弯路。注意：本文讲述只针对浏览器环境。一：全局执行console.log(this);// Window可以看出在全局作用域中 this 指向当前的全局对象 Window。二：函数中执行1、非严格模式中function func () { ...

//加括号的函数体返回对象字面表达式：参数=> ({foo: bar})记住：在ES6中用params => {object:literal}这种简单的语法返回对象字面量是行不通的。需要用圆括号把对象字面量包起来var func = () => ({foo: 1})注意：箭头函数在参数和箭头之间不能换行。...

方法概述map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。例子2.1 在字符串中使用map在一个 String 上使用 map 方法获取字符串中每个字符所对应的 ASCII 码组成的数组：var map = Array.prototype.mapvar a = map.call(&quot;Hello World&quot;, function(x) { ret...

1.在jsp中加入头 &lt;META HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt; &lt;META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"&gt; &lt;META HTTP-EQUIV="Expires" CONTENT="0"&gt;

前言打开浏览器从输入网址到网页呈现在大家面前，背后到底发生了什么？经历怎么样的一个过程？先给大家来张总体流程图，具体步骤请看下文分解！总体来说分为以下几个过程：DNS 解析：将域名解析成 IP 地址TCP 连接：TCP 三次握手发送 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面断开连接：TCP 四次挥手一、URL 到底是啥U...

写在前面：本文包括浏览器调试，不包括web移动端调试。本文调试均在chrome浏览器进行。alert这个不用多说了，不言自明。console基本输出想必大家都在用 console.log 在控制台输出点东西，其实console还有其它的方法： console.log("打印字符串");//在控制台打印自定义字符串 console.error("我是个错误");//在...

笔者的经历在知乎就可以看到，大学专业是数字媒体艺术，大一实习过动效设计师，大二拿到了人生第一个大公司 offer 是阿里的交互设计，后来转岗到淘宝旅行的前端团队，现在在微信电影票做前端研发。也是走过了不少野路子，不过还好有小右哥 @尤雨溪这样艺术/设计转前端的大神在前面做典范，也证明这条路是玩的通的

2017前端面试题总结1：为何选择前端这个方向和对前端的理解为什么：第一的话就是对前端很感兴趣，之前也接触过其他的语言，但是直到接触到前端才发现真的有兴趣做下去，兴趣是一个人最好的老师，第二的话前端很有前途，像现在nodejs，rn，微信小程序这类工具和框架可以让前端进行后端和移动开发，所以我觉得前端的前途会更多一点。理解：首先前端工程师最核心的技能还是：Html、CSS、JS。前端负...

vue2.0$nextTick监听数据渲染完成之后的回调函数vue里面本身带有两个回调函数：一个是Vue.nextTick(callback)，当数据发生变化，更新后执行回调。另一个是Vue.$nextTick(callback)，当dom发生变化，更新后执行的回调。栗子：&lt;ul id="demo"&gt; &lt;li v-for="item in list"&gt;{{...