关于spreadjs:现代JavaScriptES6-中的-ImportsExportsLetConst-和-Promise

37次阅读

共计 16098 个字符，预计需要花费 41 分钟才能阅读完成。

在过来几年里，JavaScript 有很多的更新。如果你想晋升写代码的能力，这些更新将会对你有十分大的帮忙。

对于程序员来说，理解这门语言的最新倒退是十分重要的。它能使你跟上最新趋势，进步代码品质，在工作中超群绝伦，从而进一步晋升你的薪资待遇。

特地地，如果你想学习像 React、Angular 或 Vue 这样的框架，你必须把握这些最新的个性。

最近，JavaScript 减少了许多有用的性能，比方Nullish coalescing operator, optional chaining, Promises, async/await, ES6 destructuring, 等等。

那么当初，咱们将探讨每个 JavaScript 开发者都应该晓得的概念。

JavaScript 中的 Let 和 const

在 ES6 之前，JavaScript 应用 var 关键字来申明变量，var 只有全局作用域和函数作用域，所谓全局作用域就是在代码的任何地位都能拜访 var 申明的变量，而函数作用域在变量申明的以后函数外部拜访变量。此时是没有块级作用域的。

随着 let 和 const 这两个关键字的增加，JS 减少了块级作用域的概念。

如何在 JavaScript 中应用 let

当咱们在用 let 申明变量时，用于申明一次之后就不能再以雷同的名称从新申明它。

// ES5 Code

var value =  10;

console.log(value);  // 10

var value =  "hello";

console.log(value);  // hello

var value =  30;

console.log(value);  // 30

如上所示，咱们屡次应用 var 关键字从新申明了变量值。

在 ES6 之前，咱们能够应用 var 从新申明之前曾经申明过的变量，这就会导致了一个问题：如果咱们在不知情的状况下，在其余中央从新申明了该变量，很有可能会笼罩原先变量的值，造成一些难以调试的问题。

所以，Let 解决很好地解决此问题。当你应用 let 从新申明变量值时，将会报错。

// ES6 Code
let value = 10;
console.log(value); // 10

let value = "hello"; // Uncaught SyntaxError: Identifier 'value' has already been declared

然而，以下代码是非法的:

// ES6 Code
let value = 10;
console.log(value); // 10

value = "hello";
console.log(value); // hello

咱们发现下面的代码看起来没什么问题，是因为咱们从新给 value 变量赋了一个新值，然而并没有从新申明。

咱们来看下上面的代码：

// ES5 Code
var isValid = true;
if(isValid) {
  var number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // outside: 10

如上所示，在应用 var 申明变量时，能够在 if 块之外拜访该变量。

而应用 let 申明的 number 变量只能在 if 块内拜访，如果在 if 块外拜访将会报错。

咱们来看下接下来的代码


// ES6 Code
let isValid = true;
if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}
console.log('outside:', number); // Uncaught ReferenceError: number is not defined

如上述代码所示，应用 let 别离在 if 块内、if 块外申明了 number 变量。在 if 块外，number 无奈被拜访，因而会呈现援用谬误。

然而，如果变量 number 在 if 块外曾经申明，将会呈现上面的后果。


// ES6 Code
let isValid = true;
let number = 20;

if(isValid) {
  let number = 10;
  console.log('inside:', number); // inside: 10
}

console.log('outside:', number); // outside: 20

当初在独自的范畴内有两个 number 变量。在 if 块外，number 的值为 20。

 // ES5 Code
for(var i = 0; i < 10; i++){console.log(i);
}
console.log('outside:', i); // 10

当应用 var 关键字时，i 在 for 循环之外也能够拜访到。


