模块化
//导出语句，导出方法，方法，类
export let A=233;
export function test(){};
export class Hello{
test(){
console.log("hello");
}
}
//在另一个页面中导入
import {A,test,Hello} from lesson17
import * as lesson from lesson17//也可另起别名全部导入，在逐步引入，然后通过lesson.A等进行访问
一下为命名变量后全部导出，再全部引入
let A=233;
function test(){};
class Hello{
test(){
console.log("hello");
}
}
export default{A,test,Hello}
//在另一个页面中进行引入
import lesson form './class/lesson17'
修饰器Decorator(函数修改行为，修改类的行为)（限定范围为类）
//需要安装依赖
npm install babel--plugin-transform-decorators-legacy --save -dev
//然后修改babelrc文件，
//限制某个属性只读
{
let readOnly = function (target.name,descriptor) {
descriptor.writable=false;
return descriptor
};
class Test{
@readOnly
time(){
return '2019-1-14'
}
}
let test =new Test();
test.time=function(){
console.log('rest time');
console.log(test.time());
}
}
//该属性只能进行显示，不能进行重新赋值
//增加静态属性
{
let typeName=function(target.name,descriptor){
target.myName='hello'
}
@typeName
class Test{
}
console.log('类修饰符',Test.myName);
}
//输出hello成功添加
这种应用中可直接引入第三方的修饰库：core-decorators，npm install安装即可
应用案例一：广告点击显示，埋点
{
let log = (type) =>{
return function (target.name,decorator){
let src_method=decorator.value;
decorator.value=(...arg) => {
src_method.apply(target.arg);
console.log('log',${type});
}
}
}
//广告类
class AD{
@log('show');
show(){
console.info('AD is show');
}
@log('click');
console.info('AD is click')
}
//实例化
let ad =new AD();
ad.show();
ad.click();
}
采用这种方法的原因是代码的可复用性更好，推广度高
Generator
- next()用法
- yield用法
//基本定义
{
let tell = function* (){
yield 'a';
yield 'b';
yield 'c';
}
let k = tell();
console.log(k.next());//a
console.log(k.next());//b
console.log(k.next());//c
console.log(k.next());//unfined
}
generator也可以输出interator的返回值
{
let obj ={},
obj[Symbol.interator]=function* (){
yield 'a';
yield 'b';
yield 'c';
}
for (let value of obj){
console.log('value',value);
}
//value 1
//value 2
//value 3
}
什么情况下，Generator下使用能顾发挥优势？
状态机：状态之间进行转换a->b->c,c->a等
{
let state= function* (){
while(1){
yiled 'A';
yiled 'B';
yiled 'C';
}
let status=new state();
console.log(status.next());
//最终输出结果为abcabc一直输出
}
}
generator 的语法糖
{
let tell = async function (){
await 'a';
await 'b';
await 'c';
}
let k = tell();
console.log(k.next());//a
console.log(k.next());//b
console.log(k.next());//c
console.log(k.next());//unfined
}
Generator在什么场景下发挥优势？
- 抽奖次数限制
{
//抽检业务逻辑
let draw = function (count){
//可在此处实现具体的业务逻辑（如何实现随机抽取）
console.info('剩余'${count}'次');
}
let residue=function*(count){
while(count >0){
count--;
yield draw(count);//执行具体的抽奖逻辑
}
}
let star=residue(5);//实例化
let btn =document.createElement('button');
btn.id='start';
btn.textContext='抽奖'；
document.getElementById('start').addEventListener('click',function(){
start.nest();//执行点击事件。执行抽奖逻辑
},false)
}
使用这种方法比较安全，并且将业务逻辑与次数的判断分开
- 轮播，动态获取状态
{
let ajax = function* (){
yield new promise(function (resolve,reject){
setTimeout(function(){
resolve({code:0})
},200)
})
}
let pull = function(){
let generator = ajax();
let step=generator.next();
step.value.then(function(d){
if(d.code!=0){
setTimeout(function(){
console.log('wait');
pull();
},1000);
}else{
console.log(d);
}
})
}
pull();
}
//最红输出结果为code=0
