度量快速开发平台-业界最好的全功能软件开发平台

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 部件 流程 SQL
查看: 116|回复: 6

[分享] 三种前端模块化规范

[复制链接]

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
发表于 2018-2-15 17:25:12 | 显示全部楼层 |阅读模式
说到模块化,不可否认这已经成为了前端开发的一个共识,而本人在开发中也逐渐接受了模块化这种理念,并且深深滴体会到模块化开发的好处。为啥这么说呢?来看一段简单的代码:(不使用模块化)


  
  这是在未使用模块化之前经常可以见到的一种现象:把一堆js放在body底部,可是你知道吗?这种方式存在两个很大的问题:
  1,root.js,tree.js,leaf.js这三者从上到下的顺序不能乱,因为leaf依赖tree,而tree又依赖root,顺序一变就跑不通了;
  2,如果我是一个新手或者接盘侠,拿到leaf.js的时候,我知道它要依赖tree.js,但是我知道tree.js其实是依赖root.js的吗?也许root.js又要依赖别的js才能跑得起来呢?
  模块化这时候就出现了,正是为了拯救这种js文件之间不确定的依赖关系而来。
  AMD规范
  说到这个规范,现在用的人已经是少之又少了,这个规范的基石在于,你要在html文件中先引入一个require.js,就好像你用jQuery的语法就要先把jQuery.js加载进来一样。引进这个讨厌的require.js之后,在一堆js文件中,分为三类:
  第一类:单纯的define(),由于在require.js中,对于资源的引用(也就是资源作为参数传入)一定要先define,再require/define,这类负责纯定义;
  第二类:有参数的define(["其他定义好的的js"]),在这类中,把其他define好的js引用进来,同时自己又再define另外一个东西,承担着双重职责;
  第三类:单纯的require(["其他定义好的的js1","其他定义好的的js2",...]),在这一类,只需负责专心引用资源,可以引用很多资源。
  怎么样?是不是感觉贼麻烦。需要全局定义函数,又要引用什么require.js,怒弃之。
  CMD规范
  其实CMD与AMD规范并没什么本质的区别,区别在于他们对依赖模块的执行时机处理不同。虽然两者都是异步加载模块,但是AMD依赖前置,js可以方便知道依赖模块是谁,要依赖什么js那就先加载进来,至于你要依赖这些js来干吗得先等着,等我加载完了资源再商量;而CMD就近依赖,需要使用这个依赖模块时,我再加载进来用。
  这就好比什么呢?就好像我今晚要看5集三国演义。AMD是先打开五个窗口,分别是1~5集,都缓冲着先,反正等下每集我都要看的;CMD则是先打开第一集的窗口,等到我第一集看完了,想看第二集了,就再跳转到第二集。
  CommonJS规范
  总的来说,以上两种都不是我的菜,现在使用频率最高的,也是大家公认的好的模块化规范,是CommonJS。
  CommonJS就很简单了,一个js文件要输出去,只需使用module.export={xxx:你要输出的内容},而在另外一个js中,你要引用什么,就通过var xxxx=require("xxxx")引用进来就行了,这玩意并不是异步加载模块,而是同步一次性加载出来。个人感觉,这个规范可以说有些不错,甚至用“666”来形容它也丝毫不虚,推荐大家用这规范。

回复

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-15 17:26:04 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-16 17:55:49 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-16 17:56:16 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-19 17:25:05 | 显示全部楼层
回复 支持 反对

使用道具 举报

231

主题

2541

帖子

5807

积分

论坛元老

Rank: 8Rank: 8

积分
5807
 楼主| 发表于 2018-2-19 17:25:33 | 显示全部楼层
回复 支持 反对

使用道具 举报

542

主题

5919

帖子

1万

积分

作者

Rank: 7Rank: 7Rank: 7

积分
13589
发表于 2018-2-22 13:47:21 | 显示全部楼层
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|重庆度量科技  本站关键词:快速开发平台

GMT+8, 2018-8-18 21:56 , Processed in 0.270485 second(s), 25 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表