如何在单独js文件中引用Jquery

    其实这个问题并不是一个方法性的问题,我也不需要提示你如何操作,只需要帮助你理解其中原理,你也许就恍然大悟了

这里我先说结果给那些心急的同学先用,

    其实你如果希望在单独的js文件里使用Jquery,直接使用就可以了,你不需要任何的引入操作,因为引入操作在前端页面已经执行了,你在单独的js文件里所需要的东西等于前面已经有了,当然可以直接使用了.当然前端页面的引入顺序当然也需要jquery库文件在前面,而你的js文件放在后面,顺序不能错了,因为js是解释型 语言,从前往后执行,你不能在没有的时候 就使用.

    我举一个简单的例子说明 

这是我的前端 页面执行一个弹出窗口提示消息 ,但是利用了jquery的$(document).ready()方法,这个部分单独写在一个js文件里面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习jquery</title>
<script type="text/javascript" src="js/jquery1.9.1/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="js/jqueryStudy.js" ></script>
</head>
<body>
</body>

</html>

下面是我的单独 的js 文件内容

$(document).ready(
function() {
alert("ddddd");
}

)

看 是不是发现了什么 ,我在单独的js文件里写的内容其实 就是正常 情况下你会在网页的<script></script>里面写的内容一样,其实 网页在处理引入操作的时候也不过是把文件的内容进行了拼接。这也许就是因为家编译型 语言用得多了,而突然换成一种更直白的方式 大家反而不适应了。

                                                                                                                                                        -----(by xiaoguo)


可以考虑使用 Webpack 的代码分离功能,将需要单独引入js 文件打包成独立的 chunk,然后在网页使用动态加载的方式引入这些 chunk。具体步骤如下: 1. 在 webpack 配置文件,使用 `entry` 属性指定需要分离的 js 文件,如下所示: ```javascript entry: { vendor: ['jquery', 'lodash'], app: './src/index.js' } ``` 上面的例子,我们将 `jquery` 和 `lodash` 两个库文件分别打包成 `vendor` chunk,将应用程序入口文件 `index.js` 打包成 `app` chunk。 2. 在网页模板,使用 `script` 标签引入打包后的 `app` chunk: ```html <html> <head> <title>My App</title> </head> <body> <div id="app"></div> <script src="dist/app.bundle.js"></script> </body> </html> ``` 注意,这里只需要引入 `app` chunk,因为 `vendor` chunk 已经被打包成独立的文件了。 3. 在应用程序,使用 `import()` 方法动态加载需要单独引入js 文件,如下所示: ```javascript import(/* webpackChunkName: "my-lib" */ './my-lib.js') .then(myLib => { // 使用 myLib }) .catch(error => { console.log('Failed to load my-lib', error); }); ``` 上面的例子,我们使用 `import()` 方法加载一个名为 `my-lib.js` 的文件,并将它打包成独立的 chunk,并命名为 `my-lib`。然后我们在 `then` 方法使用加载好的 `myLib`。 这样做的好处是,可以将网页不必要的 js 文件打包成独立的 chunk,减小网页的加载时间,提高用户体验。同时也不会影响正常网页引用
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值