ToolKit JS

툴킷V3

좋아, 그래서 버전 1과 버전 2를 폐기했습니다. 단순히 ToolKitMin의 궁극적인 목표가 반드시 프레임워크가 아니라 라이브러리인 도구 세트를 제공하는 것이기 때문입니다. ToolKitMin을 프런트 엔드 애플리케이션 개발을 지원하는 라이브러리로 생각할 수 있습니다. ToolKitMin은 다음 중 일부를 포함하므로 초보자가 배울 수 있는 강력한 도구입니다.

• 구성요소
  • 단순한 템플릿 엔진
  • 상태
• 쿼리
  • 기억 속에
• 서비스(일명 AJAX)
• 스토리지 컨트롤러
• 등.

다음은 일부 코드의 예입니다.

 var app = ToolKit ;
app . DOM . ready ( function ( ) {
  console . log ( app ) ;
  app . Session . set ( 'user_id' , { user_id : 1 } ) ;
  console . log ( app . Session . get ( 'user_id' ) ) ;

  // Query demo.
  var queryString = "age GTE 20" ;
  var queryCols = [ "age" , "name" ] ;
  var queryData = [ { "age" : "30" , "name" : "Jack" } , { "age" : "20" , "name" : "Jay" } , { "age" : "12" , "name" : "Stacy" } ] ;

  app . Query . setColumns ( queryCols ) ;
  app . Query . setTable ( queryData ) ;
  app . Query . select ( queryString ) ;

  app . Query . onComplete ( function ( records ) {
    console . log ( 'Complete query' ) ;
    console . log ( records ) ;
  } ) ;

  // AJAX demo.
  app . Service ( {
    url : window . location . href ,
    method : "GET" ,
    success : function ( data ) {
      console . log ( data ) ;
      app . Query . exe ( ) ;
    }
  } ) ;

  // Component demo.
  window . appState = {
    name : 'Will I Am'
  } ;

  var component = {
    name : 'demo' ,
    state : window . appState ,
    root : app . Utils . $one ( "body" ) ,
    template : '<h1><% data.name %></h1>' ,
    onStateChange : function ( ) {
      console . log ( "State changed!" ) ;
    } ,
    onRender : function ( ) {
      console . log ( "Rendered!" ) ;
    }
  } ;

  app . Component . registerComponent ( component ) ;

  app . Router . add ( / home / , function ( ) {
    console . log ( 'Home page.' ) ;
  } ) ;
  app . Router . add ( / about / , function ( ) {
    console . log ( 'About page' ) ;
  } ) ;
  app . Router . add ( function ( ) {
    console . log ( '404 Error?!' ) ;
  } ) ;
} ) ;

// Wait 2 seconds to see the component update.
setTimeout ( function ( ) {
  window . appState . name = "Will Smith" ;
} , 2000 ) ;

// Test the router.
setTimeout ( function ( ) {
  app . Router . navigate ( 'home' ) ;
} , 1000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( 'about' ) ;
} , 2000 ) ;

setTimeout ( function ( ) {
  app . Router . navigate ( '404test' ) ;
} , 3000 ) ;

ToolKitMin은 이름에서 알 수 있듯이 함께 모아진 도구 세트입니다. 많은 도구만 핵심으로 제거되어 ToolKitMin-JS가 가능한 한 가벼운 상태를 유지하면서 많은 기능을 제공하도록 합니다. 기능성.

토도

문서 등을 업데이트하세요!

---

특징

• 서비스
• 요소
• 유틸리티
• 질문
• 라우터
• 템플릿 엔진
• 기타
  • DOM
  • 통나무
  • 세션
  • 가게

서비스

서비스 방법은 단순히 ToolKit의 ajax 구현입니다.

요소

이는 템플릿 엔진을 통해 일부 DHTML 템플릿을 처리하는 템플릿을 구현하며, 예제와 같이 구성 요소 외부에서 조작할 수 있는 자체 상태도 처리합니다. 마지막으로 'onRender' 속성/함수를 사용하여 자체 컨트롤러를 전달할 수 있습니다.

유틸리티

이는 유용하고 간단한 메소드를 위한 이름 공간일 뿐이며 그 이상은 아닙니다.

질문

이를 통해 객체 배열에 대해 '쿼리'를 실행할 수 있으며 콜백을 사용하여 실행되어 대규모 데이터 세트를 반복하여 기본 실행 스레드가 차단되지 않도록 합니다.

라우터

SPA를 허용하여 프런트 엔드 내에서 다른 URL을 가질 수 있습니다. 현재는 해시 기반 URL만 허용하고 기본적으로 URL 변경 사항을 모니터링하지 않습니다. 즉, 사용자가 다른 URL로 이동하려고 시도합니다. 이러한 기능은 너무 단순해서 해당 기능을 구현할지 여부는 개발자의 결정에 달려 있다고 생각하지만, 결국 가볍다는 것은 의미가 있습니다.

템플릿 엔진

현재는 훨씬 작고 단순하지만 EJS와 다소 유사한 템플릿 엔진을 사용합니다.

기타

이는 필요하거나 필요하지 않을 때 사용할 수 있는 간단한 도구일 뿐입니다.

DOM

DOM 관련 기능의 네임스페이스입니다.

통나무

간단히 console.log 입니다. 단, dev-mode를 true로 설정해야 합니다.

세션

사용자 세션에 데이터를 저장할 수 있습니다(일명 세션 저장소에 대한 보호).

가게

데이터를 로컬 저장소에 저장할 수 있습니다.