<script>
	<!--
		js 代码
    //-->
</script>

document.write('hello\

world')

\n -> 回车换行
\r -> 换行
\t -> 水平制表符
\' ->'
\\ -> \

undefined -> false
null -> false
数值 0 或者 0.0 或者 NaN -> false
字符串长度为 0 -> false
其他对象 -> true

undefined -> NaN
null -> 0
true -> 1 | false -> 0
内容为数字 -> 数字，否则转换成 NaN
其他对象 -> NaN

undefined -> 'undefined'
null -> null
true -> "true" false -> "false"
数值型 -> NaN、0 或者与数值对应的字符串
其它对象 -> 如果存在这个对象则转换为 toString() 方法的值，否则转换 Undefined

通过 Boolean 函数强制转换成布尔值
0、-0 -> false
NaN -> false
空字符串 -> false
undefined -> false
null -> false

通过 String 函数强制转换成字符串
数值 -> 数值本身
字符串 -> 字符串本身
true -> "true",false -> "false"
undefined -> "undefined"  
null -> "null"

通过 Number 函数强制转换成数值
数值 -> 转换成原来的值
字符串 -> 如果可以解析为数值，则转换成数值；否则转换成 NaN 或者 0
true -> 1，false -> 0
undefined -> NaN
null -> 0

通过 parseInt(string,radix) 返回转换成整数的值
如果 string 以 0X 开头，parseInt()会把 string 的其余部分解析为十六进制的整数
如果 string 以 1~9 的数字开头，parseInt()将把它解析为十进制的整数
字符串如果以合法字符开始，截取合法字符
开头和结尾的空格是允许的
如果字符串的第一个字符不能被转换成数字，parseInt()会返回 NaN
在字符串以 “0” 为开始时旧的浏览器默认使用八进制基数。ECMAScript 5,默认的是十进制的基数

通过 parseFloat() 返回转换成浮点型的值
该函数指定字符串中的首个字符是否为数字，如果是，则对字符串进行解析，直到到达数字的末端为止，然后以数字返回该数字，而不是作为字符串。

//  1、创建类 class 创建一个 “明星”类
class Star {
  constructor(uname){
      this.uname = uname
  }
    
  say() {
    console.log('我叫' + this.uname)
  }
    
  sing(song){
    console.log(this.uname + song)
  }
}
//  2、利用类创建对象 new 
var ldh = new Star('刘德华');
var zxy = new Star('张学友');
console.log(ldh.uname);  // 刘德华
console.log(zxy.uname);  // 张学友
/*
 *  (1) 通过 class 关键字创建类，类名习惯性定义首字母大写
 *  (2) 类里面有个 constructor 函数，可以接受传递过来的参数，同时返回实例对象
 *  (3) constructor 函数 只要 new 生成实例时，就会自动调用这个函数，不写这个函数，类也会自动生成这个函数
 *  (4) 生成实例 new 不能省略
 *  (5) 最后注意语法规范，创建类，类名后面不要加小括号，生成实例 类名后面加小括号，构造函数不需要加 function
 */
//  1. 类的继承
class Father {
  constructor(x,y){
      this.x = x;
      this.y = y;
  }
    
  money(){
    console.log(100)  
  }
    
  sum(){
    console.log(this.x + this.y) //  this 指向的是这个方法的调用者
  } 
  
  say(){
    return '我是爸爸';
  }
}

class Son extends Father {
  constructor(x,y){  //  constructor 里面的 this 指向的是 创建的实例对象
    super(x,y);  //  调用父类的 constructor 调用普通函数
      
    this.x = x;
    this.y = y
  }
    
  say(){
    console.log('我是儿子');
    console.log(super.say() + '的儿子'); //  super.say() 调用父类的普通函数 
  }
}
var son = new Son(1,2)
son.money()
son.sum()
/*
 *  1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的
 *  2. 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法（就近原则）
 */
son.say()
/*
 *  1. 在 ES6 中类没有变量提升，所以必须先定义类，才能通过类实例化对象
 *  2. 类里面的共有的属性和方法一定要加 this 使用。
 *  3. constructor 里面的 this 指向实例对象，方法里面的 this 指向这个方法的调用者
 */
//  例子 实现 tab 增删改查
var that;
class Tab {
  constructor(id){
    that = this;
    this.main = document.querySelector(id);
    this.add = this.main.querySelector('.tabadd');
    this.ul = this.main.querySelector('.fisrstnav ul:first-child');  
    this.init();
  }
  
  updataNode(){
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.remove = this.main.querySelectorAll('.icon-guanbi'); 
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
  }
  
  init() {
    this.updataNode()
    this.add.onclick = this.addTab;
    for(var i = 0; i < this.lis.length; i++){
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.remove[i].onclick = this.removeTab;
      this.spans[i].ondblclick = this.editTab;
    }
  }
    
  clearClass() {
    for(var i = 0;i < this.lis.length; i++){
        this.lis[i].className = '';
        this.sections[i].className = '';
    } 
  }
  
  toggleTab() {
    that.clearClass();
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive'
  }
  
  addTab() {
    //  以前的做法：动态创建元素 createElement ，但是元素里面内容较多，需要 innerHtml 赋值，在 appendChild 追加到父元素里面
    //  现在高级做法：利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
    //  appendChild 不支持追加字符串的子元素， insertAdjacentHTML 支持追加字符串元素
    var li = '<li class = "liactive"><span>测试1</span><span class= "iconfont icon-gu"></span></li>'
    that.ul.insertAdjacentHTML('beforeend',li);
    that.init()
  }
  
  removeTab(e) {
    e.stopPropagation(); //  阻止冒泡
    var index = this.parentNode.index; //  获取父元素的 index
    that.lis[index].remove();  // remove() 方法可以直接删除指定的元素
    that.sections[index].remove();  
    that.init();
    //  当我们删除的不是选中状态的 li 的时候，原来的选中状态 li 保持不变
    if(document.querySelector('.liactive')) return;
    //  当我们删除了选中状态的 li 的时候，让它的前一个 li 处于选定状态
    index--;
    that.lis[index] && that.lis[index].click()  //  手动调用点击事件
  }
    
  editTab(){
    var str = this.innerHTML;
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML = '<input type="text">';
    var input = this.children[0];
    input.value = str;
    input.select();  //  文本框里面的文字处于选定状态
    input.onblur = function(){
      this.parentNode.innerHTML = this.value;
    }
    input.onkeyup = function(e){
        if(e.keyCode === 13){
          //  手动调用表单失去焦点事件
          this.blur()
        }
    }
  }
}
new Tab("#tab")

var obj1 = new Object();

var obj2 = {}
/*
 *  构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量初始化赋值，它总与 new 一起使用。
 *  我们可以吧对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。
 *  
 *  在 js 中，使用构造函数时要注意以下两点：
 *  1. 构造函数用于创建某一类对象，其首字母要大写
 *  2. 构造函数要 new 一起使用 才有意义
 *
 *  new 在执行时会做四件事情
 *  在内存中创建一个新的空对象。
 *  让 this 指向这个新的对象
 *  执行构造函数里面的代码，给这个新对象添加属性和方法。
 *  返回这个新对象
 *
 *  实例成员就是构造函数内部通过 this 添加成员 uname age sing 就是实例成员
 *  实例成员只能通过实例化的对象来访问
 */

function Star(uname,age){
    this.uname = uname;
    this.age = age;
    this.sing = function (){  //  这样写会造成内存浪费 构造函数通过原型分配的函数时所有对象所共性的。
      console.log('我会唱歌')
    }
}

/*
 *  构造函数通过原型分配的函数时所有对象所共享的。
 *  JavaScript规定，每一个构造函数都有一个 prototype 属性，指向另一个对象。
 *  注意这个 prototype 就是一个对象，这个对象的所有属性和方法。都会被构造函数所拥有。
 *  把一些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
 */
Star.prototype.sing = function(){
    console.log('我会唱歌');
}

var ldh = new Star('刘德华',18);
ldh.sing();

/*
 *  不能通过构造函数来访问实例成员
 *  静态成员 在构造函数本身上添加的成员
 */
 Star.sex = '男'
 //  静态成员只能通过构造函数来访问
 console.log(Star.sex)

Star.prototype = {
  constructor: Star,
  sing: function(){
    console.log('我会唱歌')
  },
    
  movie: function(){
      console.log('我会演电影')
  }
}

console.log(Array.prototype)
Array.prototype.sum = function(){
  var sum = 0;
  for(var i = 0; i < this.length; i++){
    sum += this[i];
  }
  return sum;
}
 
var arr = [1,2,3]
console.log(arr.sum())

function fn(x,y){
  console.log('我想喝手磨咖啡');
  console.log(this)
  console.log(x + y)
}
var o = {
  name : 'andy'
}
/*
 * call() 可以调用函数
 * call() 可以改变这个函数的 this 执行
 */
fn.call(o,1,2)
function Father(uname,age){
  this.uname = uname;
  this.age = age;
}
Father.prototype.money = function(){
    console.log(10000);
}

//  继承 构造函数内的属性
function Son(uname,age){
  Father.call(this,uname,age);
}
Son.prototype = new Father()
Son.prototype.constructor = Son;
Son.prototype.exam = function(){
    console.log('孩子考试')
}

ES6 之前通过，构造函数 + 原型实现面向对象 编程
1. 构造函数有原型对象 prototype
2. 构造函数原型对象 prototype 里面有 constructor 指向构造函数本身
3. 构造函数可以通过原型对象添加方法
4. 构造函数创建的实例对象又 __proto__ 原型指向 构造函数的原型对象

ES6 的类其实是语法糖

迭代（遍历）方法： forEach()、map()、filter()、some()、every()

forEach(callback(element[, index[, array]])) return 不会终止遍历
filter(callback(element[, index[, array]])) 注意它直接返回一个新数组 return 不会终止遍历
some(callback(element[, index[, array]])) 注意它返回值是布尔值，如果查找到这个元素，就返回 true，如果查找不到就返回 false
唯一的时候 some 更合适 return true 终止遍历 迭代效率更高

trim() 方法去除字符串两侧空格

Object。defineProperty(obj, prop, descriptor) 定义对象中新属性或修改原有的属性。

var o = {}；
Object.defineProperty(o, "a", {
 value : 37,
 writable : true,  //  允许被赋值运算符改变
 enumerable : true,  //  允许属性出现在对象的枚举属性中
 configurable : true  //  允许 该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
});

/*
 *  函数的定义方式
 *  1. 自定义函数（命名函数）
 *  2. 函数表达式（匿名函数）
 *  3. 利用 new Function('参数1'，'参数2'，'函数体')
 *  所有函数都是 Function 的实例（对象）
 *  函数属于对象 万物皆对象
 */
 function fn() {  // 自定义函数
     
 }
 
 var fun = function() {  // 函数表达式 （匿名函数）
     
 }
 
 var f = new Function('a','b','console.log(a+b)')  // 利用 new Function
 f(1,2)
 console.log(f instanceof Object)

1. 普通函数
function fn(){
  console.log('人生的巅峰');  
}
fn(); 
fn.call();

2. 对象的方法
var o = {
  sayHi: function(){
    console.log('人生的巅峰');  
  }
}
o.sayHi();

3. 构造函数
function Star(){
    
}
new Star()

4. 绑定事件函数
btn.onclick = function () {}  //  点击按钮可调用这个函数

5. 定时器函数
setInterval(function(){},1000)  //  这个函数是定时器自动调用

6. 立即执行函数
(function(){})()

var o = {
    name: 'andy'
}

function fn (a,b){
 console.log(this.name)
 console.log(a + b)
}

fn.call(o,1,2)

//  call 主要作用可以实现继承
function Father(uname,age,sex){
  this.uname = uname;
  this.age = age;
  this.sex = sex;
}

function Son(uanme,age,sex){
    Father.call(this,uname,age,sex);
}
var son = new Son('刘德华',18,'男');
console.log(son);

fun.apply(thisArg,[argsArray])

var o = {
    name: 'andy'
}

function fn (arr1,arr2){
 console.log(this.name)
 console.log(arr1)  // 1
 console.log(arr2)  // 2
}

fn.apply(o,[1,2])

求最大值、最小值同理
var arr = [1,66,3,99,4];
// Math.max(value1[,value2, ...]) 
var max = Math.max.apply(Math,arr);
console.log(max)

fun.apply(thisArg,arg1,arg2,...)
          
var o = {
    name: 'andy'
}

function fn (a,b){
 console.log(this.name)
 console.log(a + b)
}
var f = fn.bind(o,1,2);
f();

应用-按钮禁用后开启
btn.onclick = function(){
  this.disabled = true
  setTimeout(function(){
    this.disabled = false
  }.bind(this),3000)
}

//  例子 实现 tab 增删改查
class Tab {
  constructor(id){
    this.main = document.querySelector(id);
    this.add = this.main.querySelector('.tabadd');
    this.ul = this.main.querySelector('.fisrstnav ul:first-child');  
    this.init();
  }
  
  updataNode(){
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.remove = this.main.querySelectorAll('.icon-guanbi'); 
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');
  }
  
  init() {
    this.updataNode()
    this.add.onclick = this.addTab.bind(this.add,this);
    for(var i = 0; i < this.lis.length; i++){
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab.bind(this.list[i],this);
      this.remove[i].onclick = this.removeTab.bind(this.remove[i],this);
      this.spans[i].ondblclick = this.editTab;
    }
  }
    
  clearClass() {
    for(var i = 0;i < this.lis.length; i++){
        this.lis[i].className = '';
        this.sections[i].className = '';
    } 
  }
  
  toggleTab(that) {
    that.clearClass();
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive'
  }
  
  addTab(that) {
    //  以前的做法：动态创建元素 createElement ，但是元素里面内容较多，需要 innerHtml 赋值，在 appendChild 追加到父元素里面
    //  现在高级做法：利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中
    //  appendChild 不支持追加字符串的子元素， insertAdjacentHTML 支持追加字符串元素
    var li = '<li class = "liactive"><span>测试1</span><span class= "iconfont icon-gu"></span></li>'
    that.ul.insertAdjacentHTML('beforeend',li);
    that.init()
  }
  
  removeTab(e,that) {
    e.stopPropagation(); //  阻止冒泡
    var index = this.parentNode.index; //  获取父元素的 index
    that.lis[index].remove();  // remove() 方法可以直接删除指定的元素
    that.sections[index].remove();  
    that.init();
    //  当我们删除的不是选中状态的 li 的时候，原来的选中状态 li 保持不变
    if(document.querySelector('.liactive')) return;
    //  当我们删除了选中状态的 li 的时候，让它的前一个 li 处于选定状态
    index--;
    that.lis[index] && that.lis[index].click()  //  手动调用点击事件
  }
    
  editTab(){
    var str = this.innerHTML;
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML = '<input type="text">';
    var input = this.children[0];
    input.value = str;
    input.select();  //  文本框里面的文字处于选定状态
    input.onblur = function(){
      this.parentNode.innerHTML = this.value;
    }
    input.onkeyup = function(e){
        if(e.keyCode === 13){
          //  手动调用表单失去焦点事件
          this.blur()
        }
    }
  }
}
new Tab("#tab")

'use strict'

(function(){
  'use strict'
})()

function fn(){
  'use strict'
}

function fn(callback){
  callback && callback();
}
fn(function()(alert('h1')));

function fn(){
  return function
}
fn()

function fn(){
  var num = 10;
  
  return function (){
    console.log(num)
  }
}
var f = fn()
f()

闭包应用 - 点击 li 输出索引号
var lis = document.querySelector('.nav').querySelectorAll('li');
for(var i = 0; i < lis.length; i++){
  (function(i){
    lis[i].onclick = function(){
      console.log(i);
    }
  })(i)
} 

function fn(){
  console.log('我要打印')
  if(num == 6){
    return;
  }
  num++
  fn();
}
 
阶乘
function fn(n) {
  if (n == 1){
    return 1;
  }
  return n * fn( n - 1);
}

斐波那契数列
function fb(n){
  if(n === 1 || n === 2){
    return 1;
  }
  return fb(n - 1) + fn(n - 2);
}

function getId(json,id){
  json.forEach(funcion(item){
    if(item.id == id){
      console.log(item)  
    }else if (item.goods && item.goods.length > 0){
      getID(item.goods , id);
    }             
  })
}

//  浅克隆
var o = {}
for (var k in obj){
    o[k] = obj[k]
}


Object.assign({},obj);

//  深克隆
function deepCopy(newobj,oldobj){
  for(var k in oldobj){
    var item = oldobj[k];
    if(item instanceof Array){
      newobj[k] = []
      deepCopy(newobj[k],item)
    }else if(item instanceof Object){
      newobj[k] = {}
      deepCopy(newobj[k],item)   
    }else{
      newobj[k] = item
    }
  }
}

//  1. 利用 RegExp 对象来创建 正则表达式
var regexp = new RegExp(/123/);

//  2. 利用字面量创建 正则表达
var rg = /123/
//  3. test 方法用来检测字符串是否符合正则表达式要求的规范 返回布尔类型
//  边界符 ^ 开头 $ 结尾 [] 字符类 - 范围 [^] 取反
//  量词符 * 相当于 >=0 可以出现 0 次或者很多次
//  量词符 + 相当于 >=1 可以出现 1 次或者很多次
//  量词符 ? 相当于 1 || 0
//  {3} 重复 3 次 {3,} 大于等于 3 {3,16} 大于3等于小于等于 16 位
//  预定义类 \d 相当于 [0-9] \D 相当于 [^0-9] \w 任意字母、数字、下划线 \W \s 匹配空格 \S
/^123$/ // 精准匹配 123
[123]   // 只要包含其中一个就是 true
/^[123]$/  // 1 2 3 皆为true
/a-z/
/a-zA-Z0-9_-/
[^a-zA-Z0-9_-]
/a*/
/a+/
/a?/
/a{3}/
/^[^a-zA-Z0-9_-]{6,16}/;
/(abc){3}/ abc 重复3次

座机号
/^\d{3}-\d{8}|\d{4}-\d{7}$/
/^\d{3,4}-\d{7,8}$/

替换 replace
var str = 'andy'
var newStr = str.replace(/andy/g,'body');  // g 全局 i 忽略大小写

let [a,b,c] = [1,2,3]
// undefind
let {name,age} = { name:'张三',age:'20'}
let {name: myName, age: myage} = { name:'张三',age:'20'}

( ) => { }

var tor = {
   name: '李华'
   say: function(){
     console.log(this.name) // this 指向 window  对象 {} 不形成作用域
   }
}

sum(...args){
    args.forEach(item => item
}
let [a,...b] = [1,2,3,4,5]

let ary = ['a','b','c']
console.log(...ary)
// 数组合并
let ary1 = [1,2,3,...ary ]
console.log(ary1)
//  数组合并
ary1.push(...ary)
//  伪数组转成数组

//  伪数组转成真正的数组
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
let arr2 = Array.from(arrayLike);
let arr3 = Array.from(arrayLike,item => item * 2);

let ary = [
  {
    id: 1,
    name: '张三'
  },
  {
    id: 2,
    name: '李四'
  }
]
let target = ary.find(item => item.id === 2)
console.log(target)

let ary = [1,5,10,15]
let index = ary.findIndex((value,index) => value >9)
console.log(index) //  2

[1,2,3].includes(2)  // true

`12345 ${name}`
`12345 ${say()}`

let str = 'Hello world!';
str.startsWith('Hello');  // true
str.endWith('!')  //  true

'x'.repeat(3)  //  xxx
'hello'.repeat(2) //  'hellohello'

const s = new Set()
const s = new Set([1,2,3,4,4,5])
console.log(s.size);
s.add('a')
s.delete('c')
s.has('a')
s.clear()

//  1、  创建 Ajax 对象
var xhr = new XMLHttpRequest();
//  2、  请求地址以及请求方式
var params = 'username='+ nameValue + '&age=' + ageValue 
//  get 请求方式
xhr.open('get','http://www.example.com/get?' + params);
//  3、  发送请求
xhr.send();
//  4、  获取服务器端响应数据
xhr.onload = function () {
  console.log(xhr.responseText);
}

//  post
xhr.open('post','http://www.example.com/post');
//  post 必须 设置请求格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//  post 发送请求参数
xhr.send(params)

//  JSON 形式
xhr.setRequestHeader('Content-Type','application/json');
xhr.send(JSON.stringify({name: 'lisi',age: 50}))
// node 代码
const bodyParser = require('body-parser')
app.use(bodyParser.urlencoded()); // 
app.use(bodyParser.json())  // 解析json

xhr.readyState // 获取 Ajax 状态码

var xhr = new XMLHttpRequest(); // 0 已经创建了 ajax 对象
xhr.open('get','http://localhost:3000/readystate'); // 1 已经对 ajax 对象进行配置
xhr.onreadystatechange = function(){ // 当 ajax 状态码变化时触发
	if(xhr.readyState === 4){
     console.log(xhr.responseText);
   }
}
xhr.send();

var xhr= XMLHttpRequest()
xhr.open('get','https://localhost:3000/error');
xhr.send()
xhr.onload = function(){
  if(xhr.status === 400){
    console.log('请求出错了')     
  }
}
// 当网络中断会触发 error 事件
xhr.onerror = function(){
  console.log('网络中断，无法发送网络请求')    
}

xhr.open('get','http://www.example.com?t=' + Math.random());  // 我一般比较喜欢加时间戳

function ajax(options){
    var defaults = {
      type: 'get',
      url: '',
      data: {},
      header:{
        'Content-Type' :'application/x-www.form-urlencoded'    
      },
      success: function(){},
      error: function(){}
    }
    
    Object.assign(defaults,options)
    
    var xhr = new XMLHttpRequest();
    
    // 序列化
    let params = ''
    
    for(var attr in options.data){
      params += attr + '=' + options.data[attr] + '&';    
    }
    params = params.substr(0,params.length-1);
    
    if(options.type === 'get'){
      options.type = options.url + '?' + params;
    }
    
    xhr.open(options.type,options.url);
    if(options.type === 'get'){
      xhr.send()
    }else{
      var contentType = options.header['Content-Type']
      xhr.setRequestHeader('Content-Type', contentType);
      if(contentType === 'application/json'){
        xhr.send(JSON.stringify(options.data))
      }else{
        xhr.send(params)
      }
    }
   
    xhr.onload = function(){
        var contentType = xhr.getResponseHeader('Content-Type') // 获取响应头数据
        var responseText = xhr.responseText; // 服务器端返回的数据
        if(contentType.includes('application/json')){
          responseText = JSON.parse(responseText)
        }
        if(xhr.status === 200){
          options.success(responseText,xhr)  
        }else{
          options.error(responseText,xhr);
        }
    }
}
ajax(
  {
      type: 'get',
      url: 'http:localhost:3000',
      header:{
        'Content-Type' :'application/json'
      },
      data: {
          name: '',
          age: 20
      }
      success: function(datas){
          
      }
  }
)

<head>
    <!-- 1. 将模板引擎的库引入当前页面 -->
    <script src="/js/template-web.js"></script>
</head>
<body>
  <div id="container">
      
  </div>
  <!-- 2. 准备 art-template 模板 -->  
  <script type="text/html" id="tp1">
    <h1 class="{{$value ? 'active' : ''}}">{{username}} {{age}}</h1>
    <!-- 循环 --> 
    {{each target}}
      {{$value.name}}
    {{/each}}
    {{dateFormat($value.name)}}
  </script>
  <script>
    // 3. 告诉模板引擎将数据与模板进行拼接
    // 模板 id 数据 对象类型
    // 方法的返回值就是拼接好的 html 字符串
    var html = template('tp1', {username: 'zhangsan', age: 30,target:[1,2,3,4,5,6]});
    document.getElementById('container').innerHTML = html;
    
    function dateFormat(date) {
      console.log(data)
      return data + 1
    }
    template.defaults.imports.dateFormat = dateFormat;
  </script>  
</body>
// 防抖
var timer = null;
searchInput.oninput = function (){
  clearTimeout(timer);
  timer = setTimeout(function(){
    //  发送请求
  },200)  
}

// JavaScript Demo
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

var arr = ['a', 'b', 'c'];
console.log(Object.keys(arr)); // console: ['0', '1', '2']

var obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.keys(obj)); // console: ['0', '1', '2']