您的位置:主页 > 社保 >

WEB前端模块千亿棋牌化都有什么?

2020-06-06     来源:         内容标签:WEB,前端,模块,千亿棋牌,化,都有,什么

导读:前言说到前端模块化,你第一时间能想到的是什么?Webpack?ES6Module?还有吗?我们一起来看一下下图。相信大伙儿对上图的单词都不陌生,可能用过、看过或者是只是听过。那你能不能

前言

说到前端模块化,你第一时间能想到的是什么?Webpack?ES6Module?还有吗?我们一起来看一下下图。

相信大伙儿对上图的单词都不陌生,可能用过、看过或者是只是听过。那你能不能用一张图梳理清楚上述所有词汇之间的关系呢?我们日常编写代码的时候,又和他们之间的谁谁谁有关系呢?一、千丝万缕

为了更贴合我们的日常开发场景,我们尝试先从不同平台的维度区分,作为本文的切入点。

1.根据平台划分

平台规范特性浏览器AMD、CMD存在网络瓶颈,使用异步加载非浏览器CommonJS直接操作IO,同步加载可以看到我们非常暴力的以是不是浏览器作为划分标准。仔细分析一下,他们之间最大的差异在于其特性上,是否存在瓶颈。例如说网络性能瓶颈,每个模块的请求都需要发起一次网络请求,并等待资源下载完成后再进行下一步操作,那整个用户体验是非常糟糕的。根据该场景,我们简化一下,以同步加载和异步加载两个维度进行区分。

特性规范同步加载CommonJS异步加载AMD、CMD2.AMD、CMD两大规范

先忽略CommonJS,我们先介绍下,曾经一度盛行的AMD、CMD两大规范。

规范约束条件代表作AMD依赖前置requirejsCMD就近依赖seajsAMD、CMD提供了封装模块的方法,实现语法上相近,甚至于requirejs在后期也默默支持了CMD的写法。我们用一个例子,来讲清楚这两个规范之间最大的差异:依赖前置和就近依赖。

AMD:

//hello.jsdefine{console.log;return{getMessage:function{return'hello';}};});//world.jsdefine{console.log;});//maindefine{return{sayHello:function{console.log);}};});//输出//helloinit//worldinit复制代码

CMD:

//hello.jsdefine{console.log;exports.getMessage=function{return'hello';};});//world.jsdefine{console.log;exports.getMessage=function{return'world';};});//maindefine{varmessage;if{message=require.getMessage;}else{message=require.getMessage;}});//输出//helloinit复制代码

结论:CMD的输出结果中,没有打印"worldinit"。但是,需要注意的是,CMD没有打印"worldinit"并是不world.js文件没有加载。AMD与CMD都是在页面初始化时加载完成所有模块,唯一的区别就是就近依赖是当模块被require时才会触发执行。

requirejs和seajs的具体实现在这里就不展开阐述了,有兴趣的同学可以到官网了解一波,毕竟现在使用requirejs和seajs的应该很少了吧。

3.CommonJS

回到CommonJS,写过NodeJS的同学对它肯定不会陌生。CommonJS定义了,一个文件就是一个模块。在node.js的实现中,也给每个文件赋予了一个module对象,这个对象包括了描述当前模块的所有信息,我们尝试打印module对象。

//index.jsconsole.log;//输出{id:'/Users/x/Documents/code/demo/index.js',exports:{},parent:{module},//调用该模块的模块,可以根据该属性查找调用链filen@AnsonB@SEO@ame:'/Users/x/Documents/code/demo/index.js',loaded:false,children:[...],paths:[...]}复制代码

文章链接地址:/shebao/20200606/5836.html

上一篇:谁说程序员都是钢铁直男不懂爱,每天用Python自动千亿棋牌游戏给女友发短信
下一篇:数字商业中的企千亿棋牌业:竞什么,争什么