文档章节

明白 JS 模块化

王福林
 王福林
发布于 2017/09/08 16:51
字数 917
阅读 12
收藏 0
点赞 0
评论 0

明白 JS 模块化

模块化是什么,有什么用?

模块化就是将一个大的功能拆分为多个块,每一个块都是独立的,你不需要去担心污染全局变量,命名冲突什么的。

那么模块化的好处也就显然易见了

  • 解决命名冲突
  • 依赖管理
  • 代码更加可读
  • 提高复用性

早期苦逼的前端er

但是,JS 这门语言在最初是没有这个设计的。所以也就苦了早期的前端开发者。下面介绍下最开始的写法。

函数封装

这个嘛,谁都会,最大的缺点就是污染全局作用域了

function fn1() {
    // balabalabala
}
function fn2() {
    // balabalabala
}

对象

这个嘛,也是谁都会的,最大的缺点就是没有私有变量,外部能改

var myModule = {
    var1: 1,
    fn1: function() {}
}

立即执行函数

这个嘛,高级了点,并且也有了模块化的意思,这种写法在老项目中很常见,一个 JS 文件中就是一个立即执行函数

(function(){
   // ....
})()

CommonJS

浏览器这边表示没有模块化还行,就是写逻辑麻烦了点。但是搞服务端的必须得有这玩意啊,所以 Node.js 第一个搞出了 CommonJS规范

// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
module.a // -> log 1

上面的写法很好用,但是 module.exports 和 exports 是咋回事?为啥这几句代码就实现模块化了,让我们来看一下基础的实现

先说 require 吧

var module = require('./a.js')
module.a 
// 这里其实就是包装了一层立即执行函数,这样就不会污染全局变量了,
// 重要的是 module 这里,module 是 Node 独有的一个变量
module.exports = {
    a: 1
}
// 基本实现
var module = {
  id: 'xxxx', // 我总得知道怎么去找到他吧
  exports: {} // exports 就是个空对象
}
// 这个是为什么 exports 和 module.exports 用法相似的原因
var exports = module.exports 
var load = function (module) {
    // 导出的东西
    var a = 1
    module.exports = a
    return module.exports
};
// 然后当我 require 的时候去找到独特的
// id,然后将要使用的东西用立即执行函数包装下,over

再来说说 module.exports 和 exports,用法其实基本是相似的,但是不能对 exports直接赋值,不会有任何效果,看了上面代码的同学肯定明白为什么了。

CommonJS规范是 Node 独有的,浏览器中使用就需要用到 Browserify 解析了,所以后面又蹦出了两个规范。

AMD && CMD

AMD 是由 RequireJS 提出的,CMD 由 SeaJS 提出。两者用法基本相似,当然现在用的人应该也不多了,了解下语法,看项目的时候不至于懵逼就行

// AMD
define(['./a', './b'], function(a, b) { 
    a.do()
    b.do()
}) 
define(function(require, exports, module) {   
var a = require('./a')  
a.doSomething()   
var b = require('./b') 
b.doSomething() 
})

原生登场

ES6总算原生支持模块化了,毁誉参半吧。当然这个语法还是早支持早好。

// 引入的语法就这样 import,XXX 这里有很多语法变化
import XXX from './a.js'
// 导出也有很多语法变化的写法,基本的就这两个,反正语法没什么难得
export function a() {}
export default function() {}

最后

这里基本的介绍了下模块的几种写法,如有错误,请提出,谢谢!

答疑

评论里有问到为什么直接对 exports 赋值无效。首先 require 出来的是 module.exports 对象,然后看下面的代码

var a = {}
a.exports = {}
// 把 e 看成 exports,现在 e === a.exports
var e = a.exports
// 引用的关系,同时也修改了 a.exports
e.c = 1
console.log(a.exports.c) // -> 1

// 但是当给 e 赋值的话就等于修改了引用了, 所以并没有修改 a.exports
e = xxxx

本文转载自:https://juejin.im/post/59a575b06fb9a0247c6eee02

共有 人打赏支持
王福林
粉丝 9
博文 93
码字总数 36521
作品 0
徐汇
程序员
Gulp和Webpack工具的区别

引用知乎的回答:https://www.zhihu.com/question/37020798 怎么解释呢?因为 Gulp 和 browserify / webpack 不是一回事 Gulp应该和Grunt比较,他们的区别我就不说了,说说用处吧。Gulp / Gr...

easonjim ⋅ 2016/12/24 ⋅ 0

NODE高级编程阅读笔记系列(一)

本篇涉及以下主题 node简单介绍 事件驱动编程 模块化 缓冲区处理 Node简单介绍 直接用官方的那句话: Node.js 是一种建立在Google Chrome's V8 引擎上的non-blocking(非阻塞),event-driven(...

可爱的圣诞老人 ⋅ 05/23 ⋅ 0

JavaScript异步精讲,让你更加明白Js的执行流程!

