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. YNOI 做题记
			
    YNOI 做题记 偶然有一天做到了其中的一道题,于是便开始做相关的题了-- [Ynoi2015] 我回来了 - 洛谷 这之一场联考搬过来的题--于是考场上写了一个 \(O((n + m)\log^2  ...
    
			
    2. 
						
  2. 设计模式：命令模式（Command Pattern）及实例
			
     好家伙,   0.什么是命令模式 在软件系统中,"行为请求者"与"行为实现者"通常呈现一种"紧耦合". 但在某些场合,比如要对行为进行&q ...
    
			
    3. 
						
  3. flutter 尝试创建第一个页面（三）
			
    新建目录 assets  存放图片 在pubspec..yaml 中添加 flutter: # The following line ensures that the Material Icons f ...
    
			
    4. 
						
  4. mysql分组求最大ID记录行方法
			
    ##创建表 CREATE TABLE `test_user` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `order_no` BIGINT(20) DEFAULT ...
    
			
    5. 
						
  5. Java8 - sum求和，将 List 集合转为 Map，key去重(groupingBy)，sorted排序
			
    Java8 - sum求和,将 List 集合转为 Map,key去重(groupingBy),sorted排序 package com.example.core.mydemo.java8; publ ...
    
			
    6. 
						
  6. http请求方式-CloseableHttpClient
			
    http请求方式-CloseableHttpClient import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObjec ...
    
			
    7. 
						
  7. 03-vi和vim编辑器的使用
			
    背景 vim是一个类似于vi的著名的功能强大.高度可定制的文本编辑器. vim在vi的基础上改进和增加了很多特性. 如今vi已经是最受IT届欢迎的编辑器之一. 不止在Linux中,主流IDE都支持vi ...
    
			
    8. 
						
  8. CentOS上安装telnet
			
    客户端 yum -y intall telnet 服务端 yum -y install xinetd #telnet服务依赖于xinetd yum -y install telnet-server # ...
    
			
    9. 
						
  9. libevent之bufferevents
			
    目录 Bufferevents:概念和基础知识 Bufferevents 和 evbuffers 回调和水印 延迟回调 缓冲区事件的选项标志 使用基于套接字的缓冲区事件 创建基于套接字的缓冲区事件 在 ...
    
			
    10. 
						
  10. .NET 个人博客-首页排版优化-2
			
    个人博客-首页排版优化-2 原本这篇文章早就要出了的,结果之前买的服务器服务商跑路了,导致博客的数据缺失了部分.我是买了一年的服务器,然后用了3个月,国内跑路云太多了,然后也是花钱重新去别的服务商买了 ...
    
			
    11.