zoukankan      html  css  js  c++  java
  • 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>

     

  • 相关阅读:
    vue单页面
    禁止系统默认右键并执行自己的程序
    jquery-ui拖动
    jquery鼠标右键功能 备忘
    日历插件 备忘
    兼容于苹果手机的点击方法
    js判断设备访问入口
    微信小程序点击显示某个view
    微信小程序数量减
    点外层div关闭,点里层不关闭
  • 原文地址:https://www.cnblogs.com/jinkspeng/p/4131664.html
Copyright © 2011-2022 走看看