Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >前端模块化开发解决方案详解

前端模块化开发解决方案详解

作者头像
半指温柔乐
发布于 2018-09-11 01:20:22
发布于 2018-09-11 01:20:22
3.8K0
举报
文章被收录于专栏:前端知识分享前端知识分享

一、模块化开发方案

前端发展到今天,已经有不少模块化的方案,比如

CommonJS(常用在服务器端,同步的,如nodejs)

AMD(常用在浏览器端,异步的,如requirejs)(Asynchronous Module Definition)

CMD(常用在浏览器端,异步的,如seajs

UMD(AMD&& CommonJS) 这些模块化规范的核心价值都是让 JavaScript 的模块化开发变得简单和自然。

服务器端模块 在服务器端,所有的模块都存放在本地硬盘,可以同步加载完成,等待时间就是硬盘的读取时间。

浏览器端模块: 在浏览器端,所有的模块都放在服务器端,同步加载,等待时间取决于网速的快慢,可能要等很长时间,浏览器处于"假死"状态。因此,浏览器端的模块,不能采用"同步加载"(synchronous),只能采用"异步加载"(asynchronous)。

二、CommonJs 

CommonJs 是服务器端模块的规范,Node.js采用了这个规范。 CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作。 像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以CommonJS规范比较适用。 

CommonJS模块的特点如下: 所有代码都运行在模块作用域,不会污染全局作用域。 模块可以多次加载,但是只会在第一次加载时运行一次,然后运行结果就被缓存了,以后再加载,就直接读取缓存结果。 模块加载的顺序,按照其在代码中出现的顺序。

CommonJS语法

1、定义模块 

根据CommonJS规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、都是私有的,对其他文件不可见。如果想在多个文件分享变量,必须定义为顶层对象的属性,如:global.warning = true;上面代码的warning变量,可以被所有文件读取。当然,这样写法是不推荐的。

2、模块的接口

CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属性(即module.exports)是对外的接口。加载某个模块,其实是加载该模块的module.exports属性。

3、加载模块

加载模块使用require方法,该方法读取一个文件并执行,返回文件内部module.exports对象 注:不同的实现对require时的路径有不同要求,一般情况可以省略js拓展名,可以使用相对路径,也可以使用绝对路径,甚至可以省略路径直接使用模块名(前提是该模块是系统内置模块)

 三、AMD

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义". RequireJS是一个工具库,主要用于客户端的模块管理。它可以让客户端的代码分成一个个模块,实现异步或动态加载,从而提高代码的性能和可维护性。它的模块管理遵守AMD规范。 RequireJS的基本思想是,通过define方法,将代码定义为模块;通过require方法,实现代码的模块加载。 首先,将require.js嵌入网页,然后就能在网页中进行模块化编程了。 <script data-main="scripts/main" src="scripts/require.js"></script> 上面代码的data-main属性可省略,用于指定主代码所在的脚本文件,在上例中为scripts子目录下的main.js文件。用户自定义的代码就放在这个main.js文件中。

AMD语法

1、定义模块

define(id?, dependencies?, factory);

id:可选参数,用来定义模块的标识,如果没有提供该参数,脚本文件名(去掉拓展名)

dependencies:是一个数组,表示当前模块的依赖

factory:工厂方法,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值 

2、加载模块

require([dependencies], function(){});  第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块

四、CMD

CMD 即Common Module Definition通用模块定义 CMD规范是国内发展出来的,CMD有个浏览器的实现SeaJS 在 CMD 规范中,一个模块就是一个文件。

Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单、极致的模块化开发体验。这里不多做介绍,有兴趣的可以查看官方文档。 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定义规范。一个文件就是一个模块。 首先要在页面中引入 sea.js 文件,这一般通过页头全局把控,也方便更新维护。想在页面中使用某个组件时,只要通过 seajs.use 方法调用。

CMD语法

1、定义模块 define(id?, deps?, factory) 

字符串id为模块标识,数组deps为模块依赖; 参数 factory  可以是一个函数,也可以为对象或者字符串。 

factory是一个函数,有三个参数: require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口:require(id) exports 是一个对象,用来向外提供模块接口 module 是一个对象,上面存储了与当前模块相关联的一些属性和方法 注: 带 id 和 deps 参数的 define 用法不属于 CMD 规范,而属于 Modules/Transport 规范。

Sea.js 带来的两大好处: 通过 exports 暴露接口。这意味着不需要命名空间了,更不需要全局变量。这是一种彻底的命名冲突解决方案。 通过 require 引入依赖。这可以让依赖内置,开发者只需关心当前模块的依赖,其他事情 Sea.js 都会自动处理好。对模块开发者来说,这是一种很好的 关注度分离,能让程序员更多地享受编码的乐趣。

五、AMD与CMD的区别

1.AMD推崇依赖前置。 在定义模块的时候就要声明其依赖的模块; CMD推崇依赖就近,只有在用到某个模块的时候再去require ;

2.AMD依赖模块的执行顺序和书写顺序不一定一致;CMD模块的执行顺序和书写顺序是完全一致的

3.对于依赖的模块AMD是提前执行,CMD是延迟执行。不过RequireJS从2.0开始,也改成可以延迟执行(根据写法不同,处理方式不通过)。 

六、UMD: 通用模块规范

UMD (Universal Module Definition)通用模块规范 是AMD和CommonJS两者的结合 这个模式中加入了当前存在哪种规范的判断,所以能够“通用”,它兼容了AMDCommonJS,同时还支持老式的“全局”变量规范: 应用UMD规范的js文件其实就是一个立即执行函数。在执行UMD规范时,会优先判断是当前环境是否支持AMD环境,然后再检验是否支持CommonJS环境,否则认为当前环境为浏览器环境( window )。当然具体的判断顺序其实是可以调换的。

六、前端模块化的优缺点

1、更好的分离

如果要加载多个就得放置多个 script 标签,如果是加载模块的话,对于 HTML 和 JavaScript 分离很有好处,在某些场景下这个分离度很重要。

2、更好的代码组织方式 如果单个文件越来越大,维护起来出问题的几率也会越来越大,如果是多人开发,不同的代码风格,超多的业务逻辑混杂在一起,不要说维护了,光想想感觉都很麻烦。模块式的开发,一个文件就是一个模块,控制了文件的粒度,每个模块可以专注于一个功能。

3、按需加载

4、避免命名冲突

5、更好的依赖处理

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-05-06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
深入浅出百亿请求高可用Redis(codis)分布式集群揭秘
摘要:作为noSql中的kv数据库的王者,redis以其高性能,低时延,丰富的数据结构备受开发者青睐,但是由于redis在水平伸缩性上受限,如何做到能够水平扩容,同时对业务无侵入性是很多使用redis的开发人员都会面临的问题,而redis分布式解决方案的一个开源产品【codis】较好的弥补了这一弱势,本文主要讲解codis是如何做到对业务无感知,平滑迁移,迁移性能高,迁移异常处理,高可用以及常见的redis的避坑指南,虽然codis目前随着公司的nosql产品越来越成熟,生命周期也即将结束,不过鉴于还
腾讯技术工程官方号
2019/05/16
2K0
深入浅出百亿请求高可用Redis(codis)分布式集群揭秘
基于 Twemproxy 与 Codis 的 redis 集群方案比较
此前的文章中,我们介绍了三种 redis 集群和搭建方法。 redis 集群详解及搭建过程
用户3147702
2022/06/27
8920
基于 Twemproxy 与 Codis 的 redis 集群方案比较
Redis 集群之Redis+Codis方案
【转载请注明出处】:https://cloud.tencent.com/developer/article/1636529
后端老鸟
2020/06/02
1.3K0
Redis 集群之Redis+Codis方案
Redis集群机制及一个Redis架构演进实例
Redis的replication机制允许slave从master那里通过网络传输拷贝到完整的数据备份,从而达到主从机制。为了实现主从复制,我们准备三个redis服务,依次命名为master,slave1,slave2。
程序视点
2025/03/16
1220
探索Redis设计与实现13:Redis集群机制及一个Redis架构演进实例
本系列文章将整理到我在GitHub上的《Java面试指南》仓库,更多精彩内容请到我的仓库里查看
Java技术江湖
2019/12/03
4150
Codis 3.2 部署配置汇总
服务端:codis-fe------codis-dashboard------codis-proxy------codis-group------codis-server
三杯水Plus
2018/11/14
1.2K0
玩转Redis集群之Codis
近几年,随着互联网的飞速发展,作为程序员,我们需要处理的数据规模也在不断扩大。如果你使用Redis作为数据库时,面临大数据高并发的场景时,单个Redis实例就会显得力不从心。这时Redis的集群方案应运而生,他将众多Redis实例综合起来,共同应对大数据高并发的场景。
Jackeyzhe
2020/03/11
1.3K0
玩转Redis集群之Codis
Redis Cluster深入与实践(续)
前文回顾 上一篇文章基于redis的分布式锁实现写了基于redis实现的分布式锁。分布式环境下,不会还使用单点的redis,做到高可用和容灾,起码也是redis主从。redis的单线程工作,一台物理机只运行一个redis实例太过浪费,redis单机显然是存在单点故障的隐患。内存资源往往受限,纵向不停扩展内存并不是很实际,因此横向可伸缩扩展,需要多台主机协同提供服务,即分布式下多个Redis实例协同运行。 在之前的文章Redis Cluster深入与实践介绍过Redis Cluster的相关内容,之前特地花
aoho求索
2018/04/03
1.1K0
Redis Cluster深入与实践(续)
大规模排行榜系统实践及挑战
本文介绍了如何通过修改配置项和代码的方式,实现在不重启Redis服务器的情况下,动态修改Redis的配置项。同时介绍了如何实现通过Redis的配置文件来修改Redis的配置项。最后通过一个具体实例,演示了如何通过修改配置项来实现不同的功能,并总结了整个实现过程。
小时光
2016/10/18
6.5K0
大规模排行榜系统实践及挑战
揭秘有状态服务上 Kubernetes 的核心技术
之前在中通负责过缓存平台的建设工作,当时的缓存系统使用搜狐 TV 开源的 CacheCloud 缓存服务平台进行托管,但随着公司业务发展,随着而来的是资源隔离、集群访问权限粒度、资源不均衡、仅支持 Redis 类型的集群等问题,为了解决公司当下使用缓存的痛点,当时决定构建下一代缓存服务平台,它是基于 Kubernetes Operator 自动化部署与运维的思想,当时还写下了一篇文章:「中通缓存服务平台基于 Kubernetes Operator 的服务化实践」。
张乘辉
2021/07/14
1.1K0
Redis集群模式
* 一个master可以拥有多个slave,但是一个slave只能对应一个master
俊才
2022/03/07
6201
Redis集群模式
Codis与RedisCluster的原理详解
我们先来看一下为什么要做集群,如果我们要部署一个单节点Redis,很明显会遇到单点故障的问题。
平也
2020/04/03
9810
Codis与RedisCluster的原理详解
得物 Redis 设计与实践
自建 Redis 系统是得物 DBA 团队自研高性能分布式 KV 缓存系统,目前管理的 ECS 内存总容量超过数十TB,数百多个 Redis 缓存集群实例,数万多个 Redis 数据节点,其中内存规格超过 1T 的大容量集群多个。
得物技术
2023/10/27
7.7K1
得物 Redis 设计与实践
基于Redis的开源分布式服务Codis
Redis在豌豆荚的使用历程——单实例==》多实例,业务代码中做sharding==》单个Twemproxy==》多个Twemproxy==》Codis,豌豆荚自己开发的分布式Redis服务。在大规模
张善友
2018/01/19
1.1K0
基于Redis的开源分布式服务Codis
知乎技术分享:从单机到2000万QPS并发的Redis高性能缓存实践之路
知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能。本文作者陈鹏是该系统的负责人,本次文章深入介绍了该系统的方方面面,值得互联网后端程序员仔细研究。
JackJiang
2018/09/18
3.2K0
【redis从入门到上线(4)】- redis高可用架构横向对比分析
上篇我们讲解完 Redis Sentinel 原理之后,接下来讲解常用的 Redis 高可用架构。
一条老狗
2019/12/26
6480
《快学BigData》--Codis总结(33)
Codis 是一个分布式 Redis 解决方案, 对于上层的应用来说, 连接到 Codis Proxy 和连接原生的 Redis Server 没有显著区别 (不支持的命令列表), 上层应用可以像使用单机的 Redis 一样使用, Codis 底层会处理请求的转发, 不停机的数据迁移等工作, 所有后边的一切事情, 对于前面的客户端来说是透明的, 可以简单的认为后边连接的是一个内存无限大的 Redis 服务。
小徐
2023/03/06
1.3K0
《快学BigData》--Codis总结(33)
TDSQL在微众银行的大规模实践之路
2014年:基于分布式的基础架构 微众银行在2014年成立之时,就非常有前瞻性的确立了微众银行的IT基础架构的方向:摒弃传统的基于商业IT产品的集中架构模式,走互联网模式的分布式架构。众所周知,传统银行IT架构体系非常依赖于传统的商业数据库,商业存储以及大中型服务器设备,每年也需要巨大的IT费用去维护和升级,同时这种集中式的架构,也不便于进行高效的实现水平扩展。从过往经验来看,当时除了oracle等少数传统的商业数据库,能满足金融级银行场景的数据库产品并不多。当时腾讯有一款金融级的分布式数据库产品TD
腾讯技术工程官方号
2019/08/20
1.5K0
TDSQL在微众银行的大规模实践之路
redis cluster(5)- redis集群应用和问题总结
1、新加节点,如果没有分配slot,没有执行redis-trib.rb reshard,
黄规速
2022/04/14
1.2K0
Redis集群方案对比:Codis、Twemproxy、Redis Cluster
数据持久化本质上是为了做数据备份,有了数据持久化,当Redis宕机时,我们可以把数据从磁盘上恢复回来,但在数据恢复之前,服务是不可用的,而且数据恢复的时间取决于实例的大小,数据量越大,恢复起来越慢。Redis的持久化过程可以参考《Redis持久化是如何做的?》。
Java技术栈
2020/09/22
5.3K1
Redis集群方案对比:Codis、Twemproxy、Redis Cluster
相关推荐
深入浅出百亿请求高可用Redis(codis)分布式集群揭秘
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档