JavaScript之模块化开发

MartinHan 发布于2019-08-23 12:21 / 2940人阅读

摘要：实现了按需加载与的区别对于依赖的模块提前执行，而是延迟执行推崇依赖就近推崇依赖前置之前之后模块化方案是最规范的方案未来也是主流对于我们来说也是经常使用与熟悉的不过现在的浏览器还不兼容使用需要转码使用导出模块使用导入模块参考原文

javaScript 的模块化

为什么需要模块化开发？

随着代码复杂程度的提高, 项目也变得越来越难维护, JavaScript模块化 也因此油然而生, 这应该是大家最熟悉的一种加载方式, 但是缺点也比较明显

所有的模块都处于全局作用域下, 容易造成命名冲突

依赖关系不明显, 比如 main.js 中有使用 jquery, 那么 jquery 就一定要先加载,
但是从引入方式中我们无法直观的察觉依赖关系, 不利于维护

CommonJs

一个文件就是一个模块, 其内部定义的变量, 方法都处于该模块内, 不会对外暴露.

主要语法:

使用 require 来加载模块

使用 exports 或者 module.exports 暴露模块中的内容

demo

新建 a.js, 导出 name 和 sayHello

// a.js
const name = "Bob"
function sayHello(name) {
  console.log(`Hello ${name}`)
}
module.exports.name = name
module.exports.sayHello = sayHello

在 b.js 中引入 a 并调用

// b.js
const a = require("./a")
const name = a.name
console.log(name) // Bob
a.sayHello(name) // Hello Bob

由于 CommonJs 是同步加载的模块的, 在服务端(node), 文件都在硬盘上, 所以同步加载也无所谓, 但是在浏览器端, 同步加载就体验不好了. 所以 CommonJs 主要使用于 node 环境下.

AMD

AMD 全称为 Asynchromous Module Definition(异步模块定义), 实现了异步加载模块. require.js 实现了 AMD 规范

主要语法:

require([module], callback) // 导入

define(id, [depends], callback) // 导出模块

demo

新建 a.js, 输入以下内容

define(function() {
  let alertName = function(str) {
    alert("I am " + str)
  }
  let alertAge = function(num) {
    alert("I am " + num + " years old")
  }
  return {
    alertName: alertName,
    alertAge: alertAge
  }
})

在 test.html 中调用 a 模块





    
    
    
    Document

能够异步加载模块, 适合在浏览器中运行, 但是不能够按需加载, 必须提前加载模块

CMD

CMD规范是阿里的玉伯提出, sea.js 实现。实现了按需加载

与 AMD 的区别:

对于依赖的模块 AMD 提前执行，而 CMD 是延迟执行

CMD 推崇依赖就近, AMD 推崇依赖前置

    //AMD2.0之前
    require(["./a", "./b"], function(a, b) {
         a.doSomething();
         b.doSomething();
    })
   // AMD2.0之后
   define(["./a", "./b"], function(a, b) {
         a.doSomething();
         b.doSomething();
   })
   
   // CMD
   define(function(require, exports, module) {
         var a = require("./a");
         a.doSomething();
         var b = require("./b");
         b.doSomething();
   })

ES6

ES6 模块化方案是最规范的方案, 未来也是主流, 对于我们来说也是经常使用与熟悉的. 不过现在的浏览器还不兼容, 使用需要 babel 转码

使用 export 导出模块

使用 import 导入模块

import Vue from "vue"
import axios from "axios"
import { mapState, mapMutations, mapActions } from "vuex"

export default {
  created() {
    console.log("Hello World")
  }
}

参考
http://www.hangge.com/blog/ca...
https://www.imooc.com/article...
原文
https://github.com/chenyinkai...

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98371.html

Javascript模块化编程之【模块的写法】

摘要：模块化编程，已经成为一个迫切的需求。但是，不是一种模块化编程语言，它不支持类，更遑论模块了。本文总结了当前模块化编程的最佳实践，说明如何投入实用。就是模块的基本写法。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。随着WEB的快速崛起，网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。 Ja...

Riddler 2019-08-20 10:28 评论0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同学去面试，做了两道面试题全部做错了，发过来给道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。排序算法 -- JavaScript 标准参考教程（alpha） - 前端 - 掘金来自《JavaScript 标准参考教程（alpha）》，by 阮一峰目录冒泡排序简介算法实现选择排序简介算法实现 ... 图例详解那道 setTimeout 与循环闭包的经典面...

enali 2019-08-20 16:36 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

王晗 2019-08-29 12:30 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移...

xiaochao 2019-08-22 11:03 评论0 收藏0
2017 前端面试准备 - 收藏集 - 掘金

摘要：最近遇到的前端面试题更新版前端掘金个人博客已上线，欢迎前去访问评论无媛无故的个人博客以下内容非本人原创，是整理后觉得更容易理解的版本，欢迎补充。一道面试题引发的对 javascript 类型转换的思考 - 前端 - 掘金最近群里有人发了下面这题：实现一个函数，运算结果可以满足如下预期结果： ... 收集 JavaScript 各种疑难杂症的问题集锦 - 前端 - 掘金从原博客迁移过来...

KitorinZero 2019-08-20 16:40 评论0 收藏0