使用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实现检测指定目录是否存在的方法
Jan 12 Javascript
jquery三个关闭弹出层的小示例
Nov 05 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
微信小程序实现多宫格抽奖活动
Apr 15 Javascript
vue axios 表单提交上传图片的实例
Mar 16 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
在Koa.js中实现文件上传的接口功能
Oct 08 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
vue webpack build资源相对路径的问题及解决方法
Jun 04 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 array_merge函数
2014/08/31 PHP
php生成RSS订阅的方法
2015/02/13 PHP
laravel ORM关联关系中的 with和whereHas用法
2019/10/16 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
jquery 添加节点的几种方法介绍
2013/09/04 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
js随机生成一个验证码
2017/06/01 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
JavaScript实现AOP详解(面向切面编程,装饰者模式)
2017/12/19 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
小程序Request的另类用法详解
2019/08/09 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Vue $attrs &amp; inheritAttr实现button禁用效果案例
2020/12/07 Vue.js
[02:52]2017DOTA2国际邀请赛中国区预选赛晋级之路
2017/07/03 DOTA
Python中用Descriptor实现类级属性(Property)详解
2014/09/18 Python
Sanic框架配置操作分析
2018/07/17 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
python机器学习库xgboost的使用
2020/01/20 Python
使用Python FastAPI构建Web服务的实现
2020/06/08 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
python里反向传播算法详解
2020/11/22 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
C#基础面试题
2016/10/17 面试题
八一建军节感言
2014/02/28 职场文书
高三学习决心书
2014/03/11 职场文书
优秀德育工作者事迹材料
2014/05/07 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年基建工作总结
2014/12/12 职场文书
光荣之路观后感
2015/06/12 职场文书
和领导吃饭祝酒词
2015/08/11 职场文书