Quelques idées et partages sur js

JavaScript est un langage de script pour Internet !

JavaScript est utilisé par des millions de pages Web pour améliorer la conception, valider les formulaires, détecter les navigateurs, créer des cookies, etc.

JavaScript est le langage de script le plus populaire sur Internet.

JavaScript est facile à utiliser ! Vous allez adorer !

js peut désormais fonctionner sur

1 Côté navigateur

2 Système d'exploitation de l'ordinateur

via le fameux nœud, le nœud est composé de c/ Le. L'environnement d'exécution js écrit en cpp est probablement js compilé en c, assemblé en langage machine. . . Probablement

compilation de nœuds

js

langage machine exécutable du système d'exploitation

---

Outil d'installation de packages

1.npm

2.bower

3.yarn

Maintenant, tout le monde le recommande. . . On dit que c'est plus rapide et meilleur

---

Outil de création d'emballage (pour être honnête, je n'arrive toujours pas à faire la différence maintenant)

Outil de création Exécuteur de tâches

Aider à compresser des fichiers ? lutin? La confusion, etc. nécessite une simplification manuelle ? Travail manuel gulp grognement

Outil d'empaquetage Outil d'empaquetage de modules

Le code modulaire est enfin assemblé et empaqueté pour une utilisation en ligne avec Webpack Browserify et les Seajs requis sont empaquetés du côté du navigateur JS.

---

js recommandé dans la page

La méthode d'introduction traditionnelle script src

introduction dynamique du nœud

C'est un nœud très magique L'outil webpack assemble dynamiquement votre page. Par exemple, si vous utilisez le plug-in dans les modules de nœuds, vous n'utilisez pas réellement de script pour l'introduire dans la page ? Lorsque vous ne le comprenez pas pour le moment, vous ne pouvez pas faire preuve de bon sens pour penser au développement (vue-cli). C'est la construction d'assembly dynamique qui regroupe tous les assemblys dynamiques en un seul. . .

---

es2015==es6 =>true

---

attribut jquery à ajout automatique

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

---

Mes réflexions actuelles sur vue

Tout d'abord, parlons des avantages. Il exploite uniquement les données sans opérer dom

Parlons des lacunes. Si vous voulez faire a, vous devez faire b, si vous voulez faire c, si vous voulez faire a, si vous voulez faire b, si vous voulez faire. b, si tu veux faire c, si tu veux faire a, si tu veux faire b, si tu veux faire b, si tu veux faire c, si tu veux faire a, si tu veux faire b , si tu veux faire b, si tu veux faire c, si tu veux a Fais b, fais b, fais c, fais a, fais b, fais b, fais c, fais a, fais b, fais b, fais c, faire a, faire b, faire b, faire c, faire a, faire b, faire b, faire c, faire a, faire a. Faire b, faire b, faire c, faire a, faire b, faire b, fais c, fais a, fais b, fais b, fais c, finalement c'est dur à comprendre. Afin de le rendre plus pratique et plus gênant, nous devons ajouter plus de choses

---

contenteditable

div simule un éditeur de texte riche en zone de texte

<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>

Mais il y a certains problèmes qui ne peuvent pas résoudre le problème du curseur (saut à la première page). La boîte de publication de Baidu Tieba est simulée en utilisant ceci. Si vous avez le temps, voyons comment ils font. >

---

Sauter en fonction de l'appareil

Trois parties peuvent sauter et recevoir l'agent utilisateur envoyé depuis le navigateur

1. Saut d'exploitation et de maintenance

2. Redirection de saut de programme

3. Redirection frontale

En même temps, ces trois parties plus le réseau les opérateurs et même les routeurs peuvent ajouter de manière malveillante des éléments à la page avec un DNS malveillant

le nœud est le même qu'un serveur d'exécution

---

L'image est au centre

1. centre de position d'arrière-plan

2. position absolue

---

Plusieurs lignes omises (navigateurs modernes)

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

---

Page cdn contenu vraiment dynamique

page Après avoir été mis en cache par le serveur cdn, le cache doit être actualisé pour vraiment changer. Ensuite, le contenu qui doit vraiment être modifié avec diligence nécessite js pour l'obtenir (tel. comme les informations de l'utilisateur actuellement connecté, etc.)

js régulier pour trouver toutes les correspondances correspondantes

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;

Exécuter en continu exec

---

async/await

démo (extrait de script n°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 signifie qu'il s'agit d'une fonction asynchrone, wait ne peut être utilisé que dans cette fonction.

attendre signifie attendre la promesse de renvoyer le résultat avant de poursuivre l'exécution.

await doit être suivi d'un objet de promesse (bien sûr, les autres valeurs de retour n'ont pas d'importance, elles seront simplement exécutées immédiatement, mais cela n'aurait aucun sens...)

Ça y est, à l'heure actuelle, c'est la solution ultime à l'enfer des rappels asynchrones, bien sûr, elle doit être combinée avec Babel. Notez qu'actuellement, Ultimate

---

vue composant communication

Même si vous ne l'aimez pas, vous devez l'utiliser si vous êtes chargé de l'utiliser. . .

Les portées entre les composants sont indépendantes et les composants doivent souvent transmettre des données entre eux.

A est le composant parent, et il y a les sous-composants B et C ci-dessous.
Les données de A peuvent être transmises à B et C via des accessoires.
A peut appeler des événements de B et C via $broadcast pour exploiter les données de B et C.
B et C peuvent appeler les événements de A via $dispatch pour manipuler les données de A.
Lorsque B aura besoin d'exploiter les données de C, cela sera plus gênant. Il devra d'abord $expédier à A, puis $diffuser vers C.

Ce n'est pas grave si le projet est relativement petit. Plus le projet est grand, plus les composants impliqués communiqueront de plus en plus fréquemment. À ce moment-là, la gestion sera très fatigante et sujette aux erreurs. C'est ce qu'est Vuex. Il peut placer les données dans une couche distincte et fournir des méthodes de manipulation externe des données internes. C’est un peu vulgaire, alors comprenons-le.

=== === ===Mise à jour : Vue 2 a été publiée, $dispatch et $broadcast ont été supprimés et l'événement de communication ping-pong ne se produira plus.

Nous avons besoin d'une instance Vue pour servir de support de communication. La documentation officielle de Vue l'appelle bus d'événements. exporter le nouveau Vue par défaut (); Lorsque nous avons besoin d'une communication d'événements entre les composants, il nous suffit d'utiliser $emit et $on sur ce bus d'événements.

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!');
    }
  }
});

Le bus d'événements est une pratique que vous pouvez également utiliser dans Vue 1.x.

---

Grand est centré dans un petit conteneur

Méthode 1

Grand : position absolue à gauche 50 % -[la moitié de la ; largeur du grand ] ; haut...Omettre la même chose qu'à gauche

Petit : position relative

法二

设置为背景图 且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

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!