初探Javascript模块化开发

随着简单网页逐渐变成交互复杂的网站应用，网页上的Javascript代码也变得越来越庞大，越来越复杂。加之随即而来的多人协作分工的开发方式，每个人只负责其中一个或者几个很小的功能模块，最终必须通过把各个功能模块组合才能变成一个完整的功能。

而多个模块又涉及到加载顺序，依赖关系等的影响，当功能模块增加、依赖关系越来越复杂的时候，让人工的去保证这些信息的严格正确性已经变得更加困难了。在这种情况下，产生了较多的模块化开发方式、方法以及工具。

早起的Javascript主要用于表单验证等一些简单的工作，写法也主要是过程式函数的形式。

2006年，Ajax席卷全球。JavaScript被重视了，越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能，从一个函数可能会跳到第N个函数去。这时写类的方式出现了，Prototype 率先流行开来，用它组织代码，写出的都是一个个类。例如采用混合的构造函数/原型模式自定义的对象：

Comment.prototype = { }  //原型的方式定义共享的方法和属性

或者是把模块写成一个对象，所有的模块成员都放到这个对象里面。

var module = new Object({ }）

但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。

到现在大肆倡导的模块化开发概念，模块化Javascript是啥？其实并没有什么神奇的，其实在计算机领域，模块化的概念被推崇了近四十年。软件总体结构体现模块化思想，即把软件划分为一些独立命名的部件，每个部件称为一个模块，当把所有模块组装在一起的时候，便可获得问题的一个解。模块化以分治法为依据，但是否意味着我们把软件无限制的细分下去。事实上当分割过细，模块总数增多，每个模块的成本确实减少了，但模块接口所需代价随之增加。要确保模块的合理分割则须了解信息隐藏，内聚度及耦合度。

最近了解了seaJs的思想，简单友好的模块定义规范,自然直观的代码组织方式;使用之后立即就喜欢上了，不仅如此它比requireJs好的一个点是主动修改了一些其他的开源库使其可以通过seaJs的方式加载，例如jquery,angularJs等。例如有个模块叫 comment.js,用来加载更多内容的：

define(function(require, exports, module){   //通用的模块定义方式，可以用require加载其他模块  var $ = require('jquery');        var baidu = require('template'); //百度的一个开源template，源码只有几百行效率不错，安利一下        exports.show = function(){ }
});

这样再引入seaJs之后就可以直接使用了，Like this:

seajs.config({            base: '/js/sea-modules/',              alias: {                    "jquery"   : "jquery/jquery/1.10.1/jquery.js",                    "template" : "hope/template.js",                    "comment"  : "hope/comment.js",            },            charset: 'utf-8',            debug: false
});
seajs.use("comment", function(comment){    //评论组件     comment.show();
});

好了，关于模块化开发，以及seaJs就说这么多吧，seaJs还有很多更强大的地方，例如debug、插件等，感兴趣的可以进一步了解。

初探Javascript模块化开发相关推荐

JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁历史不是过去,历史正在上演,一切终究都会成为历史拥抱变化,面向未来延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
JavaScript模块化开发技术概述
2019独角兽企业重金招聘Python工程师标准>>> 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应 ...
前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
JavaScript 模块化开发入门
JS 为什么要模块化 JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性,为Web页面添加一些动画效果等,并不包含太多的高级语言的特性,此时通常直接在HTML页面中编写简单的 ...
javascript模块化开发
一.什么是模块化开发将软件产品看作为一系列功能模块的组合通过特定的方式实现软件所需模块的划分.管理.加载二.模块化开发好处解决命名冲突问题添加命名空间YUI .EXTJS-可以从一定程度上解 ...
Node 之 JavaScript 模块化开发
目录一.模块化 1. 概念 2. 历史 01 - 早期 02 - 现在 3. 问题问题一 01 - 定义 foo.js 02 - 定义 bar.js 03 - 定义 html 页面问题二二.C ...
JavaScript 模块化简述
JavaScript 模块化简述前言关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

初探Javascript模块化开发

初探Javascript模块化开发相关推荐

最新文章

热门文章