分类目录归档：WEB开发

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架构是第一种比较早的软件架构，主要用于局域网内。也叫 客户机/服务器模式。它可以分为客户机和服务器两层：第一层是在客户机系统上结合了界面显示与业务逻辑，第二层是通过网络结合了数据库服务器。简单的说就是第一层是用户表示层，第二层是数据库层。这里需要补充的是，客户端不仅仅是一些简单的操作，它也是... 继续阅读 >
2016
10-25

JavaScript正则表达式这几个细节你真的知道？

前言粗浅的编写正则表达式，是造成性能瓶颈的主要原因。如下：varreg1=/(A+A+)+B/;varreg2=/AA+B/;上述两个正则表达式，匹配效果是一样的，但是，效率就相差太远了，甚至在与少量字符串匹配时，reg1就会造成你浏览器卡死。不信？我们可以测试下。首先，我们声明一个字符串变量str，同时赋予一个包含20个A的字符串给str，采用match方法与上述reg1、reg2进行匹配测试，如下：varstr='AAAAAAAAAAAAAAAAAAAA';str.match... 继续阅读 >
2016
10-22

MVC 在前端已死？

随着越来越多的前端开发开勇单项数据流架构，有些人就开始考虑传统的MVC是否还有未来？为了便于理解，我们首先分析一下前端架构的发展史。在过去的4年里，我看过许多web项目并花了大量的时间在前端架构或是为它整合一些框架。在2010年前，JavaScript（实现jQuery的语言）在传统web应用中被广泛用于DOM操作以及添加一些简单的东西。人们并不关心架构方面的东西，一些 简单的模块化方式 似乎已经... 继续阅读 >
2016
10-22

css 实现竖直居中的 N 种场景及 N 种方法

刚开始工作的时候，css里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？（原来并不是我智商的问题）好了废话不多说，记录下遇到的不同场景及解决方法，希望能对自己或者别人有所帮助。inline或... 继续阅读 >
2016
10-22

理解并运用 CSS 的负 margin 值

本文样式代码采用SCSS。浏览器兼容性为IE6+。你的网页中，不可能没有使用过margin。大多数情况下，我们采用的都是正数的margin值，可能有时候会用到负的margin值。在我们的印象中，负的margin值就类似于浏览器的hack一样，不被人接受。但是，本文要说明的就是，负的margin值并不是hack，这是正常范围内的写法。Negativevaluesformarginpropertiesareallowed,buttheremaybeimplementation-specif... 继续阅读 >
2016
10-22

CSS中强大的EM

这篇教程将引导大家如何使用“em”来创建一个基本的弹性布局，从而学习其如何计算？又是如何使用“em”对层进行弹性扩展？又是如何扩展文本和图像等内容？下在我们就一起带着这些问题开始今天的“em”之行。什么是弹性布局？用户的文字大小与弹性布局用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px... 继续阅读 >
2016
10-22

一次完整的HTTP请求过程

一次完整的HTTP请求过程从TCP三次握手建立连接成功后开始，客户端按照指定的格式开始向服务端发送HTTP请求，服务端接收请求后，解析HTTP请求，处理完业务逻辑，最后返回一个HTTP的响应给客户端，HTTP的响应内容同样有标准的格式。无论是什么客户端或者是什么服务端，大家只要按照HTTP的协议标准来实现的话，那么它一定是通用的。HTTP请求格式HTTP请求格式主要有四部分组成，分别是：请求行、请求头、空行、消息体，每部分内容占... 继续阅读 >
2016
10-22

九种浏览器端缓存方法知多少

  浏览器缓存（BrowserCaching）是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据，整体上加速网页展示给用户。浏览器端缓存的机制种类较多，总体归纳为九种，这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。  一、http缓存  http缓存是基于HTTP... 继续阅读 >
2016
10-20

前端实现文件的断点续传 HOT

早就听说过断点续传这种东西，前端也可以实现一下断点续传在前端的实现主要依赖着HTML5的新特性，所以一般来说在老旧浏览器上支持度是不高的本文通过断点续传的简单例子（前端文件提交+后端PHP文件接收），理解其大致的实现过程还是先以图片为例，看看最后的样子一、一些知识准备断点续传，既然有断，那就应该有文件分割的过程，一段一段的传。以前文件无法分割，但随着HTML5新特性的引入，类似普通字符串、数组的分割，... 继续阅读 >
2016
10-19

如何写出小而清晰的函数

本文以JavaScript为例，介绍了该如何优化函数，使函数清晰易读，且更加高效稳定。软件的复杂度一直在持续增长。代码质量对于保证应用的可靠性、易扩展性非常重要。然而，几乎每一个开发者，包括我自己，在职业生涯中都见过低质量的代码。这东西就是个坑。低质量代码具备以下极具杀伤力的特点：函数超级长，而且塞满了各种乱七八糟的功能。函数通常有一些副作用，不仅难以理解，甚至根本没法调试。含... 继续阅读 >
2016
10-18

深入理解Javascript--作用域和赋值操作 HOT

作用域作为一个最基础的功能存在于各种编程语言中，它使得我们的编程更加灵活有趣。其基础功能就是存储变量中的值，然后可以对值进行访问和修改。可能我们都知道作用域的一些概念，以及其一些扩展的一些内容闭包等，但是相对于这些可能我们去了解这些变量到底是存到了哪里，而我们的程序是如何访问到他们的会更加有趣。vara=1;首先我们要了解到在我们进行声明变量并进行赋值的时候到底谁参与了我们的整个流程。1，引擎：它... 继续阅读 >
2016
10-17

守护 Javascript 中的函数参数

作为开发者，我们花费许多时间来调试，尤其是在发现问题来源方面。开发工具指导我们追踪调用栈，但是追踪过程仍然相当耗时，尤其在遇到级联异步调用的时候。这一问题在很早以前就被发现了。假设我们有一个从不同文档结构中搜索包含指定字符串的元素的函数。我们使用以下看起来合法的调用：grep("substring",tree);但是我们并没有得到期望的结果。按照以往的经验，我们会花费一些时间来检查给定的树形文档结构，时间有可能会... 继续阅读 >
2016
10-17

CSS3 巧妙实现聊天气泡

前一阵子敢玩的Mobile页改版完成了，就之前的页面风格更加扁平化，从暗色系为主背景转到亮色背景，去掉更多的阴影，给用户简约的体验风格，哈哈我不是设计师不过多评价啦。悄悄告诉大家所有的style都是我自己写的。全站哦！！！下面说正题，说好的聊天气泡呢？传统的聊天气泡什么又是传统的聊天气泡,直接上图代码如下<divclass="comment"></div><styletype="text/css">.comment{width:150px;height:35px;posit... 继续阅读 >