干货|大数据应用:前端模块化开发的价值

随着大数据将各行各业的用户、方案提供商、服务商、运营商以及整个生态链上游厂商融合到一个大环境中，大数据应用前端开发变得越来越复杂。最早JS（javascript）需求简单，是一种面向过程的写法，也就是写函数，后来引入面向对象的开发思想，到现在写成类。随着应用程序的增多，JS代码复杂度越来越高，如何管理、组织、优化成为摆在企业技术部门面前的一个现实问题。

模块化开发并不新鲜，但在 国内Web 领域，无论是前端开发还是新生岗位，都保留着比较落后的编码习惯。直到近年，随着各种前端框架的推广和流行，模块化开发理念才被广泛接受和应用。本文将从实际项目中遇到问题出发，讲述模块化可以解决JS代码中的哪些问题，以及如何使用 Sea.js 进行前端模块化开发。

恼人的命名冲突

在项目开发过程中，我们通常会将一些通用的、底层的功能抽象出来，独立成一个个函数，一种面向过程的写法，并像模像样地把这些函数统一放在 base.js 里。需要时，引入该文件即可。这是一个很好的编码习惯，通用功能被封装成一个便利的工具包，方便以后使用。

但这一方式有个致命缺点，就是它只适用于团队人数较少时，如果人数不断增多，就会出现命名冲突、函数被覆盖等问题。如何解决？我们发现，如果借鉴后端语言命名空间的方式，将前端也引入命名空间来组织函数，通过命名空间，就能缓解冲突。但这一方式同时也带来了另一问题，就是为了调用一个简单的方法，需要记住很长的命名空间，结果就是代码量上去了，增加了系统记忆负担。

烦琐的文件依赖

另一个问题，基于 base.js编写的前端通用函数库，节省了重复建设时间。但当项目团队中的A某某调用到某个通用函数后，页面总是提示错误。经过排查，发现原因是页面没有引入base.js，进而导致页面无法正常工作，这是在做前端开发时经常遇到的问题。如果在项目初期，则上面的文件依赖还在可控范围内，但当项目逐渐推进，越来越复杂时，众多文件之间的依赖就会让人抓狂。

之所以出现上面问题，是因为文件依赖没有很好的管理起来。在前端页面里，大部分脚本的正常运行还是目前依旧是通过人为检测代码的方式来保证。当团队较小时，这一方式不会出现什么问题。但当团队越来越大，业务越来越复杂后，这一问题就会凸显，而依赖问题如果不解决，为后续工作展开带来许多问题。

Sea.js解决两大困扰

Sea.js 是一个成熟的开源项目，目标是给前端开发提供简单、极致的模块化开发体验。

使用 Sea.js编写JS文件时，需要遵守 CMD模块定义规范。一个文件就是一个模块，通过define来定义模块， exports 向外提供接口（define、exports、require都可简单理解为Sea.js中的语法关键字）。

通过 require('./base.js') 可以拿到 base.js 中通过 exports 暴露的接口。这是一项简单的工作，作为前端工程师，对 CSS这一代码并不陌生:

@importurl("base.css");

Sea.js 增加的 require 语法关键字，就如 CSS 文件中的 @import 一样，给我们的源码赋予了依赖引入功能。如果你是后端开发工程师，对这一方式更不会陌生，Java、Python、C# 等语言中，都有 include、import 等功能。通过这一方式，在页面中使用 base.js 将变得非常简单。

Sea.js是如何解决上面遇到的两个问题的呢？

首先，利用 exports 暴露接口意味着不需要命名空间，更不需要全局变量。这是一种彻底解决命名冲突的方案。

其次，通过 require 引入依赖，可以让依赖内置，开发者只需关心当前模块的依赖，其他事情 Sea.js 会自动处理好。对模块开发者来说，这是一种很好的关注度分离，可以让编码人员专注于自己的模块。

除了可以解决命名冲突和依赖管理问题，使用 Sea.js 进行模块化开发还可以带来以下好处：

1.模块的版本管理。通过简单配置，可以比较轻松地实现模块的版本管理。

2.提高可维护性。模块化可以让每个文件的职责单一，有利于代码维护。

3.前端性能优化。Sea.js使用的异步加载模块，对提高页面性能非常有益。

模块化开发给前端编码带来了解决数据量急剧增加所产生问题的新思路和方法，Sea.js在编码中的应用，不仅减轻了编码人员的工作量，也大大提升了页面性能，合理利用这一技术，对前端编码人员大有裨益。