node相关--代码共享

时间:2023-03-08 21:48:36
node相关--代码共享

代码共享问题:

  • 是否值得在两个环境中运行同一份代码; //看项目
  • 依赖的API是否在两个环境中都有或有替代;
    • 浏览器提供的标准API:XMLHttpRequest、WebSocket、DOM、canvas等;
    • Node.js可加载的模块;

书写兼容的JS代码:

  • 导出模块://浏览器本身环境没有module全局变量;例子:
    • add.js: //在node和浏览器上都能运行;
      (function (module) {
      module.exports = function (a, b) {
      return a + b;
      }
      if ('undefined' != typeof window) {
      window.add = module.exports;
      }
      })('undefined' == typeof module ? { module: { exports: {}}} : module);
  • 模拟实现ECMA API://一些主流浏览器中的特性在其他浏览器和JS引擎中都没有
    • 扩展原型:好处在添加填补之后几乎不用修改源代码;缺点在会破坏原型,影响其他使用者;例子
    • 工具函数:定义简单的函数,接收原型对象作为参数如果该对象上的函数已经实现,直接使用;否则实现一次;优点是没有隐患,缺点是会代码冗长;
      var keys = Object.keys || function(obj) {
      ..........
      }
  • 模拟实现Node API: node社区书写了可以在所有环境中运行的Node API;  EventEmitterassert
  • 模拟实现浏览器端 API:  现在已经模拟实现了包括XMLHttpRequestDOMWebSocketcanvas在内的多种node.js模块;

用browserbuild集成: //将以Node风格书写的代码编译为浏览器可执行的版本;

  • 例子:
    • 安装:全局, npm install -g browserbuild;
    • node.js代码:
      //log.js
      module.exports = function(str) {
      return console.log(str);
      }
      //main.js
      var log = require('./log'); module.exports = function() {
      log('Executed my module');
      } //node执行:
      var mymodule = require('./log');
      mymodule();
    • 编译:
      browserbuild  --main main --global mymodule main.js log.ja > out.js
    • 浏览器端使用:
      <scritp src='./out.js'></script>
      <script>
      mymodule();
      </script>