001、前言


什么是模块化开发?
 
为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了。,下面是某个网站的js引用情况
怎么会有这么多js文件引入,吓死宝宝了,那就是网站功能比较多喽,可是我们知道,
     1、网站加载js时会停止其它资源加载,并停止页面渲染(就是我们常说的白屏现象)
     2、加载过多的js文件可能造成浏览器假死(浏览器一直在加载,不能进行页面操作)
     3、假如文件有依赖关系,就是使用B.js需要先加载A.js,那我们还要小心翼翼的去引入js,不过这么多文件,鬼理得清依赖关系啊
 
额 。。。容许我懵逼片刻,那怎么办呢,网站的功能日益强大,js文件越来越多是必然的的事情,于是出现了模块化开发。
 
 
实现特定功能的js文件称之为  模块 ,有了模块之后,我们就能更好的管理自己的代码及使用别人的代码了。  将庞大的系统划分成若干个模块去实现的过程 成为 模块化
 
现在的web系统越来越庞大、复杂,需要团队分工,多人协作,大型系统的javascript文件经常存在复杂的依赖关系,后期的维护成本会越来越高。
 
在ES6之前,javascript还不支持原生的模块化,如果要实现模块化那么就需要借助一些框架比如:require.js或者sea.js。

002、模块module


假设我们现在有一个module-a.js和module-b.js.我们将它们视为2个模块

 

首先我们先了解下什么是模块?

     模块module:模块就是一个对其他模块暴露属性和方法的文件

 

我们用module-a.js和module-b.js来演示如何暴露属性和方法。

 

首先我们先要来了解几个方法:

     1、exprot:导出。作为一个模块,它可以选择性的暴露自己的属性和方法,供其他模块使用

 

     2、import:导入。作为一个模块,可以根据需要,引入其他模块提供的属性和方法,供自己的模块使用
 

003、导入导出模块的属性和方法

在模块B中我们用关键字export对外暴露了一个属性name1,接下来我们看模块A如何接受这个属性


004、导入模块module-b

我们使用关键字import导入模块B中的name1属性,并且赋值给变量name1.关键字from的作用是指向你想要引入的模块

005、批量导出

对于属性和方法我们可以批量暴露出去

推荐使用批量导出:
    
     当对外暴露的属性和方法较多的时候,这种方法可以更直观的看出当前模块暴露哪些变量

006、批量导入

注意:
     批量导入的时候变量名必须跟导出的一致才能准确获取,位置顺序无要求

007、重命名导入的变量


关键字as:关键字as可以实现变量名更改

 

     用法:变量名 as 更改的变量名

 在export里面修改 和 import里面修改都可以

008、整体导入

使用*将模块里面的所有属性和方法整体导入赋值给一个变量。就相当于给一个对象添加了属性和值

009、默认导出

每一个模块都支持我们导出一个没有名字的变量,我们可以使用关键字 export default来实现

010、注意事项

a、声明基本变量对外只能读取不能修改


b、如果导出的是对象,则可以修改


c、导入不存在的值 那么值就是undefined
 

webpack将es6代码转为es5代码

001、安装webpack

全局安装
 
npm install webpack -g

002、局部安装相应插件

npm install webpack --save-dev

npm install --save-dev babel-loader babel-core

npm install babel-preset-es2015 --save-dev

003、在根目录创建文件.babelrc文件

在命令行中:
echo { presets: ["es2015"] }> .babelrc 在根目录创建.babelrc文件并写入{presets: ['es2015']}

004、配置webpack.config.js

