前端开发

 首页 > 前端开发 > javascript > requireJS 基本使用,requirejs简单实用教程

requireJS 基本使用,requirejs简单实用教程

分享到:
【字体:
导读:
         [导读] 在requireJs 中,.js的后缀是可以省略不写的 scriptdata-main=mainsrc=require.js/script 在require.js 加载完之后,会查找页面上script标签的 data-main 属性的值,然后加载, data-main 指定的 js 文件 找到名...

在requireJs 中,.js的后缀是可以省略不写的



在require.js 加载完之后,会查找页面上script标签的data-main属性的值,然后加载,data-main指定的js文件


找到名为main的js文件
通过requireJs同时加载了js1、js2、js3,也可以同时加载更多js文件
第2个回调函数在导入的js文件全部加载完之后才会执


require(['js1', 'js2', 'js3'], function(){
console.log('js1 js2 js3 loaded')var total = num1 + num2 + num3
console.log(total)

hello1()
hello2()
hello3()
})

 


使用requireJs可以很方便的导入js文件,但是要注意js文件中变量名和方法名与其他js文件中变量名方法名冲突的问题
产生冲突的原因:
浏览器端js文件存在共用的全局作用域,全局作用域中变量名、方法名可能会被覆使用requireJs加载js文件,会自动在head标签中添加script标签,这些script标签带有async属性,async属性会使浏览器异步并行加载这些js文件(即同时开始加载这些js文件)

 

创建模块

判断require是否正确

if (typeof define === "function"&&define.amd) {
console.log("define来自require.js")
}

requirejs == require

requirejs(["js4"],function (js4) {
console.log("导出的是:")
console.log(js4);
});

 

模块化 nodejs(服务端,commonJS) require.js(客户端,AMD) sea.js(中国,客户端,CMD) ES6(ECMA)

定义模块

参数一模块名必须字符串。参数2依赖,


define(["require", "exports", "module","js5"],function (require, exports, module,js5) {//exports = "天幽"; 失败module.exports = "天幽";

console.log(require);
console.log(exports);
console.log(module);//var num = require("js5") 获取js5//console.log(num);});


或者这样写 define(function (require, exports, module,js5) { (ps:推荐上面那种。这种写法消耗能比较大)

导出的方法4种
exports 是能使用.添加属性,不能使用=重新赋值
module.exports 既可以使用.添加属性,也可以使用=重新赋值
return 最常用方法,相当于在module.exports使用=
define(object) 直接跟一个对象,相当于module.exports = {};
全局中的require == requirejs();
函数作用域require == LocalRequire(); 返回值就是模块的导出dua

 

require配置config

require.config({    //  baseUrl:"libs/"  //相对默认位置
    baseUrl:"libs/",
    paths:{//相对位置
        "jquery":"libs/jquery"
    },
    shim:{//依赖关系
        "jquery.zyslide":["jquery"]//zyslide依赖jquery
    }//有依赖关系后可以省略导入jquery


// 向服务端传递额外的参数,通常用来起到禁用缓存的效果

urlArgs: "time=" +  new Date().getTime()
})

requirejs(["jquery.zyslide"],function () {



分享到:
plupload中文api教程基本使用demo文件过...
基本使用方法可以到 基本使用demo 注意:该demo把上传的地址设为了一个静态的html页面,所以文件并不会真正的上传到服务器,但这不会影响上传功能的演示!                                                     var uploader = new plupload...
js_javascript数组对象总汇
今天带来,js 数组对象操作方法如下: 1. 创建数组 var array1 = [1,2]  //方法一 var array2 = new Array() //方法二 array[0] = 1; array[1] = 2; 2.遍历数组 for循环 和for...in 循环 var array1 = [1,2]; var l = array1.length; //for循环 for(var i=0;i
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……