• requireJS 基本使用


    在requireJs 中,.js的后缀是可以省略不写的
     <script data-main="main" src="require.js"></script> 
    在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 () {
  • 相关阅读:
    C# 并行线程调用
    Oracle定时备份
    读取Excel里面的内容转为DataTable
    c# 将json数据转为键值对
    Py基础+中级
    深入理解DIP、IoC、DI以及IoC容器(转载)
    错误页面的配置
    JavaScript重载
    关于为空必填js判断
    MyEclipse CI 2018.8.0正式发布(附下载)
  • 原文地址:https://www.cnblogs.com/huangjinliang/p/5809975.html
Copyright © 2020-2023  润新知