module.exports = {
    entry:{
        main:"./es6/main.js"
    },
    output:{
        path:__dirname,
        filename:"./es5/[name].js"
    },
    module: {
        loaders: [{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ]
    }
}

005、运行webpack

【ES6】001---module模块------【巷子】的更多相关文章

  1. ES6中的模块

    前面的话 JS用"共享一切"的方法加载代码,这是该语言中最容出错且容易令人感到困惑的地方.其他语言使用诸如包这样的概念来定义代码作用域,但在ES6以前,在应用程序的每一个JS中定义 ...

  2. es6(六):module模块(export,import)

    es6之前,社区模块加载方案,主要是CommonJS(用于服务器)和AMD(用于浏览器) 而es6实现的模块解决方案完全可以替代CommonJS和AMD ES6模块设计思想:尽量静态化,在编译时就能确 ...

  3. ECMA Script 6_模块加载方案 ES6 Module 模块语法_import_export

    1. 模块加载方案 commonJS 背景: 历史上,JavaScript 一直没有模块(module)体系, 无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来. 其他语言都有这项功能: ...

  4. ES6之module

    该博客原文地址:http://www.cnblogs.com/giggle/p/5572118.html 一.module概述 JavaScript一直没有模块体系,但是伴随着ES6的到来,modul ...

  5. 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基础与模块化的内容再使用vue-cli开发 ...

  6. 前端模块化小总结—commonJs,AMD,CMD, ES6 的Module

    随着前端快速发展,需要使用javascript处理越来越多的事情,不在局限页面的交互,项目的需求越来越多,更多的逻辑需要在前端完成,这时需要一种新的模式 --模块化编程 模块化的理解:模块化是一种处理 ...

  7. ES6 模块化(Module)export和import详解 export default

    ES6 模块化(Module)export和import详解 - CSDN博客 https://blog.csdn.net/pcaxb/article/details/53670097 微信小程序笔记 ...

  8. 利用Module模块把构建的神经网络跑起来

    训练一个神经网络往往只需要简单的几步: 准备训练数据 初始化模型的参数 模型向往计算与向后计算 更新模型参数 设置相关的checkpoint 如果上述的每个步骤都需要我们写Python的代码去一步步实 ...

  9. JavaScript ES6 module 模块

    在使用JavaScript开发大型项目时,模块开发概念是一个必须考虑的问题.其目的就是通过命名空间对各类业务对象进行一定的封装,防止命名冲突. 本篇着重介绍ES6 module中的export和imp ...

随机推荐

  1. div 点击展开

    <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min. ...

  2. 关于Unity中的NGUI和UGUI

    一.用Unity开发2D游戏,有三套关系 1.GUI:Unity本身自带的GUI 2.NGUI:以前在Unity中广泛来做2D的,是第三方的包,需要安装 3.UGUI:Unity5.X后(其实是Uni ...

  3. 第二百八十三节,MySQL数据库-MySQL存储过程

    MySQL数据库-MySQL存储过程 MySQL存储过程,也就是有点像MySQL函数,但是他与MySQL函数是有区别的,后面会讲到函数,所以注意区分 注意:函数与存储过程的区别 存储过程是:CREAT ...

  4. 有一个TIME的类要求输出分和秒的值

    #include <iostream> /* run this program using the console pauser or add your own getch, system ...

  5. Climbing Stairs爬楼梯——动态规划

    题目描写叙述: 初阶:有n层的台阶,一開始你站在第0层,每次能够爬两层或者一层. 请问爬到第n层有多少种不同的方法? 进阶:假设每次能够爬两层.和倒退一层,同一个位置不能反复走,请问爬到第n层有多少种 ...

  6. 使用定时器判断确保某个标签有值才执行方法, 控制js代码执行先后顺序

    使用定时器判断确保某个标签有值才执行方法: var wait = setInterval(function(){ var diqu = $("#diqu").val(); //确保 ...

  7. Struts2 ajax json使用介绍

    一.jar包首先引入Struts和json所需的jar包. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRteWhvbWUxOTkw/font/5a6 ...

  8. UVA - 11920 0 s, 1 s and ? Marks

    Description  0 s, 1 s and ? Marks  Given a string consisting of 0, 1 and ? only, change all the ? to ...

  9. Linux 快速删除大量小文件方法

    进行以下两步操作即可: 1.第一步:创建空的文件夹: mkdir  /tmp/blank 2.第二步:执行以下命令:rsync --delete-before -d /tmp/blank/ /home ...

  10. ChemDraw教程:如何查看和删除俗名

    化学范畴里,允许用俗名表示ChemDraw原子标记或原子标记的一部分,可以定义俗名的快捷键也可以自由查看或删除俗名,熟练掌握可以提高ChemDraw软件使用效率,下面将具体介绍此部分内容. 一.查看俗 ...