class Subject {
  constructor() {
    this._observers = [];
  }

  subscribe(observer) {
    this._observers.push(observer);
  }

  unsubscribe(observer) {
    this._observers = this._observers.filter(obs => observer !== obs);
  }

  fire(change) {
    this._observers.forEach(observer => {
      observer.update(change);
    });
  }
}

class Observer {
  constructor(state) {
    this.state = state;
    this.initialState = state;
  }

  update(change) {
    let state = this.state;
    switch (change) {
      case 'INC':
        this.state = ++state;
        break;
      case 'DEC':
        this.state = --state;
        break;
      default:
        this.state = this.initialState;
    }
  }
}

// usage
const sub = new Subject();

const obs1 = new Observer(1);
const obs2 = new Observer(19);

sub.subscribe(obs1);
sub.subscribe(obs2);

sub.fire('INC');

console.log(obs1.state); // 2
console.log(obs2.state); // 20

//index.js
const Koa = require('koa');
const app = new Koa();

app.use(async ctx => {
  ctx.body = 'Hello Docker O(∩_∩)O~~';
});

app.listen(3000);

function observer(obj) {
  if (typeof obj === 'object') {
    for (const key in obj) {
      if (obj.hasOwnProperty(key)) {
        listener(obj, key);
      }
    }
  }
}

function listener(obj, key) {
  let curValue = obj[key];
  observer(curValue); // 如果curValue是对象，进入递归

  Object.defineProperty(obj, key, {
    get() {
      console.log('get-->', curValue);
      return curValue;
    },
    set(newVal) {
      console.log('set-->', newVal);
      curValue = newVal;
    }
  });
}

const obj = {
  name: 'Jack',
  age: 20
};

observer(obj)

const p  = new Proxy(target, handler)

Object.defineProperty(obj, key, options);

const obj = {
  arr: []
}

const handler = {
  get(target, key, receiver){
    console.log('get->', target[key])
    if(typeof target[key] === 'object' && target[key] !== null) {
      return new Proxy(target[key], handler)
    }
    return target[key]
  },
  set(target, key, value){
    console.log('set->', key, value)
    return Reflect.set(target, key, value)
  }
}
const p = new Proxy(obj, handler)

  p.name = 'Jack';

$('button').on('click',()=>{
    //处理click响应
})

//自定义事件
$('div').bind('hello',()=>{
    alert('hello')
});

//触发事件
$('div').trigger('hello');

const EventEmit = require('events');

//定义一个播放器类
class Player extends EventEmit { }

const player = new Player();

//定义播放事件
player.on('play', ( param )=>{
    console.log(`播放器播放《${param}》`)
})

play.emit('play','海阔天空'); // 播放器播放《海阔天空》
play.emit('play','七里香');   // 播放器播放《七里香》

//定义播放事件
player.once('play', ( param )=>{
    console.log(`播放器播放《${param}》`)
})

play.emit('play','海阔天空'); 
play.emit('play','七里香');  

fs.stat('./logs', (err, stats) => {
  if (err) {
    console.log(err);
    return;
  }

  console.log('目录：', stats.isDirectory());
  console.log('文件：', stats.isFile());
  console.log('大小：', stats.size);
});

//打印结果
目录： true
文件： false
大小： 160

fs.stat('./fs.js', (err, stats) => {
  if (err) {
    console.log(err);
    return;
  }

  console.log('目录：', stats.isDirectory());
  console.log('文件：', stats.isFile());
  console.log('大小：', stats.size);
});

//打印结果
目录： false
文件： true
大小： 2087

// 创建目录
fs.mkdir("./logs", err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log("logs目录创建成功");
});

fs.mkdirSync('./logs2'); //同步创建文件夹

fs.writeFile('./logs2/hello.log', '你好~', err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log('写入成功');
});

fs.appendFile("./logs/hello.log", "hello~\n我是程序员", err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log("写入成功");
});

// 读取文件内容
fs.readFile("./logs/hello.log", "utf8", (err, stats) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(stats);
});

