基于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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
javascript下阻止表单重复提交、防刷新、防后退
Aug 17 Javascript
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
jQuery事件绑定和委托实例
Nov 25 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
js运动应用实例解析
Dec 28 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
详解jQuery选择器
Dec 21 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
Apr 10 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转换IP地址到真实地址的方法详解
2013/06/09 PHP
PHP闭包定义与使用简单示例
2018/04/13 PHP
jQuery与ExtJS之选择实例分析
2010/08/19 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
jquery简单实现鼠标经过导航条改变背景图
2013/12/17 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
2018/03/20 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
2018/07/15 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
微信小程序全局变量的设置、使用、修改过程解析
2019/09/24 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
python实现决策树分类算法
2017/12/21 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
全球精选男装和家居用品:Article
2020/04/13 全球购物
优秀毕业生求职推荐信范文
2013/11/21 职场文书
教师演讲稿范文
2014/01/08 职场文书
小加工厂管理制度
2014/01/21 职场文书
宣传策划类求职信范文
2014/01/31 职场文书
五好关工委申报材料
2014/05/31 职场文书
公共场所禁烟标语
2014/06/25 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
医生个人自我剖析材料
2014/10/08 职场文书
鉴史问廉观后感
2015/06/10 职场文书
2016年领导干部正风肃纪心得体会
2015/10/09 职场文书
干货!开幕词的写作方法
2019/04/02 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js