FrontEnd

构建大型jQuery应用

原文:http://addyosmani.com/blog/large-scale-jquery/

1.依赖管理

目前常用的script loader主要有两个,RequireJS (by James Burke) 与LabJS (by Kyle Simpson)。有些人会认为这其中一个会比另一个要好,但事实上他们各自有各自的特点。以我的经验来讲,RequireJS的特性之一是提供结构化模块的支持,而LabJS更适合不需要额外特性或者需要轻量级库的时候。

如果你想知道更多关于如何选择 RequireJS、LabJS,请看这里:http://msdn.microsoft.com/en-us/scriptjunkie/ff943568。如果这两个还不能满足你的需求,你还可以看看下面的内容。

解决方案:

RequireJS – 如果你期望你的代码更加模块化,我强烈推荐它。它会试图限制模块对全局命名空间的影响,并使得依赖更加明确。同时它还提供一个优化工具,帮助你合并压缩脚本 - http://requirejs.org/docs/jquery.html

LabJS – 如果你需要按照一定的顺序高效的加载脚本,或者你正在寻找比RequireJS更轻量级的框架,或者你对模块化依赖管理根本不感兴趣,那么你不妨试试LabJS。 – http://www.labjs.com (Alex Sexton 还在LabJS的基础上开发了条件化的loader,YepNope JS - http://www.yepnopejs.com)

StealJS – 又一个非常棒的依赖管理工具。Steal是 JavaScriptMVC框架的一部分,不过你可以单独使用它。它也提供了合并、压缩、清理等功能。 – http://jupiterjs.com/news/stealjs-script-manager

JSL Script Loader – 提供了加载、防重复加载、缓存等功能。但是它的用户也许没有LabJS、RequireJS那么多 – http://www.andresvidal.com/jsl

Bootstrap – 它的功能很少,但足以完成任务。如在你在寻找一个最小的没有任何多余功能的解决方案,那么也许它是最合适的。 – https://bitbucket.org/scott_koon/bootstrap

2.MVC&管理大型jQuery应用

软件工程中的设计模式、架构模式可以让你创建可重用的,结构化的,更具组织性的代码。我认为在开发中使用设计模式是必要的,尤其当你需要确保团队编写的代码的风格和结构是一致的时候。

清理浮动的整理

清理浮动是前端工程师每天都会用到的技术,目前清理浮动的技术形形色色,另很多新手眼花缭乱。所以我就结合了几篇文章,做了一些整理。

一、为什么要清理浮动?

这里我不做细讲,请新手参考《CSS Mastery》中有关浮动的章节。

简单的讲,当我们把一个框向左浮动起来时,它就会脱离文档流,并且向左移动,直到它左边缘碰到其父框的左边缘。当我们把框浮动起来后,会出现各种问题,比如下一个非浮动元素环绕着浮动框。这时候为了正确排版,我们需要把浮动清理。

二、如何清理浮动?

1、采用div标签clear的方式

1
<div class="clear"></div>
1
2
3
4
5
6
7
8
9
div.clear {
	clear:both;
	height:0;
	line-height:0;
	margin:0;
	padding:0;
	border:0;
	overflow:hidden;
}

优点:代码量极少,复用性极高。

缺点:完全不能完美的适应语义化,不利于改版以及需求变更。

建议:初学者使用,可以让你快速的解决浮动问题。

2、采用br标签clear的方式

jQuery学习笔记1-选择器

在学习jQuery前务必要有xhtml、css、xml、Javascript的基础,否则很难进行下去。本文参考了《Learning jQuery》和《jQuery 1.3中文参考》。强烈建议去下载这份手册,弄得不错,很方便。最近我就稍微看一下《Learning jQuery》,然后参照着《jQuery 1.3中文参考》做了几个实例,很轻松,jQuery比想象中的简单,用起来很顺手。下面进入正题。

jQuery中基本的操作就是选择文档中的某一部分,这是通过$()函数完成的。$()是jQuery的工厂函数,又称选择器。$()支持css、xpath的选择符,同时还有自定义选择符。$()函数会消除使用for遍历一组元素的需求,因为放到圆括号中的任何元素都将自动执行循环遍历,然后存在一个jQuery对象中。例如:

基本

$('p') 会取得文档中的所有段落。

$('#id') 会取得文档中对应id的一个元素。

$('.class') 会取得文档中带有class类的所有元素。

$('*') 取得所有元素