js 模块化的一些理解和es6模块化学习
模块化
1 IIFE
2 commonjs
5 es6
之前在参加百度前端技术学院做的小题目的时候,自己写模块的时候 都是写成立即调用表达式(IIFE)的模式,比如单个功能的时候当时想到是不会涉及到全局变量的污染,在封装基础的模块(比如里面的表单验证功能)
(function(win){
var obj = {};
function add() {
console.log("add");
}
obj.add = add;
win.obj = obj; }(window));
obj.add();
是在立即调用表达中我们想要的功能 绑定在一个对象上 最后绑定到window上 这样的模式在写功能不多的时候,的确是不错的 但是随着你的功能越来越多,就会出现一定的问题
1)window上是不是挂载太多的对象
2)模块内部是否存在相同的变量的名字挂载window上 比如两个模块内部都挂载 window.obj 那么后来加载执行的一定是会覆盖之前的模块的
3)依赖的解决问题 一定在做好依赖的维护 也就是本模块需求的模块必须在之前被加载和执行 想想在页面中好多js的样子
4)在扩展上也并不是很友好 每次都需要将新的功能扩展到内部的对象或者window上 存在变量的污染问题 跟2)有点相似
上面的只是我的一些浅显的理解 对这种IIFE模式实现模块化的一点理解
commonjs commonjs是JavaScript模块化的一种规范 它为JavaScript实现模块化定义了一种规范 引用官网上的一句话 JavaScript:not just for browsers any more!
简单理解就是通过commonjs,JavaScript能做的事情更多了
如何写一个最简单的commonjs模块
/*模块引用部分 引用其他的模块
*/ /*模块定义部分
*/
function add(a,b) {
return a+b;
}
function multiple(a,b) {
return a*b;
}
/* 模块导出部分 导出模块的功能
*/
module.exports.add = add;
module.exports.multiple = multiple;
commonjs 规范定义实现一个模块分为模块引用 模块定义 模块标识(require()时候使用的标识) 这个是官网上一个简单的例子 这个是例子
浏览器中的js模块化 上面的这种方式在node中是完全没有问题的 但是在浏览器中首先出现的问题就是require module.exports 这些关键字在浏览器中不支持 也就是我们需要模块加载器帮我们实现require帮我们去加载commonjs模块 还有一个点就是浏览器中的环境不同于服务端 require是同步的 它会等待模块的下载和执行完毕之后在运行下面的代码 服务器端是从本地的磁盘读取对应的模块 这样的加载速度是可以接受的 但是在浏览器中 就涉及到从服务端加载对应的js 这样就会造成页面的锁死 这时候就出现了require.js 和sea.js
简单理解模块加载器的原理 首先通过将加载过的对象进行缓存 在进行多个依赖加载的时候,记录加载的数目 ,每加载一个模块 在回调中减少数目 当所有的依赖加载完毕后执行外层的回调 参考 理解requirejs-实现一个简答的模块加载器
es6 es6中推出了模块系统 可以参考这篇文章去学习es6的模块化 深入浅出ES6(十六):模块 这个系列的文章写得真的不错
js 模块化的一些理解和es6模块化学习的更多相关文章
- js模块化AMD、CMD、ES6
AMD CMD ES6模块化 各个模块化规范对比理解 一.AMD 在上一篇js模块化入门与commonjs解析与应用中详细的解析了关于commonjs模块化规范,commonjs采用的用同步加载方式, ...
- Js模块化开发的理解
Js模块化开发的理解 模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突.管理 ...
- 一览js模块化:从CommonJS到ES6
本文由云+社区发表 模块化是指把一个复杂的系统分解到一个一个的模块. 模块化开发的优点: (1)代码复用,让我们更方便地进行代码管理.同时也便于后面代码的修改和维护. (2)一个单独的文件就是一个模块 ...
- ES6模块化与常用功能
目前开发环境已经普及使用,如vue,react等,但浏览器环境却支持不好,所以需要开发环境编译,下面介绍下开发环境的使用和常用语法: 一,ES6模块化 1,模块化的基本语法 ES6 的模块自动采用严格 ...
- ES6模块化
关于ES6模块化 历史上,JavaScript 一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能,比如 Ruby 的require ...
- CommonJS、AMD、CMD和ES6模块化区别
本文参考自:https://www.cnblogs.com/chenguangliang/p/5856701.html 1.CommonJS NodeJS是CommonJS规范的实现,webpack ...
- 【 js 模块加载 】【源码学习】深入学习模块化加载(node.js 模块源码)
文章提纲: 第一部分:介绍模块规范及之间区别 第二部分:以 node.js 实现模块化规范 源码,深入学习. 一.模块规范 说到模块化加载,就不得先说一说模块规范.模块规范是用来约束每个模块,让其必须 ...
- javascript ES6模块化
一.将模块导出去 /* *将模块导出去 *a.js文件 */ const a=12; export default a; /* *将模块导出去 *b.js文件 */ const a=5; export ...
- ES6 模块化与 CommonJS 模块化
ES6 模块化 import命令用于输入其他模块提供的功能;export命令用于规定模块的对外接口. export 可以有多个,export default 仅有一个 a.js 模块a文件 导出多个方 ...
随机推荐
- SpringMVC常用的注解
1. @Controller @Controller用于标识控制层主键,负责注册一个bean到spring上下文,bean的ID默认为首字母小写的类名称,用户也可以自定义. 例如: 方式一: @Co ...
- Python标准库的threading.Thread类(转自别人的翻译)
这个类表示在单独的控制线程中运行的活动.有两种方法可以指定这种活动,给构造函数传递回调对象,或者在子类中重写run() 方法.其他方法(除了构造函数)都不应在子类中被重写.换句话说,在子类中只有__i ...
- MongoDB 分片管理
在MongoDB(版本 3.2.9)中,分片集群(sharded cluster)是一种水平扩展数据库系统性能的方法,能够将数据集分布式存储在不同的分片(shard)上,每个分片只保存数据集的一部分, ...
- Android实现播放视频
转载:http://www.bdqn.cn/news/201311/12100.shtml 使用VideoView播放视频 VideoView,用于播放一段视频媒体,它继承了SurfaceView,位 ...
- 通过3个Hello World应用来了解ASP.NET 5应用是如何运行的(2)
对于上面创建的这个Hello World应用来说,程序入口点由应用自身来提供,所以应用本身具有自我执行的能力.从应用托管(Host)的角度来讲,这样的应用同时负责对自身的托管.将应用与托管环境独立起来 ...
- Web APi之认证(Authentication)及授权(Authorization)【一】(十二)
前言 无论是ASP.NET MVC还是Web API框架,在从请求到响应这一过程中对于请求信息的认证以及认证成功过后对于访问页面的授权是极其重要的,用两节来重点来讲述这二者,这一节首先讲述一下关于这二 ...
- C#:lock锁与订单号(或交易号)的生成
在弄电商类网站的时候,往往是根据年月日时分秒的格式生成订单号(yyyyMMddHHmmss),为了解决并发性,就直接在生成订单号的区域块加上lock. 下面,我们来简单测试一下. 1.新建项目(控制台 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 简析GeoServer服务的内部文件组织以及GeoServer自动化服务发布工具的开发思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 通过GeoServer发布的服务,在GeoServer内部有 ...
- TCP三次握手,四次挥手
前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...