// 读取文件夹
fs.readdir("./logs", (err, files) => {
  if (err) {
    console.log(err);
    return;
  }
  console.log(files); //返回一个包含所有文件名称的数组
});

//打印结果
[ 'data-write.json', 'data.json', 'traking.log' ]

// 修改名称 把hello.log修改为tranking.log
fs.rename("./logs/hello.log", "./logs/traking.log", err => {
  if (err) {
    console.log(err);
    return;
  }

  console.log("改名成功");
});

// 删除目录下文件
fs.readdirSync("./logs").map(file => {
  // 删除文件unlink
  fs.unlink(`./logs/${file}`, err => {
    if (err) {
      console.log(err);
      return;
    }
    console.log("文件删除成功");
  });
});

// 只能删除空目录 若目录里不为空则会报错 所以要先删除里面的文件 再删除文件夹
fs.rmdir("./logs", err => {
  if (err) {
    console.log(err);
    return;
  }
  console.log("目录删除成功");
});

const fs = require('fs');

const fileReadStream = fs.createReadStream('./logs/data.json');
const fileWriteStream = fs.createWriteStream('./logs/data-write.json');


/* 通过文件流的事件方式 */
fileReadStream.on('data', chunk => {
  fileWriteStream.write(chunk); // 可写流写入文件 如果文件不存在则创建文件
});

fileReadStream.on('error', err => {
  console.log('错误：', err);
});

fileReadStream.on('end', () => {
  console.log('结束');
});

// 监听pipe事件
fileWriteStream.on('pipe', source => {
  console.log(source);
});

/* 通过pipe方式 */
fileReadStream.pipe(fileWriteStream);

const http = require('http');

// 使用发送http请求
const options = {
  protocol: 'http:',
  hostname: 'www.baidu.com',
  port: '80',
  method: 'GET',
  path: '/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg'
};

let responseData = '';

const request = http.request(options, response => {
  console.log(response.statusCode); // 获取链接请求的状态码

  response.setEncoding('utf8');

  response.on('data', chunk => {
    responseData += chunk;
  });

  response.on('end', () => {
    console.log(responseData);
  });
});

request.on('error', error => {
  console.log(error);
});

request.end();

// 使用http创建服务器
const port = 3000;
const host = '127.0.0.1';

const server = http.createServer();

server.on('request', (request, response) => {
  response.writeHead(200, {
    'Content-Type': 'text/plain'
  });
  response.end('Hello World\n');
});

server.listen(port, host, () => {
  console.log(`Server running at http://${host}:${port}/`);
});

var p1 = new Person(); 

const App = () => {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('Tom');

  React.useEffect(() => {
    setInterval(() => {
      setCount(s => s + 1);
    }, 1000);
  }, []);

  return (
    <>
      <h3>count: {count}</h3>
      <Child name={name} />
    </>
  );
};

function Child(props: { name: string }) {
  console.log('child render', props.name);
  return <div>name: {props.name}</div>;
}

var a = 1;
var b = 1;
a === b // true

var a = {};
var b = {};
a === b // false 比较的是引用 所以不相等 

const a = {num: 1};
const b = {num: 1};
a === b // false 引用不相等
a.num === b.num // true 对象的一级相等

const a = { p: {num: 1}, t: 2 }
const b = { p: {num: 1}, t: 2 }
a === b // false 引用不相等
shallowEqual(a, b) // false a.p === b.p 引用不等 浅比较为false
deepEqual(a, b) // true 深比较相等

const Child = React.memo((props: { name: string }) => {
  console.log('child render', props.name);
  return <div>name: {props.name}</div>;
});

const Child = React.memo((props) => {
  return <div>{props.name}</div>;
}, (prev, next) => {
    // 深比较
  return deepEqual(prev,next)
});

const Child = React.memo(({ obj }) => {
  console.log('child render', obj, obj.name);
  return <div>name: {obj.name}</div>;
});

const App = () => {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    setInterval(() => {
      setCount(s => s + 1);
    }, 1000);
  }, []);

  const obj = React.useRef({
    name: 'Jack'
  });

  return (
    <>
      <h3>count: {count}</h3>
      <Child obj={obj.current} />
    </>
  );
};

