使用requirejs模块化开发多页面一个入口js的使用方式


Posted in Javascript onJune 14, 2017

描述

知道requirejs的都知道,每一个页面需要进行模块化开发都得有一个入口js文件进行模块配置。但是现在就有一个很尴尬的问题,如果页面很多的话,那么这个data-main对应的入口文件就会很多。理论这样其实也没什么,但是到后面用grunt进行合并压缩就会有很多入口js,虽然这个入口js都把配置的模块内容都压缩到里面了,但是各个入口合并压缩后的文件中其实都有很多重合的代码,所以考虑到这个就想到把所以的入口文件都统一了,使用一个,到时候用grunt合并压缩也只有这么一个入口文件,也很方便。

实现原理

1.页面引入requirejs 和 设置id和当前页面信息的属性

<script src="/res/js/require.js" data-main="/res/js/require.config" id="current-page" current-page ="news" target-module="/res/js/module/newsCtrl" defer async="true" ></script>

2、编写require.config.js 根据不同的页面去初始化不同的页面信息

/** * 1、所有页面使用公共的require配置
 * 2、根据current-page去加载相应地模块,不需要的模块不要去加载
 * 3、每个模块都要按约定去对外暴露一个init的初始化方法,用于页面信息加载时间监听
 * 
 */
require.config({ 
  urlArgs: "ver=1.0_" + (new Date).getTime(), 
  paths: {



    "jquery": "/res/js/base/jquery-1.11.3.min",
    "vue":'/res/js/base/vue.min',
    "common": "/res/js/widgets/common"
  },
  shim: {
    'scroll': {



      deps: ['jquery'],
      exports: 'jQuery.fn.scroll'


    },
    'vue':{
      exports:'vue'
    },
    'common':['jquery']
  }
});
require(["jquery"], function ($) {
  require(["common"], function (common) {
    var currentPage = $("#current-page").attr("current-page");
    var targetModule = $("#current-page").attr("target-module");
    if (targetModule) {
      // 页面加载完毕后再执行相关业务代码比较稳妥
      $(function () {
        require([targetModule], function (targetModule) {
          // 不要在这里写业务代码
          //全部统一调用init方法
          //也就是每个模块都暴露一个init方法用于事件监听,页面内容加载等
          targetModule.init(currentPage);
        });
      });
      return;
    }
  });
});

3、定义模块,实现初始化init方法进行事件监听和页面信息初始化

define(['jquery', "common"], function ($, common) {

  var newCtrl = {};
  newCtrl.init = function (page) {
    common.info("开始初始化页面信息");
  };
  newCtrl.login = function () {};
  return newCtrl;
});

以上所述是小编给大家介绍的使用requirejs模块化开发多页面一个入口js的使用方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
Javascript 面向对象 命名空间
May 13 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
Dec 12 Javascript
jquery方法+js一般方法+js面向对象方法实现拖拽效果
Aug 30 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JavaScript获取路径设计源码
May 22 Javascript
使用jquery实现的循环连续可停顿滚动实例
Nov 23 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
Mar 29 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
vue-loader教程介绍
Jun 14 #Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 #Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
jQuery.form.js的使用详解
Jun 14 #jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 #Javascript
详解Vue爬坑之vuex初识
Jun 14 #Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
You might like
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
php开发文档 会员收费1期
2012/08/14 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
php通过smtp邮件验证登陆的方法
2016/05/11 PHP
PHP 将dataurl转成图片image方法总结
2016/10/14 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
js中有关IE版本检测
2012/01/04 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
JQuery制作的放大效果的popup对话框(未添加任何jquery plugin)分享
2013/04/28 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
2015/10/19 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
AngularJS优雅的自定义指令
2016/07/01 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
2016/11/01 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python中正则表达式的用法实例汇总
2014/08/18 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
python3 tkinter实现添加图片和文本
2019/11/26 Python
Tensorflow tf.nn.depthwise_conv2d如何实现深度卷积的
2020/04/20 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Android面试宝典
2013/08/06 面试题
.net软件工程师面试题
2015/03/31 面试题
2015年社区宣传工作总结
2015/05/20 职场文书
讲座新闻稿
2015/07/18 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
Redis中一个String类型引发的惨案
2021/07/25 Redis