zoukankan      html  css  js  c++  java
  • Document

    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中配置

  • 相关阅读:
    《大话设计模式》读书笔记
    设计模式个人笔记
    多线程的单元测试工具
    设计模式六大原则
    时间复杂度和空间复杂度(转)
    排序算法笔记
    《人月神话》读书笔记
    微信公众号开发踩坑记录(二)
    微信公众号开发踩坑记录
    全栈工程师之路
  • 原文地址:https://www.cnblogs.com/chenyanlong/p/10434682.html
Copyright © 2011-2022 走看看