使用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的一些注意
Dec 06 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
jQuery中even选择器的定义和用法
Dec 23 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
js querySelector() 使用方法
Dec 21 Javascript
基于JavaScript实现的折半查找算法示例
Apr 14 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
Node错误处理笔记之挖坑系列教程
Jun 05 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
React实现动效弹窗组件
Jun 21 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中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php中使用url传递数组的方法
2015/02/11 PHP
PHP简单实现正则匹配省市区的方法
2018/04/13 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
Javascript 面向对象 继承
2010/05/13 Javascript
中文字符串截取的js函数代码
2013/04/17 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
jQuery$命名冲突怎么办如何解决
2014/01/16 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
jQuery原理系列-常用Dom操作详解
2016/06/07 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
angular异步验证防抖踩坑实录
2019/12/01 Javascript
js代码编写无缝轮播图
2020/09/13 Javascript
浅谈Tensorflow由于版本问题出现的几种错误及解决方法
2018/06/13 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
建龙钢铁面试总结
2014/04/15 面试题
就业自荐信
2013/12/04 职场文书
好人好事事迹材料
2014/02/12 职场文书
广告学专业求职信
2014/06/19 职场文书
开展读书活动总结
2014/06/30 职场文书
小学教师教育随笔
2015/08/14 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
关于Python使用turtle库画任意图的问题
2022/04/01 Python