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. 自定义动画 jquery的结束动画
			
      <button name="width">改变宽</button>     <button name="height"> ...
    
			
    2. 
						
  2. kettle从入门到精通 第二十七课 邮件发送
			
    1.我们平常在做数据同步的时候,担心转换或者job没有正常运行,需要加上监控机制,这个时候就会用到邮件功能. 下图是一个简单的测试邮件发送功能的转换.在kettle.properties文件中设置邮件 ...
    
			
    3. 
						
  3. 解决Python使用GPU
			
    在Python中使用GPU进行计算通常涉及到一些特定的库,如NumPy.SciPy的GPU加速版本(如CuPy.PyCUDA等)或深度学习库(如TensorFlow.PyTorch等).这些库能够利用 ...
    
			
    4. 
						
  4. shiro有哪些组件？
			
    a.Authentication:身份认证/登录,验证用户是不是拥有相应的身份: b.Authorization:授权,即权限验证,验证某个已认证的用户是否拥有某个权限:即判断用户是否能做事情,常见的 ...
    
			
    5. 
						
  5. MATLAB神经网络工具箱使用介绍
			
      本文介绍MATLAB软件中神经网络拟合(Neural Net Fitting)工具箱的具体使用方法.   在MATLAB人工神经网络ANN代码这篇文章中,我们介绍了MATLAB软件中神经网络(AN ...
    
			
    6. 
						
  6. git clone 时拉取子模块
			
    git clone 时拉取子模块 对还未下载的项目: git clone --recursive 对已下载的项目: git submodule sync git submodule update -- ...
    
			
    7. 
						
  7. 【基础整理】Mapping representation 机器人所用地图种类及相关介绍
			
    参考与前言 本文主要介绍 建图 Mapping 方面的一些 基础知识介绍与相关下游任务使用 涉及知识较为基础,SLAM大佬们可以提前退出了 主要针对应用为移动机器人与物流无人驾驶车:提前申明:大部分文 ...
    
			
    8. 
						
  8. 一文为你深度解析LLaMA2模型架构
			
    本文分享自华为云社区<[云驻共创]昇思MindSpore技术公开课 大咖深度解析LLaMA2 模型架构>,作者: Freedom123. 一.前言 随着人工智能技术的不断发展,自然语言处理 ...
    
			
    9. 
						
  9. Vue Element-UI 按需引入提示Cannot find module 'babel-preset-es2015'
			
    1.我的开发环境和操作步骤 1.1.使用VUE-CLI创建  2.x 脚手架 1.2.安装 npm i element-ui(参照官网) 1.3.安装 npm install babel-plugin ...
    
			
    10. 
						
  10. 虚拟 DOM 的优缺点？
			
    什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中, 反应到实际的dom树,减少了dom操作. 虚拟DOM ...
    
			
    11.