基于require.js的使用(实例讲解)


Posted in Javascript onSeptember 07, 2017

本篇文章总结下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,否则会出错

以上这篇基于require.js的使用(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
javascript/jquery获取地址栏url参数的方法
Mar 05 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
Angular2实现自定义双向绑定属性
Mar 22 Javascript
vue多页面开发和打包正确处理方法
Apr 20 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
小程序实现列表点赞功能
Nov 02 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 #Javascript
JQuery 获取多个select标签option的text内容(实例)
Sep 07 #jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 #jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 #jQuery
Django使用多数据库的方法
Sep 06 #Javascript
node.js实现微信JS-API封装接口的示例代码
Sep 06 #Javascript
详解require.js配置路径的用法和css的引入
Sep 06 #Javascript
You might like
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
适用于抽奖程序、随机广告的PHP概率算法实例
2014/04/09 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
php-fpm开启状态统计的方法详解
2017/06/23 PHP
JS target与currentTarget区别说明
2011/08/28 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
超精准的javascript验证身份证号的具体实现方法
2015/11/18 Javascript
基于AngularJS前端云组件最佳实践
2016/10/20 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
Vue.js仿微信聊天窗口展示组件功能
2017/08/11 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
JavaScript在web自动化测试中的作用示例详解
2019/08/25 Javascript
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python中 logging的使用详解
2017/10/25 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
python修改字典键(key)的方法
2019/08/05 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
纯CSS3发光分享按钮的实现教程
2014/09/06 HTML / CSS
德国鞋子网上商店:Omoda.de
2017/03/31 全球购物
教你打造完美的创业计划书
2014/01/06 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
二人合伙经营协议书
2014/09/13 职场文书
离婚案件上诉状
2015/05/23 职场文书
小学教育见习总结
2015/06/23 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript