使用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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
关于删除时的提示处理(确定删除吗)
Nov 03 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
js解决软键盘遮挡输入框的问题分享
Dec 19 Javascript
Vue服务器渲染Nuxt学习笔记
Jan 31 Javascript
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
Feb 10 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
德生S2000南麂列岛台湾FM收听记录
2021/03/02 无线电
php生成随机密码的三种方法小结
2010/09/04 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
PHP的PSR规范中文版
2013/09/28 PHP
PHP比你想象的好得多
2014/11/27 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
jQuery 获取对象 定位子对象
2010/05/31 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
2020/12/01 Javascript
js面向对象编程总结
2017/02/16 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
Angular resolve基础用法详解
2018/10/03 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
Python读取mp3中ID3信息的方法
2015/03/05 Python
Python实现的概率分布运算操作示例
2017/08/14 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
荷兰街头时尚之家:Funkie House
2019/03/18 全球购物
小学门卫岗位职责
2013/12/17 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
学校党员对照检查材料
2014/08/28 职场文书
付款委托书范本
2014/10/05 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
建党伟业观后感
2015/06/01 职场文书
排球赛新闻稿
2015/07/17 职场文书
浅谈Python中的正则表达式
2021/06/28 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android