import,require具体用法

2020-03-23 15:16:30

参考地址 JS中的「import」和「require 」

importrequire 是JS模块化编程使用的,是前端开发者们在性能探索中的又一大进步。

$ 对模块化的理解

  模块化是一种将系统分离成独立功能部分的方法,一个模块是为完成一个功能的一段程序或子程序。"模块"是系统中功能单一可替换的部分。
  模块化思想是从java上衍生过来的,他将所需要的功能封装成一个类,哪里需要就在哪里调用,JS中没有类的说法,但它引入了这种思想,在js中用对象或构造函数来模拟类的封装实现模块化,而在html上,则使用importrequire

$ 所属规范

require/exports 是 CommonJS/AMD 中为了解决模块化语法而引入的
import/export 是ES6引入的新规范,因为浏览器引擎兼容问题,需要在node中用babel将ES6语法编译成ES5语法
  关于import在浏览器中被支持的情况如下


$ 调用时间

require 是运行时调用,所以理论上可以运作在代码的任何地方
import 是编译时调用,所以必须放在文件的开头

$ 本质

require 是赋值过程,其实require的结果就是对象、数字、字符串、函数等,再把结果赋值给某个变量。它是普通的值拷贝传递。
import 是解构过程。使用import导入模块的属性或者方法是引用传递。且importread-only的,值是单向传递的。default是ES6 模块化所独有的关键字,export default {} 输出默认的接口对象,如果没有命名,则在import时可以自定义一个名称用来关联这个对象

$ 语法用法展示

| require的基本语法

  在导出的文件中使用module.exports对模块中的数据导出,内容类型可以是字符串,变量,对象,方法等不予限定。使用require()引入到需要的文件中即可

  在模块中,将所要导出的数据存放在moduleexport属性中,在经过CommonJs/AMD规范的处理,在需要的页面中使用require指定到该模块,即可导出模块中的export属性并执行赋值操作(值拷贝)

// module.jsmodule.exports = {
    a: function() {
        console.log('exports from module');
    }}

// sample.jsvar obj = require('./module.js');obj.a()  // exports from module

当我们不需要导出模块中的全部数据时,使用大括号包含所需要的模块内容。

// module.jsfunction test(str) {
  console.log(str); }module.exports = {
 test}

// sample.js
let { test } =  require('./module.js');
test ('this is a test');

| import 的基本语法

  使用import导出的值与模块中的值始终保持一致,即引用拷贝,采用ES6中解构赋值的语法,import配合export结合使用

// module.jsexport function test(args) {
  console.log(args);}// 定义一个默认导出文件, 一个文件只能定义一次export default {
  a: function() {
    console.log('export from module');
  }}export const name = 'gzc'

// 使用_导出export default的内容import _, { test, name } from './a.js'test(`my name is ${name}`)  // 模板字符串中使用${}加入变量

$ 写法形式

| require/exports 方式的写法比较统一

// requireconst module = require('module')

// exportsexport.fs = fs
module.exports = fs
| import/export 方式的写法就相对丰富些

// importimport fs  from 'fs';import { newFs as fs } from 'fs';  // ES6语法, 将fs重命名为newFs, 命名冲突时常用import { part } from fs;import fs, { part } from fs;

// exportexport default fs;export const fs;export function part;export { part1, part2 };export * from 'fs';

$ 要点总结

  • 通过require引入基础数据类型时,属于复制该变量

  • 通过require引入复杂数据类型时, 属于浅拷贝该对象

  • 出现模块之间循环引用时, 会输出已执行的模块, 未执行模块不会输出

  • CommonJS规范默认export的是一个对象,即使导出的是基础数据类型



  • 2018-04-07 23:35:16

    使用Intent传递对象的两种方式

    Intent 的用法相信你已经比较熟悉了,我们可以借助它来启动活动、发送广播、启动服务等。在进行上述操作的时候,我们还可以在Intent 中添加一些附加数据,以达到传值的效果,比如在FirstActivity 中添加如下代码:

  • 2018-04-10 14:59:59

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法),面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧

  • 2018-04-13 17:28:33

    jsoup 使用总结4--高级用法之 script js 脚本

    大部分时候,我们使用jsoup解析网页的时候,都是直接找到某一类元素,或者按某种selector查询;具体使用方法可以参考jsoup官网文档 那么你有没有实际操作过,查找script js 脚本呢,因为很多时候页面的内容是根据js动态生成的,或者数据是动态变更;那么这个时候,我们只是获取html页面中script js脚本之间的内容。

  • 2018-04-15 12:56:05

    WebView控件之WebSettings各种配置方法源码总结

    WebSettings用于管理WebView状态配置,当WebView第一次被创建时,WebView包含着一个默认的配置,这些默认的配置将通过get方法返回,通过WebView中的getSettings方法获得一个WebSettings对象,如果一个WebView被销毁,在WebSettings中所有回调方法将抛出IllegalStateException异常。

  • 2018-04-16 07:28:10

    android点击事件,第一次无效,第二次才响应的问题

    今天碰到的问题,android的标题栏一个回退button,每次进入的时候第一次点击无效,一直到第二次点击时才响应,然后把代码copy到系统的回退按钮里面,结果每次都能响应,后面想了想,应该跟焦点有关系