JS最初的目的是用来做表单验证和动画效果，可以让网页更加生动。

但是使用Ajax，前后端分离，页面承担了更多的事情，JS的代码量暴增，代码管理维护逐渐困难

我们需要将JS代码抽取出来，模块化处理，

但是问题也出现了，各个模块的变量会污染。

JS文件a:

flag = true;

JS文件b:

flag = false;

页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/a.js"></script>

    <script src="js/b.js"></script>

    <script type="text/javascript">

        if (flag) console.log("flag的值为：" + flag);

    </script>

</head>

<body>

</body>

</html>

效果：

可以发现，flag是false，但是我们希望的是使用A文件的flag，这就是变量污染

使用模块作为出口：

A文件：

moduleA = (function () {

    return true;

})();




B文件：




moduleB = (function () {

    return false;

})();




页面使用：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/a.js"></script>

    <script src="js/b.js"></script>

    <script type="text/javascript">

        console.log("flag的值为：",moduleA);

    </script>

</head>

<body>

</body>

</html>




效果：




这样我就明确知道我需要的是什么模块的变量了


我们希望引用模块的时候不止一个变量应该被使用：


所以我们可以以一个对象的形式去返回：




moduleB = (function () {

    let obj = {};

    obj.property1 = "sadas";

    obj.property2 = true;

    obj.property3 = ['sdd', 'dsd', 'dsa', 'dsd', 'sds',];

    obj.property4 = {

        prop1 : "sadas"

    };

    obj.property5 = 1000;

    return obj;

})();




效果：




这就是模块化的雏形


ES6的关键字：Export & Import


export的作用是为了导出变量：




export let name = "sss"

export let age = 22

export let gender = true




import导入：




<script type="text/javascript">

　　import {name, age, gender} from './js/a.js';

　　console.log(name, age, gender);

</script>




如果要导出所有变量，可以使用：




    <script type="text/javascript">

        import * as aaa from './js/a.js';

        console.log(aaa);

    </script>




获取里面的单个变量：




    <script type="text/javascript">

        import * as aaa from './js/a.js';

        console.log(aaa.name, aaa.gender, aaa.age);

    </script>




方法的导出：




export function method01() {

    console.log(name, age, gender);

}




导入使用：




<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/a.js"></script>

    <script src="js/b.js"></script>

    <script type="text/javascript">

        import * as aaa from './js/a.js';

        aaa.method01();

    </script>

</head>

<body>

</body>

</html>




export default 关键字：


我们的模块不设置名称，交给使用者来命名：




let user = {

    name : "阿伟",

    age : 23,

    gender : true

}

export default user;




调用页：




    <script type="text/javascript">

        import aw from "./js/ed.js";

        console.log(aw.gender);

    </script>




export default不允许在同一个模块内多次使用，无法分清调用的是哪一个具体的变量，变量污染问题


但是似乎不允许。。。


												


											
【Vue】04 模块化开发演变的更多相关文章
	

    
						
  1. 利用requirejs实现vue的模块化开发
		
    通常vue都是搭配webpack+vue-cli使用的 如果不在nodejs环境下开发web应用呢? 这里提出一个解决方案: 1.加载requirejs,并且指定main函数 <script d ...
    
		
    2. 
						
  2. Vue（十七）模块化开发
		
    模块化开发   使用vue-cli创建项目   1. vue-router模块化   引入vue-router cnpm install vue-router -S 1.1 编辑main.js imp ...
    
		
    3. 
						
  3. 基于vue模块化开发后台系统——准备工作
		
    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下v ...
    
		
    4. 
						
  4. 基于vue模块化开发后台系统——构建项目
		
    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...
    
		
    5. 
						
  5. Vue使用SCSS进行模块化开发
		
    原文地址:http://www.cnblogs.com/JimmyBright/p/7761531.html 个人认为scss最大的好处就是能将css属性设置为变量,这样让css一键更换主题成为可能. ...
    
		
    6. 
						
  6. 前端模块化开发学习之gulp&browserify篇
		
     随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发 ...
    
		
    7. 
						
  7. [工具配置]使用requirejs模块化开发多页面一个入口js的使用方式
		
    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
    
		
    8. 
						
  8. JavaScript学习总结(六)——前端模块化开发
		
    早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模 ...
    
		
    9. 
						
  9. 06Vue.js快速入门-Vue组件化开发
		
    组件其实就是一个拥有样式.动画.js逻辑.HTML结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue的组件和也做的非常彻底,而且有自己的特色.尤其是她 ...
    
		
    10. 
						
  10. 使用requirejs模块化开发多页面一个入口js的使用方式
		
    描述 知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置.但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多. ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. 新手入门html  表格 表单 超链接 图片
			
    超链接标签 <a></a> A里面的html属性 href="所要跳转到的目标连接" <a href="http:是必须加的"&g ...
    
			
    2. 
						
  2. LeetCode 682. Baseball Game 棒球比赛(C++/Java)
			
    题目: You're now a baseball game point recorder. Given a list of strings, each string can be one of th ...
    
			
    3. 
						
  3. C#.NET AES CBC 加密
			
    重点: 1. KEY 和 IV 转 byte[] 时的编码. 2.要加密的字符串转 byte[] 时的编码. 3.AES 的PADDING,MODE. 4.加密后的byte[] 转字符串时的编码. 先 ...
    
			
    4. 
						
  4. node-sass升级为dart-sass
			
    卸载node-sass npm uninstall node-sass 安装dart-sass npm install sass sass-loader -D 在选择dart-sass版本的时候建议低 ...
    
			
    5. 
						
  5. ElasticSearch多语义命令在query和aggregation中的区别
			
    初学ES时,有两个较为特殊的命令让我困惑 terms 在query中使用terms,代表匹配多个查询条件 在aggregation中使用terms,代表按指定filed进行groud by分组聚合 f ...
    
			
    6. 
						
  6. 阿里云ecs自定义镜像并导出到OSS、并下载
			
    OSS是什么? 有个文章说得比较浅显清楚:什么是OSS?5分钟带你了解! - 知乎 (zhihu.com) 这里摘选核心内容: 白话文解释就是将系统所要用的文件上传到云硬盘上,该云硬盘提供了文件下载. ...
    
			
    7. 
						
  7. 从github下好dirsearch后出现要下载文件依赖错误
			
    pip3 install -r requirements.txt
    
			
    8. 
						
  8. P9482 [NOI2023] 字符串
			
    \(36pts\) \(O(tqn^2)\)暴力即可 \(40pts\) 对于最朴素的暴力优化,从头到尾扫,如果已经当前位字符比出优先级,那么直接能判断了,没必要往后跑了,第15个性质B的也给跑过了, ...
    
			
    9. 
						
  9. 在VisualStudio中WPF应用程序在打开窗体界面设计时报错<发生了未经处理的异常>的解决方法
			
    在网上找了一个wpf的开源项目,在打开窗体,点击设计的时候,提示错误信息如下 System.Resources.MissingSatelliteAssemblyExceptionThe satelli ...
    
			
    10. 
						
  10. 记一次debian无法启动的解决经历
			
    前言 有几台debian物理机突然无法开机了,断电重启后,一直卡在下面这个界面 参考了博客[linux]解决系统卡在ubuntu loading initial ramdisk 发现无法修复 在rec ...
    
			
    11.