Node.js, YUI 3 & 돔 조작 ... 내 오! »야후 블로그 사용자 인터페이스 (YUIBlog)

Node.js, YUI 3 & 돔 조작 ... 내 오!

년 | 7시 30 분에 2010년 4월 9일는 DAV 유리로 오전 개발 | 42 코멘트

에서 업데이트 이전 기사 : YUI 3 전역 유효 영역에서 실행하지 않습니다. 내가 몇 가지 조정을 만들었 nodejs - yui3 YUI 3 적절한 아닌 글로벌 모듈로 완벽하게 실행할 수 있도록 프로젝트를 만듭니다.

초기 이번 주 당신에게 실행에서 슬쩍했다 YUI 3 와 서버에 Node.js를 . 지금은 내가 지난 주에 정도 이상의 사람이 뭘했는지 당신에게 돌아 왔어요. 내가 GitHub에 대한 프로젝트를 통해 발견 주 전에 부부라는 jsdom을 하여 엘리야 Insua ( @ tmpvar ). jsdom로 자신을 설명합니다 :

[A] CommonJS의 DOM의 구현은 완전히 W3C DOM 스펙을 준수하는 동시에 플랫폼 독립하고 최소화 / 가능한 한 가벼운하기위한.

그게 내게는 흥미로운 것 같던데, 그래서 저장소를 갈래 그리고 그것이 어떻게 얻을 수 있는지에 함께 놀아 시작했습니다. 놀랍게도, 그냥했습니다. 그리고 그것이 자바 스크립트로 작성된 때문에, 그것은 새로운 기능을 해킹하고 추가를 시작하기는 쉬워. 제가 볼 수있는 유일한 문제는 그것이 가장 일반적인 웹 애플 리케이션 개발에 필요한 몇 가지 BOM 기능을 부족한, 순수한 DOM 레이어라고했다. 그래서 내가 jsdom에 대한 YUI 3을 실행하는 데 필요 기능을 추가로 설정합니다. 해킹의 며칠 후, 나는 거의 모든 YUI 3의 요구를 지원하는 jsdom의 기준 구현을했다.

YUI 3 jsdom와 함께 실행하기

난 그냥 포함하여 시작 jsdom을 하고 "가짜"문서 개체를 설정합니다. 이 시점에서 난 우리의 핵심 로드할 수 YUI 3 DOM 기능을 하지만, 이벤트 모듈 would't로드합니다. 그게 내가 몇 가지 주요 BOM의 추상화가 누락된 것으로 나타났습 때 - 예를 들어, 이벤트의 어떤 요구 window 개체를. 그래서 내가 "가짜"문서 및로드하기 시작 것들을 일치하도록 "가짜"창 개체를 만들었습니다. 제가 이전 문서에서 말했듯이, YUI 3의 모듈 시스템은 환상이고 할 일이 이런 종류의 훨씬 더 쉬워집니다.

대부분의 스크립트 액세스 document 및 window 직접. YUI 3 그렇게하지 않고 대신에, 우리는 각 설정 YUI 인스턴스에 연결된에서 활성 문서 / 윈도우에 대한 참조를했습니다. 이들은 액세스할 수 있습니다 Y.config.doc 및 Y.config.win . 모든 YUI 3 모듈은이 연습을 준수 (그리고 우리는 강하게 당신의 동일한 작업을 수행하는 것이 좋습니다 YUI 3 갤러리 모듈 또는 자신의 주문품의 구성 요소).

어떤 사람이 조금 과도라고 생각할 수도 있겠지만 YUI 3 에디터 내 초기 작품에서이 기능을 이미 사용했습니다. 저는 YUI 인스턴스를 만들 수이고 그것은 IFRAME의 창 / 문서에 묶여있다. 이것은 그 문서 내에서 YUI를로드하지 않고 IFRAME 내부의 선택 및 이벤트를 실행할 수있다는 것을 의미합니다. 서버에서이 더욱 의미가 있습니다. 당신은 동일한 프로세스에서 열려있는 여러 문서가있을 수 있지만 YUI 3의 경우는 그들이 사용하는 문서에 대해 알아야합니다.

