欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 编程资源 > 编程问答 >内容正文

编程问答

requirejs 使用实例

发布时间:2025/3/20 编程问答 63 豆豆
生活随笔 收集整理的这篇文章主要介绍了 requirejs 使用实例 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

作为前端开发人员,模块化编程是其身边一个重要工具。它可以规范你的代码,解决由于多个js之间的可能存在的依赖关系,并且提升网页渲染速度。

首先来个简单的例子,实现一个简单的jia,jian,cheng,chu。


先看例子:

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title></title><script type="text/javascript" data-main="page.js" src="require.js"></script> </head> <body> </body>

很简单,data-main设置主模块page.js。这个模块一开始就加载执行。

console.log("马上执行") require(['math'], function( _m ){console.log(_m)console.log(_m.jia(1,2)) })

然后是math.js

define(function(){var jia = function(a, b){return a+b;}var jian = function(a, b){return a-b;}var cheng = function(a, b){return a*b;}var chu = function(a, b){return a/b; }return {jia: jia,jian: jian,cheng: cheng,chu: chu} })

输出:

马上执行

Object { jia=function(), jian=function(), cheng=function(), 更多...}

3

这个例子非常简单,所有文件都在同一个目录下。但是还有一些情况

 

情景一:如果我的js是在另外一台主机,如何使用require.js

还是上面的html,main.js改成

requirejs.config({paths: {'jquery': 'http://skin.huitu.com/js/jquery-1.8.3.min'//注意,这里没有.js。在这里很容易出错} });require(['jquery'], function ($) {console.log($) });

 

情景二:我在维护一个稳定的项目,之前的开发没有用到require.js,新需求的开发我想用require.js。

require(['old1', 'old2', 'old3']);requirejs.config({paths: {'jquery': 'http://skin.huitu.com/js/jquery-1.8.3.min'} });require(['jquery'], function ($) {console.log($) });

转载于:https://www.cnblogs.com/pfzeng/p/4184862.html

总结

以上是生活随笔为你收集整理的requirejs 使用实例的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。