如何使用 javascript中的import，export 语法_百度知道
如何使用 javascript中的import，export 语法
提问者采纳
export 允许标明的脚本向其它标明或未标明的脚本提供属性、函数和对象。 实现版本
Navigator 4.0, Netscape Server 3.0
描述 通常情况下标明脚本中的信息仅对象同主体标明的脚本可用。通过导出属性、函数或对象，标明脚本将使得信息对于任何脚本(标明或未标明的)都可用。接收脚本使用对应的 import 语句访问信息。
其他类似问题
为您推荐：
javascript的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁如何使用 javascript中的import，export 语法_百度知道
如何使用 javascript中的import，export 语法
提问者采纳
export只有是导出文件，import主要是引入文件，应该是MVC或是其它框架里的你说的这个应该是不是js原生的
其他类似问题
为您推荐：
javascript的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁【ES6专栏】全面解析ECMAScript 6模块系统
发表于 06:07|
作者Ravi Kiran
摘要：模块化对任何大型应用来说十分必要，ES6弥补了JavaScript缺少对模块支持的遗憾。浏览器虽对ES6模块化支持还不够，但开发者可以借助编译器将ES6模块转换成ES5。本文将系统讲解ES6模块系统所提供的各种编码方法。
【编者按】在任何一个大型应用中模块化是很常见的。ES6的模块为JavaScript提供了这个特性，并且为这些模块提供了许多选择方法来导出和引入对象。Ravi Kiran 在《》一文中主要讨论了ES6模块系统。以下为该文章的简译内容：
无论使用何种编程语言开发大型应用，最关键的特性就是代码模块化。这个概念在不同的编程语言里有着不同的命名，在C里为头部文件，C++和C#里为命名空间，Java中为包，名称不一样但解决的是同一问题。正如《
》系列文章中第一篇所提到的那样，最初JavaScript并不是用来编写大量代码的，比如创建大型框架、App应用等。就在我们因为JavaScript缺少对模块的支持而编写大量代码时，开源开发者提出了一些标准，如CommoneJs模块模型、异步模块定义（AMD）以及一些库，来实现模块化。在过去几年里,这些库获得了广泛关注，并成功应用到多个企业规模级的应用程序中。
ES6为JavaScript带来了模块特性。浏览器实现这一特性还需要一段时间，因为它们必须定义一个方法来动态下载文件。在浏览器支持该特性以前，我们可以使用编译器，如
Traceur、6to5、ES6 Module Loader以及其它可以让ES6模块转换成ES5的转码器。
JavaScript模块系统的现状
CommonJS模块系统
CommonJs是一个由开源开发者组成的团队，主要围绕JavaScript实现一些API及开展研发实践。该团队提出了一个JavaScript模块规范。每个文件都可当作一个模块，并且每个文件可以访问两个对象：require和export。require用来接收字符串（模块名），并返回该模块输出的对象。export对象用来导出该模块的方法和变量。require方法返回的就是export对象。模块同步加载。服务器端JavaScript引擎Node.js就是用的这个模块系统。
异步模块定义（AMD）
AMD是一个采用异步方式加载依赖模块的模块系统。如果模块在不同文件中，它们将采用XHR进行加载。某一模块将等其所依赖的模块一一加载后才会被执行。AMD模块必须是一个函数，并作为参数传入define函数中。函数的返回值将传输给所有依赖的模块，所获得返回值又将作为参数传给模块方法。Require.js库中实现了AMD。
TypeScript模块
TypeScript，作为JavaScript的超集，也提供了一个模块系统。当它被编译时，便开始使用JavaScript模块模式。TypeScript模块使用module关键字定义，任何被输出的对象必须使用export关键字定义。import关键字用来将其它模块加载入模块中，并捕捉该模块导出的对象。TypeScript模块是同步加载的。
ES6模块系统
ES6模块系统启发于上述现有模块系统，它具有以下特性：
使用export关键词导出对象。这个关键字可以无限次使用；
使用import关键字将其它模块导入某一模块中。它可用来导入任意数量的模块；
支持模块的异步加载；
为加载模块提供编程支持。
接下来让我们通过具体编程方法看看每一个特性。
在现有的模块系统中，每个JavaScript代码文件在ES6中都是一个模块。只有模块中的对象需要被外部调用时，模块才会输出对象，其余则都是模块的私有对象。该处理方式将细节进行封装，仅导出必要的功能。
从模块里导出对象，ES6为我们提供了不同方法，见下面的讨论。
ES6模块里的对象可在创建它们的声明中导出。一个模块中可无数次使用export，所有的对象将被一起导出。请看下面的例子：
export class Employee{
constructor(id, name, dob){
this.name=
return (new Date()).getYear() - this.dob.getYear();
export function getEmployee(id, name, dob){
return new Employee(id, name, dob);
var emp = new Employee(1, "Rina", new Date());
案例中的模块导出了两个对象： Employee类，getEmployee函数。因对象emp未被导出，所以其仍为模块私有。
导出一组对象
尽管内联导出很有效，但在大规模模块中，它就很难发挥作用了，因为我们可能无法追踪到模块导出来的对象。在这种情况下，更好的办法是，在模块的末尾单独进行导出声明，以导出该模块中的全部对象。
使用单独导出声明重写上一案例中的模块，结果如下：
class Employee{
constructor(id, name, dob){
this.name=
return (new Date()).getYear() - this.dob.getYear();
function getEmployee(id, name, dob){
return new Employee(id, name, dob);
var x = new Employee(1, "Rina", new Date());
export {Employee, getEmployee};
在导出时，重命名对象也是可以的。如下例所示，Employee在导出时名字改为了Associate，函数GetEmployee改名为getAssociate。
Associate as Employee,
getAssociate as getEmployee
Default导出
使用关键字default，可将对象标注为default对象导出。default关键字在每一个模块中只能使用一次。它既可以用于内联导出，也可以用于一组对象导出声明中。
下面案例展示了在组导出语句中使用default：
export default {
getEmployee
现有模块可以使用关键字import导入到其它模块。一个模块可以被导入任意数量的模块中。下文展示了导入模块的不同方式。
无对象导入
如果模块包含一些逻辑要执行，且不会导出任何对象，此类对象也可以被导入到另一模块中。如下面案例所示：
import './module1.js';
&导入默认对象
采用Default导出方式导出对象，该对象在import声明中将直接被分配给某个引用，如下例中的“d”。
import d from './module1.js';
&导入命名的对象
正如以上讨论的，一个模块可以导出许多命名对象。如果另一模块想导入这些命名对象，需要在导入声明中一一列出这些对象。举个例子：
import {Employee, getEmployee} from './module1.js';
&当然也可在同一个声明中导入默认对象和命名对象。这种情况下，默认对象必须定义一个别名，如下例。
import {default as d, Employee} from './module1.js';
&导入所有对象
以上几种情况，只有import声明中列举的对象才会被导入并被使用，而其它对象则无法在导入模块中使用。当然，这就要求用户了解哪些对象可以导出并加以利用。如果模块导出大量对象，另一模块想引入所有导出的对象，就必须使用如下声明：
import * as allFromModule1 from './module1.js';
&allFromModule1这一别名将指向所有从module1导出的对象。在导入模块中，它们作为属性可被访问。
可编程式的按需导入
如果想基于某些条件或等某个事件发生后再加载需要的模块，可通过使用加载模块的可编程API（programmatic API）来实现。使用System.import方法，可按程序设定加载模块。这是一个异步的方法，并返回Promise。
该方法的语法示例如下：
System.import('./module1.js')
.then(function(module1){
//use module1
}, function(e){
//handle error
如果模块加载成功且将导出的模块成功传递给回调函数，Promise将会通过。如果模块名称有误或由于网络延迟等原因导致模块加载失败，Promise将会失败。
ES6模块使用现状
到目前为止，所有浏览器还不能自然支持ES6模块，所以在浏览器加载之前，我们需要使用转译器（transpiler）将代码转换成ES5。直到现在，我一直使用Traceur作为我的转译器，建议大家使用相同的工具将模块代码转化为浏览器可识别的代码。让我们看看编译ES6模块的几种不同的方法。
使用Traceur动态编译ES6模块
当浏览器加载脚本后，我们可以使用Traceur的客户端库动态编译ES6模块。使用该方法，运行模块无需运行任何命令。我们要做得就是，在页面上加载Traceur库，及添加代码脚本来运行WebPageTranscoder。
new traceur.WebPageTranscoder(document.location.href).run();
现在，我们就可以在script标签内，将类型指定成模块，以此导入任何一个ES6文件。
&script type="module"&
import './modules/import1.js';
类型指定为模块的任何脚本标签将被ES6客户端库获取并处理。上面代码块中的导入语句将发送AJAX请求，捕获相应的JavaScript文件，并载入它。如果模块内部引用了另一个模块，单独的AJAX请求将发出，以加载与引用模块相对应的文件。
使用Traceur命令编译ES6模块
使用Traceur命令可以将ES6模块编译成AMD或者CommonJS模块。这个方法有两大优点。
模块完成编译，浏览器不必执行额外动作；
如果应用已经使用ES5及AMD（或CommonJs）模块系统构建了一半，程序的另一半也可以使用ES6，并被编译为这些模块系统中的任何一个，而不是立即把整个应用编译成ES6。
为了使用编译完成的AMD/CommonJs的模块，我们需要包含支持模块系统的库。我个人比较倾向AMD，所以我将在这里介绍一下它。CommonJS模块的步骤和这个差不多。
下面这句命令是用来让包含ES6模块的文件夹编译成AMD，并把它们存储在一个单独的文件夹：
traceur --dir modules es5Modules --modules=amd
使用CommonJs，你需要在上面命令中使用commonjs代替modules。
在这里，modules指的是包含ES6的文件夹，es5Modules指的是输出目录。如果查看es5Modules文件夹下的任何文件，你将看到该AMD定义块。require.js支持AMD，所以我们可以在HTML页面中，使用script引入require.js，并用data-main属性指明开始文件，就像下面这样：
&script src="bower_components/requirejs/require.js" data-main="es5Modules/import2.js"&&/script&
使用Traceur Grunt Task编译ES6模块
使用命令编译模块很累而且更容易出错。我们可以使用grunt-traceur自动化编译过程。此时，你需要安装NPM包。
npm intall grunt-traceur –save
Grunt任务所需数据与提供给命令的数据一样。下面是任务的一些配置：
traceur: {
options: {
modules: "amd"
expand: true,
cwd: 'modules',
src: ['*.js'],
dest: 'es5Modules'
现在你可以在控制台里使用下面的命令来运行上面的Grunt任务：grunt traceur
正如你所看见的那样，它和我们使用命令所产生的效果是一样的。
任何一个大型应用中，模块化十分必要。ES6模块为JavaScript提供了该特性，这些模块提供了众多选择来导出和引入对象。我很期待该特性被浏览器支持的那一天，到时我们无需加载任何第三方库即可创建、加载JavaScript模块。目前流行的客户端MV*框架Angular.js在其2.0版本（目前还在开发中）中就使用了ES6的模块化。
让我们开始使用模块系统，从而让我们的代码更具组织和可读性。（编译：肖元州，审校：陈秋歌）原文链接：
推荐阅读相关主题：
CSDN官方微信
扫描二维码,向CSDN吐槽
微信号：CSDNnews
相关热门文章JavaScriptCore 使用 - 简书
下载简书移动应用
写了20926字，被317人关注，获得了280个喜欢
JavaScriptCore 使用
JavaScriptCore
JavaScriptCore是webkit的一个重要组成部分，主要是对JS进行解析和提供执行环境。代码是开源的，可以下下来看看（）。iOS7后苹果在iPhone平台推出，极大的方便了我们对js的操作。我们可以脱离webview直接运行我们的js。iOS7以前我们对JS的操作只有webview里面一个函数 stringByEvaluatingJavaScriptFromString，JS对OC的回调都是基于URL的拦截进行的操作。大家用得比较多的是和这两个开源库，很多混合都采用的这种方式。
JavaScriptCore和我们相关的类不是很多，使用起来也非常简单。
#import "JSContext.h"
#import "JSValue.h"
#import "JSManagedValue.h"
#import "JSVirtualMachine.h"
#import "JSExport.h"
JS执行的环境，同时也通过JSVirtualMachine管理着所有对象的生命周期，每个JSValue都和JSContext相关联并且强引用context。
JS对象在JSVirtualMachine中的一个强引用，其实就是Hybird对象。我们对JS的操作都是通过它。并且每个JSValue都是强引用一个context。同时，OC和JS对象之间的转换也是通过它，相应的类型转换如下：
Objective-C type
JavaScript type
--------------------+---------------------
number, boolean
NSDictionary
Object object
Array object
Date object
NSBlock (1)
Function object (1)
Wrapper object (2)
| Constructor object (3)
JSManagedValue
JS和OC对象的内存管理辅助对象。由于JS内存管理是垃圾回收，并且JS中的对象都是强引用，而OC是引用计数。如果双方相互引用，势必会造成循环引用，而导致内存泄露。我们可以用JSManagedValue保存JSValue来避免。
JSVirtualMachine
JS运行的虚拟机，有独立的堆空间和垃圾回收机制。
一个协议，如果JS对象想直接调用OC对象里面的方法和属性，那么这个OC对象只要实现这个JSExport协议就可以了。
OC和JS之间的通信
两者之间的通信还是很简单的，直接看简单代码示例吧。
Objective-C -& JavaScript
self.context = [[JSContext alloc] init];
NSString *js = @"function add(a,b) {return a+b}";
[self.context evaluateScript:js];
JSValue *n = [self.context[@"add"] callWithArguments:@[@2, @3]];
NSLog(@"---%@", @([n toInt32]));//---5
步骤很简单，创建一个JSContext对象，然后将JS代码加载到context里面，最后取到这个函数对象，调用callWithArguments这个方法进行参数传值。（JS里面函数也是对象）
JavaScript -& Objective-C
JS调用OC有两个方法：block和JSExport protocol。
block(JS function):
self.context = [[JSContext alloc] init];
self.context[@"add"] = ^(NSInteger a, NSInteger b) {
NSLog(@"---%@", @(a + b));
[self.context evaluateScript:@"add(2,3)"];
我们定义一个block，然后保存到context里面，其实就是转换成了JS的function。然后我们直接执行这个function，调用的就是我们的block里面的内容了。
JSExport protocol:
//定义一个JSExport protocol
@protocol JSExportTest &JSExport&
- (NSInteger)add:(NSInteger)a b:(NSInteger)b;
@property (nonatomic, assign) NSI
//建一个对象去实现这个协议：
@interface JSProtocolObj : NSObject&JSExportTest&
@implementation JSProtocolObj
@synthesize sum = _
//实现协议方法
- (NSInteger)add:(NSInteger)a b:(NSInteger)b
return a+b;
//重写setter方法方便打印信息，
- (void)setSum:(NSInteger)sum
NSLog(@"--%@", @(sum));
//在VC中进行测试
@interface ViewController () &JSExportTest&
@property (nonatomic, strong) JSProtocolObj *
@property (nonatomic, strong) JSContext *
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建context
self.context = [[JSContext alloc] init];
//设置异常处理
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception =
NSLog(@"exception:%@",exception);
//将obj添加到context中
self.context[@"OCObj"] = self.
//JS里面调用Obj方法，并将结果赋值给Obj的sum属性
[self.context evaluateScript:@"OCObj.sum = OCObj.addB(2,3)"];
demo很简单，还是定义了一个两个数相加的方法，还有一个保存结果的变量。在JS中进行调用这个对象的方法，并将结果赋值sum。唯一要注意的是OC的函数命名和JS函数命名规则问题。协议中定义的是add: b:，但是JS里面方法名字是addB(a,b)。可以通过JSExportAs这个宏转换成JS的函数名字。
修改下代码：
@protocol JSExportTest &JSExport&
//用宏转换下，将JS函数名字指定为add；
JSExportAs(add, - (NSInteger)add:(NSInteger)a b:(NSInteger)b);
@property (nonatomic, assign) NSI
[self.context evaluateScript:@"OCObj.sum = OCObj.add(2,3)"];
我们可以定义自己的异常捕获，可以把context，异常block改为自己的：
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception =
NSLog(@"exception:%@",exception);
现在来说说内存管理的注意点，OC使用的ARC，JS使用的是垃圾回收机制，并且所有的引用是都强引用，不过JS的循环引用，垃圾回收会帮它们打破。JavaScriptCore里面提供的API，正常情况下，OC和JS对象之间内存管理都无需我们去关心。不过还是有几个注意点需要我们去留意下。
1、不要在block里面直接使用context，或者使用外部的JSValue对象。
//错误代码：
self.context[@"block"] = ^(){
JSValue *value = [JSValue valueWithObject:@"aaa" inContext:self.context];
这个代码，不用自己看了，编译器都会提示你的。这个block里面使用self，很容易就看出来了。
//一个比较隐蔽的
JSValue *value = [JSValue valueWithObject:@"ssss" inContext:self.context];
self.context[@"log"] = ^(){
NSLog(@"%@",value);
这个是block里面使用了外部的value，value对context和它管理的JS对象都是强引用。这个value被block所捕获，这边同样也会内存泄露，context是销毁不掉的。
//正确的做法，str对象是JS那边传递过来。
self.context[@"log"] = ^(NSString *str){
NSLog(@"%@",str);
2、OC对象不要用属性直接保存JSValue对象，因为这样太容易循环引用了。
看个demo，把上面的示例改下：
//定义一个JSExport protocol
@protocol JSExportTest &JSExport&
//用来保存JS的对象
@property (nonatomic, strong) JSvalue *jsV
//建一个对象去实现这个协议：
@interface JSProtocolObj : NSObject&JSExportTest&
@implementation JSProtocolObj
@synthesize jsValue = _jsV
//在VC中进行测试
@interface ViewController () &JSExportTest&
@property (nonatomic, strong) JSProtocolObj *
@property (nonatomic, strong) JSContext *
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建context
self.context = [[JSContext alloc] init];
//设置异常处理
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception =
NSLog(@"exception:%@",exception);
//加载JS代码到context中
[self.context evaluateScript:
@"function callback (){};
function setObj(obj) {
this.obj =
obj.jsValue=
//调用JS方法
[self.context[@"setObj"] callWithArguments:@[self.obj]];
上面的例子很简单，调用JS方法，进行赋值，JS对象保留了传进来的obj，最后，JS将自己的回调callback赋值给了obj，方便obj下次回调给JS；由于JS那边保存了obj，而且obj这边也保留了JS的回调。这样就形成了循环引用。
怎么解决这个问题？我们只需要打破obj对JSValue对象的引用即可。当然，不是我们OC中的weak。而是之前说的内存管理辅助对象JSManagedValue。
JSManagedValue 本身就是我们需要的弱引用。用官方的话来说叫garbage collection weak reference。但是它帮助我们持有JSValue对象必须同时满足一下两个条件（不翻译了，翻译了怪怪的！）：
The JSManagedValue's JavaScript value is reachable from JavaScript
The owner of the managed reference is reachable in Objective-C. Manually adding or removing the managed reference in the JSVirtualMachine determines reachability.
意思很简单，JSManagedValue 帮助我们保存JSValue，那里面保存的JS对象必须在JS中存在，同时 JSManagedValue 的owner在OC中也存在。我们可以通过它提供的两个方法``` + (JSManagedValue )managedValueWithValue:(JSValue )
(JSManagedValue )managedValueWithValue:(JSValue )value andOwner:(id)owner创建JSManagedValue对象。通过JSVirtualMachine的方法- (void)addManagedReference:(id)object withOwner:(id)owner来建立这个弱引用关系。通过- (void)removeManagedReference:(id)object withOwner:(id)owner``` 来手动移除他们之间的联系。
把刚刚的代码改下：
//定义一个JSExport protocol
@protocol JSExportTest &JSExport&
//用来保存JS的对象
@property (nonatomic, strong) JSValue *jsV
//建一个对象去实现这个协议：
@interface JSProtocolObj : NSObject&JSExportTest&
//添加一个JSManagedValue用来保存JSValue
@property (nonatomic, strong) JSManagedValue *managedV
@implementation JSProtocolObj
@synthesize jsValue = _jsV
//重写setter方法
- (void)setJsValue:(JSValue *)jsValue
_managedValue = [JSManagedValue managedValueWithValue:jsValue];
[[[JSContext currentContext] virtualMachine] addManagedReference:_managedValue
withOwner:self];
//在VC中进行测试
@interface ViewController () &JSExportTest&
@property (nonatomic, strong) JSProtocolObj *
@property (nonatomic, strong) JSContext *
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//创建context
self.context = [[JSContext alloc] init];
//设置异常处理
self.context.exceptionHandler = ^(JSContext *context, JSValue *exception) {
[JSContext currentContext].exception =
NSLog(@"exception:%@",exception);
//加载JS代码到context中
[self.context evaluateScript:
@"function callback (){};
function setObj(obj) {
this.obj =
obj.jsValue=
//调用JS方法
[self.context[@"setObj"] callWithArguments:@[self.obj]];
注：以上代码只是为了突出用 JSManagedValue来保存 JSValue，所以重写了 setter 方法。实际不会写这么搓的姿势。。。应该根据回调方法传进来参数，进行保存 JSValue。
3、不要在不同的 JSVirtualMachine 之间进行传递JS对象。
一个 JSVirtualMachine可以运行多个context，由于都是在同一个堆内存和同一个垃圾回收下，所以相互之间传值是没问题的。但是如果在不同的 JSVirtualMachine传值，垃圾回收就不知道他们之间的关系了，可能会引起异常。
JavaScriptCore 线程是安全的，每个context运行的时候通过lock关联的JSVirtualMachine。如果要进行并发操作，可以创建多个JSVirtualMachine实例进行操作。
与UIWebView的操作
通过上面的demo，应该差不多了解OC如何和JS进行通信。下面我们看看如何对 UIWebView 进行操作，我们不再通过URL拦截，我们直接取 UIWebView 的 context，然后进行对JS操作。
在UIWebView的finish的回调中进行获取
- (void)webViewDidFinishLoad:(UIWebView *)webView
self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
上面用了私有属性，可能会被苹果给拒了。这边要注意的是每个页面加载完都是一个新的context，但是都是同一个JSVirtualMachine。如果JS调用OC方法进行操作UI的时候，请注意线程是不是主线程。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
简书程序员大本营
投稿须知：
1.本专题仅收录与程序有关的文章。
2.请在代码框里写代码，尽量保证可看性。
· 74638人关注
分享 iOS 开发的知识，解决大家遇到的问题，讨论iOS开发的前沿，欢迎大家投稿~
· 15895人关注
专题内容主要包括OC、swift等涉及到iOS开发进阶的内容。
swift可以关注下我的另一个专题：
swift开发...
· 12820人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：