封装公共js,使其他页面可以调用

最新推荐文章于 2024-02-02 16:17:41 发布
最新推荐文章于 2024-02-02 16:17:41 发布
阅读量3.3k 收藏 3
点赞数 1
分类专栏： 前端(Web) Jsp 文章标签： html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46713508/article/details/117676798
版权
本文介绍了如何在项目开发中创建一个公共JS文件以提高代码复用性和效率。通过在Springboot项目的静态资源目录下创建js文件夹，然后编写公用脚本代码，例如'LongTimeNoOperate.js'，并在其他页面中通过引用该脚本实现功能。这种方法简化了代码管理，确保了页面间的代码一致性，并提高了开发效率。
摘要由CSDN通过智能技术生成

项目开发中如果一个经常被使用的js或者方法需要被重复使用,我们如果每次使用都要复制粘贴一遍会很麻烦也会显得效率比较低,今天就简单做个例子就写一个公用的js使得所有页面直接引用就行非常方便

1在合适的位置创建js文件写入公用脚本代码

我这个以springboot项目为例
1.1先在静态资源下创建js文件夹
在这里插入图片描述
1.2然后在js文件夹下创建js文件
在这里插入图片描述

最终目录

在这里插入图片描述
1,3写入公用代码
在这里插入图片描述

2.其他页面引用

<script src="../js/LongTimeNoOperate.js"></script>

在这里插入图片描述
在这里插入图片描述

经过测试,引用放在上面下面都是可以正常使用的

3.查看效果

在这里插入图片描述

