这次给大家带来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
登录后复制
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", }});//页面引用
登录后复制
以这种方法加载时，会默认以“/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('当然是我');});
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
React中有哪些类定义组件
navigator.clipboard浏览器怎么制作原生剪贴板
以上就是require.js的模块化开发的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780500.html
