require.js 설정 경로 의 용법 과 css 도입 에 대한 자세 한 설명

전단 개발 은 최근 1,2 년 동안 매우 빠르게 발 전 했 고 자 바스 크 립 트 는 주류 의 개발 언어 로 전대미문의 인 기 를 끌 었 다.대량의 전단 구조 가 나 타 났 다.이런 구 조 는 모두 전단 개발 중의 공통점 문 제 를 해결 하려 고 시도 하고 있 지만 실현 은 다르다.일반적인 전단 에 js 파일 을 불 러 오 는 것 은 다음 과 같 습 니 다.

<script type="text/javascript" src="js/js1.js"></script>
<script type="text/javascript" src="js/js2.js"></script>
<script type="text/javascript" src="js/js3.js"></script>
<script type="text/javascript" src="js/js4.js"></script>

근 데 프로젝트 가 엄 청 컸 을 때.  도 입 된 js 파일 이 특히 많 습 니 다.이렇게 하면 보기 좋 지 않 고 효율 적 이지 않 습 니 다.js 파일 이 많 고 클 때 홈 페이지 다운로드 가 시간 을 초과 하여 사이트 응답 이 시간 을 초과 하고 500 을 초과 하기 때문에 신기 한 것 입 니 다.
js 프레임 워 크(js 공구 꾸러미)가 나 타 났 습 니 다:require.js.
require.js 는 주로 두 가지 문 제 를 해결 합 니 다.
1.js 의 비동기 로 딩 을 실현 하고 js 가 너무 많은 로 딩 응답 시간 이 너무 많아 서 사이트 가 시간 을 초과 하지 않도록 합 니 다.
2.관리 모듈 간 의 의존성 으로 작성 과 유지 에 편리 합 니 다.
자,오늘 의 본론 으로 들 어가 서 require.js 용법 의 사례 를 써 서 여러분 께 참고 하 시기 바 랍 니 다.
우리 프로젝트 에 이러한 자원 디 렉 터 리 가 있다 고 가정 합 니 다.

첫 번 째 단 계 는 index.html 에 다운로드 한 require.js 를 도입 합 니 다.
그리고 설정 에 추가 할 config.js 를 새로 만 듭 니 다.
그리고 config.js 를 열 면 다음 과 같이 코드 를 기록 합 니 다.

require.config({
  baseUrl:'/data/points/',//     
  urlArgs:'v='+(new Date()).getTime(),//    
  paths:{
    'css': 'libs/js/css.min',
    'jquery': 'libs/js/jquery-1.11.1.min',
    'vur': 'libs/js/vue.min',
    'amazeui': 'libs/js/amazeui.min',
    'color': 'libs/js/color.min'
  },
  shim:{
    'amazeui':{
      deps: ['jquery','css!libs/css/amazeui.min','css!style/common','css!style/footer'],
    },
    'color':{
      deps:['css!libs/css/color.min']
    }
  }

});

그 중에서 css 를 넣 으 면 모듈 의 의존성,즉 deps 를 사용 해 야 한다
deps:['css!css/css/color.min]css 라 는 모듈 이름 의 파일(libs/js/css.min.js)을 우선 추가 하고"!"다음은 기본 디 렉 터 리 에 libs/css/color.min.css 를 추가 합 니 다.
그 중에서 css.min.js 는 의존 모듈 js 입 니 다.이 안 에는 css 파일 을 불 러 오 는 방법 이 적 혀 있 습 니 다.
구체 적 인 css.min.js

define(
  function () {
  if (typeof window == "undefined")return {
    load: function (n, r, load) {
      load()
    }
  };
  var head = document.getElementsByTagName("head")[0];
  var engine = window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)/) || 0;
  var useImportLoad = false;
  var useOnload = true;
  if (engine[1] || engine[7])useImportLoad = parseInt(engine[1]) < 6 || parseInt(engine[7]) <= 9; else if (engine[2])useOnload = false; else if (engine[4])useImportLoad = parseInt(engine[4]) < 18;
  var cssAPI = {};
  cssAPI.pluginBuilder = "./css-builder";
  var curStyle;
  var createStyle = function () {
    curStyle = document.createElement("style");
    head.appendChild(curStyle)
  };
  var importLoad = function (url, callback) {
    createStyle();
    var curSheet = curStyle.styleSheet || curStyle.sheet;
    if (curSheet && curSheet.addImport) {
      curSheet.addImport(url);
      curStyle.onload = callback
    } else {
      curStyle.textContent = '@import "' + url + '";';
      var loadInterval = setInterval(function () {
        try {
          curStyle.sheet.cssRules;
          clearInterval(loadInterval);
          callback()
        } catch (e) {
        }
      }, 10)
    }
  };
  var linkLoad = function (url, callback) {
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    if (useOnload)link.onload = function () {
      link.onload = function () {
      };
      setTimeout(callback, 7)
    }; else var loadInterval = setInterval(function () {
      for (var i = 0; i < document.styleSheets.length; i++) {
        var sheet = document.styleSheets[i];
        if (sheet.href == link.href) {
          clearInterval(loadInterval);
          return callback()
        }
      }
    }, 10);
    link.href = url;
    head.appendChild(link)
  };
  cssAPI.normalize = function (name, normalize) {
    if (name.substr(name.length - 4, 4) == ".css")name = name.substr(0, name.length - 4);
    return normalize(name)
  };
  cssAPI.load = function (cssId, req, load, config) {
    (useImportLoad ? importLoad : linkLoad)(req.toUrl(cssId + ".css"), load)
  };
  return cssAPI
}
);

이제 됐 습 니 다.브 라 우 저 에서 index.html 를 열 었 는데 우리 가 추가 해 야 할 것 을 추가 하지 않 았 습 니 다.이것 은 무엇 때 문 입 니까?자,여기 서 는 index.html 의 head 아래뒤에서 require.js 를 호출 하 는 방법 require 를 기억 하 세 요.즉,이 문장 을 추가 하 는 것 입 니 다.

<script type="javascript/text' >require['color']</script>//        color  

index.html 를 다시 방문 하 세 요.
그림:
 
 주의 하 다.
index.html 에 들 어 오 는 순 서 를 흐 트 러 뜨리 면 안 됩 니 다.

<script type="text/javascript" src="config.js"></script>
  
<script type="text/javascript" src="require.js"></script>
  
<script type="text/javascript">require(['color']);</script>

require.config()는 설정 대상 을 받 아들 입 니 다.이 대상 은 앞에서 말 한 paths 속성 외 에 도 shim 속성 이 있 습 니 다.호 환 되 지 않 는 모듈 을 설정 하 는 데 사 용 됩 니 다.구체 적 으로 말 하면 각 모듈 은(1)exports 값(출력 변수 이름)을 정의 하여 이 모듈 외부 호출 시의 이름 을 표시 합 니 다.(2)deps 배열 은 이 모듈 의 의존성 을 나타 낸다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.