Sea.js的终极模块化开发框架

为什么使用 Sea.js ？

Sea.js追求简单，自然的代码编写和组织，具有以下核心功能：

简单友好的模块定义规范：Sea.js遵循CMD规范，可以编写Node.js等模块代码。自然直观的代码组织：依赖自动加载，简单明了的配置，让我们享受编码的乐趣。

Sea.js还提供了通用插件，这些插件对开发调试和性能优化非常有用，并且具有丰富且可扩展的接口。

兼容性

Sea.js具有与所有主流浏览器兼容的全面测试用例：

Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+

Sea.js在Mobile端运行，包括Hybrid模式应用程序。理论上，Sea.js可以在任何浏览器引擎上运行

随着互联网的快速发展，前端开发变得越来越复杂。本文将从实际项目中遇到的问题入手，讨论模块化可以解决的问题以及如何使用Sea.js进行前端的模块化开发。

恼人的命名冲突

我们从一个简单的习惯开始。当我做项目时，我经常将一些常见的低级函数抽象为单独的函数，例如

函数each（arr）{//implementation code} function log（str）{//implementation code}

并将这些函数放在util.js中就像一个体面的。如果需要，可以引入该文件。这一切都很顺利，我的同事们很感激我提供了这么方便的工具包。

在团队变得越来越大之前，有些人开始抱怨。

Xiao Yang：我想定义一个遍历对象的每个方法，但是已经定义了一个头文件中的util.js。我只能调用eachObject，所以我很无奈。

小高：我已经定制了一个日志方法。为什么小明写的代码有问题？谁会帮助我。

投诉越来越多。经过激烈的讨论，团队决定引用Java并引入命名空间来解决它。因此util.js中的代码变为

Var org={}; org.CoolSite={}; org.CoolSite.Utils={}; org.CoolSite.Utils.each=function（arr）{//implementation code}; org.CoolSite.Utils.log=function （str）{//实现代码};

不要认为上述代码是为了撰写本文而故意编造的。名称空间的概念在前端进行，雅虎的YUI2项目是第一个推出的项目。下面是一个真实的代码，一个来自Yahoo!的开源项目。

if（org.cometd.Utils.isString（response））{return org.cometd.JSON.fromJSON（response）;} if（org.cometd.Utils.isArray（response））{return response;}

通过命名空间，它可以真正缓解冲突。但每当我看到上面的代码时，我都忍不住要充满同情。为了调用一个简单的方法，你需要记住这么长的命名空间，这会增加内存负担并剥夺很多编码的乐趣。

作为前端行业的基准，YUI团队决心解决这个问题。 YUI3项目中引入了一个新的命名空间机制。

YUI（）。use（'node'，function（Y）{//加载Node模块//var foo=Y.one（'＃foo'）;}）;

YUI3通过沙箱机制解决了名称空间过长的问题。但是，它也带来了新的问题。

YUI（）。use（'a'，'b'，function（Y）{Y.foo（）; //模块a或b提供的foo方法是什么？//如果模块a和b都提供了foo方法，如何避免冲突？}）;

看似简单的命名冲突，实际解决方案并不简单。如何更优雅地解决它？我们先来看看另一个常见问题。

麻烦的文件依赖

继续上面的故事。基于util.js，我开始在UI层开发通用组件，以便项目团队的同事不必重新创建轮子。

最受欢迎的组件之一是dialog.js，它易于使用。

但无论我如何编写文档，以及电子邮件的宣布程度如何，总会有同事问为什么dialog.js有问题。通过一些调查，经常发现错误的原因是

在dialog.js之前没有引入Util.js，所以dialog.js不起作用。也不要以为上面的故事是虚构的。在我留下的公司中，仍然有类似的脚本被报道，特别是在各种快速制作营销页面中。

上述文件依赖性仍在可控范围内。随着项目变得越来越复杂，许多文件之间的依赖往往令人沮丧。我相信，以下问题每天都会发生。

环球集团更新了前端基类库，但很难推广全站点升级。该业务组希望使用新的通用组件，但发现无法使用几行代码完成。旧产品需要新功能，最终评估只能继续基于旧类库开发。该公司整合其业务，并将两个产品线合并。事实证明，前端代码冲突。

上述许多问题都是由于文件依赖性得不到很好的管理。在前端页面中，大多数脚本的依赖性仍然由人类肉体保证。当团队很小时，这不会是一个问题。随着团队规模的扩大和公司业务变得更加复杂，如果不解决依赖性问题将成为一个大问题。

文件依赖性目前在大多数类库框架中，例如外部YUI3框架，国内KISSY和其他库，这些库目前通过配置解决。

YUI.add（'my-module'，function（Y）{//.}，'0.0.1'，{required: ['node'，'event']}）;

上述代码通过要求等指定当前模块的依赖性。这可以在很大程度上解决依赖问题，但不够优雅。当有很多模块且依赖性很复杂时，繁琐的配置会带来很多隐患。

命名冲突和文件依赖性是前端开发过程中的两个经典问题。让我们看看如何通过模块化开发来解决它。为了便于描述，我们使用Sea.js作为模块化开发框架。

使用Sea.js来解决

Sea.js是一个成熟的开源项目，其核心目标是为前端开发提供简单，极端模块化的开发体验。这里没有太多介绍。如果您有兴趣，可以访问seajs.org上的官方文档。

使用Sea.js时，您必须在编写文件时遵循CMD（通用模块定义）模块定义规范。文件是一个模块。上一个示例中的util.js变为

定义（function（require，exports）{exports.each=function（arr）{//implementation code}; exports.log=function（str）{//implementation code};}）;

可以通过导出在外部提供接口。这样，dialog.js的代码变为

定义（function（require，exports）{var util=require（'./util.js'）; exports.init=function（）{//implementation code};}）;

关键部分在这里！我们可以通过require（'。/util.js'）获取util.js中导出的接口。这里的require可以被视为Sea.js添加到JavaScript语言的语法关键字。 require接口可用于获取其他模块提供的接口。

这实际上并不神奇。作为前端工程师，您必须熟悉CSS代码。

@import url（'base.css'）;＃id {.} .class {.}

Sea.js添加了require语法关键字，就像CSS文件中的@import一样，为我们的源代码提供了依赖项导入功能。

如果您是后端开发工程师，那么您将不会感到陌生。 Java，Python，C＃等具有包含，导入和其他功能。 JavaScript语言本身具有类似的功能，但它仍处于草案阶段，需要等到主流浏览器支持ES6标准。

这样，在页面上使用dialog.js将非常简单。

首先，您应该在页面中引入sea.js文件，该文件通常由页眉控制，并且更新和维护也很方便。如果要在页面中使用组件，只需通过seajs.use方法调用它。

仔细看看上面的代码，我相信你已经看到了Sea.js的两个好处：

通过导出公开接口。这意味着不需要命名空间，也不需要全局变量。这是一个完整的命名冲突解决方案。

通过require引入依赖项。这允许内置依赖项。开发人员只需要关心当前模块的依赖关系，以及Sea.js将自动处理它的其他事情。对于模块开发人员来说，这是一个很好的关注点分离，允许程序员更多地享受编码。

摘要

除了解决命名冲突和依赖关系管理之外，使用Sea.js进行模块化开发还可以带来许多好处：

模块的版本管理。使用别名配置和其他配置工具，使用构建工具实现模块版本管理更容易。

提高可维护性。模块化允许对每个文件负责，这对代码维护非常有利。 Sea.js还提供了nocache，调试等插件，具有在线调试和其他功能，可以显着提高效率。

前端性能优化。 Sea.js异步加载模块，这对页面性能非常有利。 Sea.js还提供插件，如组合和刷新，可用于调整服务器的页面性能。

跨环境共享模块。 CMD模块定义规范与Node.js的模块规范非常相似。 Sea.js的Node.js版本可以轻松地跨服务器和浏览器共享模块。

模块化开发并不新鲜，但在Web领域，前端开发是一项新工作，而且它始终处于原始大刀阔斧的时代。直到最近两三年，随着Dojo，YUI3，Node.js等社区的推广和普及，前端模块化开发理念逐渐普及。

前端的模块化结构可分为两大类。一个是由Dojo，YUI3和国内KISSY图书馆代表的大教堂模型。在大教堂模式中，所有组件都是颗粒状和模块化的，并且组件是分层分层和互锁的。另一种是基于jQuery，RequireJS，国内Sea.js，OzJS和其他库的市场模型。在市场模式中，所有组件彼此独立并且具有单一责任。组件松散地耦合在一起并协同开发。

这两种类型的模块化构造方法具有应用场景。从长远来看，小而美的更具宽容性和竞争力，更能够形成一个充满活力的生态系统。

简而言之，模块化可以为前端开发带来许多好处。如果您尚未尝试过，请先尝试Sea.js.

标签:＆amp; nbsp＆amp; nbsp沈阳前端开发＆amp; nbsp沈阳html5前端开发