吉姆

“按需加载”的应用

BY: 吉姆 / DATE: 2013-06-09 / POSTED IN: 前端开发 / VIEWS: 18800 / COMMENTS: 4

按需加载

按需加载是前端性能优化中的一项重要措施,按需加载是如何定义的呢?顾名思义,指的是当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更改等。加载的文件,可以是JS、图片、CSSHTML等。后面将会详细介绍“按需”的理解。

小网

HTML5应用:setCustomValidity(message)接口

BY: 小网 / DATE: 2013-01-06 / POSTED IN: 前端开发 / VIEWS: 22968 / COMMENTS: 5

HTML5应用-message接口

HTML5表单验证给前端人员带来了便利,但是在用户体验上存在一些缺陷,默认的提示对用户很不友好,无法准确的获取想要的信息。好在大牛们在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息,但也存在一些弊端,需要让开人员做额外的一些处理才达到真正想要的目的。

接下来通过以下示例来阐述方法的应用。

吉姆

浅谈模板在JS组件中的应用

BY: 吉姆 / DATE: 2012-12-24 / POSTED IN: 前端开发 / VIEWS: 6038 / COMMENTS: 2

在进行组件开发时,经常要根据需求分析出来一些相同点和异同点,然后把相同点进行封装,把异同点对外开放,也就是“求同存异”。那么如何对相同点进行封装呢?这里介绍一种常用的理念:模版在JS组件中的应用。

这里首先了解下模版的工作原理,可以简单地分成两个步骤:模板解析和数据渲染。根据对应的语法解析出对应的占位符,然后把占位符替换成对应的的数据。 如我们在JSP中写<a><%= name %></a>的时候,其实就是在应用模板,在后台这句话会被转换成out.print(“<a>”+name+”</a>”)。模板的数据渲染就是把模板中的占位符(这里是name,替换成传入的值(:lily)。在前端开发中,这种思路对于组件的封装以及开发,有重要的意义。

下面来通过一个简单的例子来理解如何利用模版在组件中的应用。需求是在一个列表中,有一列要求按照年月日的格式显示,如:2012-6-21。 一看这个需求,估计很多人觉得非常简单,几行代码就可以实现:

lyndon

Sizzle的“编译原理”

BY: lyndon / DATE: 2012-12-18 / POSTED IN: 前端开发 / VIEWS: 9354 / COMMENTS: 1

Sizzle,是jQuery作者John Resig写的DOM选择器引擎,速度号称业界第一。作为一个独立全新的选择器引擎,出现在jQuery 1.3版本之后,并被John Resig作为一个开源的项目。Sizzle是独立的一部分,不依赖任何库,如果你不想用jQuery,可以只用Sizzle,也可以用于其他框架如:Mool, Dojo,YUI等。

前几天在准备一个关于jQuery的分享PPT,问同事关于jQuery除了使用方法之外还有没有其他特别想了解一下的,有人提到了想了解下它的选择器是怎么实现的,也有人提到jQuery的查询速度跟其他框架比怎么样。关于速度,sizzle的官方网站上可以下载测试的例子,速度确实很有优势。但是它为什么会有这样高效的运行速度,就跟这里想探讨的实现原理有关系了。

在了解Sizzle之前必须要先了解它的选择器是怎么回事,这里有一个简单的例子,熟悉jQuery的同学也一定很熟悉这样的选择器格式:

tag #id .class , a:first

灰鼠

别让this指针乱了方向

BY: 灰鼠 / DATE: 2012-12-17 / POSTED IN: 前端开发 / VIEWS: 6310 / COMMENTS: 抢沙发

this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象。但是在javascript中,由于 javascript的动态性(解释执行,当然也有简单的预编译过程),this的指向在运行时才确定。这个特性让我们有时会给乱了方向,如果掌握了它的工作原理,那么它给我们带来了编程上的 自由和灵活,结合apply(call)方法,可以使JS变得异常强大。

默认的this
Javascript 下,所有的属性都默认为window对象所有,所以说this也不例外,看下面的例子,先来个热身:

var txt = “Hello,tid!”;
function demo(){
var txt = “Hi,tid!”;
alert(this.txt);//与window.txt相同
}
demo();//output  Hello,tid!

小网

XMLHttpRequest跨域体验

BY: 小网 / DATE: 2012-09-21 / POSTED IN: 前端开发 / VIEWS: 137148 / COMMENTS: 1

xmlhttprequest跨域体验

环境:
Chrome, Safari, Android 2.3, iOS4

兼容性问题
IE:XDomainRequest
Other:XMLHttpRequest

实现方式
通过新增响应头Access-Control-Allow-Origin
格式:
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://domain.com
Access-Control-Allow-Origin: http://a.domain.com

小网

HTML5应用:applicationCache接口

BY: 小网 / DATE: 2012-08-23 / POSTED IN: 前端开发 / VIEWS: 12242 / COMMENTS: 5

HTML5应用-applicationcache接口

Web资源本地化,提高访问性能,对于WebApp来说是一直以来追求的目录,好在HTML5提供了Application Cache特性。用来提供离线浏览和本地化资源文件。对于WebApp来说无疑是一个好消息,但是对于WebSite来说,这中间有利有弊,需要开发人员自己去评估自己的业务是否合适了,下面抛砖来阐述一下applicationCache的一些优势和需要注意的问题以及相关的接口说明。

吉姆

如何利用SVN合并代码

BY: 吉姆 / DATE: 2012-08-13 / POSTED IN: 前端开发 / VIEWS: 34788 / COMMENTS: 1

合并SVN

一、  背景    

平时在进行开发时,一般都会有多版本同时进行,包括项目版本、周版本、紧急版本等,当某一个版本具备上线条件后,需要在上一个已发布的版本基础上进行发布,才能够避免出现版本相互覆盖,因此往往需要对版本之间代码进行合并,这里就和大家探讨下如何合并代码,让合并代码质量高以及高效。