前端知识体系4.前端工程化2.其它

本文目录

  • 1.简单介绍下前端模块化规范:Amd,Cmd,Commonjs和ES6的module
  • 2.babel的定义
  • 3.babel的工作流程
  • 4.Base64 的原理?编码后比编码前是大了还是小了
  • 5.说一说require标识符的加载规则

1.简单介绍下前端模块化规范:Amd,Cmd,Commonjs和ES6的module

AMD
AMD是RequireJS在推广过程中对模块定义的规范化产出。
AMD规范则是异步加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
CMD
CMD是SeaJS在推广过程中对模块定义的规范化产出。
CMD是同步模块定义,注意CMD也是异步加载。
二者的区别是前者是对于依赖的模块提前执行,而后者是延迟执行。 前者推崇依赖前置,而后者推崇依赖就近,即只在需要用到某个模块的时候再require。
CommonJS
Nodejs中使用的是这个规范。CommonJS的核心思想就是通过 require 方法来同步加载所要依赖的其他模块,然后通过 exports 或者 module.exports 来导出需要暴露的接口。
module.exports默认导出的是一个对象,如果在文件demo-b.js中什么代码都不写,然后在另外一个文件demo-a.js中导入这个文件

const b  = require('./b')
console.log(b)

b会是一个默认的对象,如果在demo-b.js中写入module.exports = '123',甚至让其等于一个函数,一个变量,在别的文件导入的时候也会导入对应的字符串/函数/变量。
注意:
exports是为module.exports,在导出的时候exports.xxx = xxx就相当于是module.exports.xxx = xxx,但需要特别注意的是,不能让exports直接等于某个对象或者其它类型的数据,这样会切断exports和module.exports的联系,所以为了避免产生不必要的错误,在使用CommonJS规范的时候,统一使用module.exports.xxx= xxx导出数据。
CommonJS模块是同步加载的,即只有加载完成,才能执行后面的操作。
CommonJS输出是值的拷贝,同时模块在首次执行后就会缓存,再次加载只返回缓存结果,如果想要再次执行,可清除缓存。
ES Module
在ES6中,我们可以使用 import 关键字引入模块,通过 exprot 关键字导出模块,功能较之于前几个方案更为强大,也是我们所推崇的。
在一个文件或模块中,export、import可以有多个,export default仅有一个。
export不能直接导出一个变量或者是一个其它类型的数据,在使用export导出时,对应的导入也需要通过{}进行解构才能获得export导出的数据,并且变量名也必须是一致的。
需要注意的是,export可以导出一个现定义的变量,比如

export const Id = {XXXX}

倒入的时候需要{}进行解构

import { Id } from 'xxxx'

export default的导出则可以自由很多,在导入的时候也可以自定义变量名,也不需要{}解构。

import 变量名 from ‘模块’

ES Module与CommonJS的对比

  • CommonJS 输出是值的拷贝,即原来模块中的值改变不会影响已经加载的该值,ES6静态分析,动态引用,输出的是值的引用,值改变,引用也改变,即原来模块中的值改变则该加载的值也改变。
  • CommonJS 模块是运行时加载,同步加载,因为node层本身的文件读写Io非常的快速,所以这种运行时的同步加载并不会带来什么显著的负面影响。而ES6 模块是编译时输出接口,支持异步加载。
  • CommonJS 加载的是整个模块,即将所有的接口全部加载进来,ES6 可以单独加载其中的某个接口(方法)。

2.babel的定义

Babel 是一个 JavaScript 编译器
Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

3.babel的工作流程

Babel的编译过程和大多数其他语言的编译器相似,可以分为三个阶段:

  • 解析(Parsing):将代码字符串解析成抽象语法树(AST)。
  • 转换(Transformation):对抽象语法树进行转换操作。
  • 生成(Code Generation): 根据变换后的抽象语法树再生成代码字符串。

4.Base64 的原理?编码后比编码前是大了还是小了

Base64是一种基于用64个可打印字符来表示二进制数据的表示方法。编码后的数据比原始数据略长,为原来的4/3。

5.说一说require标识符的加载规则

1.如果是以“./”“../”“/”开头的,会被定义为路径形式的模块(./ 代表当前目录,../ 代表上一级目录, /表示的是当前所在的磁盘根路径,这种表达形式在项目中几乎不会使用。)
2.如果不是以“./”“../”“/”开头的,则会验证是否为node的核心模块,如fs,http(核心模块文件已经被编译到了二进制文件中了,我们只需要按照名字来加载就可以了)。
3.如果前两者都不是,则会按照第三方模块进行加载。
第三方模块的加载规则:
var template = require('art-template')

  • 先找到当前文件所处目录中的 node_modules 目录,看看这个目录下是否有art-template文件夹,如果有的话,则看art-template文件夹下是否有package.json 文件,
  • 在package.json 文件中一般会有个main属性,这个属性中记录了这个模块的加载入口。然后加载使用这个第三方包,实际上最终加载的还是文件。
  • 如果 package.json 文件不存在或者 main 指定的入口模块也没有
    则 node 会自动找该目录下的 index.js,也就是说 index.js 会作为一个默认备选项
  • 如果以上所有任何一个条件都不成立,则会进入上一级目录中的 node_modules 目录查找,如果上一级还没有,则继续往上上一级查找。。。
  • 如果直到当前磁盘根目录还找不到,最后报错:can not find module xxx
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,165评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,720评论 1 298
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,849评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,245评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,596评论 3 288
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,747评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,977评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,708评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,448评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,657评论 2 249
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,141评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,493评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,153评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,108评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,890评论 0 198
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,799评论 2 277
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,685评论 2 272

推荐阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,234评论 4 31
  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,704评论 0 1
  • 1.webpack与grunt、gulp的不同? Grunt、Gulp是基于任务运行的工具: 它们会自动执行指定的...
    北冥有鱼_425c阅读 2,068评论 0 4
  • webpack 是什么? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(mo...
    IT老马阅读 3,280评论 2 27
  • 她是第一个到达镇子小广场的人。尽管天公不作美,淅淅沥沥的雨打湿了衣裳和头发,她还是提前一个小时到达了集结地。 雨赶...
    山风小语阅读 370评论 22 25