使用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 相关文章推荐
Javascript 函数对象的多重身份
Jun 28 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
js实现左右两侧浮动广告
Jul 09 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
Vuex的初探与实战小结
Nov 26 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 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
php源代码安装常见错误与解决办法分享
2013/05/28 PHP
ThinkPHP 3使用OSS的方法
2018/07/19 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
PHP基于进程控制函数实现多线程
2020/12/09 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
Three.js源码阅读笔记(基础的核心Core对象)
2012/12/27 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Nodejs实现用户注册功能
2019/04/14 NodeJs
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
Python中实现结构相似的函数调用方法
2015/03/10 Python
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
python中assert用法实例分析
2015/04/30 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
浅谈keras中的keras.utils.to_categorical用法
2020/07/02 Python
Django返回HTML文件的实现方法
2020/09/17 Python
python 实现简易的记事本
2020/11/30 Python
python热力图实现简单方法
2021/01/29 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
Bailey帽子官方商店:Bailey Hats
2018/09/25 全球购物
New Balance俄罗斯官方网上商店:购买运动鞋
2020/03/02 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
应届电子商务毕业自荐书范文
2014/02/11 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL