require.js的模块化开发

企鹅博客
企鹅博客
企鹅博客
25193
文章
0
评论
2019年9月30日10:17:27 评论 135 views
广告也精彩

这次给大家带来require.js的模块化开发,require.js模块化开发的注意事项有哪些,下面就是实战案例,一起来看一下。

一、Require.js及AMD

Require.js:是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。

AMD(Asynchronous Module Definition):异步模块定义规范(AMD)制定了定义模块的规则,这样模块和模块的依赖可以被异步加载。这和浏览器的异步加载模块的环境刚好适应(浏览器同步加载模块会导致性能、可用性、调试和跨域访问等问题)。

// AMD规范// 第一个参数,id,是个字符串。它指的是定义中模块的名字,这个参数是可选的。如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。// 第二个参数,dependencies,是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行,并且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入(定义中模块的)工厂方法中。// 第三个参数,factory,为模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。define(id?, dependencies?, factory);

二、Require.js使用

1、目录结构

举例中用到了个中文转换拼音的插件(GitHub地址:https://github.com/sxei/pinyinjs/),这个插件挺好用的,但由于中文中存在多音字,经常会出现不符合常规的拼音,比如(贾宝玉 => "gu bao yu")

  ├─scripts
     │─plus
        ├─pinyin
        │ ├─dist
        │ │  ├─pinyin_dict_firstletter.js
        │ │  ├─pinyin_dict_notone.js
        │ │  ├─pinyin_dict_polyphone.js
        │ │  └─pinyin_dict_withtone.js
        │ └─pinyinUtil.js
        ├─jquery.js
        ├─plusMain.js
        ├─require.js
        └─test.js

2、引入require.js

<script src="/scripts/plus/require.js"></script>

3、挂载模块

  [1] 局部加载

//test.jsdefine(function () {    return {
        add: function (a, b) {
            alert("传参没用上,哈哈");
        }
    }
});//页面代码$(function () {
    require(["/scripts/plus/test.js"], function (h) {
        h.add(1, 2);
    );
})

  [2] 全局加载

//plusMain.jsrequire.config({
    paths: {        jquery: "jquery",
    }
});//页面引用<script src="/scripts/plus/require.js" data-main="/scripts/plus/plusMain" defer async="true></script>

  以这种方法加载时,会默认以“/scripts/plus”为根目录,参数baseUrl可以重置根目录。

//效果相同require.config({
    baseUrl: "/scripts/plus",
    paths: {        jquery: "jquery"
    }
});

  还可引用远端文件,也可以同时引用本地文件,当远端文件加载失败时就会加载本地文件了。

require.config({
    paths: {        jquery: ["http://libs.baidu.com/jquery/2.0.3/jquery", "jquery"],
    }
});

  通过require加载的模块一般都需要符合AMD规范即使用define来申明模块,但是部分时候需要加载非AMD规范的js,这时候就需要用到另一个功能:shim。

  shim解释起来也比较难理解,shim直接翻译为"垫",其实也是有这层意思的,目前我主要用在两个地方:

  一个是,配置模块的依赖关系:例如,拼音插件pinyinUtil.js需要依赖字典才可以正常转换。

 1 require.config({ 2     paths: { 3         jquery: "jquery", 4         pinyin_dict_firstletter: "pinyin/dict/pinyin_dict_firstletter", 5         pinyin_dict_withtone: "pinyin/dict/pinyin_dict_withtone", 6         pinyin: "pinyin/pinyinUtil" 7     }, 8     shim: { 9         pinyin: {10             deps: ["pinyin_dict_firstletter", "pinyin_dict_withtone"],// 依赖模块集合11         }12     }13 });14 15 //可以简写成16 shim: {17     pinyin: ["pinyin_dict_firstletter", "pinyin_dict_withtone"]18 }

  也可以依赖css文件

require.config({
    paths: {
        select2: "select2/select2.min"
    },
    shim: {
        select2: ["/scripts/plus/select2/select2.min.css"]
    },
});

  另一个是,加载非AMD模块输出,将非标准的AMD模块"垫"成可用的模块。

// test.js(function () {    var NGY = {
        Hi: function() {
            alert("跨越过去之后");
        }
    }
    window.NGY = NGY;
})();//配置require.config({
    paths: {
        ngy: "test"
    },
    shim: {
        ngy: { exports: "NGY" }
    },
});//使用,不需要声明变量就可以直接使用require(["ngy"], function () {
    NGY.Hi();
});

4、使用require

require(["jquery", "pinyin"], function ($, pinyin) {
    $("span").html("谁最可爱?");    var dl = pinyin.getPinyin('当然是我');
});

相信看了本文案例你已经掌握了方法,更多精彩请关注php教程其它相关文章!

推荐阅读:

React中有哪些类定义组件

navigator.clipboard浏览器怎么制作原生剪贴板

以上就是require.js的模块化开发的详细内容,更多请关注php教程其它相关文章!

企鹅博客
  • 本文由 发表于 2019年9月30日10:17:27
  • 转载请务必保留本文链接:https://www.qieseo.com/397294.html
使用js提交表单form js教程

使用js提交表单form

首先我们先用html创建一个表单 Name: Email: <--一般情况下,这里是使用submit--> 在这个表单中,我们没用使用submit,我们准备使用js来提交这个表单。首先介绍...
js下载以及修改文件名的实例教程 js教程

js下载以及修改文件名的实例教程

这篇文章主要为大家详细介绍了js下载文件并修改文件名的代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 用js下载文件,使用<a>标签,添加download属性即可。 var a =...

发表评论