- 博客(51)
- 收藏
- 关注
RSS订阅原创 用CSS3实现18种你不知道的Loading效果
第一种效果代码如下：第2种效果：第3-5种效果：代码如下：第6-8种效果：代码如下：第6-8种效果的css样式分别为：第9-10种效果：代码如下：CSS样式分别为：第11种效果：代码如下：第12种效果：代码如下：第13种效果：代码如下：第14种效果：代码如下：第15种效果：代...
2019-07-16 09:59:08
279
转载 工作中遇到的特殊CSS布局
日常开发中，设计师总会提出各种奇思妙想的需求，为我们的UI还原工作带来很多挑战。虽然有时确实会让我们花蛮多时间去实现，但从一方面想这也是个机会，让我们更深入了解的浏览器布局方式。本文主要记录之前工作中遇到的特殊布局，都是通过CSS方式去实现。多条件留白布局图中有两个内容块A和B，他们宽度取决于内容宽度，左右侧留白有max-width: 200px限制，中间留白有min-width: 150p...
2019-07-15 10:15:29
195
原创 CSS3知识点总结
1、相邻兄弟选择器，通用兄弟选择器相邻兄弟选择器：#d1+p{color:red} //紧挨着#d1后面的第一个且必须为p的标签，文字颜色变为red通用兄弟选择器：#d1~p{color:red} //#d1后面所有为p的标签，文字颜色变为red2、属性选择器，理解下面语句①[id]{color:red;} ②div[i...
2019-07-11 14:56:28
190
原创 JavaScript 常见的六种继承方式
面向对象编程很重要的一个方面，就是对象的继承。**A 对象通过继承 B 对象，就能直接拥有 B 对象的所有属性和方法。**这对于代码的复用是非常有用的。大部分面向对象的编程语言，都是通过“类”（class）实现对象的继承。传统上，JavaScript 语言的继承不通过 class(ES6 引入了class 语法)，而是通过“原型对象”（prototype）实现。那么在JS中常见的继承方式有几种呢...
2019-07-10 17:42:06
187
原创 小程序文字沉底居中
css样式.a{position: fixed;text-align: center;bottom: 30rpx;left: 0;right: 0;}实现效果
2019-07-03 10:31:52
1315
翻译 为什么要前后端分离？各有什么优缺点？
一、前戏前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端html页面通过ajax调用后端的restuful ...
2019-05-27 14:50:50
171
原创 过目不忘JS正则表达式
正则表达式，有木有人像我一样，学了好几遍却还是很懵圈，学的时候老明白了，学完了忘光了。好吧，其实还是练的不够，所谓温故而知新，可以为师矣，今天就随我来复习一下这傲娇的正则表达式吧。为啥要有正则表达式呢？其实就是因为计算机笨（这话不是我说的），比如123456@qq.com，我们一看就是邮箱，可是计算机不认识啊，所以我们就要用一些计算机认识的语言，来制定好规则，告诉它符合这个规则的就是个邮箱，这样...
2019-05-27 14:47:07
146
转载 Vue 组件间通信六种方式（完整版）
前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如pr...
2019-05-27 11:15:41
14415
6
转载 前端开发者必备的 Nginx 知识
nginx在应用程序中的作用· 解决跨域· 请求过滤· 配置gzip· 负载均衡· 静态资源服务器nginx是一个高性能的HTTP和反向代理服务器，也是一个通用的TCP/UDP代理服务器，最初由俄罗斯人Igor Sysoev编写。nginx现在几乎是众多大型网站的必用技术，大多数情况下，我们不需要亲自去配置它，但是了解它在应用程序中所担任的角色，以及如何解决这些问题是非常必...
2019-04-19 14:50:03
306
转载 灵活使用 console 让 js 调试更简单
Web开发最常用的高度就是 console.log ，虽然 console.log 占有一席之地，但很多人并没有意识到 console 本身除了基本 log 方法之外还有很多其他方法。 适当使用这些方法可以使调试更容易，更快速，更直观。console.log()在console.log 中有很多人们意想不到的功能。虽然大多数人使用 console.log(object) 来查看对象，但是你也可...
2019-04-19 14:29:53
227
转载 如何理解JavaScript的原型和原型链？
之前有朋友问怎么去理解原型和原型链的问题。这个问题，在面试中，很多同学经常都会遇到。这里给大家讲讲，方便大家记忆。JavaScript的特点JavaScript是一门直译式脚本语言，是一种动态类型、基于原型的语言。 JavaScript的灵活性不亚于C++，你可以使用JavaScript尝试不同的程序设计范型。比如类jQuery风格的函数式编程、基于过程的指令式编程、以及基于原型的面向对象编...
2019-04-19 14:10:14
971
原创 只要学会这五步！就可以成为万中无一的前端工程师
无所不知还记得前端疲劳里的这张图吗？没错，优秀的前端工程师掌握了这张图上的几乎一切。他们不受前端疲劳的困扰，他们可以跟上每一次技术更新迭代的脚步，将最新的工具和技术轻松收入囊中。大多数情况下，他们不需要查看技术文档和手册，因为那些东西好像就存在他们的脑子里。无论是写正则表达式，还是调用API，抑或处理复杂的JS代码，他们都能信手拈来。完美代码每次code review，我的内心都...
2019-04-03 09:55:55
190
转载 JavaScript面向对象——封装及相关原理解析
《JavaScript设计模式》面向对象编程——封装及相关原理解析说明：本人编写js习惯不写分号；文章中的源码可根据自己的编程风格修改。面向对象面向对象编程就是将你的需求抽象成一个对象，然后针对这个对象分析其特征（属性）与动作（方法），学过C++、Java等语言的伙伴应该比较好理解。封装1：创建一个类方法：声明一个函数保存在一个变量里，风格上一般开头大写，然后在这个函数（类）的内部通...
2019-03-30 16:37:10
223
转载 9张思维导图学懂Javascript
话说，好记性不如烂笔头，而学习的道路就是一个不断的总结归纳的过程，今天给出的Javascript学习的思维导图内容，其实，我在2016年的时候，就已经跟大家分享过了，但是发现最近又有小伙伴来问要那个PDF文件，还有人说，之前的网盘地址失效了，（因为我的网盘后来整理过，之前的分享的东西可能有部分可能已经失效，）所以，今天我再把这个PDF文件分享一下，希望对一些新来的小伙伴有帮助。思维导图概述思维...
2019-03-29 13:22:41
404
原创 优化 JS 条件语句的 5 个技巧
在使用 JavaScript 时，我们会处理很多条件语句，这里有 5 个技巧可以帮助您编写更好、更简洁的条件语句。1、对多个条件使用 Array.includes让我们看看下面的例子：乍一看，上面的例子看起来不错。然而，如果还有更多红颜色的水果需要判断呢，比如樱桃和小红莓，我们要用更多的 || 来扩展这个表述吗？我们可以用 Array.includes 重写上面的条件我们将红色水果（...
2019-03-29 13:14:11
449
原创 前端开发基础：这些网页布局方法你都知道吗？
最近很多小伙伴在学习基础布局的时候很纠结布局方法，那么就要就来给大家总结几个常用的页面架构布局方案，看完可以随收收藏起来，以后都能用到今天讲解的布局大致可以分成两种布局，分别是居中布局和多列布局。这两种布局又有好几种小布局方案，一起来看看吧！居中布局a.水平居中b.垂直居中c.水平垂直多列布局a.自适应布局b.等宽布局c.等高布局居中布局HTML代码水平居中在水平居中里...
2019-03-27 10:12:24
268
原创 ajax常见面试问题
1.工作当中会和后台交互吗？ 那你能说说封装好的 ajax里的几个参数吗 ？url: 发送请求的地址。type: 请求方式（post或get）默认为get。async: 同步异步请求，默认true所有请求均为异步请求。timeout : 超时时间设置，单位毫秒data：要求为Object或String类型的参数，发送到服务器的数据cache：默认为true（当dataType为sc...
2019-03-23 11:58:46
7171
转载 JS 面试之数组的几个不 low 操作
前言本文主要从应用来讲数组api的一些骚操作，如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。上面这些应用场景你可以用一行代码实现吗？1.扁平化n维数组1.终极篇Array.flat(n)是ES10扁平数组的api， n表示维度， n值为 Infinity时维度为无限大。2.开始篇实质是利用递归和数组合并方法 concat实现扁平。2.去...
2019-03-21 08:29:31
161
转载 JavaScript实现九种排序算法
1.插入排序最普通的排序算法， 从数组下标1开始每增1项排序一次，越往后遍历次数越多；原理图：代码：2.二分插入排序插入排序的一种优化实现， 通过二分法减少遍历时间。原理图：3.希尔排序其排序思路有点复杂， 需花多点时间理解；排序思路：先将整个待排序记录序列分割成若干个子序列，在序列内分别进行直接插入排序，待整个序列基本有序时，再对全体记录进行一次直接插入排序。原理图：...
2019-03-21 08:21:32
274
转载 Web 实时推送技术的总结
一、双向通信HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。在WebSocket协议之前，有三种实现双向通信的方式：轮询（polling）、长轮询（long-polling）和iframe流...
2019-03-21 08:12:51
172
翻译 秒懂 this
日常开发中经常会遇到 this 指向的 bug，郁闷好久才猛然醒悟，痛定思痛，将 this 做个汇总，以便在日后的开发工作中少走弯路。注意：本文讲述只针对浏览器环境。一：全局执行可以看出在全局作用域中 this 指向当前的全局对象 Window。二：函数中执行非严格模式中2. 严格模式中三：作为对象的方法调用当一个函数被当作一个对象的方法调用的时候，this 指向当前的对...
2019-03-21 08:05:53
136
翻译 JavaScript函数的使用方法与描述
函数1、函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块2、函数就是包裹在花括号中的代码块，前面使用了关键词 function3、JavaScript 对大小写敏感4、关键词 function必须是小写的，并且必须以与函数名称相同的大小写来调用函数1、带参数的函数1、在调用函数时，您可以向其传递值，这些值被称为参数2、可以发送任意多的参数，由逗号 (,) 分隔3、当您声...
2019-03-21 08:05:47
992
翻译 Promise 探讨
一、前言大家都知道JavaScript一大特点就是单线程，为了不阻塞主线程，有些耗时操作（比如ajax）必须放在任务队列中异步执行。传统的异步编程解决方案之一回调，很容易产生臭名昭著的回调地狱问题。虽然回调地狱可以通过减少嵌套、模块化等方式来解决，但我们有更好的方案可以采取，那就是 Promise二、含义Promise 是一个对象，保存着异步操作的结果，在异步操作结束后，会变更 Prom...
2019-03-21 08:05:41
364
转载 近一万字的ES6语法知识点补充
前言ECMAScript 6.0（简称ES6），作为下一代JavaScript的语言标准正式发布于2015 年 6 月，至今已经发布3年多了，但是因为蕴含的语法之广，完全消化需要一定的时间，这里我总结了部分ES6，以及ES6以后新语法的知识点，使用场景，希望对各位有所帮助本文讲着重是对ES6语法特性的补充，不会讲解一些API层面的语法，更多的是发掘背后的原理，以及ES6到底解决了什么问题如有...
2019-03-21 08:05:26
157
原创 介绍几个开发前端动画不得不学的动画库
1、AniJS.js基于 CSS3 的动画库(http://anijs.github.io/)2、Velocity.jsVelocity 是一个简单易用、高性能、功能丰富的轻量级 JS 动画库。它能和 jQuery 完美协作，并和 $.animate() 有相同的 API， 但它不依赖 jQuery，可单独使用(http://velocityjs.org/)3、vivus.jsV...
2019-03-21 08:05:15
5040
翻译 你真的懂 JavaScript 的正则吗？
定义正则表达式概述对于正则表达式的概念我们就不多费口舌了…在JavaScript中使用正则表达式进行模式匹配离不开RegExp对象，创建正则对象有两种方式1.正则表达式直接量(包含在一对/之间的字符)var reg = /java/;reg.test(‘java’); // true2.new RegExp()var reg = new RegExp(‘java’);reg.te...
2019-03-20 10:49:59
132
翻译 学习前端需要知道的：CSS 样式书写规范
可能不同团队都有各自的规范，又或者很多人在写 CSS 的时候还是想到什么就写什么，不存在太多的约束。我觉得 CSS 代码规范还是有存在的必要的，尤其是在团队配合，多人协作下，规范就显得尤为重要。本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，并不希望大家完全采用，而是希望可以结合自己的团队需要，发展出一套适合自己的 CSS 代码规范。我觉得不同的规范都有各自的长处与缺陷，对待所谓...
2019-03-20 10:47:49
165
翻译 前端项目如何管理
前端项目如何管理前端项目的管理分为两个维度：项目内的管理与多项目之间的管理。项目内的管理在一个项目内，当有多个开发者一起协作开发时，或者功能越来越多、项目越来越庞大时，保证项目井然有序的进行是相当重要的。一般会从下面几点来考证一个项目是否管理得很好：可扩展性：能够很方便、清晰的扩展一个页面、组件、模块组件化：多个页面之间共用的大块代码可以独立成组件，多个页面、组件之间共用的小块代码...
2019-03-20 10:46:07
721
翻译 2019年最佳JavaScript框架,库和工具
JvaScript框架，库和工具似乎比他们的开发人员多出很多。在2018年底，对GitHub的快速搜索显示了 230 万个JavaScript项目。 npm 已经成为世界上最大的模块系统，在 npmjs.com 上有70万个可用包，每个月下载数十亿。2018.12.06：该文章已更新，以反映 JavaScript 生态的当前状态。本文将努力解释最流行的客户端 JavaScript 框架、库和工...
2019-03-20 10:41:16
647
翻译 关于响应式布局，你必须要知道的
前言响应式Web设计可以让一个网站同时适配多种设备和多个屏幕，可以让网站的布局和功能随用户的使用环境（屏幕大小、输入方式、设备/浏览器能力）而变化。本文主要介绍一些响应式布局容易忽略但又很重要的知识点。视口移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等于分辨...
2019-03-20 10:26:20
446
翻译 前端布局神器display:flex
2009年，W3C提出了一种新的方案–Flex布局，可以简便、完整、响应式地实现各种页面布局。目前已得到所有现在浏览器的支持。flex浏览器支持一、Flex布局是什么？Flex是Flexible Box的缩写，翻译成中文就是“弹性盒子”，用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{display: -webkit-flex; /在webkit内核的浏...
2019-03-20 10:21:32
287
原创 对于前端开发，我们还面临着哪些挑战？
01浏览器兼容性。这一点是最重要的，其实不论什么加载、多绚丽的效果，都不如有一整版排布好的界面呈现在用户面前，然而市场上浏览器的种类非常多，ie、firefox、chrome、opera、还有众多的ie加壳浏览器，搜狗傲游360什么的，再加上这些浏览器的移动终端版本。需要有了web标准，前端的知识大部分是通用于各个浏览器，但还是会有历史遗留问题，不同的浏览器有不同的问题特别是市场占有率最高的ie...
2019-03-20 10:05:43
1556
翻译 Flexbox 布局的最简单表单
弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不清楚。今天，我看到一篇教程，才意识到一个最简单的表单，就可以解释 Flexbox，而且内容还很实用。下面，你只需要10分钟，就可以学会简单的表单布局。一、 元素表单使用元素。上面是一个空表单。根据 HTML 标准，它是一个块级元素，...
2019-03-20 10:04:05
118
转载 我是如何将页面加载时间从6S降到2S的？
写在前面生活在信息爆炸的今天，我们每天不得不面对和过滤海量的信息–无疑是焦躁和浮动的，这就意味着用户对你站点投入的时间可能是及其吝啬的（当然有一些刚需站点除外）。如何给用户提供迅速的响应就显得十分重要了，这可能成为你留住用户的关键。即使网站设计的再优秀，功能再完美，但是响应的巨慢，用户的耐心很快会被耗光，这可能成为他最后一次访问，这绝对不是危言耸听，最近有幸参与到了公司海外站点项目，对于这点深...
2019-03-20 09:59:10
190
翻译 JavaScript数组去重算法实例
本文主要介绍了JavaScript数组去重算法,结合实例形式总结分析了JavaScript数组去重相关的读写、遍历、比较、排序等操作及算法改进相关实现技巧,需要的朋友可以参考下测试用例：方法一：借助于临时数组与indexOf , 算法复杂度为:O(n^2)测试结果：bug 无法区分对象方法二 ： 用JavaScript中的Object对象来当作hash表测试结果：bug ...
2019-03-20 09:55:32
221
翻译 跨域请求资源的方法有哪些？
1.porxy代理定义和用法：proxy代理用于将请求发送给后台服务器，通过服务器来发送请求，然后将请求的结果传递给前端。实现方法：通过nginx代理；注意点：如果你代理的是https协议的请求，那么你的proxy首先需要信任该证书（尤其是自定义证书）或者忽略证书检查，否则你的请求无法成功。2.CORS 【Cross-Origin Resource Sharing】定义和用法：是现代浏览...
2019-03-19 17:10:56
1031
翻译 5分钟学会Ajax基本用法
引言：有很多童鞋，在WEB前端面试的时候，常会被Ajax问题难住，其实Ajax没有你们理解的那么难，现在带着大家重新来回顾一下知识点：随便再给大家普及一下小常识，今天咱们聊的就是怎么快速掌握Ajax基础知识。Ajax主要的功能是实现了浏览器端 异步 访问服务器：通过浏览器的XMLHttpRequest对象发出小部分数据，与服务端进行交互，服务端返回小部分数据，然后更新客户端的部分页面。1...
2019-03-19 17:09:09
183
翻译 JavaScript时间对象Date！
一 new Date() 获取当前时间1、 new Date() 本地时间var d = new Date();alert(d);//Wed Aug 23 2017 21:36:24 GMT+0800 (中国标准时间)2、 toUTCString() 当前 世界时toUTCString() 根据世界时，把 Date 对象转换为字符串。var d = new Date();var u...
2019-03-19 17:05:47
220
翻译 JavaScript定时器 Math函数
一定时器1 、setInterval()setInterval( function(){} , 1000) 多用于动画第一个参数是一个函数第二参数是时间，表示1秒（1000毫秒）后调用一次，然后每隔1秒调用一次，第一个参数2 、clearInterval()清除定时器clearInterval( timerManeger ) 里面的参数的定时管理器1.var timer = s...
2019-03-19 17:02:17
284
翻译 JavaScript 的对象继承方式，有几种写法？
一、对象冒充其原理如下：构造函数使用 this 关键字给所有属性和方法赋值（即采用类声明的构造函数方式）。因为构造函数只是一个函数，所以可使 Parent 构造函数 成为 Children 的方法，然后调用它。Children 就会收到 Parent 的构造函数中定义的属性和方法。例如，用下面的方式定义 Parent 和 Children：原理：就是把 Parent 构造函数放到 Child...
2019-03-19 16:59:08
198
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人