이 기사는 지방 및 지방 자치 단체의 비슷한 캐스케이드 기능에 대한 최근 구현 아이디어를 소개합니다. 책임, 성능 및 동작을 가능한 한 많이 분리하기 위해이 기능은 2 개의 구성 요소로 분할되며 단일 링크 목록은 주요 캐스케이드 로직을 구현하는 데 사용됩니다. 다음 섹션에는 데모 효과가 있습니다. 이것은 매우 일반적인 기능이지만이 기사의 구현 논리는 명확하고 코드는 이해하기 쉽습니다. 그것은 지방 및 지방 자치 단체의 의미와 분리되어 있으며 성과와 행동의 분리를 고려합니다. 이 기사의 내용이 귀하의 작업에 대한 참조 가치를 가져올 수 있기를 바랍니다. 그것을 읽고 수정하는 데 오신 것을 환영합니다.
캐스케이드 캐스케이드 작업
CascadeType. 지속적인 캐스케이드 지속성 (저장) 작업
CascadeType. 캐스케이드 업데이트 (Mergy) 작업을 병합합니다
CascadeType. 캐스케이드 새로 고침 작업을 새로 고치고 쿼리 만 및 작업을 얻습니다
CascadeType. 캐스케이드 삭제 작업을 제거하십시오
CascadeType. 모든 작업은 위의 모든 작업을 캐스케이드합니다
페치 크롤링의 로딩을 지연 시킬지 여부, 기본값은 첫 번째 측면이 즉시로드되고 있고 더 많은면이 지연된 로딩이라는 것입니다.
매핑 된 관계 유지 보수
mappedby = "parentid"는 어린이 수업의 부모 속성이 관계를 유지하는 데 사용됨을 의미합니다. 이 이름은 Children Class의 Parentid 속성 이름과 정확히 동일해야합니다.
또한 상위 클래스의 수집 유형은 목록 또는 설정 여야하며 ArrayList로 설정할 수 없으며 오류 가보고됩니다.
데모 효과 (코드 다운로드, 참고 :이 효과는 HTTP가 실행되어야합니다. 또한 효과의 데이터는 시뮬레이션 된 데이터이며 실제로 배경에 의해 반환되지 않으므로 주, 도시 및 카운티의 풀다운 데이터는 동일합니다.
참고 :이 기사는 이전의 여러 관련 블로그의 기술 구현을 사용합니다. 필요한 경우 아래 링크를 클릭하여이를 알아볼 수 있습니다.
1) JavaScript의 상속 구현에 대한 자세한 설명 : JavaScript 클래스와 시공 클래스 사이의 상속 관계를 정의하기 위해 class.js를 제공합니다.
2) 구성 요소를 지원하는 jQuery 기술 DOM 유사 이벤트 관리 : eventBase.js를 제공하여 구성 요소 인스턴스를 DOM- 유사 이벤트 관리 기능을 제공합니다.
3) JQuery의 Ajax 및 Ajax 캐시 프록시 구성 요소의 보조 캡슐화 : AjaxCache : ajax.js 및 ajaxcache.js 제공 jQuery의 Ajax 호출 및 클라이언트 요청에 대한 캐시 프록시를 단순화합니다.
먼저이 기능의 요구 사항에 대해 자세히 알아 보겠습니다.
1. 기능 분석
이 기능은 세 가지 계단식 항목을 포함하는 계단식 구성 요소로 설명됩니다.
1) 각 계단식 항목은 입력 프롬프트로 사용하려면 옵션이 필요할 수 있습니다.
이 경우 빈 옵션은 각 캐스케이딩 항목의 데이터 목록에서 선택할 수 있습니다 (즉, 입력에 의해 제기 된 것).
입력 프롬프트로 사용할 필요는 없습니다.
이 경우 각 계단식 항목의 데이터 목록에서 데이터 옵션 만 선택할 수 있으며 빈 옵션을 선택할 수 없습니다.
2) 현재 페이지가 데이터베이스에서 쿼리되고 계단식 구성 요소에 해당하는 필드가 값을 갖는 경우, 계단식 구성 요소에 쿼리 값이 반향됩니다.
쿼리에있는 해당 필드에 값이 없으면 지점 1)의 요구 사항에 설명 된 두 가지 상황이 표시됩니다.
3) 각 계단식 항목은 데이터 구조에서 단일 연결된 목록 관계를 형성합니다. 후자의 계단식 항목의 데이터 목록은 이전 계단식 항목에 의해 선택된 데이터와 관련이 있습니다.
4) 성능 문제를 고려하면 각 계단식 항목의 데이터 목록은 Ajax에 의해 비동기 적으로 표시됩니다.
5) 계단식 성분의 초기화가 완료된 후, 첫 번째 계단식 항목의 목록이 자동으로로드됩니다.
6) 현재 계단식 항목이 변경되면 직접 또는 간접적으로 연관된 모든 계단식 항목의 데이터 목록을 지우십시오. 동시에, 이전 계단식 항목의 값이 비어 있지 않은 경우, 다음과 직접 관련된 다음 계단식 항목의 데이터 목록이 자동으로로드됩니다. 계단식 항목의 데이터 목록을 지울 때 조심하십시오. 계단식 항목이 입력 프롬프트 옵션을 표시 해야하는 경우 지우면 옵션을 유지해야합니다.
7) 성능 문제를 완전히 고려하고 중복 하중을 피해야합니다.
8) 캐스케이드 구성 요소의 계단식 항목이 변경 될 때 양식 제출 문제를 고려할 때, 계단식 구성 요소에 의해 선택된 값은 텍스트 필드를 통해 배경에 계단식 구성 요소의 값을 제출할 수 있도록 숨겨진 텍스트 필드에 반영되어야합니다.
기능은 위와 같습니다.
2. 구현 아이디어
1) 데이터 구조
다른 구성 요소와 다른 점은 백그라운드에서 데이터와 의존성이 있다는 것입니다. 내가 생각하는 데이터 구조는 더 잘 구현됩니다.
{ "id": "1,"text ":"Beijing ","Code ": 110000,"Parentid ": 0}, {"id ": 2,"text ":"Hebei Province ","Code ":"Parentid ": 0}, {"id ": 3,"텍스트 ":"Henan Province ": 330000," ": 0}.ID는 고유 한 데이터 식별자이며 데이터 간의 연관 관계는 ParentID를 통해 구성됩니다. 텍스트와 코드는 모두 일반적인 비즈니스 분야입니다. 이 데이터 구조를 따르는 경우 계단식 데이터 목록의 인터페이스를 쿼리하는 것은 매우 간단합니다.
// 첫 번째 캐스케이드 항목/API/Cascade? parentid = 0 // 첫 번째 캐스케이드 항목/API/Cascade에서 선택한 값을 기준으로 두 번째 캐스케이드 항목의 목록을 확인하십시오. parentid = 1 // 두 번째 캐스케이드 항목/API/Cascade = 4에 의해 선택된 값을 기준으로 세 번째 캐스케이드 항목을 확인하십시오.
이 구조는 또한 배경을 처리하기 쉽습니다. 그것들은 구조적으로 나무 모양의 테이블 구조이지만 쿼리는 모두 단일 층이므로 구현하기 쉽습니다.
또한 이전 쿼리 데모 에서이 구조가 데이터 쿼리의 인터페이스와 매개 변수를 하나로 통합하는 데 도움이 될 수 있음을 알 수 있습니다. 이는 구성 요소 개발에 매우 편리한 것입니다. 이 데이터 구조를 백그라운드에서 가져 오면 각 데이터를 <옵션 값 = "베이징"Data-Param-Value = "1"> Beijing </옵션>과 같은 옵션으로 구문 분석합니다. 이는 데이터 목록의 드롭 다운 디스플레이를 완료 할 수있을뿐만 아니라 선택 폼 요소의 함수를 통해 현재 캐스케이드 항목의 선택한 값을 수집 할 수 있습니다. 마지막으로, 캐스케이드 항목이 변경되면 선택한 옵션을 얻을 수 있으며 다음 캐스케이드 항목의 목록을로드하기 위해 부모 매개 변수로 저장된 데이터-파람-값의 값을 사용할 수 있습니다. 이것은 또한 계단식 구성 요소 데이터 쿼리 및 구문 분석에 대한 아이디어이기도합니다.
그러나 여기서 고려해야 할 것은 유연성 문제입니다. 실제 프로젝트에서, 계단식 구성 요소의 데이터 구조는 ID ParentID와 같은 유사한 연관 관계에 따라 정의 될 수 있지만 해당 필드는 반드시 ID ParentID 텍스트 코드라고 불리는 것은 아니며 다른 필드 일 가능성이 높습니다. 다시 말해, 데이터를 옵션으로 구문 분석 할 때 옵션 텍스트와 값에 사용 된 필드 및 데이터-파람-값 속성에 사용되는 필드 값은 불확실합니다. 데이터를 쿼리 할 때 사용되는 매개 변수 이름 parentid는 죽을 수 없습니다. 백엔드 직원이 먼저 쿼리 인터페이스를 작성하고 다른 이름을 사용하는 경우, 누군가에게 매개 변수 이름을 변경하도록 요청할 수 없습니다. 이는 컴파일 및 배포되어야하므로 프론트 엔드보다 더 번거 롭습니다. 실제 프로젝트에서 첫 번째 데이터 계층의 부모가 비어있을 수 있으므로 parentid = 0의 값은 고정 될 수 없습니다. 이러한 것들은 옵션으로 설계되어야합니다. 한편으로, 기본값이 제공되고 외부 설정은 실제 상황에 따라 예약됩니다. 예를 들어,이 기사의 최종 구현 에서이 옵션은 다음과 같이 정의됩니다.
Textfield : 'text', // <solfited> 요소에 표시 할 반환 된 데이터의 필드 이름
Valuefield : 'text', // <solfited 데이터의 필드 이름은 <poolse> 요소의 값으로 설정할 수 있습니다.
매개 변수 : 'ID', // 데이터 쿼리 인터페이스를 호출 할 때 데이터에 해당하는 필드 이름은 배경으로 전달됩니다.
paramname : 'parentid', // 데이터 쿼리 인터페이스를 호출 할 때 데이터의 매개 변수 이름은 URL 다음에 전달됩니다.
DefaultParam : '', // 첫 번째 캐스케이드 항목을 쿼리 할 때 배경으로 전달 된 값은 일반적으로 0, 또는 -1 등입니다. 상단 계층의 데이터가 쿼리해야 함을 나타냅니다.
2) HTML 구조
이전 기능 분석의 제 1 조에 따르면, 계단식 구성 요소의 초기 HTML 구조에는 두 가지 유형의 초기 HTML 구조가 있습니다.
<ul id="licenseLocation-view"><li><select><option value="">Please select a province</option></select></li><li><select><option value="">Please select a city</option></select></li><li><select><option value="">Please select a district and county</option></select></li></ul>
또는
<ul id = "CompanyLoce-View"> <li> <select> </select> </li> <li> <select> </select> </li> <li> <li> <select> </select> </li> </ul>
이 두 구조의 유일한 차이점은 입력 프롬프트로 사용되는 옵션이 구성되어 있는지 여부입니다. 또한이 빈 옵션이 필요한 경우 값 속성을 비워야합니다. 그렇지 않으면이 빈 옵션이 양식을 제출할 때 옵션 프롬프트 정보를 배경에 제출합니다.
이 두 구조에서 가장 중요한 것은 선택 요소이며 UL 및 Li와 관련이 없습니다. UL과 Li는 UI에 사용됩니다. 선택 요소에는 의미론이 없으며 도시, 지구 또는 카운티 인 어느 지방이 있는지 식별 할 필요가 없습니다. 기능적으로 말하면, 선택은 계단식 항목을 나타냅니다. 이러한 선택이 어디에 정의되는지는 중요하지 않습니다. 계단식 항목이 구성되는 요소를 선택하는 계단식 구성 요소를 알리면됩니다. 구성 요소에 말해야 할 유일한 것은 이러한 선택 요소의 시퀀스이지만, 이는 일반적으로 HTML의 기본 요소 순서에 의해 제어됩니다. 이 구조는 구성 요소의 기능을 가능한 한 행동과 분리하는 데 도움이 될 수 있습니다.
3) 책임 분리 및 단일 링크 된 목록 사용
이 캐스케이드 구성 요소가 책임에 따라 나뉘어지면 두 가지 핵심 구성 요소로 나눌 수 있고, 하나는 전체 기능과 내부 캐스케이드 항목 (Cascadeview)의 관리를 담당하며 다른 하나는 캐스케이드 항목 (Cascadeitem)의 기능적 구현을 담당합니다. 또한 계단식 로직을보다 편리하게 구현하려면 링크 된 목록을 통해 모든 계단식 항목을 연결하면됩니다. Publish-Subscribe 모드를 통해 후자의 계단식 항목은 이전 계단식 항목이 변경되었다는 메시지를 가입합니다. 현재 계단식 항목이 변경되면 관련 논리를 처리하기 위해 후속 캐스케이드 항목에 알리는 메시지가 게시됩니다. 링크 된 목록의 역할을 통해이 메시지는 마지막 계단식 항목까지 전달 될 수 있습니다. 사진에서 설명하면 대략 다음과 같습니다.
우리가해야 할 일은 좋은 소식의 출시 및 전달을 통제하는 것입니다.
4) 양식 제출
계단식 구성 요소의 값을 배경에 편리하게 제출하기 위해 전체 계단식 구성 요소를 전체적으로 처리 할 수 있으며 외부 이벤트가 모든 계단식 항목의 값을 얻을 수있는 교환 이벤트가 외부에 제공됩니다. 캐스케이드가 여러 개 있기 때문에 OnChanged 이벤트를 게시 할 때이 이벤트는 캐스케이드를 변경할 때만 트리거 될 수 있습니다.
5) Ajax 캐시
이 구성 요소에서는 두 가지 수준의 Ajax 캐시를 고려해야합니다. 첫 번째는 구성 요소 수준에 있습니다. 예를 들어, 첫 번째 캐스케이드 아이템을 베이징으로 전환했습니다. 현재 두 번째 캐스케이드 항목은 베이징의 데이터를로드했습니다. 그런 다음 첫 번째 캐스케이드 아이템을 베이징에서 헤베이로 바꾸고 베이징으로 전환했습니다. 현재 두 번째 캐스케이드 항목은 여전히 베이징의 관련 데이터 목록을 표시합니다. 목록이 처음로드되었을 때 데이터를 캐시하면 이번에는 AJAX 요청을 시작할 필요가 없습니다. 두 번째는 Ajax 요청입니다. 레벨에서 페이지에 여러 개의 계단식 구성 요소가있는 경우 먼저 첫 번째 계단식 구성 요소의 첫 번째 계단식 항목을 베이징으로 전환하고 브라우저는 AJAX 요청을로드하여 데이터를로드합니다. 두 번째 계단식 구성 요소의 첫 번째 계단식 항목을 베이징으로 전환하면 브라우저는 다른로드 데이터 요청을 보냅니다. 첫 번째 구성 요소의 첫 번째 ajax 요청으로 반환 된 데이터를 먼저 캐시하면 두 번째 구성 요소가 동일한 매개 변수를 사용하여 동일한 인터페이스를 요청하면 이전 캐시를 직접 사용하여 결과를 반환하여 AJAX 요청을 줄일 수 있습니다. Ajax 캐시의 두 번째 레벨은 위의 "jQuery ajax 및 Ajax 캐시 프록시 구성 요소의 2 차 캡슐화 : AjaxCache"에 따라 다릅니다. 구성 요소의 경우 내부적으로 첫 번째 수준의 캐시만을 구현하지만 두 번째 레벨의 캐시 구현이 투명하기 때문에 두 번째 레벨의 캐시를 고려할 필요는 없으며 사용하는 AJAX 구성 요소가 캐시의 기능을 가지고 있음을 알지 못합니다.
3. 구현 세부 사항
최종 구현에는 CascadeView, CascadeItem 및 CascadePublicDefaults의 세 가지 구성 요소가 포함됩니다. 처음 두 개는 구성 요소의 핵심이며 마지막 두 가지는 일부 옵션을 정의하는 데 사용됩니다. 그 기능은 CascadeItem의 의견에 자세히 설명되어 있습니다. 또한 다음 코드에는 일부 주요 코드의 역할을 설명하는 매우 자세한 주석이 있습니다. 이전 요구 사항을 기반으로 코드를 살펴보면 상대적으로 이해하기 쉽습니다. 나는 몇 가지 구현 세부 정보를 설명하기 위해 텍스트를 사용했지만 나중에 나는이 방법이 약간 감사하다고 느꼈다. 첫째, 세부 사항 수준의 언어는 구성하기 쉽지 않았습니다. 때때로 나는 내 의미를 표현하지 않았다. 나는 분명히 무언가를 명확하게 설명하고 싶었지만 더 혼란스러워졌습니다. 적어도 나는 내가 쓴 것을 읽을 때 이런 식으로 느낄 것입니다. 둘째, 개발자 자체는 소스 코드를 읽을 수 있으며 대부분의 활발한 개발자는 다른 사람들의 코드에 대해 생각하여 구현 아이디어를 기꺼이 이해하려고합니다. 그래서 나는 주석을 사용하여 대신 구현 세부 정보를 설명했습니다. :)
cascadepublicdefaults :
define (function () {return {url : '', // data query interface textfield : 'text', // 필드 이름 valuefield : // 'text', 'text', 'text', 'text', 'text'에 표시되어야하는 필드 이름에서 // 필드 이름에서 데이터를 반환합니다. <plutment> 요소에서 설정되어야하는 필드 이름에서 설정되어야하는 필드 이름에 표시되어야합니다. 배경으로 전달되는 데이터는 ParamName입니다. 'parentid', // 데이터 쿼리 인터페이스를 호출 할 때 URL이 전달한 데이터의 매개 변수 이름은 '', // 첫 번째 캐스케이드 항목을 쿼리 할 때 배경에 전달 된 값이 일반적으로 0, -1 등입니다. 상단 데이터를 query로 유지하려는지를 나타냅니다. 캐스케이드 항목을 다시로드 할 때 : 기본 첫 번째 옵션 옵션 옵션 옵션 옵션 옵션 옵션 옵션 옵션 옵션 옵션을 선택하지 않습니다. function (res) {return res;} // 캐스케이드 항목이 데이터를로드 할 때 비동기 요청을 보낼 때이 콜백을 사용하여 비동기 요청에 의해 반환 된 응답을 사용하여 비동기 요청을 보냅니다.캐스케이드 뷰 :
define (함수 (요구, 내보내기, 모듈) {var $ = require ( 'jquery'); var class = require ( 'mod/class'); var eventbase = require ( 'mod/eventbase'); var publicdefaults = require ( 'mod/cascadepublicdefaults'); var cascadeitem ( 'mod/cascadeitem'); CascadeItem 구성 요소*/var defaults = $ .extend ({}, publicdefaults, {$ elements : // cascaded jq 객체, 데이터의 요소 순서는 계단식 값 에피 어 바라터의 순서를 나타냅니다. Beijing City, District, Chaoyang District value : '', // valueSeparator로 분리 된 문자열은 처음 시작할 때 각 선택의 값을 나타냅니다. this.base (); var opts = this.options = this. this. ited), items = this.items = [], that = this = this = elements = opts. (i) {var $ el = $ (this); // cascadeitem 구성 요소를 인스턴스화하고 각 인스턴스의 previtem 속성을 이전 인스턴스로 가리 킵니다. // 첫 번째 previtem 속성을 undefinedvar cascadeitem = new CascadeItem ($ el, that. $ .trim (values [i]})); items.push (cascadeitem); // 각 캐스케이드 인스턴스 변경 사항은 CascadeView 구성 요소의 변경 이벤트를 트리거합니다. // 외부는이 콜백에서 비즈니스 로직을 처리 할 수 있습니다. {that.trigger ( 'change.cascadeview', that.getValue ());});});}); // 초기화는 첫 번째 캐스케이드 항목을 자동으로로드합니다. length && items [0] .load ();}, getOptions : function (옵션) {return $ .extend (), getDefaults () () {return defaults;}, getItemOptions : function () {var opts = {}, _options = this.options; for (publicdefaults의 var i) {if (publicdefaults.hasownproperty (i) && i) {opts [i] = _options [i]; valueEparator로 구분 된 문자열 인 계단식 항목 // 빈 캐스케이드 항목의 값은 getValue를 반환하지 않습니다. value.join (this.options.valueseparator);}}, 확장 : eventbase}); return cascadeview;});캐스케이드 :
define (함수 (요구, 내보내기, 모듈) {var $ = require ( 'jQuery'); var class = require ( 'mod/class'); var eventbase = require ( 'mod/eventbase'); var publicdefaults = require ( 'mod/cascadepublicdefaults'); var ajaxcache = require ( 'mod/ajaxcache'); = 새로운 ajaxcache ();/*** CascadeItem 구성 요소는 외부에 의해 직접 사용되지 않기 때문에 공개 피식에서 정의 된 옵션의 일부가 있으므로 일부 옵션은 CascadeView Component를 통해 CascadeView Component를 통과 할 때 한 번도 정의됩니다. publicdefaults의 옵션은 CascadeItem*/var defaults = $ .extend ({}, publicdefaults, {previtem : // 이전 캐스케이드 항목 값을 가리키는 것 : ''// 시작에 표시된 값}; var cascadeitem = class ({instancembers : {$ el, 옵션)의 {instancembers ($ el, worthing) this.base. $ el.on ( 'change', function ()은 선택 요소를 프록시합니다. 그 자체로, 컨텐츠는 hascontent && that.clear (); // 첫 번째 캐스케이드 항목이 아니고 이전 캐스케이드 항목이 유효한 옵션을 선택하지 않으면 (that.previtem && $ .trim (that.previtem.getValue () == ''); value = return; $ .trim (this.options.value); value! == ''&& this.one ( 'render.cascadeItem', function () {// 초기 값을. $ el.val (value.split ( ',')); // 이후 캐스케이드를 청소하고 데이터를 다시로드하고 ( 'joadgigger');});}); {return $ .extend ({}, this.getDefaults (), 옵션);}, getDefaults : getDefaults : function () {return defaults;}, clear : clear : var $ el = this. $ el; $ el.val ( ''); if (this.options.keepfirstoption) {// 첫 번째 유지 옵션 $ el.children (). filter ( ': gt (0)'. remove ();} else {// 모든 $ el.html ( '')을 지우십시오.} // 데이터를 지우고 다시로드하도록 알리십시오. this.options, paramvalue, that, that, this, datakey; // datakey는 캐시 캐시 // 첫 번째 캐스케이딩 항목의 데이터가 최상위 수준 데이터이므로, 고정 된 고유 키는 캐시드시 : 루트 // 다른 캐스케이드 항목에 의해 사용될 때 사용되는 키 이름은 이전 선택 If (! this. this.previtem) {paramvitem)에 의해 사용됩니다. opts.defaultparam; datakey = 'root';} else {paramvalue = this.previtem.getparamvalue (); datakey = paramvalue;} // 데이터 캐시에로드 된 데이터가 있는지 확인하고 Ajaxif (this.cache) {this.cache (this.cache)를 피하기 위해 직접 표시됩니다. else {var params = {}; params [opts.paramname] = paramvalue; ajax.get (opts.url, params) .done (function (res) {// resolVeajax이 콜백은 ajax에 의해 반환 된 데이터를 구문 분석하는 데 사용됩니다. 데이터 배열 = optsolveaax (ress.resolveaax); {that.cache [datakey] = data; that.render (data);}});}});}}, reender : reender : function (data) {var html = [], opts = this.options = that.options.foreach (function (ited) {html.push ([ '<옵션 value = "' ', 항목 [opts.valuefield],' '', '', '' '' '' 옵션 항목 [opts.paramfield], '>', item [opts.textfield], '</옵션>']. join ( ''));})의 Data-Param-value 속성에 대한 매개 변수 값; // 결국 첫 번째 옵션에 영향을 미치지 않도록 부록의 형태로 역동적으로 추가하여 값을 비우십시오 (html.join ( ')). this.hascontent = true; // this.trigger ( 'render.cascadeitem');}, getValue : function () {return. $ el.val ();}, getParamValue : function () {return this. $ el.find ( '옵션 : selected'); CascadeItem;});4. 데모 지침
코드의 구조를 보여줍니다.
프레임은 데모의 관련 부분입니다. html/regist.html은 효과를 보여주는 페이지이며 JS/App/Regist.js는 시연 효과 JS의 입력입니다.
define (함수 (요구, 내보내기, 모듈) {var $ = require ( 'jQuery'); var cascadeview = require ( 'mod/cascadeview'); function publicsetcascadeview (fieldname, opts) {this.cascadeview = new CascadeView ({$ ( '$ elements :'#'#'#'#'select ') '../api/cascade.json', OnChanged : this. $ ( 'input [name = "licenselocation"]'), recepfirstoption : true, setcascadeview : vublicsetcascadeview, onchanged : function (e, value) {location_views.licenselocation. val (value}}, companylocation : {compolution); setCascadeView : OnChanged : function (e, value) {location_views.companylocation. location_views.companylocation.setcascadeview ( 'companylocation', {values : location_views.companylocation. $ input.val ()});});페이지에 여러 계단식 구성 요소가 있으므로 위 코드에서 variable location_views의 기능에주의하십시오. 이 변수는 실제로 정책 모델을 통해 비슷한 방식으로 관리됩니다. 이 작업을 수행하지 않으면 중복 코드를 쉽게 생성 할 수 있습니다. 이 형식은 또한 비즈니스 로직이 처리되는 장소와 같은 항목 파일의 일부 비즈니스 로직의 분리 및 캡슐화에 더 도움이됩니다.
5. 다른
이것은 아마도 회사가 작성한 마지막 블로그 일 것입니다. 이틀 안에 새로운 부대에서 일하러 가야합니다. 평범한 작업 아이디어를 녹음 할 여가 시간이 너무 많지는 확실하지 않지만 적어도 블로그 작성 습관을 개발했으며 미래에 시간이 없으면 시간을 짜낼 수 있습니다. 올해 목표는 주로 지식을 넓히고 코드의 품질을 향상시키는 것입니다. 후속 블로그는 구성 요소 개발 범주에 더 많이 있습니다. 앞으로 Wulin.com 웹 사이트에 계속주의를 기울일 수 있기를 바랍니다!