JavaScript异步精讲,让你更加明白Js的执行流程! 问题点 什么是单线程,和异步有什么关系 什么是 event-loop jQuery的Deferred Promise 的基本使用和原理 async/await(和 Promise的区别、联...

推荐码发放 ⋅ 05/28 ⋅ 0

【CSS模块化之路2】webpack中的Local Scope

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。 1. 面临的问题 你可能会说,...

AlienZHOU ⋅ 06/15 ⋅ 0

分布式爬虫框架 - xxl-crawler

分布式爬虫框架XXL-CRAWLER XXL-CRAWLER 是一个分布式爬虫框架。一行代码开发一个分布式爬虫,拥有"多线程、异步、IP动态代理、分布式、JS渲染"等特性; 特性 1、简洁:API直观简洁,可快速上...

许雪里 ⋅ 2017/11/03 ⋅ 6

nodejs开发——express框架学习

在我们实际开发项目时,总是会用一些框架,而不是自己从头开始开发。而在nodejs中,express框架就是一个使用频率最高的一个框架。本篇主要来讲解express的使用。 加载express框架 snippetid=...

chenyufeng1991 ⋅ 2017/01/31 ⋅ 0

基于 jQuery 的前端 UI 框架 - LuLu UI

LuLu UI 是一个基于 jQuery,针对 PC 网站,兼容 IE8+ 或 IE7+ 的前端 UI 框架,包含 20+ 静态或动态 UI 组件。 上手简单 lulu整个项目就是提供一些UI组件的JS和CSS,很纯粹的JS和CSS,没有任...

匿名 ⋅ 06/20 ⋅ 0

再谈 load 与 DOMContentLoaded

本文首发在github,感兴趣请点击此处 window 的 onload 事件对于前端童鞋来说肯定是熟的不能再熟了,相信大家在刚入门时,见的最多的可能就是 load 事件了。load 事件接触多了,大家就会接触...

lucefer ⋅ 06/21 ⋅ 0

在浏览器中使用javascript module(译)

在浏览器中使用JS module 简介 现在,所有主流浏览器都已经支持JS module(Chrome、Edge、Safari、Firefox)~这篇文章将为你讲解如何在浏览器中使用JS module,如何负责的部署它们,以及chr...

LitCigar ⋅ 06/21 ⋅ 0

基于 Kibana6.x eUI的React 页面开发

React和JS的混合对于server side JS 开发真的是个创意, 模块化清晰, 构造简单。 Ref: 1. React : https://reactjs.org/ 2. Kibana Plugin: https://elastic.github.io/eui/ 下面是尝试开发...

allan114 ⋅ 05/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Bean基础

1、Bean之间引用 <!--如果Bean配置在同一个XML文件中,使用local引用--><ref bean="someBean"/><!--如果Bean配置在不同的XML文件中,使用ref引用--><ref local="someBean"/> 其实两种......

霍淇滨 ⋅ 18分钟前 ⋅ 0

05、基于Consul+Upsync+Nginx实现动态负载均衡

1、Consul环境搭建 下载consul_0.7.5_linux_amd64.zip到/usr/local/src目录 cd /usr/local/srcwget https://releases.hashicorp.com/consul/0.7.5/consul_0.7.5_linux_amd64.zip 解压consu......

北岩 ⋅ 20分钟前 ⋅ 0

Webpack 4 api 了解与使用

webpack 最近升级到了 v4.5+版 01 官方不再支持 node4 以下版本 官方不再支持 node4 以下版本官方不再支持 node4 以下的版本,所以如果你的node版本太低,先开始升级node吧!话说node10 ...

NDweb ⋅ 30分钟前 ⋅ 0

使用nodeJs安装Vue-cli

Vue脚手架就是一个Vue框架开发环境 脚手架的意思是帮你快速开始一个vue的项目,也就是给你一套vue的结构,包含基础的依赖库,只需要 npm install就可以安装,让我们不需要为了编辑或者一些其...

木筏笔歆 ⋅ 今天 ⋅ 0

【微信小程序开发实战】0x00.开发前准备工作

写在开始 本人资深后端码农一枚,近期项目需求,接触到了微信小程序,将学习过程整理成文分享给小伙伴们,由于是边学边整理难免有表述不对的地方,望大家及时指正,感谢。 本人微信号: dream...

dreamans ⋅ 今天 ⋅ 0

linux redis的安装和php7下安装redis扩展

安装redis服务器 (1)下载安装包: $ wget http://download.redis.io/releases/redis-2.8.17.tar.gz (2)编译程序: $ tar xzf redis-2.8.17.tar.gz $ cd redis-2.8.17 $ make $ cd src &&......

concat ⋅ 今天 ⋅ 0

Guava EventBus源码解析

一、EventBus使用场景示例 Guava EventBus是事件发布/订阅框架,采用观察者模式,通过解耦发布者和订阅者简化事件(消息)的传递。这有点像简化版的MQ,除去了Broker,由EventBus托管了订阅&...

SaintTinyBoy ⋅ 今天 ⋅ 0

http怎么做自动跳转https

Apache 版本 如果需要整站跳转,则在网站的配置文件的<Directory>标签内,键入以下内容: RewriteEngine on RewriteCond %{SERVER_PORT} !^443$ RewriteRule ^(.*)?$ https://%{SERVER_NAME......

Helios51 ⋅ 今天 ⋅ 0

Python爬虫,抓取淘宝商品评论内容

作为一个资深吃货,网购各种零食是很频繁的,但是能否在浩瀚的商品库中找到合适的东西,就只能参考评论了!今天给大家分享用python做个抓取淘宝商品评论的小爬虫! 思路 我们就拿“德州扒鸡”...

python玩家 ⋅ 今天 ⋅ 0

MySQL 内核深度优化

MYSQL数据库适用场景广泛,相较于Oracle、DB2性价比更高,Web网站、日志系统、数据仓库等场景都有MYSQL用武之地,但是也存在对于事务性支持不太好(MySQL 5.5版本开始默认引擎才是InnoDB事务...

java高级架构牛人 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部