이번에는 require.js에 CSS를 도입하는 단계에 대해 자세히 설명하겠습니다. require.js에 CSS를 도입할 때 주의사항은 무엇인가요?
JavaScript를 사용하면 require.js가 매우 좋은 결과를 제공할 수 있습니다. 이번에는 require.js 구성 경로와 CSS를 도입하는 작업 경험을 중점적으로 공유하겠습니다. 모든 사람. . 프론트엔드 개발은 지난 1~2년 동안 매우 빠르게 발전했으며, 주류 개발 언어인 JavaScript는 전례 없는 인기를 얻었습니다. 수많은 프런트엔드 프레임워크가 등장했지만 이러한 프레임워크는 프런트엔드 개발의 몇 가지 일반적인 문제를 해결하려고 시도하고 있지만 구현 방식은 다릅니다. 일반적으로 일반적인 프론트엔드 로딩 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 사용 사례를 작성해 보겠습니다.
첫 번째 단계는 다운로드한 require.js를 index.html
에 소개하는 것입니다. 그런 다음 해당 구성을 작성하기 위해 새 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!libs/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 헤드 아래의 뒤에 require.js의 메소드를 호출하는 것을 기억하세요. 이 문장은
<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) 외부에서 호출될 때 모듈의 이름을 나타내는 내보내기 값(출력 변수 name
), (2) 모듈의 종속성을 나타내는 deps 배열,이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 자료:WebStorm ES6
JS에서 babel을 사용하여 목록을 트리 구조로 변환하는 방법
위 내용은 require.js에 CSS를 도입하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
