分类目录归档：WEB开发

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等等模版类的语法标记我们在此就先略去... 继续阅读 >
2016
12-14

十分钟入门 Less

我们都知道写CSS代码是有些枯燥无味的，尤其是面对那些成千上万行CSS代码的项目。你始终在相同的地方使用相同的规则并且在你的编译器中搜索和替换每次颜色的变化。这需要很多的努力和规则来保持你的CSS可维护，但它本不应该这样的。 很幸运，网站开发社区已经解决了这个问题，现在我们拥有诸如Less,Sass和Stylus之类的预处理器，它们给我们提供了许多优于纯CSS的好处。变量-它可以让你更轻松... 继续阅读 >
2016
12-14

HTML5 语义化 - main

早在2013年，<main>元素就被正式添加到W3CHTML规范中，到目前位置，关于该元素的定义已经很完善了，所以现在是时候深入了解什么时候适合使用<main>元素了。那么，下面就开始吧。W3C规范<main>的主要目的是将ARIA的地标性作用main映射到HTML中的元素。这可以帮助那些屏幕阅读设备和辅助设备知道页面的主要内容是从哪里开始的。W3C规范将<main>描述为：文档或应用程序的主要内容。主内容区域... 继续阅读 >
2016
12-14

CSS 高级布局技巧

随着IE8逐渐退出舞台，很多高级的CSS特性都已被浏览器原生支持，再不学下就要过时了。用:empty区分空元素兼容性：不支持IE8假如我们有以上列表：<divclass="item">a</div><divclass="item">b</div><divclass="item"></div>我们希望可以对空元素和非空元素区别处理，那么有两种方案。用:empty选择空元素：.item:empty{display:none;}或者用:not(:empty)选择非空元素：.it... 继续阅读 >
2016
12-12

HTML5.1 里的新东西

HTML5.1概览两年前HTML5标准的发布对于web开发社区来说是一件大事。不仅是因为它包含了一系列让人印象深刻的新特性,还因为它是1999年发布的HTML4.01标准以后，对HTML的第一个大版本更新。你现在依然可以看到一些网站夸耀他们在使用“现代”的HTML5标准。幸运的是我们不需为下一次HTML标准的更新等待那么长时间。2015年10月，W3C开始着手HTML5.1草案，其目标是修复一些HTML5遗留的问题。多次迭代后,草案... 继续阅读 >
2016
12-12

原生 CSS 网格布局学习笔记

译者注：此文适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（NativeCSSgrid）截止目前还没有被任何正式版本的浏览器实现。以下是来自OliverWilliams的帖子.Oliver已经学习了相当长时间的原生CSS网格，可以说是在CSS网格方面有一定的发言权。在这篇文章中，他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法，就是学习一门新技术的时候... 继续阅读 >
2016
12-12

五个典型的javascript面试题

在IT界，需要大量的javascript开发者。如果这个角色能够最佳地展现你的能力，那么你有许多机会换家公司，以及提高薪水。但是在你被公司录取之前，你需要展现你的技术，以便通过面试环节。在这篇文章中，我会展示你五个典型的问题。问题1:范围（Scope）思考以下代码：(function(){vara=b=5;})();console.log(b);控制台（console）会打印出什么？答案上述代码会打印出5。这个问题的陷阱... 继续阅读 >
2016
12-06

JavaScript易错知识点整理

前言本文是我学习JavaScript过程中收集与整理的一些易错知识点，将分别从变量作用域，类型比较，this指向，函数参数，闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解，其中也涉及了一些ES6的知识点。JavaScript知识点1.变量作用域vara=1;functiontest(){vara=2;console.log(a);//2}test();上方的函数作用域中声明并赋值了a，且在console之上，所以遵循就近原则输出a等于2。... 继续阅读 >
2016
11-30

javascript之活灵活现的Array

前言就如同标题一样，这篇文章将会灵活的运行Array对象的一些方法来实现看上去较复杂的应用。大家都知道Array实例有这四个方法：push、pop、shift、unshift。大家也都知道push+pop实现栈，shift+push实现队列。在这里不讨论什么先进后出、先进先出。但一面这个题将要用到这几个方法。题目螺旋矩阵这个名词，在后台语言中可能很熟悉，他是个二维数组，他有什么特点呢？请看下图：以上是一个从外到... 继续阅读 >
2016
11-29

Web 前端从入门菜鸟到实践老司机所需要的资料与指南合集

Introduction&Overview:入门与概览欢迎来到，前端世界！2016–对于未来五年内Web发展的7个预测2015–我的前端之路:从命令式到响应式，以及组件化与工程化的变革怎么成为一名优秀的软件工程师GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean:十年前，MartinFowler撰写了GUIArchitectures一文，至今被奉为经典。本文所谈的所谓架构二字，核心即是对于对于富客户端的代码... 继续阅读 >
2016
11-29

CSS 各种定位（position）方式的区别

        static：静态定位是position的默认值，元素框正常生成，也就是没有定位时的正常显示。relative：相对定位用法一：元素相对自身的原位置偏移某个距离，但是原本的空间依旧保留，表现为空白。用法二：把一个元素设置为position:relative;可以使该元素的子元素相对该元素绝对定位。absolute：绝对定位元素从文档流删除，并相对于包含块定位。元素... 继续阅读 >
2016
11-29

20个CSS 代码建议

在这篇文章中，我想跟你分享20条由CSS社区推荐的约定和最佳实践。有些建议可能比较适合新手，而有些则更高级一些，但我希望每个人都可以在本篇文章中收获自己不知道的知识。1.谨慎使用外边距属性与其它的属性不同，垂直方向上的外边距相遇时将会发生折叠。这意味着如果一个元素的下边距遇到了另一个元素的上边距，那么二者中较大的一个将被留下。下面是一个简单的例子。<divclass="squarered"></div><divclass="squa... 继续阅读 >
2016
11-28

编写高性能的 JavaScript

本文的初衷是想介绍如何利用些简单的代码小技巧就能促进JavaScript编译器的优化进程从而提升代码运行效率。特别是在游戏这种对于垃圾回收速度要求较高，你性能稍微差点用户就能见到白屏的地方。Monomorphism:单态性JavaScript中允许函数调用时候传入动态参数，不过就以简单的2参数函数为例，当你的参数类型、参数数目与返回类型动态调用时才能决定，编译器需要更多的时间来解析。编译器自然地希望能够处理那些单态... 继续阅读 >