const App = () => {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('');

  React.useEffect(() => {
    setInterval(() => {
      setCount(s => s + 1);
    }, 1000);
  }, []);

  // 只有当 name 变化时，obj才会变化
  const obj = React.useMemo(
    () => ({
      name
    }),
    [name]
  );

  return (
    <>
      <h3>count: {count}</h3>
      <input
        type="text"
        value={name}
        onChange={e => {
          setName(e.target.value);
        }}
      />
      <Child obj={obj} />
    </>
  );
};

// class 的 setState 传什么都会更新组件
this.setState({
    name: 'Jack'
})

const [state, setState] = useState({})

// 同一个引用，不会更新
setState(s => {
    s.name = 'Tom'
    return s
})

// 生成新应用，可以更新
setState(s => {
    const newState = {
        ...s,
        name: 'Tom'
    };
    return newState;
})

const state = [
    {
        name: 'Tom',
        age: 20
    },
    {
        name: 'Jack',
        age: 30
    }
]

state[0].name = 'Alen'

// hooks中需要如下写法
const newState = [
    {
        ...state[0],
        name: 'Alen'
    },
    ...state
]

const state = [
    {
        name: 'Tom',
        age: 20
    },
    {
        name: 'Jack',
        age: 30
    }
]

const newState = deepClone(state);
newState[0].name = 'Alen'

const state = [
    {
        name: 'Tom',
        age: 20
    },
    {
        name: 'Jack',
        age: 30
    }
]

const newState = lodash.cloneDeep(state)

state === newState // false
state[0] === newState[0] // false

import Immutable from 'immutable'

var state = Immutable.Map({
    a: 1,
    b: 2
})

var newState = state.set('a', 3) 

{
    province:'江苏省',
    citys:[
        '南京市',
        '苏州市',
        '无锡市'
    ]
}

{
   province:'江苏省',
   children:[
    {
        name:'城市1',
        children:[
            name:'江宁区',
            children:[
                name:'XX小区'
            ]
        ]
    },
    {
        name:'城市2',
        children:[
            name:'AA区',
            children:[
                name:'BB小区'
            ]
        ]
    }
   ]
}

// 省
const provice = [
    {
        province:'江苏省',
        province_id: 1001
    },
    {
        province:'浙江省',
        province_id: 1002
    },
    ...
]

// 市
const citys = [
    {
      name:'南京市',
      province_id: 1001
    },
    {
      name:'苏州市',
      province_id: 1001
    },
    
    {
      name:'杭州市',
      province_id: 1002
    },
    {
      name:'嘉兴市',
      province_id: 1002
    },
    ...
]

//找到江苏省下所有的城市
const result = citys.filter(i => i.province_id === 1001);

constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    console.log('render');
    return (
      <div>
        <input onChange={this.change} />
        <button onClick={this.submit}>提交</button>
      </div>
    );
  }

 change = e => {
    this.setState({
      value: e.target.value
    });
  };

  submit = () => {
    console.log(this.state.value);
  };

constructor(props) {
    super(props);
    this.state = {
      inputVal: ''
    };
  }

  render() {
    console.log('render');
    return (
      <div style={{ margin: 50 }}>
        <input onChange={this.change} />
        <button onClick={this.submit}>提交</button>
      </div>
    );
  }

  timer = null;
  change = e => {
    //获取inputVal
    const inputVal = e.target.value;

    //防抖处理
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      //set值
      this.setState({
        inputVal
      });
    }, 200);
  };

  submit = () => {
    console.log(this.state.inputVal);
  };

constructor(props) {
    super(props);
    this.inputVal;
  }

  render() {
    console.log('render');
    return (
      <div style={{ margin: 50 }}>
        <input onChange={this.change} />
        <button onClick={this.submit}>提交</button>
      </div>
    );
  }

  change = e => {
    this.inputVal = e.target.value;
  };

  submit = () => {
    console.log(this.inputVal);
  };

class State {
  constructor(color){
    this.color = color;
  }
  
  /**
   * 用于处理切换逻辑
   */
  handle(context){
    // 逻辑处理
    console.log(`跳到：${this.color} 灯`)
    // 调用 Context 的 setState 来改变状态
    context.setState(this)
  }
}

