前端速学成财:第三课-粗糙的玩一玩javascript的"编译"

1.学会对象属性获取
2.NodeJSP的FS模块使用
3.发明个”编译”JS的过程
4.简单了解global对象

1.根据前两节课我们发现 js文件需要考node来解析才能运行,那这个和我们发开前端有什么关系呢?
比如:我们新建一个HTML(index.html) ,然后在代码里 引用我们上节课的aa.js
<script src="aa.js"></script>
然后我们发现并不能运行。
ReferenceError: require is not defined
因为 目前为止 浏览器里还不支持require(不代表未来不支持)

我们开动大脑想一想:
既然node能运行aa.js,name我们是否通过nodejs把require出来的东西给生成一个js文件呢

首先我们把var getlib=require('./slib'); 这里的getlib打印出来 看看他是什么.
{ age: 20, showName: [Function] }
我们会发现 其实他就是一个对象格式。

我们来用循环的方式来打印出getlib里的属性名和值

for(var obj in getlib){
    console.log(obj+"="+getlib[obj]);
}

结果:

age=20
showName=function ()
{
        console.log("sxin");
}

PS:如果getlib[obj]() 加个小括号 可以执行函数.

2.fs模块:专门用来处理文件的内置模块

var file=require('js');
file.readFile   //读文件
file.writeFile  //写文件,每次都会覆盖
file.appendFile //追加文件

最后代码:

var getlib=require('sxin');

var file=require('fs');

function genCode(key,value)
{
    return 'var '+key+'='+value+';\n';
}

file.writeFile("build.js","");

for(var obj in getlib){
    file.appendFile("build.js",genCode(obj,getlib[obj]));
}
file.appendFile("build.js","showName();\n");

然后我们把index.html里的aa.js 改成build.js
然后运行。 ok。

这个呢就是我们一个简单的 所谓的”编译”。当然 真正的使用一些复杂的方法 模块,还是很复杂的。 现在只是把思路捋一捋。

扩展:
我们现在通过自己写死的一个getlib加载的脚本文件。 如果我们加载了很多js文件, 那我们是不是要一个一个循环呢?

4.NodeJS的global对象
如果我们用浏览器运行javascript,他有个window顶级对象。
那NodeJS呢?肯定也是有的,他叫做global
我们可以用console.log(global);来查看
PS:看看(瞄一眼)就行.
获取当前脚本的所有对象:只需要循环,global.process.mainModule.children 这个子对象就行

最后代码:

var getlib=require('sxin');

var file=require('fs');

function genCode(key,value)
{
    return 'var '+key+'='+value+';\n';
}

file.writeFile("build.js","");

for(var i=0;i< global.process.mainModule.children.length;i++)
 {
   var child=global.process.mainModule.children[i];
   for(var bb in child.exports)// child.exports就是我们导出的属性
       file.appendFile('build.js',genCode(bb,child.exports[bb]));
 }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值