layui 프로젝트에서layui.define 함수를 사용하는 방법 소개

머리말:

1layui.define을 제대로 이해하고 올바르게 사용한다면 이 글은 좀 시간낭비입니다. 당신을 위한. .

2. "Javascript 모듈 개발"에 대해 들어본 적이 없다면 이해는 커녕 말이죠. 그렇다면 먼저 인터넷에서 "Javascript 모듈 개발"이 무엇인지 검색해 보는 것이 좋습니다. 이는 나중에 제가 설명할 내용을 이해하는 데 매우 중요합니다. 레이이는 표현하고 싶어한다.

추천: layui 프레임워크 튜토리얼

Layui를 사용할 때

layui.use([], function(){})

을 자주 사용합니다. 하지만 조심스러운 친구들은 layui에는layui.define이라는 또 다른 기능이 있습니다. 이것은 무엇을 위해 사용됩니까?

우리는 다음 코드와 같이 모듈화 개념 없이 코드를 작성했습니다.

function entry(type) {
  if (type === 1) { handle1() }
  else if (type === 2) { handle2() }
  else { handleall() }
}

function handle1(){}
function handle2(){}
function handleall(){}

장기적인 연습을 통해 프로그래머는 자바스크립트 모듈화가 필수적이라는 것을 이해하게 되었습니다. 모듈화 실현과 관련하여 각 회사는 고유한 아이디어와 구현을 가지고 있습니다. 가능한 모든 문제를 고려하므로 모듈성을 사용하는 데 필요한 복잡한 구성이 발생합니다.

layui는 자체 로딩 방식을 채택하여 다른 모듈식 구현에 비해 상대적으로 가볍습니다. 자체 모듈성을 달성하기 위해 정의하고 사용하는 두 가지 핵심 기능이 있지만 때로는 혼란스러울 수 있습니다. 저희 회사 친구가 사용 과정에서 레이유이의 정의 기능이 사용 기능과 비슷한 느낌이 든다고 물었습니다. 올바르게 사용하려면 어떻게 해야 할까요?

layui 문서에 나와 있듯이layui.define 함수는 구성 요소를 확장하는 데 사용됩니다. 함수 사용은 이 구성 요소를 로드하여 사용하는 것입니다. 그러나 어떤 종류의 코드가 구성 요소로 간주됩니까? 확장 구성 요소 페이지에서 몇몇 훌륭한 작성자가 결과를 공유하는 모습도 볼 수 있습니다. 그러나 우리는 이러한 구성 요소 모두에 한 가지 공통점이 있다는 것을 알 수 있습니다. 즉, 비즈니스와 관련이 없다는 것입니다(이것은 말도 안되는 것이 아닙니다. 비즈니스가 있는 사람은 누구나 이를 사용합니다).

따라서 비즈니스가 일단 디자인되면 더 이상 컴포넌트가 아닙니다. 이때 이름을 인터페이스로 변경할 수 있습니다. 그러면 함수 정의와 사용의 차이점을 이해하기 쉽습니다. 함수 정의는 구성요소나 인터페이스를 정의하는 것이고, 함수 사용은 해당 구성요소나 인터페이스를 사용하는 것입니다. 다른 사람이 사용하기를 원하는 구성 요소나 인터페이스를 작성하는 경우에는 Define 함수를 사용하세요. 그러나 함수가 내부 실행 전용이고 다른 사람이 호출할 필요가 없다면 함수 사용을 사용하세요.

이 시점에서 둘의 차이점을 명확하게 이해했다면 다음 아키텍처를 사용하는 간단한 Layui 프로젝트가 더 명확해질 것입니다.

우선 여기에서 간단한 건축 프로젝트를 다운로드해야 합니다 layui.test.project.

그런 다음 도구로 프로젝트를 열면 파일 디렉터리를 명확하게 볼 수 있습니다.

여기에는 index.single.html에 표시되는 수많은layui.define이 사용됩니다. 여기서는layui의 CDN을 구성하고 구성합니다. 전역layui 매개변수, 그리고 마지막으로 우리가 사용하는 비즈니스 스크립트입니다.

layui.config.js를 열면 내용을 명확하게 볼 수 있습니다. 2개의 구성 요소를 정의했습니다(이름 참고). 여기에는 비즈니스 논리가 없습니다. 그래서 일부 비업무 공용 구성 요소를 저장하는 데 사용되는 lib 폴더에 배치했습니다. 많이 사용하게 되기 때문에 미리 구성해두었습니다.

그런 다음 입력 스크립트인 main.single.js를 살펴보겠습니다. 이 스크립트는layui의 자체 모듈인 jquery 및 form을 사용하고 모듈 로거 등을 사용하며 방금 정의한 모듈도 사용합니다. 왜냐하면 내보내지 않을 것이기 때문입니다. 다른 사람도 사용할 수 있으므로 해당 기능을 사용하세요. 그리고 그 안에 간단한 테스트 로직을 만들어봤습니다.

다음으로 여기서는 전혀 사용되지 않는 api, const, utils가 무엇인지 알 수 있습니다.

api 이름은 백엔드 인터페이스로 처리를 제공한다는 의미입니다.layui는 jquery와 함께 제공되므로 jquery.ajax를 사용하여 백엔드 인터페이스를 호출합니다. 체인에서 호출할 수 있는 jquery의 defer 객체를 사용하세요.

여기에는 jquery.ajax를 캡슐화하지 않았으므로 오류 처리 및 토큰 운반에 대한 통합 처리가 없으므로 작업 부하가 눈에 보이지 않게 로드되므로 jquery.ajax를 캡슐화하는 인터페이스를 추가해야 합니다. 여기에서 다시 수행할 수 있습니다.layui.ajax.js

const를 정의하여 여기서는 response.js 키워드가 인터페이스를 반환하도록 구성됩니다. 프론트엔드와 백엔드에 대해 잘 논의되어 있으며, Write to death 프로젝트에 직접 추가할 수도 있습니다.

utils는 도구 클래스를 저장합니다. 일반적으로 사용되는 변환 시간과 변환 URL을 여기에 작성할 수 있습니다.

이 세 폴더는 다른 비즈니스 페이지를 지원하도록 구성되므로 기본적으로 모두 지연 로딩 호출을 사용합니다. 함수 정의로 시작하고 마지막으로 외부 호출을 위한 인터페이스 이름을 내보냅니다. 미리 구성해야 하는 lib와는 달리, 사용할 때 직접 재구성해야 합니다. 다음은 유틸리티 로딩 예입니다.

layui.extend({
  utils: '/path/to/utils/index'
}).use(['utils'], function(){
  var utils = layui.utils
  // ...
})

注意： 如果你使用ftl，jsp，apsx这些由后台渲染的页面引擎，应该会有一个公共的头部，那么刚刚的全局配置 layui 文件 layui.config.js，你可以在公共的头部加入。

위 내용은 layui 프로젝트에서layui.define 함수를 사용하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!