分类：WEB开发

2017
02-23

2017前端开发者必学清单

前端生态系统高速发展，我们把时间花费在尝试新技术并在网上讨论它们。我并非指不该如此，但也许我们可以放缓脚步，去多关注下那些变化不大的东西。这些东西能很大程度改善工作质量，提升工作价值，帮我们去理解新的工具。这篇文章里有我自己过往的经验也有新年的计划，同时也希望能收到你们的反馈。学习如何编写可读的代码我们大多数的工作不是写新代码，而是维护既有的代码。这也就意味着你读代码的时间要远多于... 继续阅读 >

2017
02-23

面试中要注意的 3 个 JavaScript 问题

JavaScript是所有现代浏览器的官方语言。因此，各种语言的开发者面试中都会遇到JavaScript问题。本文不讲最新的JavaScript库，通用开发实践，或任何新的ES6函数。而是讲讲面试中经常出现的3个JavaScript问题。我问过这些问题，我的朋友说他们也问。当然不是说你在准备JavaScript面试时只要学习这3个问题——你还有很多途径去更好的准备即将到来的面试——但面试官很有可能通过下面3个... 继续阅读 >

2017
02-22

关于ES6中的Maps你需要知道的那些事

JavaScriptES6引入了一个新的数据结构，叫做maps。Maps是设计用来代替使用ObjectLiteral进行键值对存储的数据结构，它需要键值唯一，并且为循环提供了很多可用的方法。 使用Objectliterals作为“Maps”Objectliterals是JavaScript中最基础的功能了，没有之一。创建一个Map只需要以下这样简单的代码：varmap={"key1":"value1","key2":"value2"}map.key1;//=="value1"很多情... 继续阅读 >

2017
02-17

CSS通用数据类型

CSS中属性的值有着许多种格式。为了让用户代理（即浏览器）能够识别一个值是否有效，则需要确认该值是否符合该类值支持的格式的其中一种。这些属性值所支持的格式叫做数据类型，在规范中用<this>的形式标识。CSS中存在两种数据类型——特定数据类型和通用数据类型。特定数据类型只与一个单独的属性或某一类属性有关联。例如，<transform-function>这一数据类型仅仅只能用作transform属性的值。相反的，通用数据类... 继续阅读 >

2017
02-14

2017年值得学习的3个CSS特性

随着新的一年到来，我们有一整套新的东西要开始学习。虽然今年的新特性有很多，但有3个新的特性是最令我激动不已的。1.FeatureQueries前段时间，我写过关于FeatureQueries的一篇文章，叫“我最想要的CSS特性之一”。好了，现在它已经出现在这里了。它支持除了IE浏览器之外的所有主流浏览器（包括OperaMini）。FeatureQueries，使用这个@supports规则，允许我们包含CSS在一个条件块，但只有当前用户客户端支... 继续阅读 >

2017
02-11

在过去的一年里谁JavaScript 之最？

JavaScript社区正在不断地发展创新，趋势在不断地变化着。本文将通过比较过去1年里在Github上的star 数，告诉你2016年的主要趋势。在2015年，React成为最大赢家，Redux在与Flux的大战中赢得胜利。那么谁是2016年的JavaScript新星？1、通过一年中最热门的10个项目，您可以很好地了解2016年的Web开发环境：2016年最热门的项目是Vue.JS项目，在去年的Github上获得了超过25,000star，超过了包括React和Angular... 继续阅读 >

2017
02-11

JavaScript This 的六道坎

鉴于this风骚的运作方式，对this的理解是永不过时的话题，本文试图通过将其大卸六块来钉住这个磨人的妖精。首先this isallaboutcontext.this说白了就是找大佬，找拥有当前上下文（context）的对象（contextobject）。大佬可以分为六层，层数越高权力越大，this只会认最大的。第一层：世界尽头权力最小的大佬是作为备胎的存在，在普通情况下就是全局，浏览器里就是window；在uses... 继续阅读 >

2017
02-11

深入理解 javaScript 原型继承

