questa sarà in realtà solo una libreria
parlare spero che sia okay con tutti così
il problema è che spesso devi modificare
qualcosa di serio nei componenti web
interfacce di pagine web e web
le applicazioni stanno diventando sempre di più
complicato rispetto alle cose comuni
vuoi modelli o vuoi interrogare
o qualcosa da scrivere dagli utenti
le persone stanno usando l’edificio intero
ambienti di sviluppo integrati
all’interno del browser e HTML ha un
l’editor di testo integrato è l’area di testo
elemento ma è alla pari con la nota
che se parli di serio
modifica del codice e peggiorare le cose
ha una programmazione molto molto minimalista
interfaccia puoi ottenere il suo valore da te
puoi dargli un nuovo valore che puoi anche se
sei disposto a sopportare un po ‘di dolore
su di esso e che esplora ottiene il
selezione e questo è praticamente dove
si ferma così per le cose tipiche in cui tu
voglio solo entrare e regolare un po ‘di codice
interrogare ciò che l’utente sta effettivamente facendo
non scala anche perché se ne hai uno
poche migliaia di righe di codice e tu vuoi
per ottenere e impostare il valore di un’area di testo
è ancora sui browser moderni
seriamente lenti erano in
metà 2000 zeri un progetto chiamato modifica
area che costruisce un relativamente lavorabile
editor di codice in cima all’area di testo ma
da allora è stato sostituito da meglio
cose questi sono i tre progetti principali
attualmente esistenti sono tutti aperti
fonte sviluppata all’aria aperta
le comunità aprono repository e bug
sezione tracker di cui non sono sicuro
Bug tracker di Orion ma penso
specchio su github um a sta per il
Editor di codice x.org invecchiato dove età
oscuro è il vecchio nome dell’azienda che
ora il cloud nove è integrato
ambiente di sviluppo che è a
davvero davvero online integrato
l’ambiente di sviluppo è focalizzato su
JavaScript per lo più fa sia client che
roba lato server noterebbe i suoi ganci
nel burger che corre su alcuni
server Amazon per te che hai diretto
accesso per ottenere comandi ed è it’s
è molto ben fatto quindi hanno costruito il loro
proprio editore per questo intorno 2010 2010 I
penso che sia stato rilasciato per la prima volta lo specchio del codice
è il mio bambino è il mio progetto pochi di voi
chi ha visto il mio nome prima di me probabilmente
conoscilo da un libro chiamato eloquente
JavaScript che ho pubblicato nel 2007
online è un libro su JavaScript
che ha un ambiente integrato per
provare snippet di codice modificandoli
eseguendoli e avevo bisogno del buon codice
editore per la morte e nessuno era
imminente, ecco quando ho implementato
la prima versione del codice specchio in giro
2011 quando asso era arrivato lungo asso di
mirror del codice perforato sulla maggior parte dei
fattore di freschezza e la velocità e il
caratteristiche così l’ho riscritto da zero
usando alcune delle tecniche che io
rubato dall’asso e ora è praticamente tutto
alla pari con quello poi il terzo è un
un po ‘strano, questo si chiama Orion
è sviluppato dalla fondazione Eclipse
per loro stanno anche lavorando su un
ambienti editor di codice online che è
come un intero culto Orion ma l’editore
componente può essere eseguito separatamente dal
resto dalla parte posteriore non lo sono
ottenere momenti di presidente altrettanto
ma sono al lavoro e penso
stanno costruendo una grande roba che usa a
tecnica di implementazione diversa da
gli altri due tornerò a quello a
la fine del discorso ma la maggior parte del
le cose sarò illustre
mangiare nel mio discorso applicato allo specchio del cappotto
direttamente e asso perché ha un molto
implementazione simile è Orion
diverso tornerò brevemente ad esso
più tardi, quindi, perché dovrei anche reimplementare
codice mirror per utilizzare le stesse tecniche
quell’asso ha in gran parte una questione di
orgoglio che ho avuto questo progetto che è stato
dominante per un po ‘nell’editor di codice
spazio e poi questi parenti sono arrivati
ed era qualcosa che era meglio e
certo che non potevo permettere che succedesse ma
non è l’unica differenza che l’asso è molto
supponevano tutte le campane e i fischietti
incluso il tipo di editor, basta lasciarlo cadere
nella tua pagina e tu hai tutto il
funzioni running and going e code
lo specchio d’ altra parte è minimo
super configurabile un tipo di cosa in cui
se vuoi davvero qualcosa di specifico
può farlo in un certo senso, basta fare fondamentalmente
quasi tutto ciò che vorresti fare è
anche i tempi di commercio più piccoli di una sabbia sono
parziale, ma sento che ha un piano
interfaccia più piacevole ma in realtà io
non dovrebbe confrontarli perché è
come se non sapessi chiedere la poltiglia
confronto indipendente dei vari
religioni del mondo vediamo cosa possiamo
Effettivamente, queste diapositive sono giuste
eseguendo un giorno HTML sì, questo tu
vedi qui è una vera area di testo quindi è a
un po ‘stretto ma qui se premo invio
rientra di nuovo a lato
perché non sa nulla
la modifica del codice sostituiamola con la capra
specchio non vedi la differenza
perché li ho designati per essere lo stesso ma
questo è in realtà codice mirror e premo
ENTRA e il suo naso questo probabilmente
vuoi indentare alla stessa profondità di a
linea prima, ma questo è tutto ciò che sa
e questo è naturalmente configurabile
può fargli fare tutto ciò che vuoi quando
entra è premuto
le cose sarebbero probabilmente migliori se noi
ha detto che è la lingua che stiamo usando
questo è JavaScript, questo è in realtà il
codice che alimenta queste diapositive è
Codice piuttosto orribile che non dovresti
in realtà lo leggo ma è colorato ora
sa quale stringa è ciò che un commento è
riconosce anche le parole chiave e anche
conosce i blocchi, quindi se premo invio
qui vedrà come si apre il blocco così
Probabilmente dovrei indentarlo se prima
inserire nel mezzo delle disparità di lista
anche questo lo alline bene
un po ‘più intelligente perché c’è un
programma scritto chiamato JavaScript
modalità e c’è il mouse per un sacco di
lingue o tornare più tardi
che sono fondamentalmente come piccoli parser
che può dire l’editor su
evidenziare e dare alcuni contestuali
informazioni che può usare per esempio
per l’annotazione che non era quello che io
volevo fare lo styling può essere
completamente regolato con fogli di stile
questo è il tema delle poche squadre
che sono stati contribuiti che non lo erano
programmatore art style di super semplice
roba minima ma fatta da qualcuno che è
in realtà un po ‘esperto in grafica
possiamo solo dirgli di aggiungere un numero di linea
barra ai lati per farlo sembrare
un po ‘più professionale di tutti questi set
opzione chiama in realtà non è necessario
fai quello che di solito puoi semplicemente inizializzare
con tutte le opzioni che desideri
sei come andare passo dopo passo a vedere
dove inizia e cosa puoi aggiungere
diciamo che vogliamo aggiungere il divano pieghevole
per prima cosa creiamo spazio per un extra
la grondaia qui diciamo è che vogliamo
insieme uno per i numeri di riga e
uno per i nostri indicatori di guasto è colpa
la stringa di mercato è una classe CSS che lo farà
specificare la larghezza di questo prossimo ci sarà rig
c’è un gestore di eventi se qualcuno
clic sulla grondaia lo chiamerà
funzione che qui si chiama forse
codice di errore questo non fa parte del nucleo
il corso è molto minimale
la distribuzione include un mucchio di
componenti aggiuntivi che, ad esempio, consentono di passare
codice altre cose che sono estensioni o
componenti aggiuntivi sono una ricerca sostituire se lo faccio
cercare cercherà solo attraverso il mio
documenti se sostituisco posso sostituire
tutte le istanze di finestra e salva
come 16 byte sul mio file javascript con
la parola cima ho un’altra cosa che volevo
lo spettacolo era qui sono truccato qualcosa a
mostra un autocompletamento semplice se tu
premere ctrl spazio ne fa anche un po ‘
cose intelligenti dove ispeziona il
ambiente attuale e bene questi andando
ho ragione, probabilmente ho sbagliato un po ‘
foglio di stile sembra nel tuo attuale
ambiente per darvi suggerimenti che puoi
in realtà è piuttosto primitivo
scrivi quanto più intelligente è il
completo e perché è collegabile
può praticamente impazzire con l’intelligenza
salve qui ho aggiunto un altro programma esterno
che ogni volta che il contenuto dell’editor
cambierà chiamerà questo run linter
funzione che si basa su j come suggerimenti
che è un prestatore di estetica di linter per
javascript e ogni volta che trova un
problema lo mostrerà in linea come a
piccolo marchio di esclamazione che se è
ci confrontiamo con asso sembra estremamente
simile come stranamente simile è giusto
il tema è diverso puoi probabilmente
modellali per sembrare esattamente uguali se
si vuole veramente che ma ha tutto
questo è come se l’avessi appena lasciato cadere
con tre linee di codice e già
ha il pieghevole in corsa e lo penso
lo fa anche
linting yeah qui ci dice che manca
punto e virgola quindi è tutto più supponente
tutto includeva il tipo di biblioteca I
in realtà non ha creato un’istanza di
Orion qui, ma sembra molto simile
perché gli editori di Scott si sono uniti a
un tipo di sguardo che in realtà provengo
uno sfondo di emacs quindi ho dovuto fare
alcune cose non strane nel processo di
ricevere feedback dagli utenti che non lo erano
abbastanza familiare con i bastoni MX
caratteristiche che stavo costruendo ma si
Ho fatto la convergenza su un componente standard
che può essere configurato puoi anche aggiungere
mappe vincolanti per te solo ridefinite
ogni chiave al punto che il browser
consente purtroppo il browser dovrebbe
catturare alcune cose come il controllo w
controllo p almeno cromato cattura
loro incondizionatamente non puoi sovrascrivere
li sono solo quelli completi di emacs
possibile in Firefox che ti permette
ridefinire ogni singola chiave del pianeta
così come ho detto i browser non lo fanno davvero
modifica del codice eppure abbiamo appena visto due codici
ai redattori della magia era richiesto il resto
delle mie chiacchiere sarà passato a guardare sotto
il cofano di questi editori e vedendo come
in realtà fanno le cose prima
tutto ciò che hai visto un cursore lì le sue mosse
quando digito è lampeggiante si comporta bene
esattamente come il cursore non è in realtà a
cursore o almeno il browser e il
il sistema operativo non pensa che questo sia un
trave è in realtà solo il
sviluppo che ho assolutamente posizionato
sopra il testo e lampeggia con un tempo prestabilito
fuori per farlo apparire come il cursore ma di
Ovviamente è possibile disegnare
piuttosto basso è solitamente kardemir
non usa nessun tipo di campus è tutto
I nodi Dom non sanno che sono più veloci e
fai pratica poi su tela perché il browser
sa di più su di loro e può
mostrale più abilmente, ma puoi farlo
immagina come funziona, continua così
il tuo modello personale conserva il tuo
proprie cose selezione disegnare in un modo che
è atteso da un editore ascolta la chiave
eventi e rispondere a loro nel
modo appropriato se qualcuno preme a sinistra
si sposta la posizione del cursore interno a
bit aggiorni il tuo cursore e basta
sembra che tu abbia un vero additivo
componente pensi che sia con eventi chiave
in realtà potresti solo ascoltare
a livello globale che ce n’è uno molto bello
progetto chiamato wimax che è un’immagine
clone che fa proprio quello giusto
ascolta gli eventi chiave sul globale
finestra oggetto e falsi tutto da
il problema è che allora sei tu
non essere più un buon cittadino
il resto della pagina non sarà in grado di
mettiti a fuoco perché stai afferrando tutto
eventi dal livello superiore e non è possibile
digitare in qualsiasi altra cosa o fare qualsiasi cosa
altrimenti con la tastiera, quindi non è un
buona soluzione ciò che vogliamo in realtà
rispettare il regime tabbing l’attenzione
regime del browser in cui è possibile toccare
attraverso e in realtà finiscono nel tuo codice
editor e poi quando si preme stop
di nuovo se non hai toccato qualcosa
altrimenti nel tuo editor si sposta a quello successivo
campo e così via così da fare che c’è un
area di testo effettivamente creata dal
editor di codice e quindi nascosto che agisce
come il nostro input shim la cosa è che non possiamo
basta fare un display nessuno o visibilità
nascosto sulla cosa perché nel
il browser rifiuterà di focalizzarlo su cosa
lo stiamo facendo invece lo sta avvolgendo in un
trabocca il div nascosto e fa questo odio
zero ancora non lo vedi ma il
il browser non si rende conto che lo è
invisibile quindi lo concentrerà felicemente
per te ea quel punto sappiamo a
l’evento di messa a fuoco spara su questa cosa così noi
so che siamo concentrati, registriamo la nostra chiave
gestori di eventi su questa area di testo effettiva
quindi possiamo catturarli localmente invece
di globalmente e questo funziona molto bene
un altro vantaggio è che l’ input è
già in questa area di testo così quando il Texas
digitata apparirà lì che non abbiamo
mango eventi chiave per ottenere regolarmente
digita il testo, possiamo solo aspettarlo
appare nell’area di testo spostalo nel nostro
proprio rappresentazione del documento lì
sono alcune cose di input avanzate come
c’è un io e metto l’editor di metodi
usato da molte lingue dell’est asiatico per
componi caratteri per multipli
le battute di tastiera gli eventi chiave che ci saranno
quasi senza senso quello che vuoi è il
input effettivo che il sistema operativo
fa di esso e questo input effettivo lo farà
finisci nell’area di testo quindi questo ci aiuta
Supporta lo stesso per incollare non lo fai
avere accesso agli Appunti da
JavaScript ma se il solito posto il suo
il testo finirà nel momento
controllo focalizzato in modo da ottenere il testo noi
voglio che ci sia un taglio e copia te
vuole anche ogni volta che questo accade il
selezione nel testo qui per abbinare il
vero testo selezionato nell’editor così
che in realtà hai le cose sul tuo
appunti che speravi per uno
la soluzione è solo per mettere sempre a
selezione nell’area di testo con se qualcuno
preme a a su un enorme documento
questo sarà un sacco di dati e come ho detto
l’impostazione del valore su un’area di testo è questa
incredibilmente lento che è probabilmente
comprensibile perché deve
popolare questo controllo modificabile che è
non banale e non sa se solo
un piccolo cambiamento di canto che deve solo
ricostruire la sua intera rappresentazione così noi
voglio evitare quello per fare ciò che possiamo
aspetta solo un taglio o una copia inviati al fuoco
un incendio come un browser accusa questo fuoco
prima che il taglio o la copia siano effettivi
posto così quando ciò accade rapidamente
passare nei documenti la corrente
selezione nell’area di testo e
tutto funziona bene l’ultimo diamine
non funziona su Opera che non funziona
taglia gli eventi di copia e incolla ma lì
abbiamo appena messo tutto il documento che tu
intera selezione e se è troppo lento
che dovrebbe usare un altro browser o
qualcosa che non è l’intera storia di
fare qualcosa si comporta come un
componente modificabile convincente c’è
anche ad esempio trascina e rilascia desideri
trascina e rilascia per lavorare c’è una buona ipi
per ciò che è supportato da tutti
browser moderni sicuri che fosse relativamente
banale da collegare poi c’è il contesto
menu se fai clic con il pulsante destro del mouse sul modificabile
componente che ti aspetti tagliare copia incolla e
seleziona tutto per essere presente in un menu ma
le persone fanno semplicemente clic su un div casuale
che non è un componente modificabile, quindi noi
devono ingannare il browser ed è
effettivamente possibile anche se strano questo
l’evento si accende prima che il menu sia aperto così
quando il codice specchio rileva il menu di scelta rapida
eventi o su Firefox un evento click destro
perché il menu di scelta rapida di firefox è attivo
fuoco troppo tardi quello che facciamo è che lo facciamo
area di testo quasi trasparente in modo che esso
non attira l’attenzione su di sé che facciamo
è piccolo e lo spingiamo sotto il mouse
il cursore funziona davvero è orribile
diavolo orribile ma è un trucco il
il menu di scelta rapida verrà effettivamente associato
con l’ area di testo a questo punto che
possiamo nasconderci subito dopo così
non lo vedi davvero a meno che tu non lo sia
cercandolo e se si incolla da
lì finirà alla fine del testo
area stessa possiamo fare di nuovo lo stesso trucco
dove inseriamo la selezione lì così
che se copi o tagli anche tu ottieni
quello che vuoi seleziona tutto richiede
un altro passo di hacker in cui aggiungiamo un
carattere extra che non è selezionato e
poi, dopo che il menu contestuale si apre,
tirare per un po ‘se il personaggio
è stato selezionato e se lo ha fatto loro
probabilmente clicca selezionare anche noi dovremmo
come tutto il documento, sì, è un
vergogna e una vera API sarebbe stata
ottimo ma funziona e non è così
male un’altra zona dove siamo decisamente
barare è lo scrolling perché
sostenere importanti documenti è importante
in qualsiasi editor di codice che non vogliamo
rendere tutto al Dom quello che facciamo
è quando stai guardando uno scrollable
editor in realtà solo la parte è
attualmente visibile è reso al Dom
il resto non è lì possiamo illustrare
con una piccola animazione eccoci qui
scorrendo attraverso questo enorme documento
manca tutto tranne il
parte che potremmo attualmente vedere e a
un piccolo margine attorno alla morte e il resto
della barra di scorrimento è prodotto da un grande
div di dimensioni statiche che è impostato su
capi del contenuto reale con il
risultato che la barra di scorrimento è corretta
e ogni volta che scatta un evento di scorrimento
perché l’utente scorre rapidamente
ridipingere tutto ciò che sta guardando ora
con un piccolo margine in modo che non lo facciamo
devo ridipingere su ogni piccolo rotolo
evento funziona quasi perfettamente tranne
che se si scorre lo scorrimento molto veloce
gli eventi si verificano dopo lo scorrimento effettivo
è stato fatto così vedrai brevemente un vuoto
spazio e poi l’allenatore si gira di nuovo
e questo è stato particolarmente preoccupante
su macchine più lente quindi fingiamo il
scrollbar la barra di scorrimento che vedi
l’editor è solo un div overlaid sul
barra di scorrimento attuale che contiene anche una nota
in esso che ha la vera foschia del
documento così sarà esattamente lo stesso
barra di scorrimento come quella effettiva
scrollable dave ha ma se lo si scorre
in realtà non stai causando il
diff diffabile per spostare così questo ci dà
l’ora in cui si scorre l’evento
prima ridisegna e poi aggiorna la pergamena
posizione superiore del nostro diff scorrevole
come vedi una volta che inizi a mentire al
utente hai spesso bisogno di più bugie e altro ancora
bugie per coprirli di recente un Mac OS
Venne fuori un leone di montagna OS 10 che ha un
molto bella innovazione trasparente scroll
barre quindi ora il trucco di sovrapporre il
barra di scorrimento reale con una barra di scorrimento falso
è ovviamente
sta mostrando che si vede sia del rotolo
barre e sono leggermente fuori sincrono e
è orribile, quindi entra in un altro
diamine il diff effettivo che scrollable
ha questa barra di questo rotolo che vogliamo
hide è reso un po ‘più grande del
viene fornito il wrapper dell’editor dell’editor vero e proprio
overflow nascosto così non lo fai realmente
guarda questa roba che lo attacca
rende la barra di scorrimento quella quella
vedi in grigio qui completamente
invisibile e tutto funziona felicemente
e bene fino a quando il prossimo bug è stato trovato e
Devo inventare ancora di più
modello complicato come ho detto in grande
i file sono in realtà importanti miguel
menzionato nel suo discorso che il cromo
l’editor interno di briciole ha problemi con
grandi file diventa lento e
non risponde che in realtà c’è un an
esperimento in corso per integrare il codice
specchio e cromo invece di questo
editor integrato per questa stessa ragione
che si riduca meglio di un ovvio
il problema è ovviamente la rappresentazione di
i tuoi documenti non puoi davvero imbrogliare
lì è necessario mettere l’intero documento
in memoria se vuoi si almeno io
non voglio avere a che fare con nessun altro modello
da dove prendi i tuoi documenti
il server come utente Scrolls che potreste
fallo ma non è quello che è il codice mirror
ma fortunatamente JavaScript moderno
i motori sono molto efficienti nella quantità
di overhead si mettono su oggetti e
archi e anche se ne hai un milione
documento di linea sarà di pochi megabyte
di dati stringa e aggiungere pochi megabyte
di rapid atta per metterli effettivamente
stringhe in una struttura dati che possiamo
accesso non è ancora così male a tutti
è di quattro gigabyte di RAM e se loro
non dovrebbero non dover modificare tali
file enormi sono la mia posizione attuale e
domanda interessante è come facciamo noi
rappresenta quindi questo documento con tutti
queste stringhe in essa la prima versione di
cod may may usa solo la matrice piatta
quello ha funzionato relativamente bene perché in
la prima versione del codice rispecchia il
l’ambiente è stato applicato su tutte le linee
aveva esattamente lo stesso otto così una cosa
è che questa struttura dati deve supportare
se fai clic sul documento o lo fai
qualcos’altro dove vuoi trovare
fuori quale personaggio si trova sotto una data X y
coordinare sullo schermo si deve
in qualche modo convertire da un offset verticale
alla posizione della linea queste tutte le linee sono le
stesso basta dividere per l’altezza della linea
cosa tu sei lì ed è facile ma
poi ho aggiunto funzionalità come il line wrapping
e divano pieghevole che fa alcune linee
Finisci e mostrerò dove puoi
aggiungere in linea che è quello che era cosa
è ciò che questa caratteristica di sfilacciatura ha usato prima
dove hai appena messo fuori altri stupidi
nel mezzo del tuo editor che anche
avvita le teste delle linee così
c’era bisogno di qualcosa di più avanzato
le operazioni che questa struttura dati
dovrebbe supportare è la conversione tra
tre rappresentazioni di linee circa
tre modi per affrontarli prima sottotitoli
gestire che è fondamentalmente il se tu
avere una maniglia di linea che si riferisce a a
linea specifica e qualcuno preme entra
prima che il numero di linea lo conosciamo
aumenterà ma tu hai ancora il
stesso testo e spesso è necessario che il
API espone quello dove, per esempio, se
aggiungi un widget a qualche riga più tardi
vuoi essere in grado di rimuoverlo, quindi hai bisogno
per tracciare questa linea in qualche modo questi devono essere
convertibile in numeri e linee
offset verticale molto rapidamente e il
lo stesso vale per andare da una linea
numero o un offset verticale a un effettivo
linea gestire internamente anche l’editor
lo fa sempre, quindi deve essere così
velocemente un’altra considerazione sono gli aggiornamenti
deve essere veloce nel suo posto mille
le linee non dovrebbero essere evidenti
pausa perché tutte queste linee sono
inserito in alcuni dati costosi
struttura in modo simile se qualcuno sta scrivendo
molto rapidamente questi piccoli micro aggiornamenti
dovrebbe essere molto molto veloce perché
un editor di codice irresponsabile che
non risponde immediatamente quando lo fai
qualcosa è solo una ricetta per a
mal di testa quando stai cercando di fare
qualcosa così ha fatto il formato che io
è venuto fuori un albero di solito tu
voglio indicizzare alcune proprietà così
un albero è davvero un candidato ovvio
ma quello che ho finito non era un po ‘
tipo di albero binario normale ma B 3
che è un formato di dati utilizzato dai database
per lo più un altro su questo formati di file
che è abbastanza lontano da un codice
editore, ma si adatta molto bene a ciò
fa quello che fa un b-tree per coloro che
non hanno familiarità con la struttura dei dati
è che è una struttura ad albero ciascuna
nota ha un fattore di ramificazione molto alto quindi
molti bambini sotto un nodo genitore
e tutti i dati sono memorizzati nelle foglie
che sono essi stessi più grandi di a
valore singolo memorizzano un’intera gamma di
valori e possono crescere e restringersi
c’è una dimensione minima e massima per
questo bambino fa da nodo in modo che se solo tu
rimuovere una riga è sufficiente rimuoverla
dal bambino dove è dentro e fatto
non devi riequilibrare nulla
a meno che il bambino non sia vuoto, allora uccidi
il bambino e allo stesso modo se inserisci
l’algoritmo di bilanciamento per b3 è semplice
ed economico tu solo che colore fa
inserire tutto nel nodo figlio che
capita di fare riferimento alla posizione corrente
mentre inserendo e poi se quello
overflow di questo nodo figlio che inizia
dividendolo in un congedo di dimensioni ragionevoli
rileva se ce ne sono troppi in un
genitore ora che è diviso a sua volta ed è
si propaga verso l’alto in un modo molto economico
che è amichevole per gli aggiornamenti di massa se tu
avere un classico nero 3 o qualcosa di te
voglio inserire mille note anche se
sono tutti adiacenti che devi inserire
li uno a uno perché l’algoritmo è
definito in singoli inserimenti e singolo
le cancellature sono alberi molto di più
flessibile e molto semplice da implementare così
questa è stata una grande misura credo sia la migliore
dimostrato con una demo visiva
qui vedi un’istanza giardiniere sul
a sinistra e una rappresentazione visiva del
il documento tre sulla destra, ecco questo
è documenti con 155 righe haith di
cinque e mezzo mille pixel circa
è solo l’ albero ha solo una profondità di 1
quindi la nota fondamentale contiene un mucchio di
lascia sotto ogni foglia che mostro il
linee che questa foglia contiene SS poco
blocchi colorati dove il colore è il
hash del contenuto della linea e del
la larghezza è l’ odio della linea quindi io
ha attivato il line wrapping in questa demo
mostra che puoi vedere che alcune linee sono
più ampio di altri e se sentissi
qualcosa vedrai che alcune linee
diventa molto basso e l’ ottavo cambia
si propagano ai genitori così il
la nota di root ha sempre una vista aggiornata
di una quantità di righe nel documento
ed essere l’ altezza totale di quelli e
consente una rapida indicizzazione dire che vogliamo
per trovare una linea 50 ora 60 andiamo noi
iniziato il percorso vediamo che il primo
la foglia ha solo una dimensione di 30, quindi non lo è
quello che prendiamo tracciamo che ce ne sono 30
rimanendo così la seconda foglia ha 25
ancora non quello ce ne sono solo cinque
rimanendo andiamo alla terza foglia e
è una partita quindi prendiamo il quinto
linea della terza foglia e perché questi
gli alberi sono estremamente bassi a causa di
l’alto fattore di ramificazione di questo tipo di
le occhiate sono incredibilmente veloci lo stesso è
per una fede perché fede e linea
numero entrambi aumentano nello stesso ordine
ed entrambi, monotonicamente, possiamo usarne due
quantità per indicizzare un singolo albero
fondamentalmente che è grande ed economico e
Mi piacerebbe lavorare con molto piacere
dimostrare l’algoritmo di scissione il
bilanciamento così qui vedi poca arancia
note che appaiono perché sto aggiungendo vuoto
linee poi quando la foglia in alto colpisce 50
bang è diviso in due e metà del
diventa solo due foglie che è a
operazione banale per l’editor di
eseguire se inizio a incollare un sacco di
fortuna qui hai un albero molto semplice se
Comincio a basare un sacco di cianfrusaglie qui
abbiamo 25 linee libere di documenti che puoi
vedi che è ancora abbastanza reattivo
e l’albero ora ha quattro note cinque cinque
strati in profondità quindi è ancora molto veloce
guarda qualcosa devi saltare
attraverso alcune note in più da ottenere
da qualche parte ma non molto e da quando lo sei
di solito modificando in modo relativamente piccolo
gamma dei documenti sarà il denaro
anche essere usato abbastanza bene perché questi
sono array e note ed è solo
toccandone un mucchio tutte le volte
significa il processore di memoria in contanti e
la cancellazione è come ho detto è in realtà
l’inserimento è abbastanza intelligente per sempre
produrre un albero equilibrato qui ma
la cancellazione è un po ‘più semplice
solo quando si oh sì ho bisogno di più di
una foglia scusa per quello e quando una foglia
diventa quando la foglia diventa vuota è solo
svanisce se un nodo ramo cade sotto a
certa soglia di dimensioni si fondono semplicemente
stesso in una singola foglia, quindi tutto questo
l’intera implementazione è forse un’altra 50
linee di codice e perché la dimensione del codice è
anche una considerazione importante nel
libreria JavaScript del coperchio in cui il client
lo compilerò sempre e
scaricandolo e sì non vuoi
utilizzare tecniche che richiedono megabyte
di codice perché poi non è così
più utilizzabile
le bocche sono ciò che sono la parola quel codice
più usi per le specializzazioni linguistiche
questi sono la distribuzione viene con
circa 50 modalità al momento che sono
piccoli programmi JavaScript che si comportano come
un tokenizer o opzionalmente anche un pieno
parser a seconda di quanto intelligente vuoi
il tuo mout è per una determinata lingua
questi sono i principali tra cui vanno
25 linee per la modalità diff a 800 linee
per la modalità Perla che non ho scritto
loro che non ho mai nemmeno il coraggio di guardare
e il modo in cui funzionano è quello dell’editor
li usa per scorrere i documenti uno
token alla volta un elemento sintattico a
un tempo in cui muovono fondamentalmente un flusso
in avanti passa l’elemento sintattico che
loro analizzano e poi restituiscono uno stile per
questo quindi uno stile potrebbe essere una stringa per a
stringa o commenti citati per qualcosa
sembra un commento per farlo
questa è la loro interfaccia di base spesso tu
ho bisogno di una sorta di memoria di ciò che è venuto
prima se si desidera assegnare uno stile a
qualcosa per esempio in una linea multipla
commento che non sai dal tuo attuale
testo che sei in una linea multipla
commenti ma hai visto un esempio /
stella in JavaScript in precedenza, quindi la maggior parte conserva
la proprietà a volte non lo dichiaro
perché la lingua è abbastanza banale
portare senza conoscenze contestuali
note motu fanno definire i metodi
stato che è qualcosa che ritorna
l’oggetto di stato per l’inizio della
documento e ogni giorno simbolico ogni volta
un token è scarso a cui accedere
questo stato e possono aggiornarlo per
esempio impostando un flag che ora siamo in a
commento e poi c’è un sacco di
metodi extra opzionali che queste modalità
può esporre a fare cose più intelligenti per
esempio
indentazione che ha dato uno stato di contesto
e una stringa che è la riga dopo
dopo che il punto corrente è in corso
rientrato restituisce un intero che dice il
quantità di spazio a cui questo dovrebbe essere
rientrato in modo che il contesto sia così
già monitorato dallo stato può
essere messo a frutto quando si preme
entrare e volere il rientro o
selezionando un blocco di testo e
reinventandogli un problema, eccoti
se la linea 2501 cambia, non vuoi
segnala l’intero documento perché quello
sarebbe un enorme spreco di tutti
Cicli di CPU quindi cosa fa il mirror del codice
occasionalmente copia questo stato loro
sono definiti in un modo che sono
copiabile e se la modalità ne ha bisogno
essere copiabile in un modo specifico e anche
per trovare un metodo per questo e negozi
queste istanze di stato lungo il documento
e poi quando per esempio effettivamente quando
si avvia solo analizza il corrente
vista visibile poi mentre scorri verso il basso
fermerà sempre di più il
documenta e archivia queste istanze di stato
ovunque poi se ti siedi qui per
esempio e fare un cambiamento sul piccolo
linea rossa passa solo dal cambiamento
reparse è dal cambiamento verso il basso
fine della finestra corrente, quindi questo è
anche una quantità molto limitata di lavoro che
deve essere fatto se assumiamo che il
la vista non supera le poche centinaia
le linee devono essere in grado di analizzare una cinquantina di modi
migliaia di righe al secondo alcune delle
quelli più avanzati che mantengono molto
afferma che sono più come ventimila
linee ma ancora pochi millisecondi
dovrebbe essere tutto ciò che serve per segnalare un
schermo pieno di codice e assicurarsi
tutto è di nuovo consistente almeno
tutto ciò che puoi vedere, ovviamente
anche la situazione in cui si scorre
quaggiù e in qualche modo è riuscito a cambiare
terza riga del documento allora ha
per analizzare più nell’analisi del caso comune
e si sta verificando di nuovo
in modo sincrono se è possibile vederlo
c’è solo un dato numero massimo di
linee tra l’inizio del suo intervallo e
finisci lo fa e poi non lo fai nemmeno
notalo perché è molto, molto veloce
ci sono anche situazioni come questa o
quando scorri i tuoi documenti
veramente veloce dove c’è solo troppo
lavoro da fare o lo fa allora
costituisce gli stati da qualche parte in alcuni
linea ha un’euristica dove prende un
linea vicina che è il meno rientrata
che in molte lingue ti dà
almeno un po ‘di contesto perché il meno in
n linee di solito iniziano i blocchi e
usa quello che ha reso gli Stati da ri-evidenziare
in modo sincrono e poi prende il via il judo
thread in background utilizzando il timeout impostato su
effettivamente fare il pieno lavoro di evidenziazione
che è come funziona per un dato tempo
intervallo di tempo che è configurabile se questo
corre sopra che si ferma e imposta a
timeout per se stesso per continuare di nuovo e
in questo modo in realtà non ostacola
reattività non appena si digita
smette di evidenziare lo sfondo
in modo da non ottenere un notevole rallentamento
giù da questo lavoro che in realtà potrebbe
essere eccessivo perché è così veloce
evidenziare ma nei browser più vecchi e tutti
le versioni del codice Meredith erano lente
abbastanza da giustificare un simile approccio e
probabilmente è ancora se hai questo
25.000 documenti di linea aiuta ancora
quindi cosa puoi fare se ne hai uno
vero programma arbitrariamente intelligente come a
Evidenziatore che in realtà viene investito
il tuo documento lo puoi fare in realtà
analisi più intelligente del giusto
evidenziando qui abbiamo un XML
documentare il parser mantiene la corrente
taggare il contesto nel suo stato e quando
incontra il tag di chiusura che non lo fa
abbinare questa cosa che è successo ad aprire
il contesto attuale può dirti questo
probabilmente hai fatto un errore perché tu
avere un mazzo corrispondente Mitch e allo stesso modo
se io non fosse quello che intendevo fare
se faccio un errore qui in alto il
l’evidenziazione si ridurrà a cascata perché
esso rehi illumina la roba invariata e lo farà
dimmi che sì ho un tag di disallineamento
ancora più interessante è la modalità java trip
conosce la differenza tra locale e
variabili globali e dà loro un
colore diverso la definizione di a
la variabile è resa blu scuro qui e usa
di un locale è reso celeste e tu
possiamo vedere ad esempio quella console che possiamo
anche farli entrambi per farmi saltare fuori
ancora di più la console è globale
mentre gli altri sono i locali che è
particolarmente utile se fai degli errori di battitura
da qualche parte ti salterà addosso
che non stai usando una variabile che è
attualmente in ambito e dal più
rivestire il Global è il nostro modo superata in numero
i locali questo crea una bella visuale
modello per mettersi in guardia quando sei
fare qualcosa di globale l’ auto
il completamento si aggancia effettivamente a questo
conoscenza del locale, quindi se dico array
qui sa che sì, potrei volerlo
completo per questo locale mentre se lo faccio
lo stesso qui non ottengo completamenti
perché il locale non esiste quindi lo è
una forma molto molto primitiva di
context-aware un completamento
questo approccio alla scrittura di bocche dove
sono fondamentalmente una funzione che è tua
flusso di alimentazione li rende estremamente
componibile che permette cose come questa
HTML in modalità mista che è una specie di
modalità di multiplex wrapper tra
diverse altre modalità inizia a utilizzare il
Parser XML se l’HTML
configurazione del parser XML e quando
incontra un tag di stile in cui passa
il parser CSS così questo qui lo sa
come dovrebbe essere rientrato anche se
sembra che sia all’interno di HTML
documenti ha il contesto sensibile
ottiene il contesto del file CSS e
simile se trovi script che cambierà
alla modalità di Javascript e alla fine del
questo criptico si spegne di nuovo e
che permette a queste bocche di comporsi
che è anche usato per molti
lingue di template e PHP e altro
impostazioni um solo la scorsa settimana ho portato fuori
la prima versione beta 3 del mirror del codice
che aggiunge alcune nuove funzionalità come
supporto di testo bidirezionale come a
coniglio o testo ebraico che è un enorme
mal di testa per avere ragione in un editor
perché puoi mescolare l’ebraico e far entrare
testo in una sola riga e l’ebraico
il testo sarà di tipo girevole perché
è scritto da destra a sinistra, quindi se il
il cursore si sta muovendo attraverso questo deve
conosci un sacco di oscuri Unicode
proprietà dei personaggi correttamente
spostati nella posizione corretta
film modo corretto se si preme a sinistra e
allo stesso modo il disegno di selezione diventa
un po ‘ più complicato perché
non è più un singolo blocco continuo
potrebbe saltare dappertutto perché il
il codice non è fondamentalmente più continuo
da sinistra a destra ho una cosa che è
sul radar ma attualmente piuttosto triste
sia in code mirror su asso è mobile
supporta così il cellulare viola un intero gruppo
di assunzioni che ci affidiamo a fare
questo diamine il problema più grande è quello
ottieni questi simpatici aiutanti di selezione
la cosa delle carote è se selezioni qualcosa
dal momento che non è una vera selezione
stiamo creando non li otteniamo così a
molte funzionalità sono bloccate in pratica da te
non riesco a raggiungerli perché non hai
questa interfaccia di selezione non l’ho
guardò profondamente in quanto sarebbe stato difficile
per fingere questo qualcosa dovrà essere
fatto perché il cellulare sta diventando enorme e
dovremmo sostenerlo almeno
attualmente relativamente decente l’editore
lavori che puoi modificare puoi usare per la maggior parte
i browser mobili persino scorrono ma questo è
per quanto riguarda l’ estensione, non è così
sentirsi nativo e non è piacevole
esperienza da usare così da quando questo è tutto
open source è
lento andare non ho non sono stato avvertito
indipendentemente ricco non ho il
tempo di spendere mesi su questo appena uscito
il mio tempo personale ho avuto un successo
crowdfunding round due mesi fa dove
Ho passato un mese a lavorare su un gruppo di
nuove funzionalità come il testo bidirezionale
e così questo è diventato nella versione 3
chi lo sa che probabilmente proverò qualcosa
simile ancora questo in realtà funziona
relativamente bene per me il
redditizio modello open source è io
trascorsi i primi cinque anni di lavoro
questo progetto è completamente senza hobby
ISM ma di recente alcune grandi aziende lo sono
comprare supporto per questo ed è
diventare sostenibile per me da
mantenere questo, ma yeah cellulare mi porta
all’altro editor che ho menzionato prima
Orion usano un completamente diverso
approccio per fare questo usano il browser
ricerca funzionalità modificabili del contenuto
che ti permette di costruire Lee crea a
tipo di editor HTML rich text all’interno del
browser puoi dire che questo elemento è
modificabile e diventerà solo
modificabile è possibile fare clic su di esso per ottenere il
tipo di cursore qualcosa e poi il
il browser farà qualsiasi cosa si senta
corretto per farti modificare questo questo questo
codice che ha il vantaggio che tu sei
parlando di componenti reali modificabili
così mobile per esempio diventa molto di più
molto meno intimidatorio si pretende di
il lavoro sui dispositivi mobili non è stato effettivamente provato
ma posso immaginare il giorno che hanno ottenuto
questo è lavorare perché ne ricevono molti
le funzionalità eseguono automaticamente il mirror del codice
uno in realtà la prima versione del codice
specchio prima delle grandi riscritture che io
nel 2011 ha funzionato in questo modo
contenuto modificabile quindi ne ho alcuni
esperienza con esso ed è ha il suo
proprio insieme di problemi come ho detto il
il browser può fare tutto in una volta quando tu
modifica questo codice non ci sono specifiche
di come il contenuto commestibile o la modalità di progettazione
che è una caratteristica simile a quella
tutti i browser hanno invece come
dovrebbe funzionare come dovrebbe
per fare è premere invio per esempio
alcuni router inseriscono la nota di rottura BR alcuni
di loro alle note di paragrafo è un
sorpresa e poi l’editor deve andare
di nuovo dentro e in qualche modo rinormalizzare
cosa stai guardando a qualcosa
questo sta mostrando la sua visione del tuo
documenti un altro problema è quello
la selezione AP è arbitraria
le strutture sono variabili tra bar
browser Bergy Bergy e codice solo uno
a circa settecento linee di
codice di gestione della selezione non sono ansioso
per tornare a questa situazione ma sì come
Ho detto che ha trovato quello è uno
dei principali problemi con il Governatore uno
ci sono stati lenti su enormi documenti
perché mette tutto nel Dom il
Dom modificabile non meno che è pari
più lento del solito stupido oh ryan ottiene
intorno a questo usando un trucco simile
dove sta solo mettendo la parte visibile
dei documenti nell’attuale Dom così
sono molto curioso di come si svilupperà
oltre e cosa succederà lì
quello era il mio discorso che è dove il
progetto vive il mio progetto sì e basta
io su twitter sarei molto felice di
prendere domande o osservazioni o qualsiasi altra cosa
altrimenti potresti dover aggiungere una V Sono fuori
era una domanda c’è una V sono fuori questo
è una delle aree in cui sono stato
ricevendo molti contributi perché
molte persone apparentemente vogliono vedere
Sono fuori e c’è c’è qualcosa
che simula molte funzionalità VI
ma non posso dirti quanto è bello
un vero VI utente um quindi sono stato uno di
le motivazioni nella riscrittura da
codice mera 12 versione 2 doveva tagliare lo specchio
uno stava annegando in esagono ed era lì
tutto interagendo e stava diventando
orribile quindi un 2 prende uno sforzo cosciente
per mantenerli al minimo e isolarli
loro meglio che possono
in questo modo gli utenti dispongono di rilevamento e avvolgimento
molte cose e in funzioni tanto a lungo
come è possibile ed è costantemente
alla ricerca di modi come a volte il
modo ovvio è bacato e alcuni router
modo ovvio di fare qualcosa e ho
ho imparato a cercare un altro modo che è
semplice e che funziona davvero
cross browser per aggirare scrivendo se
all’estero e questo se mangio in questo ma
c’è purtroppo ancora tale codice
è relativamente minore in prima cosa a
è così che tengo questo segno del progetto
perché è che questi esadecimali tendono a
interagire in modi inaspettati ma è
Lì e si tratta solo di tenerlo
purtroppo nella mia testa è così
parte del processo di sviluppo è
cresciuto come ho solo di recente
imparato a piacere ora mi piace testare i
ho usato molto test per molto tempo
ma solo in cose che sono state testate
amichevole un componente dell’interfaccia utente è circa il
la cosa più ostile che si possa pensare
soprattutto se molti dei problematici
il comportamento è legato ai browser berks
che vedi solo quando lo esegui
quel browser specifico che abbiamo attualmente
un seme di prova relativamente grande che viene eseguito
nel fantasma JS che è un finto web kids
su una nota su ogni commit e ho
questa causa di morte è questa che puoi scappare se tu
basta andare su una pagina Web e l’eseguo
prima di rilasciare in ogni supportato
browser ma non è perfetto alcune cose
Io non ho trovato un modo per testare la
meccanicamente piace senza mettere il mio
proprio reato c’è questo quadro per
questo chiamato ho dimenticato che c’è un
framework che ti permette di generare un browser
processo e poi comunica a un piacevole
Presa TP per attivare eventi su quel browser
elaborare esattamente il selenio um quel tipo di
lavoro ma non potrei ancora licenziare tutto il
eventi che volevo davvero licenziare
un metodo di input che modifica il testo
una zona molto fragile molto fragile che è
non supportato da selenio ed è abbastanza
un dolore da impostare così non è in realtà
c’è uno stub che ci sono alcuni test
attraverso il selenio ma non mi sto sviluppando
lì perché è solo molto doloroso
quindi grazie per l’ascolto, hai un buon risultato
giorno
parlare spero che sia okay con tutti così
il problema è che spesso devi modificare
qualcosa di serio nei componenti web
interfacce di pagine web e web
le applicazioni stanno diventando sempre di più
complicato rispetto alle cose comuni
vuoi modelli o vuoi interrogare
o qualcosa da scrivere dagli utenti
le persone stanno usando l’edificio intero
ambienti di sviluppo integrati
all’interno del browser e HTML ha un
l’editor di testo integrato è l’area di testo
elemento ma è alla pari con la nota
che se parli di serio
modifica del codice e peggiorare le cose
ha una programmazione molto molto minimalista
interfaccia puoi ottenere il suo valore da te
puoi dargli un nuovo valore che puoi anche se
sei disposto a sopportare un po ‘di dolore
su di esso e che esplora ottiene il
selezione e questo è praticamente dove
si ferma così per le cose tipiche in cui tu
voglio solo entrare e regolare un po ‘di codice
interrogare ciò che l’utente sta effettivamente facendo
non scala anche perché se ne hai uno
poche migliaia di righe di codice e tu vuoi
per ottenere e impostare il valore di un’area di testo
è ancora sui browser moderni
seriamente lenti erano in
metà 2000 zeri un progetto chiamato modifica
area che costruisce un relativamente lavorabile
editor di codice in cima all’area di testo ma
da allora è stato sostituito da meglio
cose questi sono i tre progetti principali
attualmente esistenti sono tutti aperti
fonte sviluppata all’aria aperta
le comunità aprono repository e bug
sezione tracker di cui non sono sicuro
Bug tracker di Orion ma penso
specchio su github um a sta per il
Editor di codice x.org invecchiato dove età
oscuro è il vecchio nome dell’azienda che
ora il cloud nove è integrato
ambiente di sviluppo che è a
davvero davvero online integrato
l’ambiente di sviluppo è focalizzato su
JavaScript per lo più fa sia client che
roba lato server noterebbe i suoi ganci
nel burger che corre su alcuni
server Amazon per te che hai diretto
accesso per ottenere comandi ed è it’s
è molto ben fatto quindi hanno costruito il loro
proprio editore per questo intorno 2010 2010 I
penso che sia stato rilasciato per la prima volta lo specchio del codice
è il mio bambino è il mio progetto pochi di voi
chi ha visto il mio nome prima di me probabilmente
conoscilo da un libro chiamato eloquente
JavaScript che ho pubblicato nel 2007
online è un libro su JavaScript
che ha un ambiente integrato per
provare snippet di codice modificandoli
eseguendoli e avevo bisogno del buon codice
editore per la morte e nessuno era
imminente, ecco quando ho implementato
la prima versione del codice specchio in giro
2011 quando asso era arrivato lungo asso di
mirror del codice perforato sulla maggior parte dei
fattore di freschezza e la velocità e il
caratteristiche così l’ho riscritto da zero
usando alcune delle tecniche che io
rubato dall’asso e ora è praticamente tutto
alla pari con quello poi il terzo è un
un po ‘strano, questo si chiama Orion
è sviluppato dalla fondazione Eclipse
per loro stanno anche lavorando su un
ambienti editor di codice online che è
come un intero culto Orion ma l’editore
componente può essere eseguito separatamente dal
resto dalla parte posteriore non lo sono
ottenere momenti di presidente altrettanto
ma sono al lavoro e penso
stanno costruendo una grande roba che usa a
tecnica di implementazione diversa da
gli altri due tornerò a quello a
la fine del discorso ma la maggior parte del
le cose sarò illustre
mangiare nel mio discorso applicato allo specchio del cappotto
direttamente e asso perché ha un molto
implementazione simile è Orion
diverso tornerò brevemente ad esso
più tardi, quindi, perché dovrei anche reimplementare
codice mirror per utilizzare le stesse tecniche
quell’asso ha in gran parte una questione di
orgoglio che ho avuto questo progetto che è stato
dominante per un po ‘nell’editor di codice
spazio e poi questi parenti sono arrivati
ed era qualcosa che era meglio e
certo che non potevo permettere che succedesse ma
non è l’unica differenza che l’asso è molto
supponevano tutte le campane e i fischietti
incluso il tipo di editor, basta lasciarlo cadere
nella tua pagina e tu hai tutto il
funzioni running and going e code
lo specchio d’ altra parte è minimo
super configurabile un tipo di cosa in cui
se vuoi davvero qualcosa di specifico
può farlo in un certo senso, basta fare fondamentalmente
quasi tutto ciò che vorresti fare è
anche i tempi di commercio più piccoli di una sabbia sono
parziale, ma sento che ha un piano
interfaccia più piacevole ma in realtà io
non dovrebbe confrontarli perché è
come se non sapessi chiedere la poltiglia
confronto indipendente dei vari
religioni del mondo vediamo cosa possiamo
Effettivamente, queste diapositive sono giuste
eseguendo un giorno HTML sì, questo tu
vedi qui è una vera area di testo quindi è a
un po ‘stretto ma qui se premo invio
rientra di nuovo a lato
perché non sa nulla
la modifica del codice sostituiamola con la capra
specchio non vedi la differenza
perché li ho designati per essere lo stesso ma
questo è in realtà codice mirror e premo
ENTRA e il suo naso questo probabilmente
vuoi indentare alla stessa profondità di a
linea prima, ma questo è tutto ciò che sa
e questo è naturalmente configurabile
può fargli fare tutto ciò che vuoi quando
entra è premuto
le cose sarebbero probabilmente migliori se noi
ha detto che è la lingua che stiamo usando
questo è JavaScript, questo è in realtà il
codice che alimenta queste diapositive è
Codice piuttosto orribile che non dovresti
in realtà lo leggo ma è colorato ora
sa quale stringa è ciò che un commento è
riconosce anche le parole chiave e anche
conosce i blocchi, quindi se premo invio
qui vedrà come si apre il blocco così
Probabilmente dovrei indentarlo se prima
inserire nel mezzo delle disparità di lista
anche questo lo alline bene
un po ‘più intelligente perché c’è un
programma scritto chiamato JavaScript
modalità e c’è il mouse per un sacco di
lingue o tornare più tardi
che sono fondamentalmente come piccoli parser
che può dire l’editor su
evidenziare e dare alcuni contestuali
informazioni che può usare per esempio
per l’annotazione che non era quello che io
volevo fare lo styling può essere
completamente regolato con fogli di stile
questo è il tema delle poche squadre
che sono stati contribuiti che non lo erano
programmatore art style di super semplice
roba minima ma fatta da qualcuno che è
in realtà un po ‘esperto in grafica
possiamo solo dirgli di aggiungere un numero di linea
barra ai lati per farlo sembrare
un po ‘più professionale di tutti questi set
opzione chiama in realtà non è necessario
fai quello che di solito puoi semplicemente inizializzare
con tutte le opzioni che desideri
sei come andare passo dopo passo a vedere
dove inizia e cosa puoi aggiungere
diciamo che vogliamo aggiungere il divano pieghevole
per prima cosa creiamo spazio per un extra
la grondaia qui diciamo è che vogliamo
insieme uno per i numeri di riga e
uno per i nostri indicatori di guasto è colpa
la stringa di mercato è una classe CSS che lo farà
specificare la larghezza di questo prossimo ci sarà rig
c’è un gestore di eventi se qualcuno
clic sulla grondaia lo chiamerà
funzione che qui si chiama forse
codice di errore questo non fa parte del nucleo
il corso è molto minimale
la distribuzione include un mucchio di
componenti aggiuntivi che, ad esempio, consentono di passare
codice altre cose che sono estensioni o
componenti aggiuntivi sono una ricerca sostituire se lo faccio
cercare cercherà solo attraverso il mio
documenti se sostituisco posso sostituire
tutte le istanze di finestra e salva
come 16 byte sul mio file javascript con
la parola cima ho un’altra cosa che volevo
lo spettacolo era qui sono truccato qualcosa a
mostra un autocompletamento semplice se tu
premere ctrl spazio ne fa anche un po ‘
cose intelligenti dove ispeziona il
ambiente attuale e bene questi andando
ho ragione, probabilmente ho sbagliato un po ‘
foglio di stile sembra nel tuo attuale
ambiente per darvi suggerimenti che puoi
in realtà è piuttosto primitivo
scrivi quanto più intelligente è il
completo e perché è collegabile
può praticamente impazzire con l’intelligenza
salve qui ho aggiunto un altro programma esterno
che ogni volta che il contenuto dell’editor
cambierà chiamerà questo run linter
funzione che si basa su j come suggerimenti
che è un prestatore di estetica di linter per
javascript e ogni volta che trova un
problema lo mostrerà in linea come a
piccolo marchio di esclamazione che se è
ci confrontiamo con asso sembra estremamente
simile come stranamente simile è giusto
il tema è diverso puoi probabilmente
modellali per sembrare esattamente uguali se
si vuole veramente che ma ha tutto
questo è come se l’avessi appena lasciato cadere
con tre linee di codice e già
ha il pieghevole in corsa e lo penso
lo fa anche
linting yeah qui ci dice che manca
punto e virgola quindi è tutto più supponente
tutto includeva il tipo di biblioteca I
in realtà non ha creato un’istanza di
Orion qui, ma sembra molto simile
perché gli editori di Scott si sono uniti a
un tipo di sguardo che in realtà provengo
uno sfondo di emacs quindi ho dovuto fare
alcune cose non strane nel processo di
ricevere feedback dagli utenti che non lo erano
abbastanza familiare con i bastoni MX
caratteristiche che stavo costruendo ma si
Ho fatto la convergenza su un componente standard
che può essere configurato puoi anche aggiungere
mappe vincolanti per te solo ridefinite
ogni chiave al punto che il browser
consente purtroppo il browser dovrebbe
catturare alcune cose come il controllo w
controllo p almeno cromato cattura
loro incondizionatamente non puoi sovrascrivere
li sono solo quelli completi di emacs
possibile in Firefox che ti permette
ridefinire ogni singola chiave del pianeta
così come ho detto i browser non lo fanno davvero
modifica del codice eppure abbiamo appena visto due codici
ai redattori della magia era richiesto il resto
delle mie chiacchiere sarà passato a guardare sotto
il cofano di questi editori e vedendo come
in realtà fanno le cose prima
tutto ciò che hai visto un cursore lì le sue mosse
quando digito è lampeggiante si comporta bene
esattamente come il cursore non è in realtà a
cursore o almeno il browser e il
il sistema operativo non pensa che questo sia un
trave è in realtà solo il
sviluppo che ho assolutamente posizionato
sopra il testo e lampeggia con un tempo prestabilito
fuori per farlo apparire come il cursore ma di
Ovviamente è possibile disegnare
piuttosto basso è solitamente kardemir
non usa nessun tipo di campus è tutto
I nodi Dom non sanno che sono più veloci e
fai pratica poi su tela perché il browser
sa di più su di loro e può
mostrale più abilmente, ma puoi farlo
immagina come funziona, continua così
il tuo modello personale conserva il tuo
proprie cose selezione disegnare in un modo che
è atteso da un editore ascolta la chiave
eventi e rispondere a loro nel
modo appropriato se qualcuno preme a sinistra
si sposta la posizione del cursore interno a
bit aggiorni il tuo cursore e basta
sembra che tu abbia un vero additivo
componente pensi che sia con eventi chiave
in realtà potresti solo ascoltare
a livello globale che ce n’è uno molto bello
progetto chiamato wimax che è un’immagine
clone che fa proprio quello giusto
ascolta gli eventi chiave sul globale
finestra oggetto e falsi tutto da
il problema è che allora sei tu
non essere più un buon cittadino
il resto della pagina non sarà in grado di
mettiti a fuoco perché stai afferrando tutto
eventi dal livello superiore e non è possibile
digitare in qualsiasi altra cosa o fare qualsiasi cosa
altrimenti con la tastiera, quindi non è un
buona soluzione ciò che vogliamo in realtà
rispettare il regime tabbing l’attenzione
regime del browser in cui è possibile toccare
attraverso e in realtà finiscono nel tuo codice
editor e poi quando si preme stop
di nuovo se non hai toccato qualcosa
altrimenti nel tuo editor si sposta a quello successivo
campo e così via così da fare che c’è un
area di testo effettivamente creata dal
editor di codice e quindi nascosto che agisce
come il nostro input shim la cosa è che non possiamo
basta fare un display nessuno o visibilità
nascosto sulla cosa perché nel
il browser rifiuterà di focalizzarlo su cosa
lo stiamo facendo invece lo sta avvolgendo in un
trabocca il div nascosto e fa questo odio
zero ancora non lo vedi ma il
il browser non si rende conto che lo è
invisibile quindi lo concentrerà felicemente
per te ea quel punto sappiamo a
l’evento di messa a fuoco spara su questa cosa così noi
so che siamo concentrati, registriamo la nostra chiave
gestori di eventi su questa area di testo effettiva
quindi possiamo catturarli localmente invece
di globalmente e questo funziona molto bene
un altro vantaggio è che l’ input è
già in questa area di testo così quando il Texas
digitata apparirà lì che non abbiamo
mango eventi chiave per ottenere regolarmente
digita il testo, possiamo solo aspettarlo
appare nell’area di testo spostalo nel nostro
proprio rappresentazione del documento lì
sono alcune cose di input avanzate come
c’è un io e metto l’editor di metodi
usato da molte lingue dell’est asiatico per
componi caratteri per multipli
le battute di tastiera gli eventi chiave che ci saranno
quasi senza senso quello che vuoi è il
input effettivo che il sistema operativo
fa di esso e questo input effettivo lo farà
finisci nell’area di testo quindi questo ci aiuta
Supporta lo stesso per incollare non lo fai
avere accesso agli Appunti da
JavaScript ma se il solito posto il suo
il testo finirà nel momento
controllo focalizzato in modo da ottenere il testo noi
voglio che ci sia un taglio e copia te
vuole anche ogni volta che questo accade il
selezione nel testo qui per abbinare il
vero testo selezionato nell’editor così
che in realtà hai le cose sul tuo
appunti che speravi per uno
la soluzione è solo per mettere sempre a
selezione nell’area di testo con se qualcuno
preme a a su un enorme documento
questo sarà un sacco di dati e come ho detto
l’impostazione del valore su un’area di testo è questa
incredibilmente lento che è probabilmente
comprensibile perché deve
popolare questo controllo modificabile che è
non banale e non sa se solo
un piccolo cambiamento di canto che deve solo
ricostruire la sua intera rappresentazione così noi
voglio evitare quello per fare ciò che possiamo
aspetta solo un taglio o una copia inviati al fuoco
un incendio come un browser accusa questo fuoco
prima che il taglio o la copia siano effettivi
posto così quando ciò accade rapidamente
passare nei documenti la corrente
selezione nell’area di testo e
tutto funziona bene l’ultimo diamine
non funziona su Opera che non funziona
taglia gli eventi di copia e incolla ma lì
abbiamo appena messo tutto il documento che tu
intera selezione e se è troppo lento
che dovrebbe usare un altro browser o
qualcosa che non è l’intera storia di
fare qualcosa si comporta come un
componente modificabile convincente c’è
anche ad esempio trascina e rilascia desideri
trascina e rilascia per lavorare c’è una buona ipi
per ciò che è supportato da tutti
browser moderni sicuri che fosse relativamente
banale da collegare poi c’è il contesto
menu se fai clic con il pulsante destro del mouse sul modificabile
componente che ti aspetti tagliare copia incolla e
seleziona tutto per essere presente in un menu ma
le persone fanno semplicemente clic su un div casuale
che non è un componente modificabile, quindi noi
devono ingannare il browser ed è
effettivamente possibile anche se strano questo
l’evento si accende prima che il menu sia aperto così
quando il codice specchio rileva il menu di scelta rapida
eventi o su Firefox un evento click destro
perché il menu di scelta rapida di firefox è attivo
fuoco troppo tardi quello che facciamo è che lo facciamo
area di testo quasi trasparente in modo che esso
non attira l’attenzione su di sé che facciamo
è piccolo e lo spingiamo sotto il mouse
il cursore funziona davvero è orribile
diavolo orribile ma è un trucco il
il menu di scelta rapida verrà effettivamente associato
con l’ area di testo a questo punto che
possiamo nasconderci subito dopo così
non lo vedi davvero a meno che tu non lo sia
cercandolo e se si incolla da
lì finirà alla fine del testo
area stessa possiamo fare di nuovo lo stesso trucco
dove inseriamo la selezione lì così
che se copi o tagli anche tu ottieni
quello che vuoi seleziona tutto richiede
un altro passo di hacker in cui aggiungiamo un
carattere extra che non è selezionato e
poi, dopo che il menu contestuale si apre,
tirare per un po ‘se il personaggio
è stato selezionato e se lo ha fatto loro
probabilmente clicca selezionare anche noi dovremmo
come tutto il documento, sì, è un
vergogna e una vera API sarebbe stata
ottimo ma funziona e non è così
male un’altra zona dove siamo decisamente
barare è lo scrolling perché
sostenere importanti documenti è importante
in qualsiasi editor di codice che non vogliamo
rendere tutto al Dom quello che facciamo
è quando stai guardando uno scrollable
editor in realtà solo la parte è
attualmente visibile è reso al Dom
il resto non è lì possiamo illustrare
con una piccola animazione eccoci qui
scorrendo attraverso questo enorme documento
manca tutto tranne il
parte che potremmo attualmente vedere e a
un piccolo margine attorno alla morte e il resto
della barra di scorrimento è prodotto da un grande
div di dimensioni statiche che è impostato su
capi del contenuto reale con il
risultato che la barra di scorrimento è corretta
e ogni volta che scatta un evento di scorrimento
perché l’utente scorre rapidamente
ridipingere tutto ciò che sta guardando ora
con un piccolo margine in modo che non lo facciamo
devo ridipingere su ogni piccolo rotolo
evento funziona quasi perfettamente tranne
che se si scorre lo scorrimento molto veloce
gli eventi si verificano dopo lo scorrimento effettivo
è stato fatto così vedrai brevemente un vuoto
spazio e poi l’allenatore si gira di nuovo
e questo è stato particolarmente preoccupante
su macchine più lente quindi fingiamo il
scrollbar la barra di scorrimento che vedi
l’editor è solo un div overlaid sul
barra di scorrimento attuale che contiene anche una nota
in esso che ha la vera foschia del
documento così sarà esattamente lo stesso
barra di scorrimento come quella effettiva
scrollable dave ha ma se lo si scorre
in realtà non stai causando il
diff diffabile per spostare così questo ci dà
l’ora in cui si scorre l’evento
prima ridisegna e poi aggiorna la pergamena
posizione superiore del nostro diff scorrevole
come vedi una volta che inizi a mentire al
utente hai spesso bisogno di più bugie e altro ancora
bugie per coprirli di recente un Mac OS
Venne fuori un leone di montagna OS 10 che ha un
molto bella innovazione trasparente scroll
barre quindi ora il trucco di sovrapporre il
barra di scorrimento reale con una barra di scorrimento falso
è ovviamente
sta mostrando che si vede sia del rotolo
barre e sono leggermente fuori sincrono e
è orribile, quindi entra in un altro
diamine il diff effettivo che scrollable
ha questa barra di questo rotolo che vogliamo
hide è reso un po ‘più grande del
viene fornito il wrapper dell’editor dell’editor vero e proprio
overflow nascosto così non lo fai realmente
guarda questa roba che lo attacca
rende la barra di scorrimento quella quella
vedi in grigio qui completamente
invisibile e tutto funziona felicemente
e bene fino a quando il prossimo bug è stato trovato e
Devo inventare ancora di più
modello complicato come ho detto in grande
i file sono in realtà importanti miguel
menzionato nel suo discorso che il cromo
l’editor interno di briciole ha problemi con
grandi file diventa lento e
non risponde che in realtà c’è un an
esperimento in corso per integrare il codice
specchio e cromo invece di questo
editor integrato per questa stessa ragione
che si riduca meglio di un ovvio
il problema è ovviamente la rappresentazione di
i tuoi documenti non puoi davvero imbrogliare
lì è necessario mettere l’intero documento
in memoria se vuoi si almeno io
non voglio avere a che fare con nessun altro modello
da dove prendi i tuoi documenti
il server come utente Scrolls che potreste
fallo ma non è quello che è il codice mirror
ma fortunatamente JavaScript moderno
i motori sono molto efficienti nella quantità
di overhead si mettono su oggetti e
archi e anche se ne hai un milione
documento di linea sarà di pochi megabyte
di dati stringa e aggiungere pochi megabyte
di rapid atta per metterli effettivamente
stringhe in una struttura dati che possiamo
accesso non è ancora così male a tutti
è di quattro gigabyte di RAM e se loro
non dovrebbero non dover modificare tali
file enormi sono la mia posizione attuale e
domanda interessante è come facciamo noi
rappresenta quindi questo documento con tutti
queste stringhe in essa la prima versione di
cod may may usa solo la matrice piatta
quello ha funzionato relativamente bene perché in
la prima versione del codice rispecchia il
l’ambiente è stato applicato su tutte le linee
aveva esattamente lo stesso otto così una cosa
è che questa struttura dati deve supportare
se fai clic sul documento o lo fai
qualcos’altro dove vuoi trovare
fuori quale personaggio si trova sotto una data X y
coordinare sullo schermo si deve
in qualche modo convertire da un offset verticale
alla posizione della linea queste tutte le linee sono le
stesso basta dividere per l’altezza della linea
cosa tu sei lì ed è facile ma
poi ho aggiunto funzionalità come il line wrapping
e divano pieghevole che fa alcune linee
Finisci e mostrerò dove puoi
aggiungere in linea che è quello che era cosa
è ciò che questa caratteristica di sfilacciatura ha usato prima
dove hai appena messo fuori altri stupidi
nel mezzo del tuo editor che anche
avvita le teste delle linee così
c’era bisogno di qualcosa di più avanzato
le operazioni che questa struttura dati
dovrebbe supportare è la conversione tra
tre rappresentazioni di linee circa
tre modi per affrontarli prima sottotitoli
gestire che è fondamentalmente il se tu
avere una maniglia di linea che si riferisce a a
linea specifica e qualcuno preme entra
prima che il numero di linea lo conosciamo
aumenterà ma tu hai ancora il
stesso testo e spesso è necessario che il
API espone quello dove, per esempio, se
aggiungi un widget a qualche riga più tardi
vuoi essere in grado di rimuoverlo, quindi hai bisogno
per tracciare questa linea in qualche modo questi devono essere
convertibile in numeri e linee
offset verticale molto rapidamente e il
lo stesso vale per andare da una linea
numero o un offset verticale a un effettivo
linea gestire internamente anche l’editor
lo fa sempre, quindi deve essere così
velocemente un’altra considerazione sono gli aggiornamenti
deve essere veloce nel suo posto mille
le linee non dovrebbero essere evidenti
pausa perché tutte queste linee sono
inserito in alcuni dati costosi
struttura in modo simile se qualcuno sta scrivendo
molto rapidamente questi piccoli micro aggiornamenti
dovrebbe essere molto molto veloce perché
un editor di codice irresponsabile che
non risponde immediatamente quando lo fai
qualcosa è solo una ricetta per a
mal di testa quando stai cercando di fare
qualcosa così ha fatto il formato che io
è venuto fuori un albero di solito tu
voglio indicizzare alcune proprietà così
un albero è davvero un candidato ovvio
ma quello che ho finito non era un po ‘
tipo di albero binario normale ma B 3
che è un formato di dati utilizzato dai database
per lo più un altro su questo formati di file
che è abbastanza lontano da un codice
editore, ma si adatta molto bene a ciò
fa quello che fa un b-tree per coloro che
non hanno familiarità con la struttura dei dati
è che è una struttura ad albero ciascuna
nota ha un fattore di ramificazione molto alto quindi
molti bambini sotto un nodo genitore
e tutti i dati sono memorizzati nelle foglie
che sono essi stessi più grandi di a
valore singolo memorizzano un’intera gamma di
valori e possono crescere e restringersi
c’è una dimensione minima e massima per
questo bambino fa da nodo in modo che se solo tu
rimuovere una riga è sufficiente rimuoverla
dal bambino dove è dentro e fatto
non devi riequilibrare nulla
a meno che il bambino non sia vuoto, allora uccidi
il bambino e allo stesso modo se inserisci
l’algoritmo di bilanciamento per b3 è semplice
ed economico tu solo che colore fa
inserire tutto nel nodo figlio che
capita di fare riferimento alla posizione corrente
mentre inserendo e poi se quello
overflow di questo nodo figlio che inizia
dividendolo in un congedo di dimensioni ragionevoli
rileva se ce ne sono troppi in un
genitore ora che è diviso a sua volta ed è
si propaga verso l’alto in un modo molto economico
che è amichevole per gli aggiornamenti di massa se tu
avere un classico nero 3 o qualcosa di te
voglio inserire mille note anche se
sono tutti adiacenti che devi inserire
li uno a uno perché l’algoritmo è
definito in singoli inserimenti e singolo
le cancellature sono alberi molto di più
flessibile e molto semplice da implementare così
questa è stata una grande misura credo sia la migliore
dimostrato con una demo visiva
qui vedi un’istanza giardiniere sul
a sinistra e una rappresentazione visiva del
il documento tre sulla destra, ecco questo
è documenti con 155 righe haith di
cinque e mezzo mille pixel circa
è solo l’ albero ha solo una profondità di 1
quindi la nota fondamentale contiene un mucchio di
lascia sotto ogni foglia che mostro il
linee che questa foglia contiene SS poco
blocchi colorati dove il colore è il
hash del contenuto della linea e del
la larghezza è l’ odio della linea quindi io
ha attivato il line wrapping in questa demo
mostra che puoi vedere che alcune linee sono
più ampio di altri e se sentissi
qualcosa vedrai che alcune linee
diventa molto basso e l’ ottavo cambia
si propagano ai genitori così il
la nota di root ha sempre una vista aggiornata
di una quantità di righe nel documento
ed essere l’ altezza totale di quelli e
consente una rapida indicizzazione dire che vogliamo
per trovare una linea 50 ora 60 andiamo noi
iniziato il percorso vediamo che il primo
la foglia ha solo una dimensione di 30, quindi non lo è
quello che prendiamo tracciamo che ce ne sono 30
rimanendo così la seconda foglia ha 25
ancora non quello ce ne sono solo cinque
rimanendo andiamo alla terza foglia e
è una partita quindi prendiamo il quinto
linea della terza foglia e perché questi
gli alberi sono estremamente bassi a causa di
l’alto fattore di ramificazione di questo tipo di
le occhiate sono incredibilmente veloci lo stesso è
per una fede perché fede e linea
numero entrambi aumentano nello stesso ordine
ed entrambi, monotonicamente, possiamo usarne due
quantità per indicizzare un singolo albero
fondamentalmente che è grande ed economico e
Mi piacerebbe lavorare con molto piacere
dimostrare l’algoritmo di scissione il
bilanciamento così qui vedi poca arancia
note che appaiono perché sto aggiungendo vuoto
linee poi quando la foglia in alto colpisce 50
bang è diviso in due e metà del
diventa solo due foglie che è a
operazione banale per l’editor di
eseguire se inizio a incollare un sacco di
fortuna qui hai un albero molto semplice se
Comincio a basare un sacco di cianfrusaglie qui
abbiamo 25 linee libere di documenti che puoi
vedi che è ancora abbastanza reattivo
e l’albero ora ha quattro note cinque cinque
strati in profondità quindi è ancora molto veloce
guarda qualcosa devi saltare
attraverso alcune note in più da ottenere
da qualche parte ma non molto e da quando lo sei
di solito modificando in modo relativamente piccolo
gamma dei documenti sarà il denaro
anche essere usato abbastanza bene perché questi
sono array e note ed è solo
toccandone un mucchio tutte le volte
significa il processore di memoria in contanti e
la cancellazione è come ho detto è in realtà
l’inserimento è abbastanza intelligente per sempre
produrre un albero equilibrato qui ma
la cancellazione è un po ‘più semplice
solo quando si oh sì ho bisogno di più di
una foglia scusa per quello e quando una foglia
diventa quando la foglia diventa vuota è solo
svanisce se un nodo ramo cade sotto a
certa soglia di dimensioni si fondono semplicemente
stesso in una singola foglia, quindi tutto questo
l’intera implementazione è forse un’altra 50
linee di codice e perché la dimensione del codice è
anche una considerazione importante nel
libreria JavaScript del coperchio in cui il client
lo compilerò sempre e
scaricandolo e sì non vuoi
utilizzare tecniche che richiedono megabyte
di codice perché poi non è così
più utilizzabile
le bocche sono ciò che sono la parola quel codice
più usi per le specializzazioni linguistiche
questi sono la distribuzione viene con
circa 50 modalità al momento che sono
piccoli programmi JavaScript che si comportano come
un tokenizer o opzionalmente anche un pieno
parser a seconda di quanto intelligente vuoi
il tuo mout è per una determinata lingua
questi sono i principali tra cui vanno
25 linee per la modalità diff a 800 linee
per la modalità Perla che non ho scritto
loro che non ho mai nemmeno il coraggio di guardare
e il modo in cui funzionano è quello dell’editor
li usa per scorrere i documenti uno
token alla volta un elemento sintattico a
un tempo in cui muovono fondamentalmente un flusso
in avanti passa l’elemento sintattico che
loro analizzano e poi restituiscono uno stile per
questo quindi uno stile potrebbe essere una stringa per a
stringa o commenti citati per qualcosa
sembra un commento per farlo
questa è la loro interfaccia di base spesso tu
ho bisogno di una sorta di memoria di ciò che è venuto
prima se si desidera assegnare uno stile a
qualcosa per esempio in una linea multipla
commento che non sai dal tuo attuale
testo che sei in una linea multipla
commenti ma hai visto un esempio /
stella in JavaScript in precedenza, quindi la maggior parte conserva
la proprietà a volte non lo dichiaro
perché la lingua è abbastanza banale
portare senza conoscenze contestuali
note motu fanno definire i metodi
stato che è qualcosa che ritorna
l’oggetto di stato per l’inizio della
documento e ogni giorno simbolico ogni volta
un token è scarso a cui accedere
questo stato e possono aggiornarlo per
esempio impostando un flag che ora siamo in a
commento e poi c’è un sacco di
metodi extra opzionali che queste modalità
può esporre a fare cose più intelligenti per
esempio
indentazione che ha dato uno stato di contesto
e una stringa che è la riga dopo
dopo che il punto corrente è in corso
rientrato restituisce un intero che dice il
quantità di spazio a cui questo dovrebbe essere
rientrato in modo che il contesto sia così
già monitorato dallo stato può
essere messo a frutto quando si preme
entrare e volere il rientro o
selezionando un blocco di testo e
reinventandogli un problema, eccoti
se la linea 2501 cambia, non vuoi
segnala l’intero documento perché quello
sarebbe un enorme spreco di tutti
Cicli di CPU quindi cosa fa il mirror del codice
occasionalmente copia questo stato loro
sono definiti in un modo che sono
copiabile e se la modalità ne ha bisogno
essere copiabile in un modo specifico e anche
per trovare un metodo per questo e negozi
queste istanze di stato lungo il documento
e poi quando per esempio effettivamente quando
si avvia solo analizza il corrente
vista visibile poi mentre scorri verso il basso
fermerà sempre di più il
documenta e archivia queste istanze di stato
ovunque poi se ti siedi qui per
esempio e fare un cambiamento sul piccolo
linea rossa passa solo dal cambiamento
reparse è dal cambiamento verso il basso
fine della finestra corrente, quindi questo è
anche una quantità molto limitata di lavoro che
deve essere fatto se assumiamo che il
la vista non supera le poche centinaia
le linee devono essere in grado di analizzare una cinquantina di modi
migliaia di righe al secondo alcune delle
quelli più avanzati che mantengono molto
afferma che sono più come ventimila
linee ma ancora pochi millisecondi
dovrebbe essere tutto ciò che serve per segnalare un
schermo pieno di codice e assicurarsi
tutto è di nuovo consistente almeno
tutto ciò che puoi vedere, ovviamente
anche la situazione in cui si scorre
quaggiù e in qualche modo è riuscito a cambiare
terza riga del documento allora ha
per analizzare più nell’analisi del caso comune
e si sta verificando di nuovo
in modo sincrono se è possibile vederlo
c’è solo un dato numero massimo di
linee tra l’inizio del suo intervallo e
finisci lo fa e poi non lo fai nemmeno
notalo perché è molto, molto veloce
ci sono anche situazioni come questa o
quando scorri i tuoi documenti
veramente veloce dove c’è solo troppo
lavoro da fare o lo fa allora
costituisce gli stati da qualche parte in alcuni
linea ha un’euristica dove prende un
linea vicina che è il meno rientrata
che in molte lingue ti dà
almeno un po ‘di contesto perché il meno in
n linee di solito iniziano i blocchi e
usa quello che ha reso gli Stati da ri-evidenziare
in modo sincrono e poi prende il via il judo
thread in background utilizzando il timeout impostato su
effettivamente fare il pieno lavoro di evidenziazione
che è come funziona per un dato tempo
intervallo di tempo che è configurabile se questo
corre sopra che si ferma e imposta a
timeout per se stesso per continuare di nuovo e
in questo modo in realtà non ostacola
reattività non appena si digita
smette di evidenziare lo sfondo
in modo da non ottenere un notevole rallentamento
giù da questo lavoro che in realtà potrebbe
essere eccessivo perché è così veloce
evidenziare ma nei browser più vecchi e tutti
le versioni del codice Meredith erano lente
abbastanza da giustificare un simile approccio e
probabilmente è ancora se hai questo
25.000 documenti di linea aiuta ancora
quindi cosa puoi fare se ne hai uno
vero programma arbitrariamente intelligente come a
Evidenziatore che in realtà viene investito
il tuo documento lo puoi fare in realtà
analisi più intelligente del giusto
evidenziando qui abbiamo un XML
documentare il parser mantiene la corrente
taggare il contesto nel suo stato e quando
incontra il tag di chiusura che non lo fa
abbinare questa cosa che è successo ad aprire
il contesto attuale può dirti questo
probabilmente hai fatto un errore perché tu
avere un mazzo corrispondente Mitch e allo stesso modo
se io non fosse quello che intendevo fare
se faccio un errore qui in alto il
l’evidenziazione si ridurrà a cascata perché
esso rehi illumina la roba invariata e lo farà
dimmi che sì ho un tag di disallineamento
ancora più interessante è la modalità java trip
conosce la differenza tra locale e
variabili globali e dà loro un
colore diverso la definizione di a
la variabile è resa blu scuro qui e usa
di un locale è reso celeste e tu
possiamo vedere ad esempio quella console che possiamo
anche farli entrambi per farmi saltare fuori
ancora di più la console è globale
mentre gli altri sono i locali che è
particolarmente utile se fai degli errori di battitura
da qualche parte ti salterà addosso
che non stai usando una variabile che è
attualmente in ambito e dal più
rivestire il Global è il nostro modo superata in numero
i locali questo crea una bella visuale
modello per mettersi in guardia quando sei
fare qualcosa di globale l’ auto
il completamento si aggancia effettivamente a questo
conoscenza del locale, quindi se dico array
qui sa che sì, potrei volerlo
completo per questo locale mentre se lo faccio
lo stesso qui non ottengo completamenti
perché il locale non esiste quindi lo è
una forma molto molto primitiva di
context-aware un completamento
questo approccio alla scrittura di bocche dove
sono fondamentalmente una funzione che è tua
flusso di alimentazione li rende estremamente
componibile che permette cose come questa
HTML in modalità mista che è una specie di
modalità di multiplex wrapper tra
diverse altre modalità inizia a utilizzare il
Parser XML se l’HTML
configurazione del parser XML e quando
incontra un tag di stile in cui passa
il parser CSS così questo qui lo sa
come dovrebbe essere rientrato anche se
sembra che sia all’interno di HTML
documenti ha il contesto sensibile
ottiene il contesto del file CSS e
simile se trovi script che cambierà
alla modalità di Javascript e alla fine del
questo criptico si spegne di nuovo e
che permette a queste bocche di comporsi
che è anche usato per molti
lingue di template e PHP e altro
impostazioni um solo la scorsa settimana ho portato fuori
la prima versione beta 3 del mirror del codice
che aggiunge alcune nuove funzionalità come
supporto di testo bidirezionale come a
coniglio o testo ebraico che è un enorme
mal di testa per avere ragione in un editor
perché puoi mescolare l’ebraico e far entrare
testo in una sola riga e l’ebraico
il testo sarà di tipo girevole perché
è scritto da destra a sinistra, quindi se il
il cursore si sta muovendo attraverso questo deve
conosci un sacco di oscuri Unicode
proprietà dei personaggi correttamente
spostati nella posizione corretta
film modo corretto se si preme a sinistra e
allo stesso modo il disegno di selezione diventa
un po ‘ più complicato perché
non è più un singolo blocco continuo
potrebbe saltare dappertutto perché il
il codice non è fondamentalmente più continuo
da sinistra a destra ho una cosa che è
sul radar ma attualmente piuttosto triste
sia in code mirror su asso è mobile
supporta così il cellulare viola un intero gruppo
di assunzioni che ci affidiamo a fare
questo diamine il problema più grande è quello
ottieni questi simpatici aiutanti di selezione
la cosa delle carote è se selezioni qualcosa
dal momento che non è una vera selezione
stiamo creando non li otteniamo così a
molte funzionalità sono bloccate in pratica da te
non riesco a raggiungerli perché non hai
questa interfaccia di selezione non l’ho
guardò profondamente in quanto sarebbe stato difficile
per fingere questo qualcosa dovrà essere
fatto perché il cellulare sta diventando enorme e
dovremmo sostenerlo almeno
attualmente relativamente decente l’editore
lavori che puoi modificare puoi usare per la maggior parte
i browser mobili persino scorrono ma questo è
per quanto riguarda l’ estensione, non è così
sentirsi nativo e non è piacevole
esperienza da usare così da quando questo è tutto
open source è
lento andare non ho non sono stato avvertito
indipendentemente ricco non ho il
tempo di spendere mesi su questo appena uscito
il mio tempo personale ho avuto un successo
crowdfunding round due mesi fa dove
Ho passato un mese a lavorare su un gruppo di
nuove funzionalità come il testo bidirezionale
e così questo è diventato nella versione 3
chi lo sa che probabilmente proverò qualcosa
simile ancora questo in realtà funziona
relativamente bene per me il
redditizio modello open source è io
trascorsi i primi cinque anni di lavoro
questo progetto è completamente senza hobby
ISM ma di recente alcune grandi aziende lo sono
comprare supporto per questo ed è
diventare sostenibile per me da
mantenere questo, ma yeah cellulare mi porta
all’altro editor che ho menzionato prima
Orion usano un completamente diverso
approccio per fare questo usano il browser
ricerca funzionalità modificabili del contenuto
che ti permette di costruire Lee crea a
tipo di editor HTML rich text all’interno del
browser puoi dire che questo elemento è
modificabile e diventerà solo
modificabile è possibile fare clic su di esso per ottenere il
tipo di cursore qualcosa e poi il
il browser farà qualsiasi cosa si senta
corretto per farti modificare questo questo questo
codice che ha il vantaggio che tu sei
parlando di componenti reali modificabili
così mobile per esempio diventa molto di più
molto meno intimidatorio si pretende di
il lavoro sui dispositivi mobili non è stato effettivamente provato
ma posso immaginare il giorno che hanno ottenuto
questo è lavorare perché ne ricevono molti
le funzionalità eseguono automaticamente il mirror del codice
uno in realtà la prima versione del codice
specchio prima delle grandi riscritture che io
nel 2011 ha funzionato in questo modo
contenuto modificabile quindi ne ho alcuni
esperienza con esso ed è ha il suo
proprio insieme di problemi come ho detto il
il browser può fare tutto in una volta quando tu
modifica questo codice non ci sono specifiche
di come il contenuto commestibile o la modalità di progettazione
che è una caratteristica simile a quella
tutti i browser hanno invece come
dovrebbe funzionare come dovrebbe
per fare è premere invio per esempio
alcuni router inseriscono la nota di rottura BR alcuni
di loro alle note di paragrafo è un
sorpresa e poi l’editor deve andare
di nuovo dentro e in qualche modo rinormalizzare
cosa stai guardando a qualcosa
questo sta mostrando la sua visione del tuo
documenti un altro problema è quello
la selezione AP è arbitraria
le strutture sono variabili tra bar
browser Bergy Bergy e codice solo uno
a circa settecento linee di
codice di gestione della selezione non sono ansioso
per tornare a questa situazione ma sì come
Ho detto che ha trovato quello è uno
dei principali problemi con il Governatore uno
ci sono stati lenti su enormi documenti
perché mette tutto nel Dom il
Dom modificabile non meno che è pari
più lento del solito stupido oh ryan ottiene
intorno a questo usando un trucco simile
dove sta solo mettendo la parte visibile
dei documenti nell’attuale Dom così
sono molto curioso di come si svilupperà
oltre e cosa succederà lì
quello era il mio discorso che è dove il
progetto vive il mio progetto sì e basta
io su twitter sarei molto felice di
prendere domande o osservazioni o qualsiasi altra cosa
altrimenti potresti dover aggiungere una V Sono fuori
era una domanda c’è una V sono fuori questo
è una delle aree in cui sono stato
ricevendo molti contributi perché
molte persone apparentemente vogliono vedere
Sono fuori e c’è c’è qualcosa
che simula molte funzionalità VI
ma non posso dirti quanto è bello
un vero VI utente um quindi sono stato uno di
le motivazioni nella riscrittura da
codice mera 12 versione 2 doveva tagliare lo specchio
uno stava annegando in esagono ed era lì
tutto interagendo e stava diventando
orribile quindi un 2 prende uno sforzo cosciente
per mantenerli al minimo e isolarli
loro meglio che possono
in questo modo gli utenti dispongono di rilevamento e avvolgimento
molte cose e in funzioni tanto a lungo
come è possibile ed è costantemente
alla ricerca di modi come a volte il
modo ovvio è bacato e alcuni router
modo ovvio di fare qualcosa e ho
ho imparato a cercare un altro modo che è
semplice e che funziona davvero
cross browser per aggirare scrivendo se
all’estero e questo se mangio in questo ma
c’è purtroppo ancora tale codice
è relativamente minore in prima cosa a
è così che tengo questo segno del progetto
perché è che questi esadecimali tendono a
interagire in modi inaspettati ma è
Lì e si tratta solo di tenerlo
purtroppo nella mia testa è così
parte del processo di sviluppo è
cresciuto come ho solo di recente
imparato a piacere ora mi piace testare i
ho usato molto test per molto tempo
ma solo in cose che sono state testate
amichevole un componente dell’interfaccia utente è circa il
la cosa più ostile che si possa pensare
soprattutto se molti dei problematici
il comportamento è legato ai browser berks
che vedi solo quando lo esegui
quel browser specifico che abbiamo attualmente
un seme di prova relativamente grande che viene eseguito
nel fantasma JS che è un finto web kids
su una nota su ogni commit e ho
questa causa di morte è questa che puoi scappare se tu
basta andare su una pagina Web e l’eseguo
prima di rilasciare in ogni supportato
browser ma non è perfetto alcune cose
Io non ho trovato un modo per testare la
meccanicamente piace senza mettere il mio
proprio reato c’è questo quadro per
questo chiamato ho dimenticato che c’è un
framework che ti permette di generare un browser
processo e poi comunica a un piacevole
Presa TP per attivare eventi su quel browser
elaborare esattamente il selenio um quel tipo di
lavoro ma non potrei ancora licenziare tutto il
eventi che volevo davvero licenziare
un metodo di input che modifica il testo
una zona molto fragile molto fragile che è
non supportato da selenio ed è abbastanza
un dolore da impostare così non è in realtà
c’è uno stub che ci sono alcuni test
attraverso il selenio ma non mi sto sviluppando
lì perché è solo molto doloroso
quindi grazie per l’ascolto, hai un buon risultato
giorno
Please follow and like us: