码迷,mamicode.com
首页 > Web开发 > 详细

require.js使用教程

时间:2019-02-26 01:25:29      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:wms   var   gui   使用教程   结构   module   库文件   head   项目结构   

require.js使用教程

  1. 下载require.js, 并引入

  2. 创建项目结构


    |-js
    |-libs
      |-require.js
    |-modules
      |-alerter.js
      |-dataService.js
    |-main.js
    |-index.html
  3. 定义require.js的模块代码

    • dataService.js

      define(function () {
      let msg = ‘atguigu.com‘
      ?
      function getMsg() {
        return msg.toUpperCase()
      }
      ?
      return {getMsg}
      })
    • alerter.js


      define([‘dataService‘, ‘jquery‘], function (dataService, $) {
      let name = ‘Tom2‘
      ?
      function showMsg() {
        $(‘body‘).css(‘background‘, ‘gray‘)
        alert(dataService.getMsg() + ‘, ‘ + name)
      }
      ?
      return {showMsg}
      })
  4. 应用主(入口)js: main.js


    (function () {
    //配置
    requirejs.config({
      //基本路径
      baseUrl: "js/",
      //模块标识名与模块路径映射
      paths: {
        "alerter": "modules/alerter",
        "dataService": "modules/dataService",
      }
    })
     
    //引入使用模块
    requirejs( [‘alerter‘], function(alerter) {
      alerter.showMsg()
    })
    })()
  5. 页面使用模块:<script data-main="js/main" src="js/libs/require.js"></script>


  1. 使用第三方基于require.js的框架(jquery)

    • 将jquery的库文件导入到项目:

      • js/libs/jquery-1.10.1.js

    • 在main.js中配置jquery路径


      paths: {
              ‘jquery‘: ‘libs/jquery-1.10.1‘
          }
    • 在alerter.js中使用jquery


      define([‘dataService‘, ‘jquery‘], function (dataService, $) {
        var name = ‘xfzhang‘
        function showMsg() {
            $(‘body‘).css({background : ‘red‘})
            alert(name + ‘ ‘+dataService.getMsg())
        }
        return {showMsg}
      })

  1. 使用第三方不基于require.js的框架(angular)

    • 将angular.js导入项目

    • js/libs/angular.js

  • 在main.js中配置

require.js使用教程

标签:wms   var   gui   使用教程   结构   module   库文件   head   项目结构   

原文地址:https://www.cnblogs.com/chenyanlong/p/10434682.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!