分类：WEB开发

2018
06-20

深入理解js的同步与异步

JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。那么，为什么JavaScript不能有多个线程呢？这样能提高效率啊。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器... 继续阅读 >
2018
05-30

2018年中高级前端面试题目小结

前言关于前端面试，及面试题目，我之前有很多文章总结过，可以在右侧搜索面试，进行查找。其实面试中可以问的问题很多，最近几年，我也面试过很多工作2-4年的前端，我一般会抓住他们做的项目，进行更详细的追问。所以，初中级前端面试的时候，除了掌握基础知识之外，项目中用到的技术要理清楚，假如你项目中用到的技术，问的时候却一问三不知，那么，基本上就会pass掉了。针对比较资深或者高级的前端面试，可能和初中级面试... 继续阅读 >
2018
05-28

系统认识JavaScript正则表达式

一、正则表达式简介1、什么是正则表达式正则表达式，又称规则表达式。（英语：RegularExpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。简单的说，就是按照某种规则去匹配符合条件的字符串。2、可视化正则表达式工具Regexper：https://regexper.com/二、RegExp对象实例化RegExp的两种方式。两种方式定义RegExp对象。1、字面量le... 继续阅读 >
2018
05-16

[译]深入ES6之箭头函数

箭头一族缺少的家庭成员在JavaScript出现以来，箭头（Arrow）就一直是其语法的一部分。一般来说，JavaScript教程的第一篇就会讲如何在HTML中插入箭头括号来作为注释，这会阻止不支持JS的浏览器错误的将你的JS代码作为文字展现出来，比如这个：<scriptlanguage="javascript"><!--document.bgColor="brown";//red//--></script>老旧的浏览器只会看到两个不支持的tag以及一个注释，而现代... 继续阅读 >
2018
04-30

数组的遍历你都会用了，那Promise版本的呢

这里指的遍历方法包括：map、reduce、reduceRight、forEach、filter、some、every。因为最近要进行了一些数据汇总，node版本已经是8.11.1了，所以直接写了个async/await的脚本。但是在对数组进行一些遍历操作时，发现有些遍历方法对Promise的反馈并不是我们想要的结果。当然，有些严格来讲并不能算是遍历，比如说some，every这些的。但确实，这些都会根据我们数组的元素来进行多次的调用传入的回调。这些方法都是... 继续阅读 >
2018
04-30

为什么程序员们愿意在GitHub上开源自己的成果?

从2008年4月10日正式上线到今天，GitHub已经完成了它的第一个十年，正式进入下一个十年。ChrisDiBona（Google的开源代码经理）认为“Git的精髓在于让所有人的贡献无缝合并。而GitHub的天才之处，在于理解了Git的精髓。”来一句我们程序员们接地气的话：分享是一种快乐！抛开“代码闭源是否就能赚很多钱”这个话题先不谈，我们直接总结一下程序员愿意在GitHub公开自己的源代码的几点主要原因：1... 继续阅读 >
2018
04-25

一个HTML元素和五个CSS属性的魔力

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。... 继续阅读 >
2018
04-22

Vue 2.0学习笔记：Vue的render函数

前几天想学学Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，... 继续阅读 >
2018
04-16

移动 Web入门前奏

从最早的IE6时代到现在的HTML5时代，前端的主战场也从PC端转移到了移动端。几年前前端工程师还在为固定布局和流动布局打伤脑筋，而在如今的移动Web上我们可以使用弹性布局轻易实现以前在Pc端的复杂布局，甚至更强大的网格布局也在Css下一版本的规范。移动web在将来的一段时间仍然是前端工程师的主战场，本文将阐述一些移动web入门前需要了解的知识点。像素像素是网页布局的基础，通常我们是这样理解橡树的的：一个... 继续阅读 >
2018
04-11

使用让 JavaScript 安全且并发的 Web Workers

