用node.js实现require.js

16 篇文章 0 订阅
9 篇文章 0 订阅

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');
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值