前端开发
文章平均质量分 80
清箫
生命的可贵,在于自我实现;生命的欠缺,是努力的空间。
展开
-
前端开发所应该知道的HTTP
HTTP Message一共只有两种HTTPmessages:HTTP-message = Request | Response ; HTTP/1.1 messagesMessage的格式如下:generic-message = start-line *(message-header CRLF) CRLF原创 2012-12-20 18:00:19 · 1733 阅读 · 0 评论 -
JavaScript Date全解
Date构造函数New Date() | Date()没有参数默认就是系统当前时区的时间,结果:Sat Apr11 2015 16:42:09 GMT+0800 (China Standard Time)生成代表当前系统的时间,不用new也可以生成,Date本身就是个方法。New Date(milliseconds)这个毫秒参数是从1970-01-01 00:00:00到现在所经过的时间。New原创 2015-05-07 09:04:46 · 3818 阅读 · 0 评论 -
元素样式控制
样式的优先级样式属性通过四种方式可以被添加,他们的优先级从高到低依次为:1. Inline Styles;2. Style Sheet Rules;3. HTML Attributes(比如fill,height, width等);4. HTML标签默认定义;通用Element.styleElement.style操作的是元素的styleat原创 2015-07-28 16:57:13 · 1821 阅读 · 1 评论 -
HTML焦点与键盘事件
所谓焦点就是用户当前正在操作的对象,可以是某个元素,也可能是某个浏览器中的tab或window。比如用鼠标点击输入框,那么输入框就会成为焦点。使用键盘上的Tab键,又可以把焦点转移到另外一个元素或浏览器的其他区域。通过鼠标和键盘都可以转移焦点,甚至编辑焦点元素。焦点元素同一时间一个document只能有一个元素成为焦点,这个焦点元素可以使用JavaScript访问:document.activeE原创 2015-04-20 16:46:50 · 19774 阅读 · 0 评论 -
JavaScript类继承实现之一
网上各博客论坛出现了很多JavaScript的类继承方法,浏览了一些,不是没注释,就是没有运行效果,于是自己写了个简洁易懂的版本,附带测试代码在最下面。刚不小心删除了该文章,因此重新补上,另外加强了示例。(function() { Function.prototype.extend = function(baseClass) { // this is a原创 2014-11-06 15:43:54 · 2465 阅读 · 1 评论 -
元素绘制顺序
元素绘制顺序,顾名思义,即浏览器创建和布局元素的顺序,包括时间和空间顺序。层叠上下文HTML元素大多是二维的,所谓层叠上下文是指当多个元素在二维空间重叠时,如何在一个三维的空间上确定各元素的位置。形成层叠上下文的元素就会有一个三维坐标,这个第三维的坐标值受z-index的影响,但这个三维坐标的值并不一定等于z-index的值。需要注意,HTML元素大部分是流式布局的(从上到下),元素之间并没有重叠原创 2015-12-18 17:08:27 · 2175 阅读 · 0 评论 -
Requirejs常用配置和应用
requirejs、require方法冲突如果加载了多个requirejs脚本,每个requirejs会判断是否浏览器已经实现了require和define方法。如果浏览器已经自带require和define方法,或者之前已经有一个requirejs脚本执行,那么这个requirejs就会立刻停止执行。所以,即使页面上加载了多次requirejs脚本也不会有什么问题。配置Context我把cont原创 2016-01-08 10:41:34 · 14112 阅读 · 1 评论 -
jQuery Callbacks应用关键点
Callbacks是jQuery 1.7引入的方法,用于管理一系列使用相同参数的回调函数。所有回调函数(以下简称回调)保存在一个数组中,可以重复调用。其本质相当于一个回调函数列(List),因此可以做添加、删除、清空回调函数等操作。生成回调列(Callbacks)var callbacks = $.Callbacks();回调执行顺序回调保存在数组中,然后通过for循环遍历,所以列中的回调按照被添原创 2015-05-28 15:59:23 · 4377 阅读 · 1 评论 -
AngularJS模块详解
在angular中,模块可以是一个对象、一个方法或一个数组(数组的最后一个元素必须是方法)。后面要讲的模块属性和方法,都是针对通过angular.module()方法定义的模块而言的,我称之为angular模块。通过angular.module()方法定义的模块是唯一的,如果重复定义,后面的就会覆盖前面的定义。不是通过angular.module()定义的模块,比如一个方法或一个数组,这些模块也是原创 2016-03-23 13:54:59 · 13041 阅读 · 0 评论 -
Angular Scope解析与应用
Scope层级结构顶层服务对象$rootScope来源于ng模块,由$RootScopeProvider提供。因为ng模块是angular.bootstrap()执行时依赖的模块,所以在整个应用中都可以通过$rootScope引用,而且在这个应用中是唯一的。但唯一性仅限于单个应用内,因为服务都存在注入器中,而每个bootstrap应用有自己的注入器,所以,$rootScope作为一个服务,在不同的原创 2016-04-06 10:50:10 · 4717 阅读 · 0 评论 -
详解window.history
Window.history保存用户在一个会话期间的网站访问记录,用户每次访问一个新的URL即创建一个新的历史记录。history.go()、history.back()、history.forward()history.back()和history.forward()分别表示向后一页和向前一页。history.go(num)表示向前或向后翻多少页,num为正数表示向前翻,为负数则向后翻。Hist原创 2016-04-06 15:32:33 · 24636 阅读 · 1 评论 -
RegExp在IE8等浏览器中的兼容性问题
这里讲的兼容性问题主要指String的API在正则表达式的处理上不同。匹配结果的兼容性第一个问题:在IE",,ab,,".split(","); // output ["","","ab","",""]",,ab,,".split(/,/); // output ["ab"]第二个问题:正则表达式中可能有分组,但是这个分组可能并没有参与(也就是没有匹配到任何子字符串)。关于这个分组的结果:IE"原创 2016-05-12 18:28:12 · 12419 阅读 · 0 评论 -
RequireJS
AMD异步模块定义(AMD)的整体目的是提供模块化的JavaScript解决方案。关键概念模块定义define( module_id /* optional */ , ["foo", "bar"] /* dependencies,optional */, function (foo, bar) {})["foo","bar"]是module依赖的其他模块原创 2014-03-20 14:52:17 · 11607 阅读 · 1 评论 -
前端跨域数据访问
术语同源请求URL拥有相同protocol、host、port。参考Table 1 同源举例。用户认证(User Credential)在CORS中,用户认证指cookies, HTTP基本认证,客户端SSL认证。不指代理端的认证或Origin头。缺乏用户认证是指响应中不包含cookie,而且请求中不包含HTTP认证和SSL证书。简单方法(Simple method)指的是GET, HEAD, P原创 2015-04-26 22:20:42 · 5112 阅读 · 1 评论 -
在HTML5中如何提高网站前端性能
1. 用web storage替换cookiesCookie最大的问题是每次都会跟在请求后面。在HTML5中,用sessionStorage和localStorage把用户数据直接在客户端,这样可以减少HTTP请求的数据量。而且Web storage还提供了API来操作数据,不像cookie,还得自己写。 // if localStorage is present, use th翻译 2013-04-11 15:31:32 · 3211 阅读 · 2 评论 -
三种Web语义化框架的比较
将要描述的三种We语义化技术分别是RDFa、Microformat和Microdata,除了RDFa比较繁锁,而且主要是为XML文档服务,Microformat和Microdata都更适合HTML。Microformat和Microdata各有优缺点。Microformat在于重用现在的属性和元素,而microdata则是通过在元素上添加4个属性来完成了。资源描述框架-in-attribute原创 2013-04-14 17:48:03 · 3822 阅读 · 0 评论 -
深入解析DataTable如何过滤
此DataTable指的是SpryMedia专为HTML Table设计和开发的页面插件,官方站点是:http://legacy.datatables.net/index。关于oSettings.aiDisplayMaster, oSettings.aiDisplay与oSettings.aoData无论是从JSON中获取的行数据,还是从DOM元素中获取的行数据,在表初始化之后,皆存储原创 2014-07-03 15:49:09 · 15399 阅读 · 2 评论 -
package.json字段全解
Name必须字段。小提示:l 不要在name中包含js, node字样;l 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头;l 这个名字可能在require()方法中被调用,所以应该尽可能短;Version必须字段。Description可选字段,必须是字符串。npm search的时候会用到。Keywords可选原创 2014-09-15 16:30:49 · 93893 阅读 · 2 评论 -
HTML图形字符集
使用方法:这些字符属于unicode字符集,所以,你的文档需要声明为UTF-8;下面符号列表的后面有两列编号,它们并不太一样,第一列是用于HTML的,你需要在前面加上&#符号; 例如:⇠第二列可以用于CSS文件中,但是需要用反斜杠\转义; 例如:\8672第二列也可以用于JavaScript,和CSS用法一样,不过要用\u来转义。需要注意的是:有的字符在不同转载 2014-11-05 14:58:33 · 1947 阅读 · 0 评论 -
offsetHeight, clientHeight与scrollHeight的区别
在网上搜了一下,结论非常笼统,讲IE从不讲版本,因此自己做了测试并上传结论。以下结论皆是在标准模式下测试通过的,没有测试quirk模式。clientHeight大部分浏览器对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,即然是指可看到内容的区域,滚动条不算在内。但要注意padding是算在内。其计算方式原创 2013-03-05 16:26:00 · 33317 阅读 · 2 评论 -
HTTP URL最大长度
HTTP RFC2616协议没有规定URL的最大长度,但规定服务器如果不能处理太长的URL,就得返回414状态码(Request-URI Too Long)。HTTP RFC2616协议指出,某些旧的客户端或代理,可能无法处理超过255个字节的URI。既然HTTP协议没有规定URL的最大长度,那么URL的最大长度与用户的浏览器有关,同时和服务器能够处理的最大长度URL有关。站点地图协议(sitem原创 2014-12-11 14:53:13 · 42052 阅读 · 0 评论 -
垂直居中的几种方法比较(纯CSS)
方法一 content .table {display:table;}.table-cell {display:table-cell; vertical-align:middle;}优点:content 可以动态改变高度,如果你不需要支持IE7浏览器,这个应该是首选方案,也是W3C推荐的方案。缺点:IE7和IE8 beta不支持。方法二Content#content { p原创 2015-04-19 22:44:32 · 2495 阅读 · 5 评论 -
为什么jQuery是用toString来判断数据类型,而不是typeof或instanceof
// Numberstypeof37 === 'number';typeof3.14 === 'number';typeofMath.LN2 === 'number';typeofInfinity === 'number';typeofNaN === 'number';// Despite being "Not-A-Number"typeofNumber(1) === 'number'原创 2013-01-10 11:41:46 · 15579 阅读 · 0 评论 -
鼠标事件比较与鼠标位置
Mouseenter和mouseover的区别这两个都是鼠标移入元素内部时触发,它们的区别是mouseenter事件没有冒泡阶段,而mouseover事件则有冒泡阶段,这是第一个区别。第二个区别是触发的几率不一样:鼠标从元素外进入元素内,一定会触发mouseenter,但不一定触发mouseover。因为mouseover只有当元素有空间被鼠标直接接触到才能触发。即使同时触发,它们的先后顺序在不同原创 2015-04-24 09:41:23 · 10985 阅读 · 2 评论 -
HTML锚与链接
A元素锚与链接的区别锚(anchor)和链接(link)都是a元素,唯一不同的是有没有href attribute。在Firefox35,Chrome41中,只要a元素有name这个attribute,不管name有没有值,都是锚。但在IE中,如果name没有值,又没有href,则既不是锚也不是链接。在所有浏览器中,只要a元素有href属性,不管有没有值,都是链接。锚的创建与作用锚的作用是当URL原创 2015-04-17 17:58:28 · 5266 阅读 · 0 评论 -
CSS3 Flex计算逻辑
Flex样式Flex: flex-grow | flex-shrink | flex-basisflex-grow:纯数字,表示增长因子。默认值为0,表示按元素的原大小显示。 flex-shrink:纯数字,表示收缩因子。默认值是1,如果是0则按原始大小显示。当屏幕或容器变小时,不同元素的收缩比例可能与容器变大的逻辑是不一样的,所以会有这个属性。 flex-basis:表示flex-i...原创 2016-06-10 21:08:18 · 4343 阅读 · 2 评论