WebWorkers提供了一种在浏览器单线程执行外运行JS代码的方式。单线程处理了包括页面内容展示，通过键盘、鼠标点击和其他装置的用户交互，以及对于AJAX请求响应的一些请求。事件处理和AJAX请求是异步发生的，可以作为一种通用浏览器展示代码路径之外的运行代码的方式，但是它们仍然在这一单线程内运行，并且必须很快完成。否则，浏览器中的交互会失去作用。WebWorkers允许在一个单独的线程运行JS代码，... 继续阅读 >
2018
04-03

送给 ES6 开发者的7个 hack

关注原来的JavaScripthacks，上面有一些新的好东西。2018使用JavaScript写代码真的又变得有意思了！Hack#1—交换变量使用数组结构来交换值leta='world',b='hello'[a,b]=[b,a]console.log(a)//->helloconsole.log(b)//->world//是的，很神奇Hack#2—使用解构的Async/Await再说一遍，数组结构真的很棒。通过和async/await以及promise结合可以让复杂的流程变得简单... 继续阅读 >
2018
04-03

Vue.js最佳实践（五招让你成为Vue.js大师）

对大部分人来说，掌握Vue.js基本的几个API后就已经能够正常地开发前端网站。但如果你想更加高效地使用Vue来开发，成为Vue.js大师，那下面我要传授的这五招你一定得认真学习一下了。第一招：化繁为简的Watchers场景还原：created(){this.fetchPostList()},watch:{searchInputValue(){this.fetchPostList()}}组件创建的时候我们获取一次列表，同时监听input框，每当发生变化的时候重新获取... 继续阅读 >
2018
04-03

前端静态资源缓存最优解以及max-age的陷阱

合理的使用缓存可以极大地提高网站的性能优势，还可以节约带宽从而降低服务器成本。但是很多站点有只弄对了一半或者一半都没有，如果是这样，就完全没有发挥出缓存的优势。很大程度上产生会由于静态资源的竞争关系而导致依赖的静态资源不同步。以下为两个最佳静态资源缓存实践的例子。一、资源内容不变+设置长时间max-age//设置缓存时间为1年Cache-Control:max-age=31536000资源的内容不会更改，所以。。。... 继续阅读 >
2018
03-28

JavaScript：面试频繁出现的几个易错点

1.前言这段时间，金三银四，很多人面试，很多人分享面试题。在前段时间，我也临时担任面试官，为了大概了解面试者的水平，我也写了一份题目，面试了几个前端开发者。在这段时间里面，我在学，在写设计模式的一些知识，想不到的设计模式的这些知识，就是面试题里面，频繁让人掉坑的考点。所以，今天就总结一下，那些让人掉坑的考点。2.面向对象编程关于面向对象和面向过程，个人觉得这两者不是绝对独立的，而是相互... 继续阅读 >
2018
03-26

Nerv - 京东高性能前端框架

Nerv是一款由京东凹凸实验室打造的类React前端框架。目前已广泛运用在京东商城（JD.COM）核心业务及TOPLIFE全站。Nerv基于React标准，使用VirtualDom技术，拥有和React一致的API与生命周期，如果你已经对React使用非常熟悉，那么使用Nerv开发对你来说绝对是零学习成本。与此同时，相比于React以及市面其他同类型框架，Nerv更具体积轻量，性能高效的特点。并且，它符合当下国情，可以完美兼容IE8及... 继续阅读 >
2018
03-23

200行 JS 代码实现区块链

原文Ablockchainin200linesofcode译者：若愚，来自饥人谷,更多好文，关注“饥人谷”公众号区块链的基本概念非常简单：一个分布式数据库维持不断增长的有序记录列表。然而当我们谈论区块链时，我们也会谈论我们用区块链所要解决的问题，这二者通常很容易弄混淆。流行的基于区块链的项目如比特币和以太坊就是这种情况。术语“区块链”通常与交易、智能合约或加密货币等概念紧密相关。这使得理解区块链... 继续阅读 >
2018
03-23

