分类：WEB开发

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参数函数为例，当你的参数类型、参数数目与返回类型动态调用时才能决定，编译器需要更多的时间来解析。编译器自然地希望能够处理那些单态... 继续阅读 >
2016
11-23

JavaScript常见原生DOM操作API总结

最近面试的时候被这个问题给卡了，所以抽时间好好复习一下。几种对象NodeNode是一个接口，中文叫节点，很多类型的DOM元素都是继承于它，都共享着相同的基本属性和方法。常见的Node有element，text，attribute，comment，document等（所以要注意节点和元素的区别，元素属于节点的一种）。Node有一个属性nodeType表示Node的类型，它是一个整数，其数值分别表示相应的Node类型，具体如下：{ELEMEN... 继续阅读 >
2016
11-23

最全的资源教程：前端涉及的所有知识体系

综合类前端知识体系前端知识结构Web前端开发大系概览Web前端开发大系概览-中文版WebFront-endStackv2.2免费的编程中文书籍索引前端书籍前端免费书籍大全前端知识体系免费的编程中文书籍索引智能社-精通JavaScript开发重新介绍JavaScript（JS教程）麻省理工学院公开课：计算机科学及编程导论JavaScript... 继续阅读 >
2016
11-21

JavaScript 依赖注入实现

随着AngularJS的流行，依赖注入开始在JavaScript领域获得不少的关注。DI最突出的好处在于开发可复用可测试的代码单元。本文以简易的代码解释DI的实现机制，更多对DI优缺点的讨论可参考： 什么时候应该使用依赖注入 一文。一个基本的DI用例每个模块声明自己的依赖，并提供自己的服务。例如：di.service('foo',['bar'],functionfoo(bar){functionFoo(){this.bar=bar;}this.prototype.greeting=functio... 继续阅读 >
2016
11-07

CSS vs JS动画：谁更快？

这篇文章翻译自JulianShapiro的CSSvs.JSAnimation:WhichisFaster?。JulianShapiro也是Velocity.js的创造者。这是一个非常高效、简单易用的JS动画库。他在Web动画方面有很高的造诣。Javascript动画怎么可能总是和CSStransition一样快，甚至更快呢？到底是什么秘密呢？Adobe和Google是怎么做到让他们的富媒体移动网站的速度和nativeapp媲美的？这篇文章会一步步告诉你为什么基于Javascript... 继续阅读 >
2016
11-03

Web优化训练营, 网页提速50倍

前言我们将通过一个完整的实例,一步步的优化加载,渲染等各方面的体验.开始首先我们先看一下项目的文件构成这之中包含了一个基本网页的元素,js(ReactApp),css,还有图片.我们先来看一下来serve整个网页的部分.server.js'usestrict';constfs=require('fs');constpath=require('path');constkoa=require('koa');constapp=koa();app.use(function*(next){constfile=this.path.slice(1)||'index.... 继续阅读 >
2016
11-03

详解JavaScript模块化开发

什么是模块化开发？前端开发中，起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来了，jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端开发得到重视，也使得前端项目越来越复杂，然而，JavaScript却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，那么什么是模块呢？一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使... 继续阅读 >
2016
11-01

JavaScript 知识点整理

JavaScript是按照ECMAScript标准设计和实现的，后文说的JavaScript语法其实是ES5的标准的实现。先说说有哪些基础语法？最基础语法有哪些？基础语法几乎所有的语言差异不大，无非数据类型、操作符、控制语句、函数等，简单列举下。5种基本数据类型&1种复杂的数据类型JavaScript包含5种基本数据类型，分别是Undefined/Null/Boolean/Number/String，基本数据类型就这五种，没有其他的！JavaScript包含1种复杂的数... 继续阅读 >
2016
10-31

JavaScript 中对象的深拷贝

在JavaScript中，对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝，即复制的是一份引用，而不是它所引用的对象。而更多的时候，我们希望对对象进行深拷贝，避免原始对象被无意修改。对象的深拷贝与浅拷贝的区别如下：浅拷贝：仅仅复制对象的引用，而不是对象本身；深拷贝：把复制的对象所引用的全部对象都复制一遍。一.浅拷贝的实现浅拷贝的实现方法比较简单，只要使用是简单的复制语句即可。... 继续阅读 >
2016
10-31

前端面试中的常见的算法问题

虽说我们很多时候前端很少有机会接触到算法。大多都交互性的操作，然而从各大公司面试来看，算法依旧是考察的一方面。实际上学习数据结构与算法对于工程师去理解和分析问题都是有帮助的。如果将来当我们面对较为复杂的问题，这些基础知识的积累可以帮助我们更好的优化解决思路。下面罗列在前端面试中经常撞见的几个问题吧。Q1判断一个单词是否是回文？回文是指把相同的词汇或句子，在下文中调换位置或颠倒过来，产生首尾回环... 继续阅读 >
2016
10-31

闭包会造成内存泄漏吗？

前言在谈内存泄漏这个问题之前先看看JavaScript的垃圾收集机制，JavaScript具有自动垃圾收集机制，就是找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔（或代码执行中预定的收集时间）。常用的的方法有两种，即标记清楚和引用计数。标记清除JavaScript中最常用的垃圾收集方式是标记清除（mark-and-sweep）。垃圾收集器在运行的时候会给存储在内存中的所有变量都加... 继续阅读 >
2016
10-27

Ajax语法浅析

Ajax是目前很普遍的一门技术，也是很值得探讨和研究的一门技术。本文将针对Ajax的发展过程并结合其在不同库框架中的使用方式来和大家分享下Ajax的那些新老语法。 Ajax简介Ajax全称为“AsynchronousJavascriptAndXML”，即“异步JavaScript和XML”的意思。通过Ajax我们可以向服务器发送请求，在不阻塞页面的情况下进行数据交互，也可以理解为异步数据传输。在Ajax的帮助下我们的网页只... 继续阅读 >
2016
10-27

作为前端需要了解的B/S架构

C/S架构简要介绍在了解什么是B/S架构之前，我们有必要了解一下什么是C/S架构：C/S架构是第一种比较早的软件架构，主要用于局域网内。也叫 客户机/服务器模式。它可以分为客户机和服务器两层：第一层是在客户机系统上结合了界面显示与业务逻辑，第二层是通过网络结合了数据库服务器。简单的说就是第一层是用户表示层，第二层是数据库层。这里需要补充的是，客户端不仅仅是一些简单的操作，它也是... 继续阅读 >