seajs模块化前端js代码1.hello world

来源：互联网发布：linux快速安装php环境编辑：程序博客网时间：2024/06/06 02:50

现在JavaScript工程师是稀缺资源啊，互联网公司缺JavaScript工程师是再正常不过的事情了。然而页面越来越炫，前端开发又不善编码，于是大量的js代码就被后台搞Java的代劳了。结果页面代码被弄得惨不忍睹。其中最明显最影响可读性的问题就是代码没有任何结构，一个简单的显示分页表格的代码居然分布到了三个地方（三个函数，互不调用，页面上写的onXXX），我也是醉了。你说代码有bug、不健壮那是能力问题，代码东一榔头西一棒槌那就是态度问题。可读性不高的代码其实是没有价值的代码。为了使页面js代码结构清晰，之前也想了蛮多方法，其中最优雅还是用seajs。

说了半天废话，现在先看代码目录：

页面seajs.jsp代码

<body><div id="d1"></div><div id="d2"></div><div id="d3"></div><script type="text/javascript" src="static/js/sea.js"></script><script type="text/javascript">seajs.config({//base:"",base是所有的相对路径的起始路径,默认是sea.js所在路径  debug : false,  paths: {//主要是为了缩短路径，用一个短标示符替代一串长的路径    'md' : 'p1/p2/modules',    'lib':'p1/p2/lib'  },  alias : {//一般用来声明一些公用的js组件，如jquery，建议不声明其他js'$': 'lib/jquery-1.7.2.min.js','arttemplate' : 'lib/arttemplate.min.js'  },  charset: 'utf-8',  timeout: 20000});seajs.use(['md/m1','md/m2'], //引用m1,m2两个模块           function(          m1,m2        ){m1.init1();m2.init2("闹眼子！");        });</script></body>

m1.js代码：

//m1模块define(function(require, exports, module) {var $ = require('$');//同步加载依赖的模块require.async(['md/m3', 'md/m4'], function(m3, m4) {//异步加载依赖的模块,不会阻塞后面代码 m4.init4();}); alert("m1");exports.init1 = function (){//对外暴露接口函数sayHello1();};function  sayHello1(){$("#d1").html("hello world 1 !");}});

m2.js代码：

//m2模块define(function(require, exports, module) {var $ = require('$');exports.init2 = function (msg){sayHello2(msg);};function  sayHello2(msg){$("#d2").html(msg);}});

m3.js代码：

//m3模块define(function(require, exports, module) {var $ = require('$');exports.init3 = function (){sayHello3();};function  sayHello3(){$("#d3").html("hello world 3 !");}});

m4js代码：

//m4模块define(function(require, exports, module) {var $ = require('$');//同步加载依赖的模块exports.init4 = function (){//对外暴露接口函数$.ajax("http://127.0.0.1:8080/seajs/ajax",{type:"POST",async:false,dataType:"text",data:{},success:function(resp){alert(resp);}})};});

最后运行结果：

也许有人会说一个简单的页面被你划分成了这么多js文件，不是多此一举。呵呵！确实。但是这只是个样例，从另一方面可以看到整个代码结构非常清晰了。首先是seajs页面引用了m1和m2两个模块（实际是m1.js/m2.js两个js文件），然后执行两个模块的方法。页面只引入sea.js一个js文件，但却加载了6个js文件，其他文件都是seajs帮助加载的。本文就说到这里，代码解析请看下一章。

0 0