手拉手，用Vue开发动态刷新Echarts组件

需求背景：dashboard作为目前企业中后台产品的“门面”，如何更加实时、高效、炫酷的对统计数据进行展示，是值得前端开发工程师和UI设计师共同思考的一个问题。今天就从0开始，封装一个动态渲染数据的Echarts折线图组件，抛砖引玉，一起来思考更多有意思的组件。准备工作项目结构搭建因为生产需要（其实是懒），所以本教程使用了==vue-cli==进行了项目的基础结构搭建。npminstall-gvue-clivueinitwebpack... 继续阅读 >
2018
03-12

面试分享：2018阿里巴巴前端面试总结(题目+答案)

1、使用css实现一个持续的动画效果animation:mymove5sinfinite;@keyframesmymove{from{top:0px;}to{top:200px;}}主要考：animation用法值描述animation-name规定需要绑定到选择器的keyframe名称。animation-duration规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function规定动画的速度曲线。animation-delay规定在动画开始之前的延迟。animation-iteration-count... 继续阅读 >
2018
03-12

React 是怎样炼成的

本文主要讲述React的诞生过程和优化思路。内容整理自2014年的OSCON-ReactArchitecturebyvjeux，虽然从今天（2018）来看可能会有点历史感，但仍然值得学习了解。以史为鉴，从中也可以管窥Facebook优秀的工程管理文化。字符拼接时代-2004时间回到2004年，MarkZuckerberg当时还在宿舍捣鼓最初版的Facebook。这一年，大家都在用PHP的字符串拼接（StringConcatenation）功能来开发网站。... 继续阅读 >
2018
03-12

面试的信心来源于过硬的基础

在过去的一年很多人不满于公司没有福利、人际关系不好相处、没有发展前途的境遇等等，想着在开年来换一份工作来重新开始自己，那么你准备好了吗？下面是本人整理的一份面试材料，本想自己用的，但是新年第一天公司突然给了我个惊喜，涨工资了！！！1、viewport<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>//width设置view... 继续阅读 >
2018
03-12

JavaScript中this的运行机制及爬坑指南

在JavaScript中，this这个特殊的变量是相对比较复杂的，因为this不仅仅用在面向对象环境中，在其他任何地方也是可用的。本篇博文中会解释this是如何工作的以及使用中可能导致问题的地方，最后奉上最佳实践。为了更好理解this，将this使用的场景分成三类：在函数内部this一个额外的，通常是隐含的参数。在函数外部（顶级作用域中）：这指的是浏览器中的全局对象或者Node.js中一个模块的输... 继续阅读 >
2018
02-27

2018 年 Web 开发者路线图：最全的教程、资源和在线课程

编者按：WEB开发是一个非常热门的职业。该工作的技术性很强,它需要你必须不停地提高、不断地加强,才不会被别人比下去,才能保住饭碗。看了以下文章，希望对你提高技能能有一些帮助。本文编译自BrandonMorelli在Medium上发表的文章The2018WebDeveloperRoadmap。想学习代码？没有比现在更好的时候了。下面是一个关于在2018年如何成为一名网络（Web）开发人员的路线图。不要让这些图片吓倒你。要想成为一位优秀的开发... 继续阅读 >
2018
02-22

来自1000多个项目的10大JavaScript错误浅析

作为对社区开发者的回馈，我们从我们的数据库里选出了10大来自数千个项目的JavaScript错误。我们将会给出产生这些错误的根源，以及如何避免再发生这些错误。如果能够避免这些错误，就可以成为更好的开发者。数据才是王道，我们通过收集和分析大量数据才选出了这10大JavaScript错误。我们收集每一个项目中出现的错误，并统计每一个错误发生的次数。我们根据错误代码的指纹（fingerprint）对它们进行分组，也就是说，如果第二... 继续阅读 >