이 작품을 지원하기 위해, 내가라는 새로운 YUI 3 모듈을 만들었습니다 nodejs-dom . 이 모듈은 적절한 라이브러리를 포함, 가능한 경우, 그리고 함께 YUI 인스턴스를 설정합니다 document 와 window 참조. 구성과 함께, 그것은 불리는 인스턴스에서 새 개체 생성됩니다 Browser . 모든 YUI 3 모듈 사용 노드와 노드 사용하기 때문에 Y.config.doc , 당신은 서버에 YUI 3 코드 작업을하기 위해 다른 아무것도 할 필요가 없습니다. 하지만 당신이 오래된 자바 스크립트 작업 및 액세스해야하는 경우 document , window , location 또는 navigator 객체를, 그들은 모두에서 사용할 수있어 Browser 개체입니다. 여기에 어떤 빠른보기의 Y.Browser 객체처럼 보이는 :

 {네비게이터 : 
    {userAgent : 'Node.js (다윈, U, RV : 0.1.33)'
    , appVersion : '0 .1.33 '
    플랫폼 : '다윈'
    }
 윈도우 : 
    {screenTop : 0
    , pageYOffset : 0
    , screenY : 0
    , 네비게이터 : [순환]
    , innerHeight : 768
    , pageXOffset : 0
    , screenLeft : 0
    , screenX : 0
    , innerWidth : 1024
    , 길이 : 1
    , scrollY : 0
    , outerHeight : 768
    , contentWindow : [순환]
    , 프레임 : [[원형], [길이] : 1]
    , setInterval : [기능]
    , 이름 : 'nodejs'
    , scrollX : 0
    , 문서 : '# 문서의
    , outerWidth : 1024
    , setTimeout : {[기능]
    , 위치 : {HREF : '/ 사용자 / davglass / .node_libraries / browser.js'}
    }
 자기 : [순환]
 , 문서 : [순환]
 , 위치 : [순환]
 }

innerHTML 지원

이후 innerHTML DOM Level1 사양에없는, 그것은 jsdom에 없어요. 이것은 나를 위해 요구했습니다, 그래서 해결책을 찾기 위해 필요했습니다. 저는라는 GitHub에서 프로젝트를 발견 노드 htmlparser을 그리고 그것은 잘못된 구문을 포함하여 HTML을 구문 분석할 수 있도록 주장했다. 내가 갈래의 일부 코드를 변경했고, 구문을 청소하고 문제의 몇 가지를 해결했습니다. 당신이 집에서 함께 다음과 같은 경우에는 제가 포크를 사용하는 것이 좋습니다 거라고, 나는 포크가 작동 알고 오래 필요로 유지하기 위해 계속됩니다. 결국 누군가는을 기반으로 파서 작성합니다 @ izs 의 색소폰 - JS의 모듈을.

그럼 이제 코드를 볼 수

이것은 매우 간단한 인사의 세계 예입니다 :

 YUI는 (). ( 'nodejs - DOM', '이벤트', '노드'기능 (Y) {사용
     var에 문서 = Y.Browser.document;
     document.title = '는 이것은 테스트입니다';
     var에 I = Y.Node.create ( '<I> 시험이 </ i>를');
     i.addClass ( 'foo는');
     . Y.one ( '몸') 추가 (I);

     var에 사업부 = document.createElement ( '사업부');
     div.id = 'foo는';
     div.innerHTML = '<em id="foo"> 테스트 </ em>는 굉장이 <strong id="bax"> </ strong>를!';
     document.body.appendChild (사업부);
    
     var에 foo는 = Y.one ( '# foo는');
     foo.addClass ( '바');
     sys.puts (document.outerHTML);
 });

위의 코드는 HTML의 미리보기를 반환합니다 :

 <HTML>
   <HEAD>
     <TITLE> 이것은 테스트 </ TITLE>입니다
   </ HEAD>
   <BODY>
     <i class="foo">이 </ I>를 테스트
     <div id="foo" class="bar">
       <em id="foo"> 시험 </ em>는이 <strong id="bax"> 신난다! </ strong>을
     </ 사업부>
   </ BODY>
 </ HTML>

내가 생각인가요?

그것이 물건의 데모를 보여주는 때받은 가장 일반적인 문제입니다. 대답 : 예, 이것은 당신이 생각하는 무엇입니까 : 표준 DOM 및 BOM API에 대한 표준 자바 스크립트를 작성하여 서버에서 렌더링 전체 문서. 나는에서의 사용 몇 가지 예를 가지고 GitHub 프로젝트를 . 이 예제 렌더링 YUI 세 포함 Tabviews , 슬라이더 및 오버레이 . 사용 3 2 프로젝트는 또 YUI이 렌더링 수있었습니다 일정 및 레이아웃 관리자를 .

예

당신이 행동에서 그들을 볼 수 있도록 내 자식의 repo에서 예제 몇 가지를 버렸을 :

캘린더 데모는 서버에서 일정을 생성하고 선택한 일 개월 정적 탐색을 제공하는 YUI를 사용하여 프로 그레시브 강화의 예를 보여줄 수 있도록 설계되었습니다. 이 구현은 순수한 자바 스크립트에서 렌더링 클라이언트에서 사용할 수로 서버측보기를 생성하는 동일한 자바 스크립트를 사용합니다. 더 클라이언트측 JavaScript는 의도가 없습니다. 당신이없이 자바 스크립트를 지원 클라이언트 기능을 제공하는 서버쪽에 완전히 기능을 DOM을 렌더링, 진보 향상에 사용하려는 기준으로 생각하시면됩니다.

두 번째 예제는 혼합 및 서버 데이터가 무엇인지와 클라이언트 데이터를 무엇입니까 일치하는 방법을 보여줍니다. 전 YUI 3 제공하는 진정한 MVC 프레임 워크를,있다면, 내 위젯 템플릿 (DHTML)에서와 페이지 템플릿 (정적 HTML)에서 내 데이터 (JSON)을 분리할 수 있습니다. 예를 들어 여러분이 원하는에만 부품을 얻기 위해 동일한 데이터를 사용하지만, 3 개의 장소에서 액세스할 수있는 방법을 보여줍니다.

난 당신이 컨텍스트 스위칭의 무료 진보적인 개선을 지원하기 위해 응용 프로그램의 다양한 수준의 렌더링 코드의 여러 수준을 작성 무료로 가능한 미래를 포함하여 제가 볼 여기서 전원을 참조 바랍니다. 즐기십시오! ( @ davglass )

공유 및 확장 : del.icio.us로 스크랩 | 디그 그것! | 레딧!

42 코멘트

완전히 사라져 버려. 이것은 몇 가지 심각하게 멋진 물건입니다.
에 의해 코멘트 로렌 스미스 - 2010년 4월 9일 #
당신이 여기있어 몇 가지 흥미로운 물건 우와, :) 또한, 아마 libxmljs은 그것이 JS의 C 대신에 작성된의 HTML로 파싱을위한 빠른 것입니다.
에 의해 코멘트 구로키 Kaze - 2010년 4월 9일 #
이것은 환상적! 나는 nodejs - DOM은 템플릿과 같은 꽤 몇 문을 열 수 -이 작업 할 수 있습니다는지보고 오늘 그것에 대해 자세히 살펴해야합니다. : D
에 의해 코멘트 스티븐 Belanger - 2010년 4월 9일 #
내가 자바 스크립트에서 HTML의 서버쪽 세대의 실제 유스 케이스를 설명하십시오.
왜 언제이 있으면 좋을 텐데?
에 의해 코멘트 드미트리 Snytkine - 2010년 4월 9일 #
@ 로렌 감사합니다
@ 구로키는보고 있었어요,하지만 그것은 순간에 안정 아니에요.
@ 스티븐 멋있 사람들이이 물건과 어떻게 일하는지보고 기다릴 수 없습니다.
에 의해 코멘트 DAV 유리 - 2010년 4월 9일 #
@ 드미트리 Snytkine
음, HTML 조각 마음에 와서. 당신이 원하는 모든 경우에 외부 템플릿 파일을로드하는 템플릿 언어를 사용하면 예를 들어, 조금 더 할 수 있으며, 링크를 생성합니다.
그것은 'HREF'속성이 존재하는 가정 아마도 안전하지만 당신은 또는 'REL'사용, '제목', '수업', 'ID'등을하고 싶지 않을 수도 있습니다
이러한 각 옵션 템플릿을하려면 일반적으로 전체 무리의가 필요합니다 제표 경우, 쉽게 방금이 방법으로 몇 가지처럼 jquery와 요소를 생성할 수있는 경우;
. var에 조각 = $("). attr ( 'HREF', 'http://google.com') attr ( '아이디', 'someid') toString ().;
그것은 DOM 상호 작용을 사용하지 않고 동일한 결과를 달성하기 위해 적어도 5 정도의 코드로 시간과 좀 더 시간이 걸릴 거예요.
에 의해 코멘트 스티븐 Belanger - 2010년 4월 9일 #
@ 드미트리 이에 대한 실제 사용하는 케이스는 다음과 같습니다
1. 프로 그레시브 향상. 당신이 이미 YUI와 완벽한 기능 캘린더를 가지고 캘린더 예제를 가지고 있지만, 그것이 당신이 PHP를 말하는, 다른 일정을 작성해야 서버에서 작동되도록하려면 다음 당신이 관리 코드를 배있다.
2. 같은 언어 == 적은 코드입니다. 서버에 내 코드는 또한 클라이언트에서 실행할 수있다면 내 코드베이스는 이제 크게 작습니다.
3. 빠른 돌아서. 제가 두번 아무것도 구축할 필요가 없기 때문에 서버와 클라이언트의 코드는 거의 동일 이제, 내가 그 시간을 반으로 빌딩 무언가를 보낼 수 있습니다. 양식 유효성 검사는 큰 하나입니다. 당신은 검증을 필요로 클라이언트에서 양식을 가지고 있지만 서버에서 동일한 유효성 검사를해야합니다. 한번 할 수있을 때 왜 두 개의 서로 다른 언어로 두 번 만드는가?
그 도움을 조금 더 설명합니까?
에 의해 코멘트 DAV 유리 - 2010년 4월 9일 #
@ 스티븐 멋진 코멘트;)
에 의해 코멘트 DAV 유리 - 2010년 4월 9일 #
귀하의 설명 데이브와 스티븐 감사합니다.
달력 예제에 대해서 나는이 서버 측 라이브러리 비교 방법을 궁금해?
asp.net 개발자에 이미 클라이언트 쪽 부분의 처리 소위 컨트롤을 사용할 수 있습니다.
나는 자신의 솔루션을 만들 (YUI와 야후 같은)하지만 smaler의 webfirms에 대한 이점이있다면 모르겠 기업의 장점을 잘 알고 있습니다.
저는 작은 기업가뿐만 아니라이 일에서 benfit 수 있는지 또 다른 예제를 제공을 여쭤봐도 될까요?
감사와 안부
pxlpz에 의해 코멘트 - 2010년 4월 9일 #
참고 jsdom @와 함께 갈 수있는 순수 JS 창 개체도있다 http://github.com/tmpvar/jswindow가
rdzah에 의해 코멘트 - 2010년 4월 9일 #
@ rdzah 아직 작성하거나 기능 아니에요. 그것이 정말 필요하지 않은 때 아직 전체 창 개체를 만들기 위해 작은 바다 같습니다. 내 "가짜"창이 기존의 JS 작업을 만드는 데 필요한 대부분의 아무것도 할 것입니다;)
에 의해 코멘트 DAV 유리 - 2010년 4월 9일 #
데이브,
당신은 바위. 정말로.
하지만 난 이말이하고 싶었어요 당신이 정말로 동일한 ID로 두 개의 요소를 포함하고 예제 코드를 게시나요?
Siggy
SiggyTheViking에 의해 코멘트 - 2010년 4월 9일 #
PS
죄송하지만 지금은 이름, DAV를 잘못 입력.
SiggyTheViking에 의해 코멘트 - 2010년 4월 9일 #
좋은 물건 ...하지만 ... Aptana의 Jaxer는 스페이드에서 이것을 (플러스 원활한 E4X 지원)이 ...
왜 안 포크 github (지금 오픈 소스의)에 Jaxer하고 node.js에서 실행 해는 ... 그러면 이런 것들이 (그리고 일부) 바로 무료입니다 ALLLLLL.
BTW : 약 확실하지 이들에게 "이것이 유용한 이유를"... 이유는 PHP가 유용합니다? 같은 ... 정확한 ... 사용 케이스. 서버측 JS (SSJS)의 가치는, 그러나, 우리는 응용 프로그램간에 코드 사이에 100 % 패리티를보고 시작할 수 있습니다 ... 그리고 거기에 가치를보고 멀리 마음을 늘릴 수 없다면 ... 죄송 for'ya 의미 :)
여기에 좋은 물건 (다시).
라이언 Gahl에 의해 코멘트 - 2010년 4월 15일 #
node.js은 V8 (따라서 아직 없음 기본 E4X) 반면 신경쓸 필요는 (가지) ... Jaxer의 DOM/BOM/E4X/XHTML는 Spidermonkey에서 직접 파생됩니다.
아직도 ... 노하우를 가진 사람도 단지 개념적 관점에서 경우, Jaxer 프로젝트의 밖으로 귀중한 작업 물건 t를 당길 수 있어야합니다.
가능한 V8/node.js 문맥 소리에 Spidermonkey / Tracemonkey를 포팅?
라이언 Gahl에 의해 코멘트 - 2010년 4월 15일 #
이봐, 난 여기 100 % 감각이 없어 유지.
나는 단순히 "node.js /이 handrolling 접근"VS의 질문 같아요. : Jaxer / Spidermonkey "
누군가가 Jaxer의 능력에 맞는 모듈의 컬렉션을 발행하지만이있는가 node.js / CommonJS / JSGI 생태계에서 온 가치 추가되면 결국 남자 handrolling node.js 아마 승리.
그리고 좋아, 나는 지금 끝났어요. 좋은 물건 이군.
라이언 Gahl에 의해 코멘트 - 2010년 4월 15일 #
@ SiggyTheViking -
사실, 그 (DUP ID)는 예상대로 작동하는지 보여주 목적에 있었;)
에 의해 코멘트 DAV 유리 - 2010년 4월 19일 #
안녕하세요 DAV,
한 버그 외에 어떤 다른 문제 당신이 찾고 노드 htmlparser에 수정나요? 더있다면, 나는 기꺼이 끌어 오기 req 또는 패치를 받아 들이지.
당신은 최신 노드 htmlparser에서 살펴본다 주시겠습니까? 그것은 스트리밍을 지원 V1.0 + 지금은 당신이 갈래의 버전보다 40 % 빠른이며, 내 현재 프로젝트의 핵심이기 때문에 확실히 미래에 그것을 지원하는 것입니다.
에 의해 코멘트 크리스 Winberry - 2010년 4월 20일 #
이 실적은 어떻습니까? 당신이 벤치마킹 UTIL을 통해 기본적인 테스트를 실행하고 HTML의 문자열을 뱉어 그것을 비교 있나요? 단지 이것이 높은 트래픽이 사이트에 가능한 것입니다 여부에 대해서 궁금.
벤에 의해 코멘트 - 2010년 4월 20일 #
벤 -
나는이 개념의 증거이며 그것에 일주일에 따라 조금 지출 때문에, 아직 공식적인 벤치마킹을 완료하지 않은;)
나는 그러나, 내 목록에 그렇게 나왔어요
에 의해 코멘트 DAV 유리 - 2010년 4월 21일 #
굉장 굉장 멋진 물건! 지금 분기 및 복제!
스파르타에 의해 코멘트 - 2010년 4월 24일 #
작품 위의 예제 없음. 이 오류는 다음과 같습니다
502 불량 게이트웨이
Teodor에 의해 코멘트 - 2010년 5월 2일 #
@ Teodor -
그들은 지금 내 호스팅 제공 업체가 제 슬라이스의 호스트를 다시 부팅하고 노드 프로세스가 기계와 온 게 아니 거니 ..
에 의해 코멘트 DAV 유리 - 2010년 5월 2일 #
안녕 DAV,
이 겪었 내 응용 프로그램에서 사용하기위한 'nodejs - DOM'패키지를 가져올 수 없습니다.
나는 다음과 같은 시나리오를했습니다.
저는 YUI 3 추가하는 간단한 HTML 페이지를 가지고 iframe에 몇 가지 다른 HTML 페이지에 IFRAME 집합의 SRC 있습니다. 이제 내가 부모 HTML 페이지에 IFRAME에 표시되는 페이지의 클릭 이벤트를 처리할 수 있도록 IFRAME에 표시되는 페이지에 이벤트 위임을 추가하려면.
게시물에 따라 가능한 것으로 보인다. 당신은 방법에 대해 설명하시기 바랍니다 것입니다.
감사와 안부.
에 의해 코멘트 Shankha - 2010년 5월 13일 #
"언어와 동일한 언어 == 적은 코드", 댓글 주셔서 감사합니다. 그것은 정말 내게을 클릭했다. 난 그냥 Node.js보고되고 전에 jsdom 봤어요. 우리는 YUI를 (순간 jQuery)를 사용하지 마십시오. 그래서 addingWould 동일한 원칙이 적용됩니다? 나도 같은 결과를 얻으려면 노드 htmlparser과 가짜 브라우저를 추가할 수 있을까요? 몇 가지만 사용할 수 있습니다.
뿐만 아니라 이것은 코드 중복 문제를 해결하지하지만 난 테스트 JS 코드의 관점에서 그것에 대해 생각하고 있어요. 일반적으로 회사와 우리가 아는 세상이 아직도 grappling 것 같다 것.
제가 인해 evented되는 Node.js 그것을 이해로서 성능에 관해서는, 그것이 너무 빨리 또는 최소한 확장성하지 것이라는로?
필 Thpmpson에 의해 코멘트 - 2010년 6월 2일 #
@ Shankha -
죄송 해요, 여러분의 게시물에 이메일을받지 않았다. 이 버전은 iframes 또는 서버 쪽 이벤트를 지원하지 않습니다.
에 의해 코멘트 DAV 유리 - 2010년 6월 2일 #
@ 필 -
이론적으로 jQuery 내 노드 htmlparser 패키지와 JSDom에서 실행해야합니다. 나는 jQuery에 대해 아무것도 조금 알다시피, 난 그것을 테스트하지 않았습니다.
나도 것을 그것이 그 자체의 인스턴스에 대한 문서와 창 구성을 위해 설계되지 않는 라이브러리를 실행하기 어려울 수 있습니다보기 (요청에 따라 새 문서)의 샌드 박스 지점에서. 이것은 YUI 3 정말 빛나는 곳입니다. 각각의 새로운 YUI 인스턴스는 (요청 당 하나)는 자신의 문서와 윈도우 그것에 묶인 채 혼자 거에요하십시오. 그렇다면 여러 요청에 혼합 데이터에 대해 걱정할 필요가 없습니다.
여기에 내가 일을 시작하는 이유 중 하나는 서버 측 테스트 스위트에 추가되었습니다. 그러나, 그것은 실제 브라우저 테스트를 대신할 수 없습니다.
에 의해 코멘트 DAV 유리 - 2010년 6월 2일 #
당신의 노력 DAV 주셔서 감사합니다.
이려고 노력하고 있지만은 "ReferenceError :"가 나타납니다 문서를. "정의되지 않은"오류가 있습니다. 활성화된 디버깅 난 그게 그냥 "이벤트 위임 - debug.js"로드된 후 발생하는 걸 볼 수 있습니다. 나는뿐만 아니라 예제를 실행 해봤 그리고 그들은 동일한 오류가 발생했습니다.
어떤 제안?
감사
에 의해 코멘트 피터 - 2010년 7월 17일 #
@ 피터, 당신은 GitHub에서 최신 코드 또는 최신 버전을 사용하고 있습니까? 난 그냥 GitHub에서 최신에 테스트 모든 예제는 여전히 작동합니다.
아직도 문제가있는 경우이 게시물 해제 (davglass [시] Gmail은 [점] com)을 내게 메모를 내려주십시오.
에 의해 코멘트 DAV 유리 - 2010년 7월 21일 #
DAV,
단지 자식으로부터 이것을 체크 아웃 했어요. 경로의 일부는 자식의 추가 정보가 완전히 작동하지 않는 의미 외부 모듈에서 변경되었습니다.
나는 또한 는군요
################################################## #########
# 경고 : 노드 htmlparser 찾을 수 없습니다.
# Element.innerHTML 세터 지원이 중지되었습니다
# Element.innerHTML 게터 지원은 여전히 작동합니다
# 다운로드 : http://github.com/tautologistics/node-htmlparser
################################################## #########
Y - 서버 template.js 실행하는 경우.
또한 경로 중 하나가 그것에 자신의 이름에 있던 디렉토리를 가리 키되었다 것으로 나타났습니다. 지금 어디에 불행히도 내가 정확히 기억이 안나.
죄송합니다 이것을 게시하는 좋은 장소가있다면. 저는 현재 그냥 일요일 오후에 고달 팠다 구 :).
앨런 홀리스에 의해 코멘트 - 2010년 8월 8일 #
@ 앨런 - 당신은 jsdom 및 노드 htmlparser 그들은이 예제에서 작동하는 것으로 알려져 있으므로 제 포크한다.
에 의해 코멘트 DAV 유리 - 2010년 8월 10일 #
@ DAV
건배 난 당신이 너무 jsdom의 포크 있었는지 몰랐 네요. 그것은 내게 조금 혼동 browser.js 모듈했습니다. browser.js이 htmltodom 및 domtohtml을 필요로 두 개의 모듈은 이제이 있습니다.
browser.js 지금도 당신이. windowAugmentation 호출에서 사용하고자하는 HTML 파서에 전달하실 수 있습니다. 일단 그냥 일한다고 다 했어.
내가 했어야 이상의 것들을 작업에 조금 느린 거라고 이것은 node.js과 YUI 함께 첫 경험이었습니다.
난이 샘플을 만드는 시간을 주셔서 감사 드리며, 그들이 나에게 좋은 거래를 배울 수있었습니다.
다시 한번 감사드립니다,
앨런
앨런 홀리스에 의해 코멘트 - 2010년 8월 10일 #
이 기사를 읽고 질문이 : 내가 사용해도 될까요 이것은 머리가 브라우저로 넣어서?
예를 들어 코드 우는 작동됩니까?
YUI는 (). ( 'nodejs - DOM', '이벤트', '노드'기능 (Y) {사용
var에 문서 = Y.Browser.document;
document.location = 'http://www.ajax_application.any';
sys.puts (document.outerHTML);
});
내가 이런 걸 사용 긁어하고자 복잡한 응용 프로그램을했습니다. 지금은 Envjs를 사용하고 있지만 난 생산에 성능 처벌을해야합니다 알고 그리고 난 더 나은 옵션을하고 싶습니다.
벤츄
호르헤 벤츄에 의해 코멘트 - 2010년 12월 2일 #
Ooops!
해야
window.location = 'http://www.ajax_application.any';
호르헤 벤츄에 의해 코멘트 - 2010년 12월 3일 #
@ 호르헤 -
이 같은 원격 페이지의 콘텐츠에 액세스할 수 있습니다 :
https://gist.github.com/574000
그러나 원격 페이지가 JavaScript를 실행하지 않을 수도 있습니다 그리고 당신은 "링크를 클릭"또는 그것과 상호 작용할 수있는 페이지에 대한 액세스가되지 않습니다. 그것은 단지 요청한 페이지의 로컬 수정 가능한 복사본 수 있습니다.
에 의해 코멘트 DAV 유리 - 2010년 12월 3일 #
DAV,
난 당신의 코드를 확인했고 제가 일부를 완료 수 있다고 생각합니다. 내 목적은 항상 동일한 응용 프로그램을 다쳤고하는 것입니다, 나는 (E 등을 클릭, 버튼) 이미지, CSS 및 사용자 인터페이스에 대한 상관 없어요, 내가 제대로 DOM 구조를 생성하기 위해서만 필요합니다.
스크립트에 대해, 그 페이지 안에있는 DOM을 완료하기 위해로드 후 코드를 실행할 수 있습니다. 나는 document.write와 document.writeln로 DOM을 변경할 방법을 구현해야합니다.
런타임에 스크립트가 새로운 Windows에 대한 수요가 있기 때문에 아마 window.open과 브라우저를 구현하기 위해 필요한 것은 창의 목록이 있어야합니다.
내 인생을 쉽게 어떤 의견을 가지고 있습니까?
감사합니다,
벤츄
호르헤 벤츄에 의해 코멘트 - 2010년 12월 4일 #
DAV
나는 노드 V 0.3.2 (왼쪽 탐색 모든 것들을 결합 예)에서 표현하는 서버 예제를 실행 해요. 그것은 "NULL 일련의 메서드를 호출할 수 없습니다"로 첫 번째 집합 제목 호출에 실패합니다.
나는 개인 일정 및 tabview 예제를 실행하지만 DataTable의 예제 또는 다쳤고, 예제 수 없습니다.
나는 그것의 실패는 어디 콜백 PARAM 바로 지금 어디에 있든 제가 YUI 개체를 얻을 것
모든 아이디어 / gotchas? 이 노드 0.3 문제인가?
사이에서 코멘트 - 2010년 12월 20일 #
나는 위의 바보 관찰해서 미안 해요 .... 모든 예제를 사용 콜백 PARAM로 YUI 객체 있습니다.
여기 흔적입니다
. / TNT - DataTable의 - script.js
정보 : (YUI) : 누락 모듈 : nodejs - DOM, 1
정보 : (YUI) : 가져오기 로더 : / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build/loader/loader-debug.js
정보 : (얻을) : URL : / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build/loader/loader-debug.js
(노드) process.compile 사용해서는 안됩니다. ( 'VM')이 필요 사용합니다. runInThisContext을 대신.
정보 : (얻을) :로드 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build/loader/loader-debug.js
정보 : (YUI) : 누락 모듈 : 덤프, nodejs - DOM, 2
정보 : (YUI) : 로더 사용
정보 : (로더) : 덤프를로드하려고 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build/dump/dump-debug.js
정보 : (얻을) :로드 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build/dump/dump-debug.js
정보 : (로더) : nodejs - DOM을로드하려고 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : / usr/local/lib/node/.npm/yui3/0.5.17/package/lib/yui3-dom.js
정보 : (얻을) :로드 / usr/local/lib/node/.npm/yui3/0.5.17/package/lib/yui3-dom.js
정보 : (로더) : 로더 마무리 : 성공, yui_3_2_0_1_12928339018771, YUI -베이스, YUI - 로그, 덤프, nodejs - DOM
정보 : (YUI) : 사용 가능한 종속성 첨부 : YUI -베이스, YUI - 로그, 덤프, nodejs - DOM
정보 : (YUI) : 중첩 사용하는 콜백 : YUI -베이스, YUI - 로그, 덤프, nodejs - DOM
정보 : (YUI) : 캐싱 요청 nodejs - DOM
정보 : JSDom 시험 ..
정보 : (로더) : 정의되지 않은 모듈 : yui2 - DataTable의는 패턴을 일치 : yui2 -
정보 : (로더) : 정의되지 않은 모듈 : yui2 - 데이터 소스는 패턴을 일치 : yui2 -
정보 : (YUI) : 누락 모듈 : yui2 - DataTable의, yui2 - 데이터 소스, 2
정보 : (YUI) : 로더 사용
정보 : (로더) : / yui2 - DataTable의 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build를로드하려고 시도
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js
정보 : (로더) : yui2이 - 데이터 소스로드를 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datasource/yui2-datasource-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datasource/yui2-datasource-debug.js
정보 : (로더) : 로더 마무리 : 성공, yui_3_2_0_1_12928339018771, yui2 - DataTable의, yui2 - 데이터 소스
정보 : (로더) : 정의되지 않은 모듈 : yui2 - 야후, 패턴을 일치 : yui2 -
정보 : (로더) : 정의되지 않은 모듈 : yui2 - DOM은 패턴을 일치 : yui2 -
정보 : (로더) : 정의되지 않은 모듈 : yui2 이벤트는 패턴을 일치 : yui2 -
정보 : (로더) : 정의되지 않은 모듈 : yui2 - 피부 - 샘 - DataTable의는 패턴을 일치 : yui2 -
정보 : (로더) : 정의되지 않은 모듈 : yui2 - 요소는 패턴을 일치 : yui2 -
정보 : (YUI) : 누락 모듈 : yui2 - 야후, yui2 - 이벤트 yui2 - DOM, yui2 - 피부 샘 - DataTable의, yui2 - 요소, 5
정보 : (YUI) : 로더 사용
정보 : (로더) : yui2 - 피부 - 샘 - DataTable의 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /를로드하려고 시도
디버그 : (얻을) : Get.css
디버그 : (얻을) : 실제 CSS 로딩
정보 : (로더) : / yui2 - 야후 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build를로드하려고 시도
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-yahoo/yui2-yahoo-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-yahoo/yui2-yahoo-debug.js
정보 : (로더) : yui2 행사를로드하려고 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-event/yui2-event-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-event/yui2-event-debug.js
정보 : (로더) : yui2 - DOM을로드하려고 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-dom/yui2-dom-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-dom/yui2-dom-debug.js
정보 : (로더) : yui2 - 요소를로드하려고 시도 / usr/local/lib/node/.npm/yui3-core/2010.11.03/package/build /
정보 : (얻을) : URL : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-element/yui2-element-debug.js
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-element/yui2-element-debug.js
정보 : (로더) : 로더 마무리 : 성공, yui_3_2_0_1_12928339018771, yui2 - 야후, yui2 - 이벤트 yui2 - 데이터 소스, yui2 - DOM, yui2 - 피부 샘 - DataTable의, yui2 - 요소 yui2 - DataTable의
정보 : (YUI) : 중첩 사용하는 콜백 : yui2 - DataTable의, yui2 번 데이터 소스
정보 : (YUI) : 캐싱 요청 yui2 - DataTable의, yui2 - 데이터 소스
정보 : 데이터 원본 만들기 ...
정보 : DataTable을 만들기 ...
정보 : (얻을) :로드 : http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-element/yui2-element-debug.js
오류 : (nodejsyui3) : -----------------
오류 : (nodejsyui3) : 형식 오류는 단 수완을 가지고 #의 속성 헤더를 설정할 수 없습니다
오류 : (nodejsyui3). [개체 개체]에서 _formatTdEl ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:5480:18 )
오류 : (nodejsyui3) : [개체 개체]에서 _getTrTemplateEl (. http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:5448:25 )
오류 : (nodejsyui3). [개체 개체]에서 _addTrEl ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:5519:29 )
오류 : (nodejsyui3) : [개체 개체]에서. ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:7327:47 )
오류 : (nodejsyui3) : Object.run (시 http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:92:28 )
오류 : (nodejsyui3). [개체 개체]에서 _runRenderChain ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:7269:24 )
오류 : (nodejsyui3). [개체 개체]에서 렌더링 ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:7397:10 )
오류 : (nodejsyui3) : [개체 개체]에서. ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datatable/yui2-datatable-debug.js:13101:18 )
오류 : (nodejsyui3) : Function.issueCallback에서 ( http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datasource/yui2-datasource-debug.js:389:26 )
오류 : (nodejsyui3) : [개체 개체]에서 handleResponse (. http://yui.yahooapis.com/2in3.4/2.8.2/build/yui2-datasource/yui2-datasource-debug.js:1150:8 )
오류 : (nodejsyui3) : -----------------
사이에서 코멘트 - 2010년 12월 20일 #
난 다시 돌아와서 노드 버전 사이의 전환 네이브를 설치하지만, 이전과 같은 오류 다퉜다. 이것은 나를 위해 작동하지 않는 예입니다 :
scrape.js, 긁어 - object.js, TNT - DataTable의 - script.js, Y - server.js.
오류가 지속 세터가없는 개체에 Null 또는 setters에 setters와 관련이 있습니다.
사이에서 코멘트 - 2010년 12월 20일 #
@ 사이 -
당신이 그들을 이메일로 대신 여기에 게시, 그것은 의견에 읽기 힘들 수 있습니다;)
davglass (시) Gmail에 (점) COM
에 의해 코멘트 DAV 유리 - 2010년 12월 20일 #
이것은 정말 멋지다 된이며이 있지만 수술을보기 위해 기다릴 수 없어 ...
제가 실행하는 프로젝트를 얻을 수 없습니다. 디버거 express.bodyDecoder ()와 같은 라인 35 server.js 폭탄이 정의되지 않은라고 나옵니다.
저는 무거운 YUI의 사용자 및 RoR의 적은 및 node.js와 serverside YUI 나를 도울 수 있는지보고 싶었어요. 내가 가진 버전이 문제 (node.js 0.5.0 - 사전과 표현 2.0.0beta)입니다면 모르겠 전에 node.js을 사용하지 마십시오.
피트
피트에 의해 코멘트 - 2011년 3월 6일 #
@ 피트 -
내 예제를 사용하려면이 노드 0.4.2 및 Express@1.0.7를 사용해야합니다. 익스프레스 베타도 새로운 내가 아직 내 예제를 통해 이동하지 않았습니다.
에 의해 코멘트 DAV 유리 - 2011년 3월 7일 #

죄송합니다, 코멘트 양식이 시간에 문을 닫습니다.

에서 제공하는 워드 프레스 에서 야후! 웹 호스팅 .

야후 블로그 사용자 인터페이스 (YUIBlog)