js 模块化开发

为什么要有模块化

通常会将代码组织在多个 js 文件中,进行维护, 但是这种维护方式,依然不能避免一些灾难性的问题:

  • 这种代码的编写方式 js 文件的依赖顺序几乎是强制性的
  • 全局变量同名

ES6 以前 可以使用匿名函数(var Module = (function(){return dataObj}) ())来解决多文件重名问题, 返回的 dataObj 里面封装了各种需要暴露到外面的属性和方法。这就是模块最基础的封装

模块化有两个核心: 导入,导出

前端模块化开发已经有了很多既有的规范,以及对应的实现方案:

CommonJS, AMD、CMD, 也有 ES6 的 Modules

  • CommonJs nodeJs 支持
// 导出
var name = 'test'
var age = 12

module.exports = {
  name: name,
  age: age,
}
// 导入, ES6解构语法
var {name, age} = require('fileName.js')
var age2 = require('fileName.js').age

ES6 的模块化实现

ES6 的模块化使用两个关键字实现: export import

<!-- 主文件 main.html -->

<script src="./module-a.js" type="module"></script>
<script src="./module-b.js" type="module"></script>

标签中类型为 module导入的 js 文件,具有自己的作用域,其他 js 文件没有导入,不能直接访问

// module-a.js
var name = 'test'
// 导出一个 变量
export {name}
export let age = 18

function print(str){
  sonsole.log(str)
}

export default print

一个模块中包含某个的功能,当不希望给这个功能命名,而且让导入者可以自己来命名时,使用 export default。export default 在同个模块中,不允许同时存在多个。

// module-b.js
// 导入一个变量,使用解构语法
import {name, age} form "./module-a.js"
// 导入默认的一个功能
import print_s form "./module-a.js"
// 全部导出并别名为 mA, mA是一个对象里面包含了导入的所有方法属性
import * as mA "./module-a.js"

相关推荐:

来自系列:Vue 笔记

分类 前端下文章:

微信小程序开发 days1 关注点:文件结构,json配置文件, 模板语法

小程序开发学习笔记 days2。 关注点:view, text, rich-text, button, image, navigator, icon, swiper, radio, checkbox

小程序学习笔记 days3。 关注点:生命周期,自定义组件

小程序学习笔记 days4。 关注点:scroll-view, Promise

css3 选择器,背景定义(定位), 盒子定位,弹性布局,栅格系统。还有一些常用的 css 属性。

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号