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. php程序出现乱码
			
      // 1, PHP程序中的 中文乱码         //    php7.0以下程序,没有默认设定 编码格式 , 需要添加响应头         //    header("Conte ...
    
			
    2. 
						
  2. docker容器单机编排
			
    随着网站架构的升级,容器也使用的越发频繁,应用服务和容器间的关系也越发复杂. 这就要求研发人员能够更好的方法去管理数量较多的容器服务,而不能手动的去挨个管理. 例如一个LNMP的架构,就得部署web服 ...
    
			
    3. 
						
  3. Scrapy框架(一)--初识
			
    scrapy初识什么是框架? 所谓的框架简单通用解释就是就是一个具有很强通用性并且集成了很多功能的项目模板,该模板可被应用在不同的项目需求中. 也可被视为是一个项目的半成品. 如何学习框架? 对于刚接 ...
    
			
    4. 
						
  4. C++操作符重载（operator）
			
    c++操作符 例如-=+*/等,甚至包括,<<等都是操作符.c++特色之一就是给予完全重构和重载操作符(Java不可以,c#操作部分). 例子入手 假设一个结构体,定义如下 struct  ...
    
			
    5. 
						
  5. Grab 基于 Apache Hudi 实现近乎实时的数据分析
			
    介绍 在数据处理领域,数据分析师在数据湖上运行其即席查询.数据湖充当分析和生产环境之间的接口,可防止下游查询影响上游数据引入管道.为了确保数据湖中的数据处理效率,选择合适的存储格式至关重要. Vani ...
    
			
    6. 
						
  6. 实验5.OSPF配置实验
			
    # 实验5.OSPF配置实验 配置ospf使全网联通 实验组 拓扑,路由器选择为AR2220,交换机为S5700 联通配置 给每台路由器的对应端口配置相应的ip,并启动ospf协议,可以看到此时5台设 ...
    
			
    7. 
						
  7. 处理 3d 视频的简单理论基础
			
    背景 公司产品需要满足一些带有3d功能的应用场景,需要需要懂得如何处理3d信号.之前在调试以前产品的时候,发现处理3d信号的时候,是由2个画面叠加起来的. 导言 3D视频(或3D信号)为什么是两个画面 ...
    
			
    8. 
						
  8. Linux运行等级
			
    Linux运行级别 Linux system存在7个运行级别 运行级别0:所有进程终止,机器将有序停止,关机时就处于这个运行级别 运行级别1:单用户模式(root用户进行维护),系统中所有的服务也不会 ...
    
			
    9. 
						
  9. HiAI Foundation开发平台，加速端侧AI应用的智能革命
			
    如果您是一名开发者,正在寻找一种高效.灵活且易于使用的端侧AI开发框架,那么HarmonyOS SDKHiAI Foundation服务(HiAI Foundation Kit)就是您的理想选择. 作 ...
    
			
    10. 
						
  10. 把nodejs程序打包成可执行文件
			
    在写好之后的nodejs程序,想发给同事的电脑上运行程序,就不得不下载node环境,还要安装第三方依赖包,非常的麻烦. 因此,可以借助一些插件来完成nodejs程序的打包,变成可以执行的文件. 将No ...
    
			
    11.