class Context {
  constructor() {
    this.state = null;
  }

  getState() {
    return this.state
  }

  setState(state) {
    this.state = state;
  }
}

// use
const context = new Context();

// 红灯
const redLight = new State('红灯')
redLight.handle(context) // 跳到红灯了

// 绿灯
const redLight = new State('绿灯')
redLight.handle(context) // 跳到绿灯了

// 黄灯
const redLight = new State('黄灯')
redLight.handle(context) // 跳到黄灯了

const util = {
   ajax: function(){},
   random: function(){},
   ...
}

const utilSpace = function() {

    //私有变量
    const _privateName = 'hello';
    
    //私有方法
    function _showPrivateName() {
        console.log( _privateName )
    }
    
    //暴露给外界的对象
    return {
        showName: function(){
            _showPrivateName();
        },
        
        publicVar: "hello, I'm Tom"
    }
}

const single = utilSpace(); //向外界暴露single即可

single.showName(); // hello
single.publicVar; // hello, I'm Tom

(function(){

    var instance; // 该变量用于缓存实例
    
    // 定义 Util 类
    var Util = function() {
    
        if( instance ) return instance;
        
        instance = this;
        
        //其他属性或方法
        this.xxx = 0;
        this.name = 'Tom';
    }
    
    window.Util = Util;
    
})();

var a = new Util();
var b = new Util();

console.log( a === b ) //true

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

import Home from './home';
import Page1 from './page1';
import Page2 from './page2';

<Route exact path="/" component={Home}/>
<Route path="/page1" component={Page1}/>
<Route path="/page2" component={Page2}/>

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const loadComponent = path =>
  Loadable({
    loader: () => import(`${path}`),
    loading: Loading
  });

<Route exact path="/" render={this.loadComponent('./home') } />
<Route path="/page1" render={this.loadComponent('./page1') } />
<Route path="/page2" render={this.loadComponent('./page2') } />

import { Tabs } from 'antd';
import TabOne from './component/tab1';
import TabTwo from './component/tab2';
import TabThree from './component/tab3';

const TabPane = Tabs.TabPane;

export default class Home extends Component {
  render() {
    return (
      <Tabs defaultActiveKey="1">
        <TabPane tab="Tab 1" key="1">
          <TabOne />
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          <TabTwo />
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          <TabThree />
        </TabPane>
      </Tabs>
    );
  }
}

import { Tabs } from 'antd';
import Loadable from 'react-loadable';
import TabOne from './component/tab1';
import Loading from './component/loading';

const TabPane = Tabs.TabPane;

const loadComponent = path =>
  Loadable({
    loader: () => import(`${path}`),
    loading: Loading
  });

const Tab2 = loadComponent('./component/tab2.tsx');
const Tab3 = loadComponent('./component/tab3.tsx');

export default class Home extends Component {
  render() {
    return (
      <Tabs defaultActiveKey="1">
        <TabPane tab="Tab 1" key="1">
          <TabOne />
        </TabPane>
        <TabPane tab="Tab 2" key="2">
          <Tab2 />
        </TabPane>
        <TabPane tab="Tab 3" key="3">
          <Tab3 />
        </TabPane>
      </Tabs>
    );
  }
}

// 获取 input file 的 dom 对象
const inputFile = document.querySelector('#file');

// 监听 change 事件
inputFile.addEventListener('change', function() {
    // 使用 formData 装载 file
    const formData = new FormData();
    formData.append('file', this.files[0]);
    
    // 上传文件
    upload(formData);
})

const upload = ( formData ) => {
    const xhr = new XMLHttpRequest();
    // 监听文件上传进度
    xhr.upload.addEventListener('progress', function(e) {
      if (e.lengthComputable) {
        // 获取进度
        const progress = Math.round((e.loaded * 100) / e.total);
        
        document.querySelector('#progress').setAttribute('value', progress);
      }
    },false);
    
    // 监听上传完成事件
    xhr.addEventListener('load', ()=>{
        console.log('😄上传完成')
    }, false);
    
    xhr.open('post', 'http://127.0.0.1:3000/upload');
    xhr.send(formData);   
}

