web前端
文章平均质量分 65
女神修炼日记Cherry
这个作者很懒,什么都没留下…
展开
-
前端三大框架比较
React与Vue相同点使用 Virtual DOM,有较高的运行速度提供组件化功能可使用mobx与vuex进行状态管理,响应式、依赖追踪React子组件重复渲染问题需要手动优化可以使用redux进行状态管理,函数式、不可变、模式化,时间旅行可使用JSX,完全的javascript能力更繁荣的社区生态Vue可使用JSX,但推荐使用模版语言而不是JSX学习曲线平缓Angular特点完善的MV*框架,...转载 2018-05-08 11:20:51 · 31355 阅读 · 0 评论 -
使用npm发布自己的npm组件包
作为前端攻城狮,npm包管理是需要经常使用的,封装自己的组件包,方便使用是有必要的,仅记录发布npm组件包的过程,以备不时之需。 1、首先需要有npm账号,可以直接登录官网https://www.npmjs.com/signup免费注册,注册后一定要进行邮箱验证,否则后面进行组件包发布时候会提示403错误,让进行邮箱核准。 2、在本地新建一个项目,在cm...原创 2018-05-10 14:03:02 · 4392 阅读 · 0 评论 -
默认浏览器设置及vue自动打开页面
以下为windows 系统操作,仅供参考。 一、修改默认浏览器 个人偏好谷歌浏览器,设置谷歌浏览器为默认浏览器。 1、首先打开“开始菜单”,点击“控制面板”; 2、在“控制面板”里面找到“默认程序”,进入后点击“设置默认程序”; 3、加载好后选择 “谷歌浏览器”; 4、选择“将此程序设置为默认值”,如果安装360安...原创 2018-05-10 15:05:06 · 16868 阅读 · 1 评论 -
箭头函数与普通函数的区别
首先知道一下什么是箭头函数,箭头函数就是没有function关键字,而是一个类似箭头的函数:var a = ()=>{ return 1;}相当于function a(){ return 1;}那么就来看一下他们的区别箭头函数作为匿名函数,是不能作为构造函数的,不能使用newvar B = ()=>{ value:1;}var b = new B(); //T...转载 2018-05-08 20:44:45 · 1205 阅读 · 0 评论 -
vue中 favicon.ico正确显示教程
首先将favicon.ico图片放在根目录下,通过以下两种方法使其显示正确。方法一:修改index.html文件<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>方法二:修改webpack配置文件 1、找到build下的webpack.dev.conf.js文件new HtmlWebpack...原创 2018-04-12 17:34:25 · 13550 阅读 · 0 评论 -
移动端常用meta标签
<!DOCTYPE html><html lang = ""><head> <title></title> <meta charset = "utf-8"> <!--width - 可视区域的宽度,值可为数字或关键词device-width -->转载 2018-04-12 17:00:35 · 224 阅读 · 0 评论 -
前端面试题套路
套路一:事件代理 1、事件代理基本原理 事件代理的基本原理简单来说就是将子元素的事件通过冒泡的形式交由父元素来执行。 事件冒泡:当一个子元素的事件(如click)被触发的时候,该事件会从子元素开始向上传播,触发父级元素的点击事件。 2、事件代理的应用场景 很多商品放在一个ul下面的li标签里面,点击添加或删除商品,就可以绑定商品...原创 2018-04-12 13:24:20 · 284 阅读 · 0 评论 -
vue-cli配置移动端自适应,将px转化为rem
1、通过npm 下载 lib-flexiblenpm install lib-flexible --save2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible.js'3、通过设置meta标签,设置设备宽度及缩放比例<meta name="viewport" content="width=device-width, initial-s...原创 2018-04-16 15:02:45 · 759 阅读 · 0 评论 -
jQuery 动画篇
一 显示与隐藏 hide()和show()是显示与隐藏,需要注意的是: 1.show和hide是修改display属性,如果是visibility属性设置则需要通过CSS方法单独设置。 2.如果使用!important在样式中,如果希望show()正常工作,必须使用.css('display','block !important')。 3.如果要...原创 2018-02-20 21:46:53 · 157 阅读 · 0 评论 -
2018前端面试题(一)
一、https和http的区别及优缺点 http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。 https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,...原创 2018-05-06 19:51:37 · 787 阅读 · 0 评论 -
2018前端面试题(二)
九、元素隐藏的几种方法 (1)opacity: 0 ; 通过改变元素的透明度,从视觉上来隐藏元素,但是元素本身依然占据它自己的位置,并对网页的布局起作用,也能相应用户的交互; (2)visibility: hidden ; 同opacity相同,元素本身依然占据它自己的位置,并对网页的布局起作用,不同的是不会对交互起作用。 ...原创 2018-05-06 22:29:29 · 257 阅读 · 0 评论 -
2018最新Web前端经典面试试题及答案
本篇收录了一些面试中经常会遇到的经典面试题以及自己面试过程中遇到的一些问题,并且都给出了我在网上收集的答案。马上就要过春节了,开年就是崭新的一年,相信很多的前端开发者会有一些跳槽的悸动,通过对本篇知识的整理以及经验的总结,希望能帮到更多的前端面试者。(如有错误或更好的答案,欢迎指正,水平有限,望各位不吝指教。:javascript: JavaScript中如何检测一个变量是一个String类型?请...转载 2018-05-07 14:15:39 · 468 阅读 · 0 评论 -
vue双向绑定的原理及实现步骤
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 思路整理 已经了解到vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫...原创 2018-05-08 10:55:56 · 365 阅读 · 0 评论 -
vue中遇到的坑
1 一个是eventHub的坑–重复监听的问题:解决方案监听之前先off掉2 路由的坑–不加replace会两个页面来回跳,无法正常的返回父级页面。3 vuejs对data中数组的原生方法进行了封装,所以在改变数组时能够触发视图更新,但是以下两种情况是无法触发视图的更新的:1 通过索引直接修改数组的元素,例如vm.items[0] = {title: 'title'} 2 无法直接修改数组的长...转载 2018-05-08 10:14:56 · 228 阅读 · 0 评论 -
vue2组件懒加载浅析
一、 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时三、如何与webpack配合实现组件懒...转载 2018-05-08 09:37:04 · 449 阅读 · 0 评论 -
2018前端面试题(八)
人生也有涯 而知也无涯 以有涯随无涯 殆已! –庄子部分内容转载自网络,侵立删!如有错误,请指正!1、手写jsonp的实现参考自: http://www.qdfuns.com/notes/16738/1b6ad6125747d28592a53a960b44c6f4.html12先说说JSONP是怎么产生的:其实网上关于JSONP的讲解有很多,但却千篇一律,而且云里雾里,对于很多刚接触的人来...转载 2018-05-07 17:45:27 · 4044 阅读 · 0 评论 -
2018前端面试题(七)
1.HTML5中的DataList是什么?<datalist>定义选项列表,与input元素配合使用,来定义input可能的值。datalist及其选项不会被显示出来,他仅仅是合法的输入值列表2.SVG是什么?svg(Scalable Vector Graphics,可伸缩矢量图形)由万维网联盟(W3C)推出的基于xxxxim编码的开放式图形、图像标准。他虽然是一种二维矢量图形格式,但...转载 2018-05-07 17:07:23 · 264 阅读 · 0 评论 -
2018前端面试题(六)
前言:最近在找工作,遇到一些面试题,鄙人觉得还挺有代表性便与参考答案一并整理出来,以供广大道友参考,还望指教1.什么是vue生命周期 ? vue实例从被创建到销毁的一系列过程就叫vue生命周期. 也就是从开始创建、初始化数据、编译模版、挂载DOM→渲染、更新、渲染、卸载等一系列过程。2.axios的特点有哪些axios是一个基于promise的HTTP库,支持promise的所有API它可以拦截...转载 2018-05-07 17:05:23 · 307 阅读 · 0 评论 -
2018前端面试(五)
今年秋招对我是个打击,不过也让我认清了现实。借用鲁迅先生的一句话,真正的勇士敢于直面惨淡的人生,敢于正视失败的面试。面试失败不可怕,可怕的是不能吸取教训。在吸取教训上我做的不好,不然也不会有些面试问题记不住了。回顾几次面试失败经历,我总结了一下各家公司问的问题,为未来作打算,也为师弟师妹们做个参考。总结了一下,发现实习经历真的很重要,而且项目经验也要重点突出一些东西,展现自己的技术特点,让面试官无...转载 2018-05-07 16:53:59 · 338 阅读 · 0 评论 -
2018前端面试题(四)
Q:什么情况下会碰到跨域问题?有哪些解决方法?跨域问题是这是浏览器为了安全实施的同源策略导致的,同源策略限制了来自不同源的document、脚本,同源的意思就是两个URL的域名、协议、端口要完全相同。script标签jsonp跨域、nginx反向代理、node.js中间件代理跨域、后端在头部信息设置安全域名、后端在服务器上设置cors。$.fn是什么意思?$.fn是指jquery的命名空间,加上f...转载 2018-05-07 16:16:02 · 307 阅读 · 0 评论 -
2018前端面试题(三 )
1.两个div标签,如何控制标签左边固定,右边自适应,左边div宽度为100px.(1)左边设置浮动,右边不设置宽度自定布局到右边[html] view plain copy<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title&转载 2018-05-07 16:14:43 · 284 阅读 · 0 评论 -
jQuery 事件篇(三)
一 键盘事件 1 keydown()和keyup()事件 jQuery使用keydown()和keyup()来监听键盘按下与松开的动作。 使用方法统计本事件参数保持一致,即$ele.keydown(eventData,handler)。需要注意的是: keydown是在键盘按下就会触发,输出文本框的文本是触发键盘事件前的文本;keyup是在键盘松手就会触发,输出的是触发键盘后的文本;keyd...原创 2018-02-08 17:52:09 · 192 阅读 · 0 评论 -
jQuery 表单事件
一 blur和focus事件 blur与focus事件和focusin与focusout事件的本质区别:是否支持冒泡处理。focus()在元素本身产生,focusin()在元素包含的元素中产生,blur与focusout也是如此。$(".aaron").focus(function() { $(this).css('border', '5px solid red') })...原创 2018-02-08 16:05:51 · 184 阅读 · 0 评论 -
DOM应用
DOM的相关应用介绍原创 2017-11-27 13:26:32 · 594 阅读 · 0 评论 -
移动web首屏优化(二)
1、前端性能包括以下几方面:a)、加载性能b)、渲染速度c)、用户交互响应速度d)、动画流畅性e)、DOM操作无闪动2、首屏时间性能优化场景一:用微信实现一个场景,定位,加载或请求,操作路径受到限制的场景二:红包活动落地3、首屏时间为页面内容基本可展示完全,影响首屏时间的因素:a)、网络耗时远大于浏览器耗时1)、DNS解析 2)原创 2017-12-14 12:51:34 · 315 阅读 · 0 评论 -
移动端交互优化问题(一)
1、移动web开发和PCweb开发,有哪些不同? 通过MVC分析,M(HTML):移动开发会关注很多meta标签,通过meta标签来定制行为样式;V(CSS):移动开发关注移动设备分辨率适配;C(javascript):交互优化、性能优化等;2、交互优化、性能优化的区别性能优化:更快主要通过压缩代码、文件合并、后台直出等方法切实改变响应速度;原创 2017-12-13 17:50:32 · 1021 阅读 · 0 评论 -
javascript基础
javascript的基础概念及认知原创 2017-11-23 18:04:31 · 193 阅读 · 0 评论 -
javascript认识
1.网站换肤功能主要思路:写出来两套css样式,通过js控制css的外链id,代码如下:function skinRed() { var oL = document.getElementById('red') oL.href="red.css" }总结:任何标签都可以添加id2、a标签主要思路:点击a标原创 2017-11-23 11:07:21 · 366 阅读 · 0 评论 -
webpack在开发中的应用
通过webpack来提高构建速度及首屏加载优化原创 2017-12-19 15:38:24 · 919 阅读 · 0 评论 -
不可错过的javascript迷你库
最近看着下自己的github star,把我吓坏了,手贱党,收藏癖的我都收藏了300+个仓库了,是时候整理一下了。Unix主张kiss,小而美被实践是最好用的,本文将介绍笔者收集的一些非常赞的开源库。这些库的共性是非常小,而且功能单一。cookie.js如果你操作过cookie的接口,那么你一定会感觉这东西的规范真的是太复杂了,根本记不住啊,其实你是对的,因为coo转载 2017-07-26 13:30:33 · 212 阅读 · 0 评论 -
全选、全不选以及获取选中的值
HTML部分的布局是下面这样的: 1.番茄 2.黄瓜 3.青椒 4.蒜苗 5.韭菜 关于javascript部分是这样写的: //全选或全不选 $('#All').click(function(){ if(this.checked) { $('#list :checkbox').pro原创 2017-07-19 13:02:50 · 311 阅读 · 0 评论 -
JS 运动基础
JS动效基础知识原创 2017-11-27 15:04:46 · 277 阅读 · 0 评论 -
HTML5 视频直播
视频直播的基础知识概要原创 2017-12-18 15:16:44 · 1173 阅读 · 0 评论 -
HTML5和CSS3小技巧
一、before和after伪元素 可以指定伪元素的尺寸,关联背景图片,结合伪类实现过度效果,blockquote:before { content: " "; font-size: 24pt; text-align: center; line-height: 42px; color: #fff; float: left; position: relative; top原创 2018-01-21 19:39:29 · 770 阅读 · 0 评论 -
弱类型语言和强类型语言
一、强类型语言 强类型语言是一种强制类型定义的语言,一旦某一个变量被定义类型,如果不经过强制转换,则它永远就是该数据类型了,强类型语言包括Java、.net 、Python、C++等语言。 举个例子:定义了一个整数,如果不进行强制的类型转换,则不可以将该整数转化为字符串。二、弱类型语言 弱类型语言是一种弱类型定义的语言,某一个变量被定义类型,该变量可以根据...原创 2018-03-06 22:05:27 · 28319 阅读 · 3 评论 -
移动开发基础
一 移动web的基础知识 1.meta 标签 width:设置布局viewport的特定值(“device-width”);initial-scale:设置页面的初始缩放;minimum-scale:最小缩放;maximum-scale:最大缩放;user-scalable:用户能否缩放。2.设计移动web方案一:根绝设备的实际宽度来设计;方案二原创 2018-01-29 16:32:07 · 496 阅读 · 0 评论 -
border的深入理解
一、border-width不支持百分比 原因是受语义和场景限制的,所谓边框是不会因为设备大就按比例大小的。border-width支持关键字:thin,medium,thick,但是IE7除外。二、border-style 类型 Chrome/Firefox下,虚线宽高比为3:1,但是在IE下宽高比则为2:1;border-style:dotted虚线,在Chrome/Fir原创 2018-01-27 23:13:29 · 464 阅读 · 0 评论 -
jQuery 事件篇(一)
一 jQuery绑定事件的三种方法target.click(function(){});target.on('click',function(){});target.bind('click',function(){});target.live('click',function(){}); live的用法和作用等效于bind ,但是两者是存在区别的,bind只能给当前存在的元素绑定事件原创 2018-02-02 17:23:33 · 171 阅读 · 0 评论 -
margin深入理解
一、 使用场景: 一侧定宽的自适应布局 两端对齐布局 等高布局二、 margin百分比单位: 普通元素的百分比margin都是相对于容器的宽度计算的,例如div的width:300px;则margin:10%,则 代表margin的上下左右都是30px; 绝对定位元素的百分比margin是相对于第一个定位祖先元素(relative/absolute/fixed)的宽度原创 2018-01-26 15:20:24 · 692 阅读 · 0 评论 -
jQuery DOM操作
一 事件冒泡和事件捕获 事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件。addEventListener的第三个参数,就是控制触发顺序是否为事件捕获,true事件捕获,false事件冒泡,默认false,即事件冒泡。 document.getElementById('parent').addEventListener('cl原创 2018-02-02 11:01:13 · 132 阅读 · 0 评论