小网

重构 – 让你的代码更优美和简洁

BY: 小网 / DATE: 2014-05-05 / POSTED IN: 前端开发 / VIEWS: 252622 / COMMENTS: 1

重构 – 让你的代码更优美和简洁
重构,这个词在前端这块让人想到的更多的是页面制作(HTML/CSS)这块的工作。然后在前端中还有一块更重要的地方 —— 那就是代码的重构;学软件工程的同学应该会比较清楚。

吉姆

“按需加载”的应用

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

按需加载

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

小网

HTML5应用:setCustomValidity(message)接口

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

HTML5应用-message接口

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

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

吉姆

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

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

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

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

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

灰鼠

别让this指针乱了方向

BY: 灰鼠 / DATE: 2012-12-17 / POSTED IN: 前端开发 / VIEWS: 6355 / 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!

小网

HTML5应用:applicationCache接口

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

HTML5应用-applicationcache接口

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

黄短短

JavaScript的闭包到底是什么?

BY: 黄短短 / DATE: 2012-06-18 / POSTED IN: 前端开发 / VIEWS: 13359 / COMMENTS: 2

刚进入JavaScript学习的时候,接触的概念中比较难以理解的就是闭包(closure)。网上和书上笼统的定义——所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

今天结合《JavaScript权威指南》中关于JavaScript变量的作用域的讲解、网上一些博客和资料以及工作中实际运用再来深入理解一下闭包的概念。

瓦力

页面自动跳转的实现方式探讨

BY: 瓦力 / DATE: 2011-11-09 / POSTED IN: 前端开发 / VIEWS: 83488 / COMMENTS: 3

最近新版财付通正式上线了,需要将用户切换到新版来,即需要将旧版的首页实现自动跳转的功能;首先,让我们一起来了解下网页自动跳转的常用实现方式有哪些吧!

方法一:使用meta标签
Meta标签是html不可缺少的标签之一,是用来在HTML文档中模拟HTTP协议的响应头报文;当我们定义属性http-equiv为refresh时,打开此WEB页,浏览器将根据content规定的值在指定时间内跳转到相应页面,content=”秒数;url=网址”就是定义停留多长时间后,跳转到指定的网址;

小网

跨域,不再纠结

BY: 小网 / DATE: 2011-10-31 / POSTED IN: 前端开发 / VIEWS: 59540 / COMMENTS: 3

“跨域了,实现不了。”
“跨协议了,实现不了。”
“两边端口不一致,不能相互访问。”
……

这些字眼您是不是经常发生在你的身上,跨域一直是前端开发人员纠结的事情,好在HTML5提供的postMessage接口给前端人员提供了完美的解决方案。不过可恨的IE还得用猥琐的iframe代理来实现跨域操作。接下来讲解如何实现不同浏览器之前的跨域通信。