const upload = ( formData ) => {
    $.ajax({
        type: 'post',
        url: 'http://127.0.0.1:3000/upload',
        data: formData,
        // 不进行数据处理和内容处理
        processData: false,
        contentType: false,
        // 监听 xhr
        xhr: function() {
          const xhr = $.ajaxSettings.xhr();
          if (xhr.upload) {
            xhr.upload.addEventListener('progress', e => {
                const { loaded, total } = e;
                var progress = (loaded / total) * 100;
                document.querySelector('#progress').setAttribute('value', progress);
              },
              false
            );
            return xhr;
          }
        },
        success: function(response) {
          console.log('上传成功');
        }
      });
}

const upload = async ( formData ) => {

    let config = {
        // 注意要把 contentType 设置为 multipart/form-data
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        
        // 监听 onUploadProgress 事件
        onUploadProgress: e => {
            const {loaded, total} = e;
            // 使用本地 progress 事件
            if (e.lengthComputable) {
                let progress = loaded / total * 100;
                document.querySelector('#progress').setAttribute('value', progress);
            }
        }
      };

      const { status } = await axios.post('http://127.0.0.1:3000/upload', formData, config);
      if (res.status === 200) {
          console.log('上传完成😀');
      }
}

const Koa = require('koa');
const Router = require('@koa/router');
const koaBody = require('koa-body');
const path = require('path');
const fs = require('fs');
const cors = require('@koa/cors');

const app = new Koa();
const router = new Router();

router.all('/upload', async ctx => {
  // 处理文件上传    
  const res = await dealFile(ctx);

  res && (ctx.body = {
      status: 200,
      msg: 'complete'
    });
});

// 中间件部分
app.use(cors());
app.use(
  koaBody({
    multipart: true,
    formidable: {
      maxFileSize: 2000 * 1024 * 1024 //最大2G
    }
  })
);
app.use(router.routes());
app.use(router.allowedMethods());

app.listen(3000);

const dealFile = ctx => {
  const { file } = ctx.request.files;

  const reader = fs.createReadStream(file.path);
  const writer = fs.createWriteStream(
    path.resolve(__dirname, './image', file.name)
  );

  return new Promise(resove => {
    reader.pipe(writer);
    reader.on('end', () => {
      resove(true);
    });
  });
};

import React, { useState, ReactElement } from 'react'
import { Button } from 'antd'

let num = 0; // 用于记录当前组件执行次数

export default (): ReactElement => {
  console.log('render num: ', ++num) // 打印执行次数

  let [count, setCount] = useState(0)

  const handleClick = () => {
    setCount(++count)
  }

  return (
    <>
      <p>count: {count}</p>
      <Button type="primary" onClick={handleClick}>
        Button
      </Button>
    </>
  )
}

const handleClick = useCallback(()=>{
    // 业务代码
},[ count ])

export default (): ReactElement => {
  let [count, setCount] = useState(0)

  const handleClick = useCallback(() => {
    setCount(++count)
  }, [count])

  return (
    <>
      <p>count: {count}</p>
      
      {/* 这里添加一个子组件 */}
      <ChildrenComponent />

      <Button type="primary" onClick={handleClick}>
        Button
      </Button>
    </>
  )
}

export default (): ReactElement => {
  console.log('children render')

  return <div>children component</div>
}

export default React.memo(
  (): ReactElement => {
    console.log('children render')

    return <div>children component</div>
  },
)

React.memo(MyComponent, (prevProps, nextProps)=>{
 // 如果传递 nextProps 渲染会返回与传递 prevProps 渲染相同的结果，则返回 true，否则返回 false.
 
 // return true:不渲染  return false:渲染
})

'use strict';

class AbstractFactory {
    constructor() {
    }

    createProductA (product) {
    }

    createProductB (product) {
    }
}

class ConcreteFactory1 extends AbstractFactory {
    constructor() {
        super()
        facade.log("ConcreteFactory1 class created");
    }