小花皮猪
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【js封装】js封装自己的公共方法，以后方便调用
qq_40273285的博客
06-26 7225
从事前端开发快一年了，很多东西都是不系统的，尽管保存，但是调用还需要去找，浪费时间，所以我要封装一个文件，直接引入文件，调用省事省时间。 正文： 首先我想到有两种封装方法，一个是prototype，另一个是class(最后选择了class封装，因为群里的一个大哥解释：prototype是用在(构造)函数上的，函数的prototype就是在没es6的class时候对class的模拟) 前期我对...
封装JS文件到DLL中并在页面中调用
liesmars
08-25 2255
通常在ASP.NET,我们常常会用到JS脚本来实现页面上的很多操作。在页面中引用JS的方法也是有好几种。这里来介绍一下，如何将JS脚本内嵌到组件(Assembly)中，即DLL中。这样的做法最大的好处就是能够保护JavaScript文件的内容，避免JavaScript类的定义被修改。下面就以一个示例来讲解如何操作：1.打开VS，新建一个WebApplication1项目[这里新建网站也可以]，采用默认设置。2.在当前解决方案中添加新项目。（类库： JSLib），如图：添加后，默认的会有一个Class.cs文
js函数封装及外部调用
lovebosom的博客
06-30 6338
今天遇到web开发，因前端同事离职，只能自己来开发前端了 ，想封装些公共方法，方便其他模块调用。 1，封装对象方式 var hs = { baseurl:"12gggg", login:function(){ return 333; }, keeplive:function(){ return 123; }, } 外部调用：console.log("1-"+hs.baseurl); console.log("1-"+hs.keeplive()); 结果如图...
js定义全局方法
while(life)++；
01-26 1625
定义全局方法 window['aaa']=function(){ alert("aaaa"); } 子页面调用 parent.aaa();
在一个js文件的方法中如何调用另一个js文件中的方法
u013017173的博客
07-28 4081
在一个js文件的方法中如何调用另一个js文件中的方法 直接把两个js文件引入到html页面中，后面的JS文件是可以调用前面JS中的方法的，对你的例子就是先引入a.js再引入b.js，这样就可以在b()中调用 a()了。 ...
vue之封装多个组件调用同一接口的案例
11-19
本文将探讨如何在Vue中封装公共方法，以实现多个组件调用同一接口并返回接口调用的结果。 首先，让我们看一个简单的例子。在描述中提到的`getAll()`函数是一个尝试获取所有教师数据的接口调用。它使用了一个名为`$...
JavaScript中Require调用js的实例分享
10-19
通过以上介绍，我们可以看到Require.js提供了一种有效的机制来管理和组织JavaScript代码，使得大型项目中的模块化开发变得更加有序和高效。通过定义和加载模块，我们可以避免命名冲突，明确代码依赖，以及优化脚本...
微信小程序如何引用外部js，外部样式，公共页面模板
01-03
小程序引用外部js //封装的函数 function GetUserInfo2018() { console.log(获取用户信息8888) } function count(str) { .../*其它页面调用 var common = require(../common/common.js); common.GetUserInfo2018
微信小程序引用公共js里的方法的实例详解
10-19
要在页面的JS文件中引用这些方法，首先需要使用`require`函数加载公共JS文件，然后通过模块对象调用所需的函数。 ```javascript // pages/test/test.js var util = require('../../utils/util.js'); Page({ ...
微信小程序HTTP请求从0到1封装
10-16
为了实现这些功能，我们可以按照以下步骤进行封装： 1. **创建请求实例**： 我们可以创建一个名为Axios的类，这个类内部维护了一个null实例和默认配置。通过`getInstance`静态方法确保单例模式，避免重复创建实例...
js几种常见的方法封装，方便调用
01-08
对于有的方法，逢用便创建，显得太麻烦不说，无形之中增加了我们的工作量，于是我们可以将常用的一些方法进行封装，以后我们就可以随用随拿啦。 注意：        在封装一个方法之前，我们要先给方法起一个名字，最好是语义化名字，方便以后的理解，对优化和查找等方面都有好处。        方法里面需要的参数我们可以设置参数名，可以看哪些是需要的就进行提取并且写到参数名的位置；        还要注意一定要返回需要的值，不然会报错；        并且在使用的时候一定要保证和参数名字是一一对应的。 1、阻止事件冒泡封装 function stopBubble(eve){ if(event.sto
【uniapp开发小程序】封装一个公共接口，每次点击不同页面时都会调用
最新发布
weixin_48596030的博客
02-02 1141
【uniapp开发小程序】封装一个公共接口，每次点击不同页面时都会调用
JS中创建对象及调用
qq_44675204的博客
08-02 216
1、字面量方式 let person = { name: '张三', age: 18, hobby() { console.log("我想打篮球！") } } 2、构造函数 let person2 = new Object(); person2.name = '李四'; person2.age = 20; person2.hobby = () => {console.log("我想踢足球！")}; 3、Object.create() 属性会被挂载到原
JS文件调用、封装及模块化
qq_41751699的博客
08-02 2141
最近可能是习惯了angular、vue之类的前端框架组件化开发的模式，在重新学习JavaScript的过程中总想着用一样的开发模式，通过归类以往的项目经验、整理一点JS文件之间使用的模式，不足之处还望读到此文的大神给出指正，在此感谢！ 首先，最简单的两个js文件的之间的方法的调用 在html文件中引入调用： // index.html <html lang="en"> &lt...
VUE 中封装公共js 全局化定义变量 调用公共方法
前端互助会
02-24 2125
1.首先，在assets中建立公共js => config.js 2.在config.js 中 封装全局定义变量 和 公共方法 const dev = { dataType:[ {dataName:'图片',dataId:'1'}, {dataName:'视频',dataId:'2'}, {dataName:'语音',dataId:'3'}, {dataName:'文本',dataId:'4'}, ...
封装js文件(查询，编辑，删除，添加，分页)等基本功能
qq_33968099的博客
08-27 381
封装js文件(查询，编辑，删除，添加，分页)等基本功能 在小公司做项目人少，单独开发前端功能，自己封装好之后，在做页面可以特别快，代码复用性也很强 基于vantui封装一个共用的js文件 自己命名 import modalConfirmLoading from './modal-confirm-loading' export default { mixins: [modalConfirmLoading], data () { return { addModal: false,
使用js让在html中引入公共的html页面（通过模块化实现头尾共用的效果）
LowVoice的博客
02-23 3314
在写项目的过程中常常会遇见多个页面会使用相同的头部、尾部，要是每个页面代码都复制一遍的话，工作量会增，而且不便于后期修改。这时候就要将公共部分的代码提取出来，放入单独的HTML等需要的时候再调用。 首先需要下载个requirejs 下载 requirejs非常简单，我们只需要定义在页面加载的时候，引入requirejs并且，把要引入的js路径指定在data-main中，在要引入的js路径中引入我们...
JavaScript封装方法并使用
simple5960的博客
10-11 691
1.新建一个JS文件，里面写要封装的方法 记得，如果要使用此方法，一定要把它暴露处去，然后在另外一个JS文件接收此暴露的方法就可以使用了 2.使用此封装的方法
js - 封装常用的公共方法
weixin_38673922的博客
04-22 3067
【获取当前时间的年月日 时分秒】 function getTime() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; var day = date.getDate() var hours = date.getHours(); //时 var minutes = date.getMinutes(); //分 var seconds = date.g.
微信小程序封装独立公共js，其它页面调用
05-25
你可以将公共的 JavaScript 代码封装到一个单独的文件中，并在小程序的 app.js 文件中引入它。这样，整个小程序都可以共享这些公共函数和变量。 具体操作步骤如下： 1. 在小程序根目录下创建一个名为 utils 的文件夹，用于存放公共 JavaScript 文件。 2. 在 utils 文件夹中创建一个名为 common.js 的文件，并在其中编写公共的函数和变量。 3. 在 app.js 文件中通过 require() 方法引入 common.js 文件，如下所示： ```javascript // app.js const common = require('./utils/common.js') App({ // ... }) ``` 4. 在需要使用公共函数或变量的页面中，也通过 require() 方法引入 common.js 文件，如下所示： ```javascript // pages/index/index.js const common = require('../../utils/common.js') Page({ // ... }) ``` 这样，你就可以在整个小程序中使用 common.js 中定义的函数和变量了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小花皮猪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值