Einige Einblicke und Austausch über js

JavaScript ist eine Skriptsprache für das Internet!

JavaScript wird von Millionen von Webseiten verwendet, um das Design zu verbessern, Formulare zu validieren, Browser zu erkennen, Cookies zu erstellen und mehr.

JavaScript ist die beliebteste Skriptsprache im Internet.

JavaScript ist einfach zu verwenden! Du wirst es lieben!

js kann jetzt auf

1 ausgeführt werden. Browser-Seite

2 über den berühmten Knoten, Knoten besteht aus c/ The Die in cpp geschriebene js-Laufumgebung ist wahrscheinlich js, das in c kompiliert und in Maschinensprache zusammengesetzt ist. . . Wahrscheinlich

Knoten kompiliert

js

Betriebssystem ausführbare Maschinensprache

---

Paketinstallationstool

1.npm

2.bower

3.yarn

Jetzt empfiehlt das jeder. . . Es soll schneller und besser sein

---

Build-Packaging-Tool (um ehrlich zu sein, ich kann jetzt immer noch keinen Unterschied erkennen)

Build-Tool Task Executor

Hilfe beim Komprimieren von Dateien? Sprite? Verwirrung usw. erfordern eine manuelle Vereinfachung? Manuelle Arbeit Schluckgrunzen

Verpackungstool Modulverpackungstool

Der modulare Code wird schließlich für die Online-Verwendung zusammengestellt und verpackt, und Seajs müssen auf der Browserseite gepackt werden Mehr empfohlen

---

js auf der Seite

Die traditionelle Einführungsmethode script src

Knoten dynamische Einführung

Dies ist ein sehr magisches Node-Tool Webpack stellt Ihre Seite dynamisch zusammen. Wenn Sie beispielsweise das Plug-in in Knotenmodulen verwenden, verwenden Sie kein Skript, um es in die Seite einzuführen? Wenn Sie es vorerst nicht verstehen, können Sie nicht mit gesundem Menschenverstand darüber nachdenken (vue-cli) dev Es ist der dynamische Assembly-Build, der alle dynamischen Assemblys in einem zusammenfasst. . .

---

es2015==es6 =>true

---

jquery-Attribut selbst hinzufügend

a.css({'property':'+=value ' })

---

Meine aktuellen Gedanken zu Vue

Lassen Sie uns zunächst über die Vorteile sprechen, die nur Daten verarbeiten, ohne Dom zu bedienen

Lassen Sie uns über die Mängel sprechen. Wenn Sie a tun möchten, müssen Sie b tun, wenn Sie c tun möchten, wenn Sie a tun möchten, wenn Sie b tun möchten b, wenn du c machen willst, wenn du a machen willst, wenn du b machen willst, wenn du b machen willst, wenn du c machen willst, wenn du a machen willst, wenn du b machen willst , wenn du b machen willst, wenn du c machen willst, wenn du a willst Mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach b, mach b, mach c, mach a, mach a. Mach b, mach b, mach c, mach a, mach b, mach b, do c, do a, do b, do b, do c, am Ende ist es schwer zu verstehen. Um es bequemer und mühsamer zu machen, müssen wir weitere Dinge hinzufügen

---

Inhaltsbearbeitbar

div simuliert Textbereich-Rich-Text-Editor

<div class="simutextarea">
                    <span class="simut-fastenbegin">#youCantDeleteMe</span><span class="simut-textwrapper">
                        <span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
                        <span class="simut-textplaceinput" contenteditable="true"> </span>
                    </span>
                </div>

Aber es gibt einige Probleme, die das Cursorproblem nicht lösen können (Sprung zur ersten Seite). Wenn Sie Zeit haben, schauen wir uns an, wie sie es machen >

---

Je nach Gerät springen

Drei Parteien können springen und den UserAgent vom Browser senden lassen

1. Betriebs- und Wartungssprung

2. Programmsprung-Umleitung

3. Front-End-Umleitung

Gleichzeitig sind diese drei Parteien plus Netzwerk Betreiber und sogar Router können mit bösartigem DNS böswillig Dinge zur Seite hinzufügen

Knoten ist dasselbe wie ein Laufzeitserver

---

Das Bild befindet sich in der Mitte

1. Hintergrundposition Mitte

2. Position absolut

---

Mehrere Zeilen weggelassen (moderne Browser)

overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;

---

CDN-Seite mit wirklich dynamischem Inhalt

Seite Nachdem der Cache vom CDN-Server zwischengespeichert wurde, muss er aktualisiert werden, um ihn wirklich zu ändern. Dann muss der Inhalt, der wirklich sorgfältig geändert werden muss, js erhalten (z B. die aktuell angemeldeten Benutzerinformationen usw.)

js regulär, um alle passenden Übereinstimmungen zu finden

var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;

Exec kontinuierlich ausführen

---

async/await

