MyException - 我的异常网
当前位置:我的异常网» JavaScript » require.js使用讲授

require.js使用讲授

www.MyException.Cn  网友分享于:2013-09-17  浏览:0次
require.js使用讲解

一不留神的机会,发现了阮老师的博客“Javascript模块化编程(三):require.js的用法”,看完之后,果断用到了自己的项目中,本篇博客总结下require.js使用方法。

1.为什么使用require.js? 

使用之前,我的页面的js是这样的

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script> <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script> <script type="text/javascript" src="/js/plugins/layer/layer.min.js"></script> <script src="/Scripts/common/zTree/js/jquery.ztree.core.js"></script> <script src="/Scripts/common/zTree/js/jquery.ztree.excheck.js"></script> <script type="text/javascript" src="/js/plugins/layer/laydate/laydate.js"></script> <script type="text/javascript" src="/js/Bootstrap-Select/bootstrap-select.js"></script>

 由于这些js代码一般都写在模板中,因此不管我的页面如何简单,用不用的到这么多js,这些js都会加载,而我们大家都知道,加载js时页面会停止渲染,直到js加载完成后,才继续渲染,因此造成页面响应时间会很长,

而且你无法知晓这么多js的依赖关系,如果你移动了js的前后关系,就会出现一些错误。

 

require.js的作用就是为了解决这两个问题:

  1.实现js文件的异步加载,减少网页响应的时间

  2.管理js之间的依赖性,便于维护 

2.使用方法讲解

 首先删除掉模板页中的这8个js引用,在自己的页面引入require.js(没有的可自行去官网下载):

<script src="~/Scripts/common/require.js" data-main="/Scripts/main" data-entry="/Scripts/category/category.js"></script>

 data-main配置的是主要的js,我这里配置的是网站根目录下Scripts文件下的main.js,用于全局的配置。

 data-entry是我扩展的属性,用于加载该页面独有的js。

 以下为main.js代码:

require.config({
    baseUrl: 'http;//www.cdnxxx.com/',
    paths: {
        "jquery": "hplus/js/jquery.min",
        "bootstrap": "hplus/js/bootstrap.min",
     "bootstrapselect": "/Content/Bootstrap-Select/bootstrap-select",
   "laydate": "/Scripts/plugins/laydate/laydate", "utility": "/Scripts/utility" }, shim: { 'bootstrapselect': { deps: ['jquery', 'bootstrap'] }, 'bootstrap': { deps: ['jquery'] }, 'utility': { deps: ['jquery'], exports: 'Utility' },
   'laydate': { exports: 'laydate' } } }); require(['jquery'], function ($) { var entry = $('[data-entry]').data("entry"); require([entry]); });

 其中require.config()方法配置js的路径,baseUrl指的是基目录,paths中配置的路径默认会在前方加上baseUrl的值;

 shim参数配置js的依赖项和输出对象,如bootstrapselect依赖于jquery和bootstrap,laydate输出/返回的对象为laydate。

 

 当前页面加载的category.js代码如下:

define(['jquery', 'utility', 'bootstrap', 'bootstrapselect'], function ($, Utility) {

    var category = {
        init: function () {
            this.setOptions();
            this.bindEvent();

            self.getList();
        },
        setOptions: function () {
            this.btnQuery = $("#btnQuery");
            this.divList = $("#divList");
        },
        bindEvent: function () {
            var self = this;
            self.btnQuery.on("click", function () { self.getList(); });
        },
        getList: function () {
            var self = this;

            $.post(self.divList.data("url"), { channelCode: $.trim($("#ddlChannel").val()) }, function (result) {
                self.divList.html(result);
            });
        }
    };

    $(function () {
        category.init();
    });
});

 define方法的第1个参数为数组,代表当前页面要加载的js,如上面所示,当前页面加载了jquery,utility,bootstracp,bootstracpselect这4个js,

 第二个参数为回调函数,当第一个参数中的js异步加载完成后,会被调用,方法中的$对应的jquery返回的对象,Utility对应的unility返回的对象,这两个对象可以在回调函数的任何地方使用。 

截止目前,我们已了解require.js的使用方法,如果开发其它页面,可以按需加载,如页面只需要jquery就够了,则只引入jquery即可:

define(['jquery'], function ($) {
  // some code
});

3.注意事项

require.config({
    baseUrl: 'http;//www.cdnxxx.com/',
    paths: {
        "jquery": "hplus/js/jquery.min",
        "bootstrap": "hplus/js/bootstrap.min",
     "bootstrapselect": "/Content/Bootstrap-Select/bootstrap-select",
       "laydate": "/Scripts/plugins/laydate/laydate",
        "utility": "/Scripts/utility"
    }
});

 1.在以上代码中,由于bootstrapselect,laydate,utility配置的路径都以"/"开头,因此加载时不会被加上baseUrl的值,而jquery,bootstrap真正加载时会被加上baseUrl的值,即http://www.cdnxxx.com/hplus/js/juqery.min.js

 2.paths中配置的路径默认都会加上.js,因此配置时应省略.js,否则会出错 

文章评论

程序员的鄙视链
程序员的鄙视链
那些争议最大的编程观点
那些争议最大的编程观点
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
一个程序员的时间管理
一个程序员的时间管理
中美印日四国程序员比较
中美印日四国程序员比较
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
旅行,写作,编程
旅行,写作,编程
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
Java程序员必看电影
Java程序员必看电影
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
漫画:程序员的工作
漫画:程序员的工作
老程序员的下场
老程序员的下场
程序员都该阅读的书
程序员都该阅读的书
代码女神横空出世
代码女神横空出世
10个调试和排错的小建议
10个调试和排错的小建议
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我是如何打败拖延症的
我是如何打败拖延症的
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
 程序员的样子
程序员的样子
编程语言是女人
编程语言是女人
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
鲜为人知的编程真相
鲜为人知的编程真相
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员应该关注的一些事儿
程序员应该关注的一些事儿
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
每天工作4小时的程序员
每天工作4小时的程序员
我的丈夫是个程序员
我的丈夫是个程序员
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
如何成为一名黑客
如何成为一名黑客
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有