前端
编程鸭
这个作者很懒,什么都没留下…
展开
-
async和await有什么区别?
async和awaitasync叫异步函数。是ES2017新出的,这让异步操作变得更简单了。本质上是Generator的语法糖,所以本质上还是操作promise对象观察状态。将promise方法中得generator和yield替换成async和await结合使用,也就是一个语法糖语法糖:同样的代码效果,只用了更好的写法用法,也更用于理解,有利于编码风格的优化。比如es6的class,与之...原创 2019-03-21 14:34:37 · 8245 阅读 · 0 评论 -
CSS粘住固定底部的5种方法
本文主要介绍一个Footer元素如何粘住底部,使其无论内容多或者少,Footer元素始终紧靠在浏览器的底部。我们知道,当内容足够多可以撑开底部到达浏览器的底部,如果内容不够多,不足以撑开元素到达浏览器的底部时,下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图:全局增加一个负值下边距等于底部高度有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的...原创 2019-03-25 14:31:04 · 1523 阅读 · 0 评论 -
JavaScript的解析顺序对函数有何影响?
1.函数的定义方式 我们都知道,在JavaScript中有两种定义函数的方式,分别为声明式函数和赋值式函数,但是两种函数在执行顺序却有不同。比如:声明式<script>fn();//1functionfu(){console.log(1)}</script>赋...原创 2019-03-22 13:53:40 · 123 阅读 · 0 评论 -
HTML+CSS:三种css的引入方式,内链式、嵌入式、外部式
本篇文章我们将为大家介绍下css的三种引入方式。(1)内链式引入内链式css样式表就是把css代码直接写在现有的HTML标签中,具体的使用方法如下面所示:<div>设置文字的颜色为红色</div>这里要注意:样式的内容写在元素的开始标签里,并且css样式代码要写在双引号中,如果有多条css样式代码设置可以写在一起,中间用分号隔开。多个css样式写...转载 2019-03-29 14:14:21 · 23657 阅读 · 0 评论 -
JS添加getter与setter的六大方法。
一、定义 getter 与 setter1.通过对象初始化器在创建对象的时候指明(也可以称为通过字面值创建对象时声明)在 chrome 中调试视图如下:可以看到对象下多了get属性以及set属性当然get语句与set语句可以声明多次用来对应多个getter和setter使用这种方法的好处是可以在声明属性的时候同时声明对应的getter和set...原创 2019-03-23 10:53:36 · 1498 阅读 · 0 评论 -
9102 了,你还不会移动端真机调试?
移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经...转载 2019-03-30 11:41:51 · 135 阅读 · 0 评论 -
对于页面适配,使用 px 与rem区别!
css中的单位很多,%、px、em、rem,以及比较新的vw、vh等。每个单位都有特定的用途,比如当需要设置一个矩形的宽高比为16:9,并且随屏幕宽度自适应时,除了用%,其他单位是很难做到的。所以不存在说某个单位是错误的,某个单位是最好的这种说法。那本文说的页面适配,指的是同样的布局,在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式有很多:使...转载 2019-03-30 14:00:38 · 654 阅读 · 0 评论 -
web前端之“神秘”的跨域方式
什么是跨域:JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。那什么是跨域呢,简单地理解就是因为JavaScript同源策略的限制,a.com域名下的js无法操作b.com或是c.a.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同域。不同域之间相互请求资源,就算作“跨域”。有一点必须要注意:跨域并不是请求发不出去...转载 2019-03-27 10:04:04 · 125 阅读 · 0 评论 -
干货分享:web前端面试题分享
有很多伙伴反映说想要前端方向的面试题,所以小编今天就来给大家分享一些面试前端岗位时,经常会遇到的经典面试题的一些回答干货。希望大家在读完整片知识的整理以及经验的总结,能够帮到你们面试。javascript1、JavaScript中如何检测一个变量是一个String类型?请写出函数实现方法1functionisString(obj){returntypeof(obj)===...原创 2019-03-24 14:02:17 · 344 阅读 · 0 评论 -
编写优秀 CSS 代码的 8 个策略
编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一。然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性。我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解。在我和我们团队的观念中,编写可维护的前端代码非常重要。尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人。仅仅...翻译 2019-03-31 18:41:25 · 169 阅读 · 0 评论 -
JavaScript的原型和原型链分析
原型和原型链是JavaScript中一个比较难理解的概念,本文理论性和操作性较强,感兴趣的小伙伴们可以看看,有一定基础的小伙伴也可以参考学习。一、原型(prototype)1.prototype属性和[[prototype]]内部属性1.1. 任何一个函数,都有一个prototype属性,它指向prototype对象。prototype对象中有一个constructor属性,c...转载 2019-04-10 10:55:56 · 138 阅读 · 0 评论 -
5个Vuex插件 让你的VueJS项目开发速度提升更快
使用Vuex管理Vue.js应用程序的状态有很多充分的理由。首先,使用Vuex插件添加超酷功能非常容易。Vuex社区的开发人员已经创建了大量免费插件供您使用,其中包含您可以想象的许多功能,以及一些您可能无法想象的功能。下面展示使用Vuex插件轻松解决下一个项目的五个功能。 缓存操作 语言本地化 会话保持 管理多个加载状态 同步标签 缓存操作...原创 2019-04-01 10:25:49 · 474 阅读 · 0 评论 -
JavaScript的迭代函数与迭代函数的实现
前言说到迭代方法,最先想到的是什么?forEach还是map,迭代的方法ES5提供了5种方法。以下定义来自 JavaScript高级程序设计每个方法都接收两个参数:1.在每一项上运行的函数2.运行该函数的作用域对象(影响this的值)传入这些方法中的函数会接收3个参数:1.数组项的值2.该项在数组的位置3.数组对象本身迭代函数执行后可能会也可能不会影响返...转载 2019-04-07 09:56:42 · 1475 阅读 · 0 评论 -
前端开发必须掌握的七个JavaScript技巧
如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它,你可能感到沮丧。所有的语言都有自己的怪癖(quirks)——但从基于强类型的服务器端语言转移过来的开发人员可能会感到困惑。我就曾经这样,几年前,当我被推到了全职JavaScript开发者的时候,有很多事情我希望我一开始就知道。在这篇文章中,我将分享一些怪癖,希望我能分享给你一些曾经令我头痛不已的经验。这不是一个完整列表——仅仅...转载 2019-04-07 10:06:40 · 304 阅读 · 0 评论 -
前端如何使用 Vue 编写一个长按指令?
有没有想过只需按住一个按钮几秒钟就能在你的 Vue 应用中触发一个功能?有没有想过创建一个按钮,按下一次就可以清除单次输入(或者持续按住可以清除所有输入)?想过?太好了,英雄所见略同。本文就是讲解如何在按下(或者按住)一个按钮时,既执行一个函数,又清除输入。首先,我会讲解如何使用纯 JS 实现。而后也会创建一个 Vue 指令。请系好安全带。好戏在后头呢。原理要实现长按,...翻译 2019-04-11 10:19:07 · 341 阅读 · 0 评论 -
你知道如何使用 Webpack 工具打包类库吗?
在编写库的时候,我们有时候会希望按需加载某些依赖,例如如果代码的运行环境不支持某些功能的话,就加载相关的 Polyfill 。webpack 作为当前最流行的打包工具,早已支持动态加载的功能了。本文将讨论一种用 webpack 打包含动态加载的类库的方法。注意,本文是写给类库作者看的,如果读者写的是应用,那就没有必要往下看了。示例类库// my-lib.jsclass MyL...转载 2019-03-28 14:46:44 · 1092 阅读 · 0 评论 -
WEB 性能测试用例设计及总结
WEB 性能测试用例设计模型是设计性能测试用例的一个框架,在实际项目中,需要对其进行适当的剪裁,从而确定性能测试用例的范围和类别。剪裁的依据是性能测试策略和测试范围,在测试用例主要框架确定后,接下来就是如何设计各类性能测试用例中具体数据。基于用户的测试多在用户现场进行,为了测试目的而进行的测试多在开发环境即开发团队的内部进行。为了测试目的而设计的测试用例场景主要根据测试设计人员的经验来进...转载 2019-04-21 18:19:50 · 1332 阅读 · 0 评论 -
注意:让人稍不注意就踩的JavaScript 常见误区
接触JavaScript两年多遇到过各种错误,其中有一些让人防不胜防,原来对JavaScript的误会如此之深,仅以此文总结一下常见的各种想当然的误区。String replacestring的replace方法我们经常用,替换string中的某些字符,语法像这样子string.replace(subStr/reg,replaceStr/function)第一个参数是要查找的字...原创 2019-05-06 11:55:00 · 142 阅读 · 0 评论 -
Java总结篇系列:java.lang.Object
从本篇开始,将对Java中各知识点进行一次具体总结,以便对以往的Java知识进行一次回顾,同时在总结的过程中加深对Java的理解。Java作为一个庞大的知识体系,涉及到的知识点繁多,本文将从Java中最基本的类java.lang.Object开始谈起。Object类是Java中其他所有类的祖先,没有Object类Java面向对象无从谈起。作为其他所有类的基类,Object具有哪些属性和行为...原创 2019-05-19 14:02:01 · 8311 阅读 · 0 评论 -
你所不知道的JavaScript数组
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活、强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改。创建数组在JavaScript...转载 2019-05-07 16:06:33 · 120 阅读 · 0 评论 -
前端想拿万元月薪?那CSS开发中的10个易错点一定要先规避掉!
我发现前端开发人员一直在努力征服CSS。理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。你也一定听到过开发人员的抱怨:“我们只需要向左边移动五个像素,但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”根据我作为前端开发人员使用CSS的经验,下面是我的十个“不要”。1、不要滥用类...原创 2019-05-07 16:10:15 · 132 阅读 · 0 评论 -
JavaScript继承详解
面向对象与基于对象几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。 在传统面向对象的语言中,有两个非常重要的概念 - 类和实例。 类定义了一类事物公共的行为和方法;而实例则是类的一个具体实现。 我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象...原创 2019-05-20 13:49:46 · 126 阅读 · 0 评论 -
JavaScript继承详解(三)
在第一章中,我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承, 但是存在很多问题。这一章我们将会逐一分析这些问题,并给出解决方案。注:本章中的jClass的实现参考了Simple JavaScript Inheritance的做法。首先让我们来回顾一下第一章中介绍的例子: function Person(name) {this.name = name;...原创 2019-05-20 13:56:28 · 135 阅读 · 0 评论 -
avaScript继承详解(四)
在本章中,我们将分析Douglas Crockford关于JavaScript继承的一个实现 -Classical Inheritance in JavaScript。Crockford是JavaScript开发社区最知名的权威,是JSON、JSLint、JSMin和ADSafe之父,是《JavaScript: The Good Parts》的作者。现在是Yahoo的资深JavaScri...原创 2019-05-20 13:57:36 · 179 阅读 · 0 评论 -
灵活使用 console 让 js 调试更简单
Web开发最常用的高度就是console.log,虽然console.log占有一席之地,但很多人并没有意识到console本身除了基本log方法之外还有很多其他方法。适当使用这些方法可以使调试更容易,更快速,更直观。console.log()在console.log中有很多人们意想不到的功能。虽然大多数人使用console.log(object)来查看对象,但是你...原创 2019-05-15 15:56:00 · 181 阅读 · 0 评论 -
通过JavaScript操作HTML中select标签
添加:Js代码1.function selectChange()2.{3. var sel=document.getElementById("select1");4. Option option = new Option("Text","Value");5. sel.add(option);6.}function selectChange()...原创 2019-05-25 11:10:40 · 4372 阅读 · 0 评论 -
为什么要前后端分离?各有什么优缺点?
一、前戏前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。如果你对编程感兴趣或者想往编程方向发展,可以关注微信公众号【筑...原创 2019-05-12 17:56:34 · 803 阅读 · 0 评论 -
Javascript 使用 "大杂烩"
这是我早期在网上看的javascript学习方法,觉得很不错,就保存到word了,这几天学习Js,再看了一遍,对初学或者已经会Js的程序员来说,还是可以学习的。还有大家如果有更好的Js学习方法,可以提供下噢。谢谢!如果你对编程感兴趣或者想往编程方向发展,可以关注微信公众号【筑梦编程】,大家一起交流讨论!小编也会每天定时更新既有趣又有用的编程知识!1.Javascript数组API...原创 2019-05-13 16:03:53 · 127 阅读 · 0 评论 -
前端性能——监控起步
前端性能1.关键点 分页面、区域、浏览器、性能指标 页面的性能指标详解: 白屏时间(first Paint Time)——用户从打开页面开始到页面开始有东西呈现为止 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作,默认可以统计domready时间,因为通常会在这时候...原创 2019-05-23 11:04:04 · 538 阅读 · 0 评论 -
HTML前端入门归纳——控件
本人一直在从事.net的开发,界面都是采用的WPF,近期花了一个多月进行HTML前端的学习,在这里呢进行学习总结和归纳。 本系列将主要分为4个模块: 控件 样式 布局 JavaScript 根据多年WPF的开发经验,界面就是控件及样式与布局的组合,再加上代码来控制交互逻辑,本期先对HTML常用的控件进行归纳。 div : 区块...原创 2019-05-18 11:16:26 · 2820 阅读 · 0 评论 -
前端事件系统(二)
本章将把重点放在于对于事件的委托机制,以及jquery的事件绑定方法做一些解析。本章并没有什么比较难懂的地方,也还没有深入到jQuery的事件系统内部。事件委托上一章讲了前端事件系统以及简单地对各个浏览器进行兼容的方法。对于要求不高的页面来说,之前的简单事件注册,就可以很好的胜任各种各样的工作了。但是,试想一种情况。倘若一个页面有着极大量的事件绑定的需求,那么我们之前的事件系统,就不得不一...原创 2019-05-23 11:58:16 · 121 阅读 · 0 评论 -
一行css代码搞定响应式布局
在这篇文章中,我将教你如何使用 CSS Grid 来创建一个超酷的图像网格图,它将根据屏幕的宽度来改变列的数量。最精彩的地方在于:所有的响应特性被添加到了一行 css 代码中。这意味着我们不必将 HTML 与丑陋的类名(如col-sm-4, col-md-8)混杂在一起,也不必为每个屏幕创建媒体查询。ok,让我们发车吧。设置在本文中,我将继续使用我在第一篇CSS Grid 布...原创 2019-06-19 17:49:15 · 842 阅读 · 0 评论 -
Web前端知识体系梳理
现在是信息时代,经过 web1.0 时期、web2.0 时期到现在的移动互联网时期,信息获取越来越高效,坐着不动就会有大量的新闻、博客、资讯向你推荐而来。作为一名靠谱的程序员,你免不了要查阅大量的文章、视频和书籍来充斥你的知识量,不断学习。但是现在网上大量的信息堆积起来,对于你来说意味着什么?你如何去合理的筛选、梳理这些获得的信息,又如何去知道自己现在还缺什么信息?到这里就应...转载 2019-06-19 17:51:40 · 271 阅读 · 0 评论 -
1 命令行使用方法(基础)
一,命令行的几个关键字首先我们需要记住以下单词,清楚每个单词的意思,方便我们之后的学习。directory 目录、文件夹 file 文件 make 新建 remove 删除 move 移动 copy 复制 list 罗列 link 链接 find 查找 echo 发出回音、重复 touch 触摸 change 改变二,熟练的运用命令的缩写缩写是有规律...原创 2019-06-19 17:53:14 · 480 阅读 · 0 评论 -
2,如何在本地使用git与git commit -v
1.首先我们先来创建我们的项目目录1. cd ~/Desktop/2.mkdir git-test创建目录2.进入这个目录,然后使用git init1.cd git-test2.git init 在 git-test里创建一个 .git 目录我们可以用ls -la看到这个目录不用打开这个目录,之后我们在git-test这个目录中添加任意...原创 2019-06-19 17:54:08 · 1589 阅读 · 0 评论 -
3 HTTP的请求与响应
一,HTTP是什么?HTTP的全称是超文本传输协议(HyperText Transfer Protocol),它是互联网上的一种网络协议,设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。HTTP 的作用就是指导浏览器和服务器如何进行沟通。二,HTTP的请求1.请求的格式:1 动词 路径 协议/版本2 Key1: value12 ...原创 2019-06-19 17:54:56 · 307 阅读 · 0 评论 -
4 HTML初步
一,HTML简介相信任何对前端有所了解的人都不会没有听说过HTML这个名字,那么HTML究竟是什么呢?其实HTML的全称为HyperText Markup Language,也就是超文本标记语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。而HTML的发明者正是万维网之父提姆·博纳斯·李 Tim Berners-Lee 。二,发展历程1.HTML 的版本...原创 2019-06-19 17:55:36 · 204 阅读 · 0 评论 -
5 HTML标签基础
在上一篇文章中,我们编写了一个最基础的HTML网页(详见:https://zhuanlan.zhihu.com/p/38200226),那么这次就让我们用更多的标签来完善它,实现更多的功能,在实例中学习一些常用的标签。另外对于HTML标签的学习,有一个网站对我会很有帮助MDN Web Docsdeveloper.mozilla.org遇到想要了解的标签都可以在这个网站中搜索,会...原创 2019-06-19 17:56:43 · 407 阅读 · 0 评论 -
7 css基础之布局!
上一章我们学习了CSS的引用,让我们可以将CSS运用在我们的HTML文档上,那么我们这一次就来实际的运用它。这一次将介绍CSS的几个布局方式:左右布局 左中右布局 水平居中 垂直居中让我们依次来讲解(注:其实现在已经有了更好的flex方案,但是因为是基础学习,所以从 这里开始)一,左右布局1.利用float实现左右布局如图所示,我们现在需要实现这两...原创 2019-06-19 17:58:31 · 271 阅读 · 0 评论 -
JS基础之数据类型---数值!
在JavaScript中一共有七种类型,如下数值-number 字符串-string 布尔值-boolean Symbol-ES6时新添加的 null undefined 对象-object这些都是需要初步熟记的内容下面逐一展开这些数据类型一.数值-number数值顾名思义就是数字1.1存储方式在JavaScript中所有的数字都是以64位浮点数形式存储...原创 2019-06-19 17:59:19 · 536 阅读 · 0 评论