首页 > requirejs 使用实例

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

更多相关:

  •   /*禁止缩放safari浏览器*/ var scale = {disabledSafari: function () {/* 阻止双击放大*/var lastTouchEnd = 0;document.addEventListener("touchstart", function (event) {if (event.touch...

  •   $g.$utils = {/**舒工Ajax-lite 1.0 -- 最精简的ajax自定义访问方法*/ajax: function (o) {var p = o.post, g = o.get, d = p.data, a = p.async, J = 'json', j = p[J], s = g.success, e =...

  •   Sg.js框架核心概念: 1)所有变量、方法、类对象全部都是从属于$g主树,由$g分支出很多$g.变量名、$g.方法、$g.对象id、$g.类;2)获取控件内部属性必须使用公开的get方法获取,禁止直接用访问内部变量方式来获取控件内部变量、属性值;3)修改控件内部属性、绑定方法等都必须使用公开的set方法来操作,禁止直接用访问...

  •  一、ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMode: "adjustResize" // 弹出软键盘时自动改变webview的高度 }); 2 增加样式 html...

  • 前端发送Ajax请求到服务器,服务器返回数据这一过程,因原因不同耗时长短也有差别,且这段时间内页面显示空白。如何优化这段时间内的交互体验,以及长时间内服务器仍未返回数据这一问题,是我们开发中不容忽视的重点。 常见的做法是: 1、设置超时时间,一旦时间超过设定值,便终止请求;2、页面内容加载之前,手动增加一个 loading 层。 代码...

  • /*判断屏幕宽高比是否为16:9*/ function isScreen16to9() {return window.screen.height / window.screen.width === 9 / 16; }...

  • /*关闭、刷新、跳转、离开当前网页前提示*/ onbeforeunload = function () {return false; };  ...

  • let json = {/**判断JSON格式*/ isJSON: function (str) {if (typeof str == "string") {try {var obj = JSON.parse(str);if (typeof obj == "object" && obj) {return true;} else {...

  •   项目结构   index.js //必须要安装否则就别想运行了❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤ //npm i body-parser -D & cnpm i express & cnpm i node-xlsx & cnp...

  • 一、递归 函数    为什么要有函数,提高代码的可读性,避免重复的代码,提高代码的复用性      在函数中能用return的不要print 1、递归的最大深度997 def foo(n):print(n)n+=1foo(n) foo(1) 递归的最大深度 2、修改递归的最大深度     由此我们可以看出,未报错之前能看到的最大数...

  •     $.ajax({type: "POST",url: "http://127.0.0.1:9999/api/demo/CURD",data: JSON.stringify({token: "sgToken",jsonPath: "user",username: "测试账号",password: "123456",name:...

  • var a = {a: 1}; var b = {b: 2}; var c = Object.assign(a, b);/* a对象也会改变,b不变,返回被被修改对象 */ var d = Object.assign({}, a, b); /* a,b不会被改变,返回新的对象 */ console.log("a", a); cons...

  • function regText(text){var reg = /^[su4e00-u9fa5a-z0-9_-]{0,}$/;if(!reg.exec(text)){console.log("非法字符")}else{console.log("有效字符")} } regText("abc+") 验证 :汉字、英文、数字、下...