zoukankan      html  css  js  c++  java
  • Electron中Jquery的引入方式

    Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标准,当Window中存在require时,会启用模块引入的方式,导致报错 Uncaught ReferenceError: $ is not defined,本文研究了高低版本jQuery引入的正确方式。

    1. 报错原因

    Electron默认启用了Node.js的require模块,而jQuery等新版本框架为了支持commondJS标准,当Window中存在require时,会启用模块引入的方式.

    2. 几种引入方式

    方式1,html页面直接引入:

    		<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    

    经测试jquery-1.9.1可以,jquery-1.11.1按这种方式报错

    方式2,html页面引入时:

    	<script>window.$ = window.jQuery = require('./js/jquery-1.11.0.min.js');</script>
    

    经测试jquery-1.11.0可以,jquery-1.9.1按这种方式报错

    方式3,html页面引入时重命名并删除对象

    		<head>
    			<script>
    			window.nodeRequire = require;
    			delete window.require;
    			delete window.exports;
    			delete window.module;
    			</script>
    			<script type="text/javascript" src="./js/jquery-1.9.1.min.js"></script>
    		</head>
    

    经测试jquery-1.9.1可以,jquery-1.11.1按这种方式报错

    方式4,去掉框架中的模块引入判断代码,将jQuery中的第一行代码中的

    		!function(a,b){"object"==typeof module&&"object"==typeof module.exports? module.exports=a.document?b(a,!0):function(a){if(!a.document)throw new Error("jQuery requires a window with a document");return b(a)}:b(a)}
    

    改为

    		!function(a,b){b(a)}
    

    html页面引用时

    		<script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
    

    jquery-1.11.0成功,而jquery-1.9.1中第一行没有这个代码,故不能采用这种方式

    方式5,如果开发了一定的量,而且不想使用Node.js模块,大可以去掉require模块化引入,直接使用以下方法禁用Node.js的require模块化引入,即可正常使用任何框架

    			 // In the main process.
    			let win = new BrowserWindow({
    			  webPreferences: {
    			    nodeIntegration: false
    			  }
    			});
    

    总结

    低版本JQuery建议方式1,高版本JQuery建议方式2;不使用Node.js模块的话可以尝试方式5

    参考资料

    Electron基础 - 解决无法使用jQuery/RequireJS/Meteor/AngularJS 的问题 - GuanYong
    electron中怎样导入jquery不报错 - jykl

  • 相关阅读:
    H3C S3600-28TP-SI配置命令
    笔记本双网卡内外同上
    计算机存储单位与宽带单位
    linux 设置网卡
    linux 挂载命令详解
    vue实现京东动态楼层效果
    js字符与ASCII码互转的方法
    UartAssist串口调试工具
    高字节和低字节是什么意思?
    int16, int32, int64等类型说明
  • 原文地址:https://www.cnblogs.com/zyh1989/p/6232344.html
Copyright © 2011-2022 走看看