javascript模块化编程

最新推荐文章于 2022-03-28 18:25:36 发布

chenqingmiaomiao

最新推荐文章于 2022-03-28 18:25:36 发布

阅读量675

点赞数

分类专栏： javascript 文章标签： javascript模块化编程模块化前端模块化

本文链接：https://blog.csdn.net/chenqingmiaomiao/article/details/19163369

版权

javascript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

javascript模块化

模块化编程简介：

javascript模块化编程通俗的说就是将一组特定的功能组织在一起，也就是模仿高级语言中的类，这样做的好处就是能够提高代码的复用，而且能够使代码能够更加易于阅读和修改，这么多的好处还是很诱人的，所以现在就出现了一些框架来支持javascript模块化编程，(其实javascript模块化编程的一个重要的约束就是规范，因为没有类的语法，所以这些规范就需要我们变成中进行规定，只要能规定得适当，自己项目组写自己的框架也是很好的)，框架提供的就是规范和加载，给我们提供便利，现在的一些框架有CommonJs和AMD(异步模块定义)等，我们一会以AMD规范为例来进行demo的讲解。

模块化编程demo：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
  </head>
  
  <body>
    js模块化demo
    
    <script type="text/javascript" src="js/require.js"></script>
    <script type="text/javascript" src="js/main.js" ></script>
    
    <script type="text/javascript">
    
    //main.js 自己的js，写上自己的业务逻辑
    require.config({
　　　　paths: {
　　　　　　"math": "js/math"
　　　　}
   });

	require(['math'], function(math) { 
	    //myFunctionA(); // 使用 aModule.js 中的函数 myFunctionA
	    //myFunctionB(); // 使用 bModule.js 中的函数 myFunctionB
		var result = math.add(1,1);
		alert(result);
	}); 
    
	//math.js功能模块，写上功能集合，能够在任何地方使用
	   define(function (){
	　　　　var add = function (x,y){
	　　　　　　return x+y;
	　　　　};
	        var cut = function (x,y){
	        	return x - y;
	        };
	　　　　return {
	　　　　　　add: add,
	           cut: cut
	　　　　};
       });
    </script>
  </body>
</html>

上面代码是不能够运行的，main.js和math.js单独的写在js文件中，然后下载require.js并引入，就能运行了，也就是完成了一个简单的javascript的demo。

经验：在我们的项目组中暂时还没有用到javascript的模块化编程，但是现在我正在着手弄这方面的东西，准备用在实际的项目中，这个还是很有好处的

chenqingmiaomiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript模块化编程

javascript模块化模块化编程简介：javascript模块化编程通俗的说就是将一组特定的功能组织在一起，也就是模仿高级语言中的类，这样做的好处就是能够提高代码的复用，而且能够使代码能够更加易于阅读和修改，这么多的好处还是很诱人的，所以现在就出现了一些框架来支持javascript模块化编程，(其实javascript模块化编程的一个重要的约束就是规范，因为没有类的语法，所以这些规范
复制链接

扫一扫