继承的本质：重用在探讨javaScript的原型继承之前，先不妨想想为什么要继承？考虑一个场景，如果我们有两个对象，它们一部分属性相同，另一部属性不同。通常一个好的设计方案是将相同逻辑抽出来，实现重用。以xiaoMingliLei两位同学举例。这两位同学有自己的名字，并且会介绍自己。抽象为程序对象，可以做如下表示。varxiaoMing={name:"xiaoMing",hello:function(){console.log('Hello,m... 继续阅读 >

2017
02-09

2017年前端领域可能迎来的6个发展趋势

2016是前端技术，特别是HTML5技术突飞猛进的一年，加上各类AR、VR技术的出现，一下让前端市场变得火热。这可不是偶然现象，是消费升级后，人们追求更高品质前端展现效果、企业追求更轻量和高效开发效率的必然结果。那么，2017年前端技术将会在哪些领域得到深入应用？带来怎么样的想象？不过可以肯定的是，浏览器作为前端程序的运转平台，必然会随着前端技术的成熟涌现更多想象。下面跟随这位来自腾讯的工程师Ouven来提前感... 继续阅读 >

2017
02-07

前端优化：九个技巧，提高Web性能

当今数字世界，存在着无数的网站，每天都需要处理各种不同的原因的访问。然而，这些网站中有很大一部分显得笨重，使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰，包括加载时间、不支持移动设备、浏览器兼容性问题，等等。这篇文章讲述可以帮助改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升... 继续阅读 >

2017
02-04

加快JavaScript加载和执行效率

JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂，也就是说当浏览器在执行JavaScript代码时，不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码，从而提高其在浏览器中的性能。概览无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久，浏览... 继续阅读 >

2017
02-04

JavaScript 很少为人所知的玩法

StackOverFlow的联合创始人杰夫·阿特伍德（JeffAtwood）曾提出著名的“Atwood定律”，即：AnyapplicationthatcanbewritteninJavaScript,willeventuallybewritteninJavaScript.任何能够用JavaScript实现的应用，最终都必将用JavaScript实现。毫无疑问，JavaScript已然成为当下最流行的编程语言之一，这点已经不需要争论了，不服的话前后端乃至全栈工程师肯定跟你急。最近，hackereart就发表... 继续阅读 >

2017
01-17

JavaScript数组方法总结

说起来很搞笑，我在用sublime3写排序算法的时候，准备用nodejs来运行，就用sublime3提供的编译功能。但问题来了，我比较挫，写了个死循环，然后sublime3也不给输出提示，我很疑惑的连续跑了3遍，过了一会电脑发热，风扇开始叫了，我察觉到，一看进程，3个node进程在狂吃内存和cpu，我在想，这个bug该反馈给sublime3还是node呢？JavaScript中的数组本身就很特别，不像C或Java，搞了数组、li... 继续阅读 >

2017
01-17

2017 前端性能优化清单

2017前端性能优化清单你开始使用渐进启动了么？是不是已经使用过React和Angular中tree-shaking和code-splitting两个工具？有没有用过Brotli、Zofli和HPACK这几种压缩技术，或者OCSP协议（在线证书状态协议）？知不知道资源提醒，客户端提醒和CSScontainment一类的技术？了解IPv6，HTTP/2和ServiceWorker这些协议吗？回想那些年，大家往往在完成了产品之后才会去考虑性能。常常把与性能相关的事情拖到项目的最后... 继续阅读 >

2017
01-17

原来CSS这样写是会让app崩溃的

先废话一下之前在自己的个人公众号中提到了一篇利用CSS的方式进行XSS攻击，当时有朋友跟我说，让我去获取那个网站的cookie，再然后进入那个网站的后台去玩。然而，技术能力实在有限，搞不了这些东西，只是觉得那个网站没有适当过滤HTML标签是一件很危险的事情。不过今天要说的CSS代码真的是让app崩溃了，至于信不信，看图就知道咯。故事背景昨晚在被窝中的我突然收到一封邮件，大概内容是说因为... 继续阅读 >

2017
01-16

听说 2017 你想写前端？

不好意思，没有像其他公众号一样赶着发文章，每年到这个时候总有一大波什么今年前端预测，技术框架预测什么的。我这次写这篇文针对的对象，是想在今年踏入前端这行的人们，不管你现在是徘徊在门口，还是已经半只脚踏入这片未知领域，都可以参考一下先行者的经验。先来个大概预览：项目工程化发展方向职业环境总结要掌握的框架／技能小结放在前：2017的前端与其说更... 继续阅读 >

2017
01-13

JavaScript 代码整洁之道

目录概述变量函数对象和数据结构类测试并发错误处理格式注释概述RobertC.Martin在《代码整洁之道》中提到的软件工程原则，同样适用于JavaScript。这不是一个风格参考。它指导如何用JavaScript编写可读、可复用、可重构的软件。并不是每一个原则都必须严格遵循，甚至很少得到大家的认同。它们仅用于参考，不过要知道这些原则都是《代码整洁之... 继续阅读 >

2017
01-07

前端工程化开发方案app-proto

什么是前端工程化？根据具体的业务特点，将前端的开发流程、技术、工具、经验等规范化、标准化就是前端工程化。它的目的是让前端开发能够“自成体系”，最大程度地提高前端工程师的开发效率，降低技术选型、前后端联调等带来的协调沟通成本。美团点评厦门智能住宿前端研发团队通过多个前端项目开发的探索和实践，基于“约定优于配置”（ConventionOverConfiguration）的原则制定了一套前端工程化开发方案app-proto。本... 继续阅读 >

2016
12-21

23条前端性能优化，看懂就够了！

 前端性能优化是个巨大的课题，如果要面面俱到的说的话，估计三天三夜说不完。所以我们就从实际的工程应用角度出发，聊我们最常遇见的前端优化问题。Yslow是雅虎开发的基于网页性能分析浏览器插件，可以检测出网页的具体性能值，并且有著名的Yslow23条优化规则，这23条，就够我们玩的了。1.减少HTTP请求次数尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求... 继续阅读 >

2016
12-21

前端程序员需要知道的7种新型的CSS长度单位

众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。今儿，... 继续阅读 >

2016
12-16

前端优化：9 个技巧，提高 Web 性能

当今数字世界，存在着无数的网站，每天都需要处理各种不同的原因的访问。然而，这些网站中有很大一部分显得笨重，使用起来也很麻烦。没怎么优化的网站会被各种各样的问题困扰，包括加载时间、不支持移动设备、浏览器兼容性问题，等等。这篇文章讲述可以帮助改善优化前端的技术，非常有用。主要内容有清理代码、压缩图片、压缩外部资源、使用CDN，以及一些其它方法。这些方法会为你的网站带显著的速度提升和整体性能提升... 继续阅读 >

2016
12-14

跟着 Github 学习 Restful HTTP API 设计

近几年提供HTTPAPI服务的公司越来越多，许多公司都把API作为产品重要的一部分，作为服务提供出去。而微服务的兴起，也让企业内部开始重视和频繁使用HTTPAPI。好的HTTPAPI设计容易理解、符合RFC标准、提供使用者便利的功能，其中经常被拿来作为教科书典范的当属GithubAPI。这篇文章就通过GithubAPI总结了一些非常好的设计原则，可以作为以后要编写HTTPAPI的参考。注意：这篇文章只讨论设计原则，不... 继续阅读 >

2016
12-14

css预处理语言的模块化实践

编写css是前端工作中，一项普通而又频繁的劳动，由于css并不是一门语言，所以在程序设计上显得有些简陋。对于小型项目来说，css的量还不至于庞大，问题没有凸显，而如果要开发和持续维护一个较为大型的项目，那就需要对css进行管理和规范了，否则会发生不可挽回的后果（吓唬谁呢？？）。背景上一节【从css谈模块化】我们通过规范的约束，将css的编写方式进行了优化和改进，形成一种可持续发展的路线。但还是遗留了一些问题：冗... 继续阅读 >

2016
12-14

从css谈模块化

模块化是现今我们随处都可以听到的一个名词，什么是模块化？为什么我们需要模块化？这是本系列文章我们要弄明白的一个问题。我们也借这部分内容，顺带回顾一下前端的发展历程。 说实话，模块化这个主题有点大，我一时也不知道从哪里讲起比较合适，通常来说，前端的工作内容主要涉及三个方面：html、css、js（javascript），其他的像as（actionscript，flash的脚本语言）、jsp、smarty等等模版类的语法标记我们在此就先略去... 继续阅读 >