• 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

  • 相关阅读:
    03-java实现双向链表
    04-java实现循环链表
    02-java实现单链表
    01-java实现动态数组
    安装mpi的那些坑
    gotoblas,mpich,hpl,hpcg的安装
    centos之hadoop的安装
    公告
    AFO之后……
    Codeforces Round #599 (Div. 2)的简单题题解
  • 原文地址:https://www.cnblogs.com/zyh1989/p/6232344.html
Copyright © 2020-2023  润新知