javascript模块化工具之SeaJs和RequireJs

JavaScript模块化工具

sea.Js的使用

注意：再结合第三方包使用时，需要做相关的配置

  • 引入seaJs包（可以使用命令下载 npm install --save sea.JS）

      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  	//引包
    <script src="js/sea.js"></script>
  </head>
  <body>
    
  </body>
  </html>

  • 使用define函数定义模块

      //这里的三个参数必须传
  define(function(require,exports,module){
  	//使用require引入其他模块
  	require('./a')
  });

  • 使用mpdule.exports对外暴露街口对象

      module.exports={
  	name:'张三',
  	test:function(){
  		console.log('测试')
  	}
  }

  • 启动入口模块

      <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>Document</title>
  	//引包
    	<script src="js/sea.js"></script>
  	<script>
  		//启动入口模块 这里的main.js可简写main
  		seajs.use('./js/main')
  	</script>
  </head>
  <body>
    
  </body>
  </html>

require.js的使用

  • 引入require.js（可以使用命令下载 npm install --save require.JS）

      	<!DOCTYPE html>
  	<html lang="en">
  	<head>
  	  <meta charset="UTF-8">
  	  <title>Document</title>
  		//这里的data-main 就是启动入口模块
  	  <script data-main='js/main' src='js/require.js'></script>
  	</head>
  	<body>
  	 
  	</body>
  	</html>

  • 使用requirejs函数定义主模块

      //参数1为依赖的其他模块，如果没有依赖，写[]即可
  //回调函数中的参数跟数组是一一对应的关系
  requirejs(['./a'],function (aName) {
  	console.log(aName)
  })

  • 使用define定义有依赖的其他次模块

      define(['./b']function(){
		return 'good'
  })

  • 使用define定义没有依赖的其他次模块

      define(function(){
		return 'good'
  })

仅供参考，如有错误，请指明。

posted @ 2016-11-09 14:25  不忘初心ˇ  阅读(226)  评论(0)  编辑  收藏  举报