发表于: 2017-03-20 22:54:52

1 1316


一、今天完成的事情:

1.测试了后端给出的公司列表接口,还有问题,明天还要继续改;


2.看了css3新增的选择器,好多我都没有用过!好方便!


3.看了babel的用法!就只差学习es6的基本语法了;


4.看了事件代理和事件委托;


二、明天要做的事情:

1.学习es6


2.了解html5新增的api


三、遇到的问题:

首先给大家说一说事件代理和事件委托:

1.事件代理:

事件代理机制建立在dom事件冒泡的基础上,什么叫事件冒泡呢,也就是当一个节点的子元素被点击的时候,父元素能够收到这个子元素被点击的消息;这个在哪里获取呢?当子元素被点击的时候,父元素的  e.target.nodeName会传来它被点击的消息;


2.事件捕获;

当某个元素触发某个事件,从顶层的document中就会发出一个事件流,随着dom树一直到达事件发生的目标,这一过程中事件监听函数是不会被触发的!


3.事件冒泡

从目标元素开始,往顶层元素传播,途中节点如果绑定了相应的函数,都会被一次触发,当然我们也可以阻止事件的冒泡传播;


4.事件目标:

到达目标元素后,立即执行绑定的相应处理函数,若没有绑定监听函数,那就不执行咯;


其次,如何使用babel:


首先我们需要明白,很多es6的属性,在我们编码的过程中都会为我们带来便利,但是问题来了,我们在使用es6的时候,兼容就成了一个问题,那我们如何在使用es6的时候还能兼顾兼容呢?答案是使用babel;


1.安装babel

首先你要安装nodejs,然后再命令行中运行 npm install -g babel-cli


2.安装es2015插件

babel如何支持翻译es2015呢,我们需要安装es2015插件  npm install --save babel-preset-es2015


3.在项目根目录下建立.babelrc文件夹,来制定编译规则,如果我们是要把代码编译成es5,就这样设置:

{
  "presets":[
    "es2015"
  ],
  "plugins"[]
}
这段代码代表了我们编译前是es6,plugins可以不用填写,它会自动给我们生成成es5,当然,我们还可以编译很多东西,比如react和es7,这些东西如何编译,可以在官网上去看一下,几个命令就解决,只是要注意更新一下规则


4.在package.json的script里面可以增加一行,build:'babel xxx -d xxx' ,前面的xxx代表需要编译的文件夹的名字,后面的xxx代表要编译到的文件夹的名字,然后运行  npm run babel,就能将前面文件夹里的文件,全部编译到另一个文件夹中,并且将所有es6转成es5哟!上一个我的package.json

{
  "name""testPage",
  "version""0.0.1",
  "babel"{},
  "scripts"{
    "build""babel lib -d controller"
  },

  "devDependencies"{
    "babel-preset-es2015""^6.24.0",
    "babel-preset-stage-2""^6.22.0"
  }
}
其实它还有很多功能,但是最近的需求是这一个功能就够了!学习es6去了


我觉得npm的使用方法还是很有必要的,它有很多插件,插件给它配置好了,一本万利呀我的朋友!还有css自动加前缀兼容的,还有清空缓存的,后面还要计划看看webpack,这东西好像是个神器!


返回列表 返回列表
评论

    分享到