    createProductA (product) {
        facade.log('ConcreteFactory1 createProductA')
        return new ProductA1()
    }

    createProductB (product) {
        facade.log('ConcreteFactory1 createProductB')
        return new ProductB1()
    }
}

class ConcreteFactory2 extends AbstractFactory {
    constructor() {
        super()
        facade.log("ConcreteFactory2 class created");
    }

    createProductA (product) {
        facade.log('ConcreteFactory2 createProductA')
        return new ProductA2()
    }

    createProductB (product) {
        facade.log('ConcreteFactory2 createProductB')
        return new ProductB2()
    }
}

class AbstractProductA {
    constructor() {
    }
}

class AbstractProductB {
    constructor() {
    }
}


class ProductA1 extends AbstractProductA {
    constructor() {
        super()
        facade.log('ProductA1 created')
    }
}

class ProductA2 extends AbstractProductA {
    constructor() {
        super()
        facade.log('ProductA2 created')
    }
}

class ProductB1 extends AbstractProductB {
    constructor() {
        super()
        facade.log('ProductB1 created')
    }
}

class ProductB2 extends AbstractProductB {
    constructor() {
        super()
        facade.log('ProductB2 created')
    }
}

function init_AbstractFactory() {
    var factory1 = new ConcreteFactory1()
    var productB1 = factory1.createProductB()
    
    var factory2 = new ConcreteFactory2()
    var productA2 = factory2.createProductA()
}

'use strict';

class Director {
    constructor() {
        this.structure = ['Maze','Wall','Door'];
        facade.log("Director class created");
    }

    Construct (){
        for(var all in this.structure){
            let builder = new ConcreteBuilder()
            builder.BuildPart(this.structure[all]);
            builder.GetResult()
        }
    }
}

class Builder {
    constructor() {
    }

    BuildPart (){
    }
}

class ConcreteBuilder extends Builder {
    constructor() {
        super()
        facade.log("ConcreteBuilder class created");
    }

    BuildPart (rawmaterial){
        facade.log("ConcreteBuilder BuildPart()");
        var material = rawmaterial
        this.product = new Product(material)
    }

    GetResult (){
        facade.log(JSON.stringify(this.product))
        return this.product
    }
}

class Product {
    constructor(material) {
        facade.log("Product class created");
        this.data = material
    }
}

function init_Builder() {
    let director = new Director()
    director.Construct()
}

'use strict';

class Productt {
    constructor() {
    }
}

class ConcreteProduct extends Productt {
    constructor() {
        super()
        facade.log('ConcreteProduct created')
    }
}

class Creator {
    constructor() {
    }

    FactoryMethod (){

    }

    AnOperation (){
        facade.log("AnOperation()")
        this.product = this.FactoryMethod()
        facade.log(this.product instanceof ConcreteProduct)
    }
}

class ConcreteCreator extends Creator {

    constructor() {
        super()
        facade.log('ConcreteCreator created')
    }

    FactoryMethod (){
        return new ConcreteProduct();
    }
}

function init_FactoryMethod() {
    var factory = new ConcreteCreator()
    factory.AnOperation()
}

'use strict';

class Prototype {
    constructor(prototype) {
    }

    Clone (){
    }
}

class ConcretePrototype1 extends Prototype {
    constructor() {
        facade.log("ConcretePrototype1 created");
        super()
        this.feature = "feature 1"
    }

    setFeature(key, val) {
        this[key] = val
    }

    Clone (){
        facade.log('custom cloning function')
        let clone = new ConcretePrototype1()
        let keys = Object.keys(this)

        keys.forEach(k => clone.setFeature(k, this[k]))

        facade.log("ConcretePrototype1 cloned");
        return clone;
    }
}

class ConcretePrototype2 extends Prototype {
    constructor() {
        facade.log("ConcretePrototype2 created");
        super()
    }

    Clone (){
        facade.log("ConcretePrototype2 cloned");
        return clone;
    }
}

function init_Prototype () {
    var proto1 = new ConcretePrototype1()
    proto1.setFeature('feature', "feature 22")
    var clone1 = proto1.Clone()
    facade.log(clone1.feature)
}