Introduction et export des spécifications commonJS et es6

Cette fois, je vais vous présenter l'introduction et l'exportation des spécifications commonJS et es6. Quelles sont les précautions pour l'introduction et l'exportation des spécifications commonJS et es6. Ce qui suit est un cas pratique, prenons un. regarder.

Définition dans index.js :

var info = { name = 'sisi' };

1.Lors de la définition d'une variable , n'utilisez pas d'objetnom de la variable, car des inconnues peuvent apparaît une erreur.

2. Lorsque vous utilisez export {info} pour la sortie, l'importation doit être sous la forme d'import {info} from index.js, et les accolades ne peuvent pas être omises.

3. Lorsque la sortie est sous forme d'export{info as vm}, l'interface info ne peut plus être utilisée pour l'importation, et seule l'interface vm peut être utilisée, c'est-à-dire

import {vm} from index.js

4. Points clés : Lorsque la sortie utilise module.exports = info, l'importation peut également être utilisée pour introduire des informations

import info from index.js

ne peut pas être utilisée

.

import {info} from index.js

Bien sûr, dans ce cas, utilisez require est également correct

var info = require('index.js');

5. Comparez avec le quatrième élément ci-dessus, si la sortie utilise l'exportation de. es6. Autrement dit, exportez {info} ; ou exportez les informations par défaut ; le module doit alors utiliser l'importation pour introduire les informations, et require ne fonctionnera pas.

6. Lors de l'utilisation de la sortie d'exportation, l'importation doit avoir {} Par exemple, lors de l'importation demo.js

export const str = 'sisi';
export function func(){
   console.log('sisi');
}

, utilisez :

import {str} from 'demo'; 或 import {str, func} from 'demo';

est. non autorisé Utilisez

export default const str = 'sisi';

mais utilisez

export default const str = 'sisi';

lors de l'importation. Vous pouvez utiliser

import str from 'demo';

car il ne peut y avoir qu'un seul défaut d'exportation

es6 {
　　export   :      '可以输出多个，输出方式为 {}' ，
　　export  default : ' 只能输出一个 ，可以与export 同时输出，但是不建议这么做'，
　　解析阶段确定对外输出的接口，解析阶段生成接口，
　　模块不是对象，加载的不是对象，
　　可以单独加载其中的某个接口（方法），
　　静态分析，动态引用，输出的是值的引用，值改变，引用也改变，即原来模块中的值改变则该加载的值也改变，
　　this 指向undefined
}
commonJS {
　　module.exports =  ...   :      '只能输出一个，且后面的会覆盖上面的' ，
　　exports. ...  : ' 可以输出多个'，
　　运行阶段确定接口，运行时才会加载模块，
　　模块是对象，加载的是该对象，
　　加载的是整个模块，即将所有的接口全部加载进来，
　　输出是值的拷贝，即原来模块中的值改变不会影响已经加载的该值，
　　this 指向当前模块
}

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

entrée, sortie, analyse de module de webpack3.x

Méthode de commutation d'onglet Vue2

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!