require.js的主要作用是js的工程化,规范化:
1)它是一个js脚本的加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行。
并提供了在加载完成之后的执行相应回调函数的功能;
2)它要求js脚本的模块化,也就是文件化;require.js的作用之一就是加载js模块,也就是js文件。所以我们的js的书写应该模块化,也就是文件化。
3)它可以管理js模块/文件之间的依赖; js模块化,文件化之后,它们之间的依赖可以通过require.js优雅的解决;
4)require.js中提供的优化器 r.js 可以来优化页面中的js脚本和css文件,达到提高页面响应速度,减少页面所需要的http/https请求次数。在极端优化的情况下,通过r.js优化之后的页面只需要一次js脚本请求和一次CSS文件请求。这就极大的减少了页面所需要的http/https请求的次数,提高了页面的加载速度。r.js的优化分为两种方式:一是压缩js和css文件,也就是去掉空格,空行,将长变量名换成短变量名之类的;二是合并多个js文件为一个js文件,合并多个css文件为一个。
5) 通过使用require.js之后,我们只需要在页面引入一行,甚至也可以只引入一行
node.js实现思路:
- step1:先找到文件,如果文件,如果文件不存在,consle cann`t find module ‘…’
- step2: 读取文件,文件是js代码
- step3: 营造一个私有空间,执行以上js代码
- step4: 返回导出的模块
具体实现代码
// 封装$requrie函数
function $require(id){
/**
* step1:先找到文件,如果文件,如果文件不存在,consle cann`t find module '...'
step2: 读取文件,文件是js代码
step3: 营造一个私有空间,执行以上js代码
step4: 返回值
*/
const fs = require('fs');
const path = require('path');
// filename是id对应的绝对路径
const filename = path.join(__dirname, id);
// dirname是id对应的目录路径
const dirname = path.dirname(filename);
// 同步读取代码,不能是异步,因为异步不能返回值
let code = fs.readFileSync(filename, 'utf8');
// 定义一个数据容器,用来盛放模块导出的成员
let module = {id: filename, exports: {}};
let exports = module.exports;
code = `(function($requrie, module, __dirname, __filename){
${code}
})($require, module, dirname, filename);`;
eval(code);
return module.exports;
}
// 测试
var m = $require('./mcode.js');
m.say('hello require');