// ES6 Code
for(let i = 0; i < 10; i++){console.log(i);
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

而应用 let 关键字时，在 for 循环内部是不可拜访的。

因而，正如上述示例代码所示，let 申明的变量只能在块外部可用，而在块内部不可拜访。

咱们能够应用一对大括号创立一个块，如下:

let i = 10;
{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // outside: 10

后面有提到，let 在同一个块中不能从新申明变量，不过能够在另一个块中从新申明。如上代码所示，咱们在块内从新申明了 i，并赋值 20，该变量仅可在该块中应用。

在块外，当咱们打印变量时，咱们失去的是 10 而不是之前调配的值，这是因为块外，外部变变量 i 是不存在的。

如果在块外未声明变量，那么将会报错:


{
 let i = 20;
 console.log('inside:', i); // inside: 20
 i = 30;
 console.log('i again:', i); // i again: 30
}

console.log('outside:', i); // Uncaught ReferenceError: i is not defined

如何在 JavaScript 应用 const

const 关键字在块级作用域中的工作形式与 let 关键字完全相同。因而，咱们来看下他们的区别。

const 申明的变量为常量，其值是不能扭转的。而 let 申明的变量，能够为其赋一个新值，如下所示:

let number = 10;
number = 20;
console.log(number); // 20

然而以下状况，咱们不能这样应用 const。


const number = 10;
number = 20; // Uncaught TypeError: Assignment to constant variable.

咱们甚至不能应用 const 像上面一样从新申明。

const number = 20;
console.log(number); // 20

const number = 10; // Uncaught SyntaxError: Identifier 'number' has already been declared

当初，看上面的代码:

const arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr); // [1, 2, 3, 4, 5]

咱们说过 const 申明的常量，它的值永远不会扭转——然而咱们扭转了下面的常量数组并没有报错。这是为什么呢?

留神: 数组是援用类型，而不是 JavaScript 的根本类型

理论存储在 arr 中的不是数组，而是数组存储的内存地位的援用(地址)。执行 arr.push(5)，并没有扭转 arr 指向的援用，而是扭转了存储在那个援用上的值。

对象也是如此:

const obj = {
 name: 'David',
 age: 30
};

obj.age = 40;

console.log(obj); // {name: 'David', age: 40}

这里，咱们也没有扭转 obj 指向的援用，而是扭转了存储在援用的值。

因而，上述的代码将会起作用，但上面的代码是有效的。

const obj = {name: 'David', age: 30};
const obj1 = {name: 'Mike', age: 40};
obj = obj1; // Uncaught TypeError: Assignment to constant variable.

这样写会抛出异样，因为咱们试图更改 const 变量指向的援用。

因而，在应用 const 时要记住一点：应用 const 申明常量时，不能从新申明，也不能从新赋值。如果申明的常量是援用类型，咱们能够更改存储在援用的值。

同理，上面的代码也是有效的。

const arr = [1, 2, 3, 4];
arr = [10, 20, 30]; // Uncaught TypeError: Assignment to constant variable.

总结：

  • 关键字 let 和 const 在 JavaScript 中增加块级作用域。
  • 当咱们将一个变量申明为 let 时，咱们不能在同一作用域 (函数或块级作用域) 中从新定义或从新申明另一个具备雷同名称的 let 变量，然而咱们能够从新赋值。
  • 当咱们将一个变量申明为 const 时，咱们不能在同一作用域 (函数或块级作用域) 中从新定义或从新申明具备雷同名称的另一个 const 变量。然而，如果变量是援用类型(如数组或对象)，咱们能够更改存储在该变量中的值。

好了，咱们持续下一个话题: promises。

JavaScript 中的 promises

对于很多新开发者来说，promises 是 JavaScript 中较难了解的局部。ES6 中原生提供了 Promise 对象，那么 Promise 到底是什么呢？

Promise 对象代表了将来将要产生的事件，用来传递异步操作的音讯。

如何发明一个 promise

应用 promise 构造函数创立一个 promise，如下所示:

const promise = new Promise(function(resolve, reject) {});

Promise 的构造函数接管一个函数作为参数，并且在外部接管两个参数：resolve，reject。resolve 和 reject 参数实际上是咱们能够调用的函数，具体取决于异步操作的后果。

Promise 有三种状态:

  • pending: 初始状态，不是胜利或失败状态。
  • fulfilled: 示意操作胜利实现。
  • rejected: 示意操作失败。

当咱们创立 Promise 时，它处于期待的状态。当咱们调用 resolve 函数时，它将进入已实现状态。如果调用 reject，他将进入被回绝状态。

在上面的代码中，咱们执行了一个异步操作，也就是 setTimeout，2 秒后，调用 resolve 办法。

const promise = new Promise(function(resolve, reject) {setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

咱们须要应用以下办法注册一个回调.then 取得 1promise 执行胜利的后果，如下所示:

const promise = new Promise(function(resolve, reject) {setTimeout(function() {
  const sum = 4 + 5;
  resolve(sum);
 }, 2000);
});

promise.then(function(result) {console.log(result); // 9
});

then 接管一个参数，是函数，并且会拿到咱们在 promise 中调用 resolve 时传的的参数。

如果操作不胜利，则调用 reject 函数:

const promise = new Promise(function(resolve, reject) {setTimeout(function() {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {reject('Error while calculating sum.');
  } else {resolve(sum);
  }
 }, 2000);
});

promise.then(function(result) {console.log(result);
});

如果 sum 不是一个数字，那么咱们调用带有错误信息的 reject 函数，否则咱们调用 resolve 函数。

执行上述代码，输入如下:

调用 reject 函数会抛出一个谬误，然而咱们没有增加用于捕捉谬误的代码。

须要调用 catch 办法指定的回调函数来捕捉并解决这个谬误。

promise.then(function(result) {console.log(result);
}).catch(function(error) {console.log(error);
});

输入如下:

所以倡议大家在应用 promise 时加上 catch 办法，以此来防止程序因谬误而进行运行。

链式操作

咱们能够向单个 promise 增加多个 then 办法，如下所示:

promise.then(function(result) {console.log('first .then handler');
 return result;
}).then(function(result) {console.log('second .then handler');
 console.log(result);
}).catch(function(error) {console.log(error);
});

当增加多个 then 办法时，前一个 then 办法的返回值将主动传递给下一个 then 办法。

如上图所示，咱们在第一个 then 办法中输入字符串，并将接管的参数 result（sum）返回给下一个 result。

在下一个 then 办法中，输入字符串，并输入上一个 then 办法传递给它的 result。

如何在 JavaScript 中提早 promise 的执行

很多时候，咱们不心愿立刻创立 promise，而是心愿在某个操作实现后再创立。

咱们能够将 promise 封装在一个函数中，而后从函数中返回 promise，如下所示：

function createPromise() {return new Promise(function(resolve, reject) {setTimeout(function() {
   const sum = 4 + 5;
   if(isNaN(sum)) {reject('Error while calculating sum.');
   } else {resolve(sum);
   }
  }, 2000);
 });
}

这样，咱们就能够通过函数将参数传递给 promise，达到动静的目标。

function createPromise(a, b) {return new Promise(function(resolve, reject) {setTimeout(function() {
   const sum = a + b;
   if(isNaN(sum)) {reject('Error while calculating sum.');
   } else {resolve(sum);
   }
  }, 2000);
 });
}

createPromise(1,8)
 .then(function(output) {console.log(output); // 9
});

// OR

createPromise(10,24)
 .then(function(output) {console.log(output); // 34
});

此外，咱们只能向 resolve 或 reject 函数传递一个值。如果你想传递多个值到 resolve 函数，能够将它作为一个对象传递，如下:

const promise = new Promise(function(resolve, reject) {setTimeout(function() {
  const sum = 4 + 5;
  resolve({
   a: 4,
   b: 5,
   sum
  });
 }, 2000);
});

promise.then(function(result) {console.log(result);
}).catch(function(error) {console.log(error);
});

如何在 JavaScript 中应用箭头函数

上述示例代码中，咱们应用惯例的 ES5 语法创立了 promise。然而，通常应用箭头函数代替 ES5 语法，如下:

const promise = new Promise((resolve, reject) => {setTimeout(() => {
  const sum = 4 + 5 + 'a';
  if(isNaN(sum)) {reject('Error while calculating sum.');
  } else {resolve(sum);
  }
 }, 2000);
});

promise.then((result) => {console.log(result);
});

你能够依据本人须要应用 ES5 或 ES6 语法。

ES6 Import 和 Export 语法

在 ES6 之前，咱们在一个 HTML 文件中能够应用多个 script 标签来援用不同的 JavaScript 文件，如下所示:

<script type="text/javascript" src="home.js"></script>
<script type="text/javascript" src="profile.js"></script>
<script type="text/javascript" src="user.js"></script>

然而如果咱们在不同的 JavaScript 文件中有一个同名的变量，将会呈现命名抵触，你理论失去的可能并不是你冀望的值。

ES6 减少了模块的概念来解决这个问题。

在 ES6 中，咱们编写的每一个 JavaScript 文件都被称为模块。咱们在每个文件中申明的变量和函数不能用于其余文件，除非咱们将它们从该文件中导出并、在另一个文件中失去援用。

因而，在文件中定义的函数和变量是每个文件公有的，在导出它们之前，不能在文件内部拜访它们。

export 有两种类型:

  • 命名导出: 在一个文件中能够有多个命名导出
  • 默认导出: 单个文件中只能有一个默认导出

JavaScript 中的命名导出

如下所示，将单个变量命名导出:

export const temp = "This is some dummy text";

如果想导出多个变量，能够应用大括号指定要输入的一组变量。

const temp1 = "This is some dummy text1";
const temp2 = "This is some dummy text2";
export {temp1, temp2};

须要留神的是，导出语法不是对象语法。因而，在 ES6 中，不能应用键值对的模式导出。</pre>

          // This is invalid syntax of export in ES6
           export {key1: value1, key2: value2}

import 命令承受一对大括号，外面指定要从其余模块导入的变量名。

           import {temp1, temp2} from './filename';

留神，不须要在文件名中增加.js 扩展名，因为默认状况下会思考该拓展名。


 // import from functions.js file from current directory

import  {temp1, temp2}  from  './functions';

 // import from functions.js file from parent of current directory

import  {temp1}  from  '../functions';

提醒一点，导入的变量名必须与被导入模块对外接口的名称雷同。

因而，导出应应用：

// constants.js

export  const  PI  =  3.14159;

那么在导入的时候，必须应用与导出时雷同的名称：

import  {PI}  from  './constants';

// This will throw an error

import  {PiValue}  from  './constants';

如果想为输出的变量重新命名，能够应用 as 关键字，语法如下:

import  {PI  as PIValue}  from  './constants';

咱们认为 PI 重命名为 PIValue，因而不能再应用 PI 变量名。

导出时也可应用上面的重命名语法：

// constants.js

const  PI  =  3.14159;

export  {PI  as PIValue};

而后在导入是，必须应用 PIValue。

import  {PIValue}  from  './constants';

命名导出某些内容之前必须先申明它。

export  'hello';  // this will result in error

export  const greeting =  'hello';  // this will work

export  {name:  'David'};  // This will result in error

export  const object =  {name:  'David'};  // This will work

咱们来看上面的 validations.js 文件:

// utils/validations.js

const  isValidEmail  =  function(email)  {if  (/^[^@]+@[^@]+\.[^@ \.]{2,}$/.test(email))  {return  "email is valid";}  else  {return  "email is invalid";}

};

const  isValidPhone  =  function(phone)  {if  (/^[\\(]\d{3}[\\)]\s\d{3}-\d{4}$/.test(phone))  {return  "phone number is valid";}  else  {return  "phone number is invalid";}

};

function  isEmpty(value)  {if  (/^\s*$/.test(value))  {return  "string is empty or contains only spaces";}  else  {return  "string is not empty and does not contain spaces";}

}

export  {isValidEmail, isValidPhone, isEmpty};

在 index.js 中，咱们能够应用如下函数:

// index.js

import  {isEmpty, isValidEmail}  from  "./utils/validations";

console.log("isEmpty:",  isEmpty("abcd"));  // isEmpty: string is not empty and does not contain spaces

console.log("isValidEmail:",  isValidEmail("abc@11gmail.com"));  // isValidEmail: email is valid

console.log("isValidEmail:",  isValidEmail("ab@c@11gmail.com"));  // isValidEmail: email is invalid

JavaScript 的默认导出

如上所述，单个文件中最多只能有一个默认导出。然而，你能够在一个文件中应用多个命名导出和一个默认导出。

要申明一个默认导出，咱们须要应用以下语法：

//constants.js

const name =  'David';

export  default name;

在导入时就不须要再应用花括号了。

import name from  './constants';

如下，咱们有多个命名导出和一个默认导出:

// constants.js

export  const  PI  =  3.14159;

export  const  AGE  =  30;

const  NAME  =  "David";

export  default  NAME;

此时咱们应用 import 导入时，只须要在大括号之前指定默认导出的变量名。

// NAME is default export and PI and AGE are named exports here

import  NAME,  {PI,  AGE}  from  './constants';

应用 export default 导出的内容，在导入的时候，import 前面的名称能够是任意的。

// constants.js

const  AGE  =  30;

export  default  AGE;

import myAge from‘./constants’;

console.log(myAge);  // 30

另外，export default 的变量名称从 Age 到 myAge 之所以可行，是因为只能存在一个 export default。因而你能够随便命名。还需注意的是，关键字不能在申明变量之前。

// constants.js

export  default  const  AGE  =  30;  // This is an error and will not work

因而，咱们须要在独自的一行应用关键字。

// constants.js

const  AGE  =  30;

export  default  AGE;

不过以下模式是容许的:

//constants.js

export  default  {

 name:  "Billy",

 age:  40

};

并且须要在另一个文件中应用它

import user from  './constants';

console.log(user.name);  // Billy

console.log(user.age);  // 40

还有，能够应用以下语法来导入 constants.js 文件中导出的所有变量:

// test.js

import  *  as constants from  './constants';

上面，咱们将导入所有咱们 constants.js 存储在 constants 变量中的命名和 export default。因而，constants 当初将成为对象。

// constants.js

export  const  USERNAME  =  "David";

export  default  {

 name:  "Billy",

 age:  40

};

在另一个文件中，咱们按一下形式应用。

// test.js

import  *  as constants from  './constants';

console.log(constants.USERNAME);  // David

console.log(constants.default);  // {name: "Billy", age: 40}

console.log(constants.default.age);  // 40

也能够应用以下形式组合应用命名导出和默认导出:

// constants.js

const  PI  =  3.14159;  const  AGE  =  30;

const  USERNAME  =  "David";

const  USER  =  {

 name:  "Billy",

 age:  40

};

export  {PI,  AGE,  USERNAME,  USER  as  default};

import  USER,  {PI,  AGE,  USERNAME}  from  "./constants";

总而言之:

ES6 中，一个模块就是一个独立的文件，该文件外部的所有变量，内部都无奈获取。如果想从内部读取模块内的某个变量，必须应用 export 关键字导出该变量，应用 import 关键字导入该变量。

JavaScript 中的默认参数

ES6 减少了一个十分有用的个性，即在定义函数时提供默认参数。

假如咱们有一个应用程序，一旦用户登录零碎，咱们将向他们显示一条欢送音讯，如下所示:

function  showMessage(firstName)  {return  "Welcome back,"  + firstName;}

console.log(showMessage('John'));  // Welcome back, John

然而，如果数据库中没有用户名，那该怎么办呢? 所以，咱们首先须要查看是否提供了 firstName，而后再显示相应的信息。

在 ES6 之前，咱们必须写这样的代码:

function  showMessage(firstName)  {if(firstName)  {return  "Welcome back,"  + firstName;}  else  {return  "Welcome back, Guest";}

}

console.log(showMessage('John'));  // Welcome back, John

console.log(showMessage());  // Welcome back, Guest

但当初应用 ES6 提供的默认参数，咱们能够这样写:

function  showMessage(firstName =  'Guest')  {return  "Welcome back,"  + firstName;}

console.log(showMessage('John'));  // Welcome back, John

console.log(showMessage());  // Welcome back, Guest

函数的默认参数能够为任意值。

function  display(a =  10, b =  20, c = b)  {console.log(a, b, c);

}

display();  // 10 20 20

display(40);  // 40 20 20

display(1,  70);  // 1 70 70

display(1,  30,  70);  // 1 30 70

在下面的代码中，咱们没有提供函数的所有参数，理论代码等同于:

display();  // 等同于 display(undefined, undefined, undefined)

display(40);  等同于 display(40, undefined, undefined)

display(1,  70);  等同于 display(1, 70, undefined)

因而，如果传递的参数是 undefined，则对应的参数将应用默认值。

咱们还能够将对象或计算值指定为默认值，如下：

const defaultUser =  {

 name:  'Jane',

 location:  'NY',

 job:  'Software Developer'

};

const  display  =  (user = defaultUser, age =  60  /  2)  =>  {console.log(user, age);

};

display();

/* output

{

 name: 'Jane',

 location: 'NY',

 job: 'Software Developer'

} 30

*/

ES5 代码如下:

// ES5 Code

function  getUsers(page, results, gender, nationality)  {

  var params =  "";

  if(page ===  0  || page)  {params +=  `page=${page}&`;

  }

  if(results)  {params +=  `results=${results}&`;

  }

  if(gender)  {params +=  `gender=${gender}&`;

  }

  if(nationality)  {params +=  `nationality=${nationality}`;

  }

  fetch('https://randomuser.me/api/?'  + params)

  .then(function(response)  {return response.json();

  })

  .then(function(result)  {console.log(result);

  })

  .catch(function(error)  {console.log('error', error);

  });

}

getUsers(0,  10,  'male',  'us');

在这段代码中，咱们通过在 getUsers 函数中传递各种可选参数来进行 API 调用。在进行 API 调用之前，咱们增加了各种 if 条件来查看是否增加了参数，并基于此结构查问字符串，如下所示：

https://randomuser.me/api/? page=0&results=10&gender=male&nationality=us

应用 ES6 的默认参数则不用添这么多 if 条件，如下所示:

function  getUsers(page =  0, results =  10, gender =  'male',nationality =  'us')  {fetch(`https://randomuser.me/api/?page=${page}&results=${results}&gender=${gender}&nationality=${nationality}`)

 .then(function(response)  {return response.json();

 })

 .then(function(result)  {console.log(result);

 })

 .catch(function(error)  {console.log('error', error);

  });

}

getUsers();

这样一来，代码失去了大量的简化，即使咱们不为 getUsers 函数提供任何参数时，它也能采纳默认值。当然，咱们也能够传递本人的参数：

getUsers(1,  20,  'female',  'gb');

它将笼罩函数的默认参数。

null 不等于未定义

留神: 定义默认参数时，null 和 undefined 是不同的。

咱们来看上面的代码:

function  display(name =  'David', age =  35, location =  'NY'){console.log(name, age, location);

}

display('David',  35);  // David 35 NY

display('David',  35,  undefined);  // David 35 NY

// OR

display('David',  35,  undefined);  // David 35 NY

display('David',  35,  null);  // David 35 null

当咱们传递 null 作为参数时，它理论是给 location 参数赋一个空值，与 undefined 不一样。所以它不会取默认值“NY”。</pre>

Array.prototype.includes

ES7 减少了数组的 includes 办法，用来判断一个数组是否蕴含一个指定的值，如果是返回 true，否则 false。

// ES5 Code
const numbers = ["one", "two", "three", "four"];
console.log(numbers.indexOf("one") > -1); // true 
console.log(numbers.indexOf("five") > -1); // false

数组能够应用 includes 办法:

// ES7 Code

const numbers =  ["one",  "two",  "three",  "four"];

console.log(numbers.includes("one"));  // true

console.log(numbers.includes("five"));  // false

includes 办法能够使代码简短且易于了解，它也可用于比拟不同的值。

<pre style="line-height:18.0pt;
vertical-align:baseline">const day ="monday";</pre>

if(day ===  "monday"  || day ===  "tuesday"  || day ===  "wednesday")  {// do something}

// 以上代码应用 include 办法能够简化如下:

const day =  "monday";

if(["monday",  "tuesday",  "wednesday"].includes(day))  {// do something}

因而，在查看数组中的值时，应用 includes 办法将会十分的不便。

反对 ES6+ 的第三方组件

除了语法更新，开发者还需把握一些第三方组件，以便更好的实现我的项目交付。

例如，应用 SpreadJS 表格组件，能够向 JavaScript 应用程序增加高级电子表格性能，包含反对 450 多种计算公式、在线导入导出 Excel 文档、数据透视表和可视化剖析，以创立财务、剖析、估算 / 预测、数据收集、迷信和许多其余相似的应用程序。

如何在 Vue 中应用 SpreadJS

SpreadJS 能够通过以下两种形式与 Vue 一起应用：

  1. 应用 Node 包管理器：

关上命令提示符窗口并键入以下命令，应用 vue init webpack 创立一个简略的 Vue 我的项目：

$ npm install --global vue-cli

# create a new project using the "webpack" template
$ vue init webpack my-project

# install dependencies and go!
$ cd my-project
$ npm run dev

在我的项目中导入 SpreadJS Vue 模块:

$ npm install @grapecity/spread-sheets-vue

在 Vue 应用程序中应用 SpreadJS:

<template>

<div>

 <gc-spread-sheets

 :hostClass='hostClass'

 >

 <gc-worksheet

 :dataSource="dataTable"

 :autoGenerateColumns = 'autoGenerateColumns'

 >

 <gc-column

 :width="width"

 :dataField="'price'"

 :visible = 'visible'

 :formatter = 'formatter'

 :resizable = 'resizable'

 ></gc-column>

 </gc-worksheet>

 </gc-spread-sheets>

 </div>

</template>

<script>

import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css'

import '@grapecity/spread-sheets-vue'

export default {data(){

  return {

 hostClass:'spread-host',

 autoGenerateColumns:true,

 width:300,

 visible:true,

 resizable:true,

 formatter:"$ #.00"

 }

},

computed:{dataTable(){let dataTable = [];

  for (let i = 0; i < 42; i++) {dataTable.push({price: i + 0.56})

 }

  return dataTable

 }

}

}

</script>

<style scoped>

.spread-host {

width: 500px;

height: 600px;

}

</style>
  1. 应用传统 HTML

创立 HTML 页面，将 SpreadJS 和 Vue-SpreadJS 增加到 HTML 模板：增加援用 gc.spread.sheets.all....min.js, gc.SpreadJS....css 和 gc.spread.sheets.vue...*.js 文件到 HTML 模板 (i.e. 你的 index.html 文件)即可。

点击此处，理解更多 SpreadJS 在 Vue 的技术资源。

如何在 React 等框架应用 SpreadJS

与 Vue 相似，SpreadJS 也能够通过应用 Node 包管理器和传统 HTML 两种形式与 React 一起应用，点击此处，理解应用形式。

结语

从 ES6 开始，JavaScript 中产生许多变更。对于 JavaScript，Angular，React 或 Vue 开发人员都应该晓得它们。

理解这些变更能够使你成为更棒的开发者，甚至能够帮忙您取得更高的薪水。而且，如果你只是在学习 React 之类的库以及 Angular 和 Vue 之类的框架，那么您肯定要把握这些新个性。

正文完
spreadjs
发表至： spreadjs
2020-12-24
 0
关于spreadjs:SpreadJS-纯前端表格控件应用案例铭天预算执行系统
关于spreadjs:服务端表格组件-GcExcel-V40-发布构建类Excel全栈解决方案
关于spreadjs:企业表格技术应用开发案例大赛圆满落幕
关于spreadjs:SpreadJS-纯前端表格控件应用案例资料填报系统