demo(Script snippet #1)

//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar sleep=function(){ return new Promise(function(resolve,reject){
     setTimeout(function(){         console.log('Asettimeout has been executed, promiss has been resolved');
         resolve(['sleep1','sleep2']);
     },3000);
 });
};//后到的 async（异步）修饰function await修饰执行先来的var start=async function(){ let sleepreturnarray=await sleep(); console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();

async bedeutet, dass es sich um eine asynchrone Funktion handelt. „await“ kann nur in dieser Funktion verwendet werden.

Warten bedeutet, auf das Versprechen zu warten, das Ergebnis zurückzugeben, bevor mit der Ausführung fortgefahren wird.

await sollte von einem Promise-Objekt gefolgt werden (andere Rückgabewerte spielen natürlich keine Rolle, sie werden einfach sofort ausgeführt, aber das wäre bedeutungslos...)

Das ist es. Derzeit ist dies die ultimative Lösung für die Hölle des asynchronen Rückrufs. Natürlich muss es mit Babel kombiniert werden. Beachten Sie, dass derzeit Ultimate

---

vue-Komponentenkommunikation

Auch wenn es Ihnen nicht gefällt, müssen Sie es verwenden, wenn Ihnen die Verwendung zugewiesen wurde. . .

Die Bereiche zwischen Komponenten sind unabhängig und Komponenten müssen häufig Daten zwischen ihnen übertragen.

A ist die übergeordnete Komponente, und darunter gibt es die Unterkomponenten B und C.
Die Daten von A können über Requisiten an B und C weitergegeben werden.
A kann über $broadcast Ereignisse von B und C aufrufen, um die Daten von B und C zu verarbeiten.
B und C können die Ereignisse von A über $dispatch aufrufen, um die Daten von A zu manipulieren.
Wenn B die Daten von C verarbeiten muss, ist dies schwieriger. Es muss zuerst an A gesendet und dann an C gesendet werden.

Es ist in Ordnung, wenn das Projekt relativ klein ist. Je größer das Projekt, desto häufiger kommunizieren die beteiligten Komponenten. Zu diesem Zeitpunkt wird es sehr ermüdend und fehleranfällig sein. Darum geht es bei Vuex. Es kann Daten in einer separaten Ebene platzieren und Methoden zur externen Manipulation interner Daten bereitstellen. Es ist ein bisschen vulgär, also lasst es uns verstehen.

=== === ===Update: Vue 2 wurde veröffentlicht, $dispatch und $broadcast wurden entfernt und das Kommunikationsereignis Ping-Pong tritt nicht mehr auf.

Wir benötigen eine Vue-Instanz, die als Kommunikationsmedium fungiert. Die offizielle Vue-Dokumentation nennt es Event-Bus. Standard exportieren new Vue(); Wenn wir eine Ereigniskommunikation zwischen Komponenten benötigen, müssen wir auf diesem Ereignisbus nur $emit und $on verwenden.

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

Event Bus ist eine Praxis, die Sie auch in Vue 1.x verwenden können.

---

Groß ist in einem kleinen Container zentriert

Methode 1

Groß: Position links 50 %; Breite des Großen ]; oben... Das Gleiche weglassen wie links

Klein: Position relativ;

法二

设置为背景图 且background-position center

---

文本框和按钮同高对齐(less)

form{			font-size: 0;position: relative;			.formitem{				height: 30px;line-height: 30px;				font-size: 14px;vertical-align: middle;
			}			input[type=text]{				.formitem();				border: 1px solid #000;				padding: 0 5px 0 35px;				width: 235-40px;
			}			button{				.formitem();				color: #fff;background-color: #000;				width: 135px;height: 32px;line-height: 32px;
			}			&:before{				content: '';display: inline-block;position: absolute;				left: 38px;				top: 1px;				.sprite(@youjiandingyue_07);
			}
		}

---

正则替换 保留原始内容

http://([A-Za-z0-9.-]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的模糊内容
$1-$n分别代表第1个和第n个括号内匹配到的内容。

var regEx=/([A-Za-z0-9.-]+)abc/;'sdjlfjslfabc'.replace(regEx,'$1def')

结果是"sdjlfjslfdef"

---

关于vue一点新的体会

专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式

---

webstorm 保存不会触发webpack watch

原来是这样啊啊啊啊啊啊

---

text align justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

---

vue validator

中文文档

---

关于postcss中用于不转换rem的注释/*no*//*px*/在webpack build中不生效的解决办法

sass loader会把注释去掉 导致用于告诉postcss不用转换rem的注释也去掉 导致边线px变成小数rem 显示不出来的bug
sass?outputStyle=expanded 展开 带注释的？

module: {loaders: [
            {test: /\.scss$/,//感謝谷歌loader: 'style!css!postcss-loader!sass?outputStyle=expanded',// include: APP_PATH},
        ]
    },

webpack 可以接受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules 的配置参数后的loader

 

Das obige ist der detaillierte Inhalt vonEinige Einblicke und Austausch über js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!