扩展的方法：es6 安装模块builder

https://github.com/es-shims/es5-shim/

5640239-68509477fd7ade74.png
Image.png

检测浏览器可支持es5，不支持就扩展，做兼容；
扩展的方法：

5640239-c5d4f55318b0ba67.png
Image.png

取所有对象的键值；
object类型的长度：
循环一遍，用

5640239-4eb661ef4bfb149b.png
Image.png

做表单，不小心空格，去空格的作用？

对原型链的理解：和document冒泡是一样的；数组中找不到，就冒泡到原型上，在没有，就是没有，
作用玉 一直往上查找

5640239-910d367aca1883e8.png
Image.png
5640239-0510e7c0810614eb.png
Image.png

首先：事件行为由Windows触发的
ie9以下捕获不支持；
先记录两个
匹配的话，事件就是他触发的
true是捕获，flase:是冒泡

==

5640239-7b9b0faaa1309b77.png
Image.png

如果版本低于9；就把js引进来；
能把优化做到最高

怎么把es6代码编译成es5:

5640239-29bc0e7055c3def7.png
Image.png

http://babeljs.io/
sass用来编译什么文件
babel用来编译js文件：
把 语法直接编译成js

5640239-0ccb999e699756fb.png
Image.png

把6的类模拟成5的方法：
http://www.jscss.cc/2016/10/26/babel.html

安装babel的环境：
安装 Babel

babel-cli

在项目内运行 Babel CLI

babel-register
babel-node
babel-core

配置 Babel

.babelrc
babel-preset-es2015
babel-preset-react
babel-preset-stage-x

执行 Babel 生成的代码

babel-polyfill
babel-runtime

配置 Babel（进阶）
手动指定插件
插件选项
基于环境自定义 Babel
制作你自己的预设（preset）
Babel 和其他工具

静态分析工具
语法检查（Linting）
代码风格

5640239-9bc413b0f3005164.png
Image.png

2.查看版本

5640239-71d4a297bf408d16.png
Image.png

3.开始写helloword.js

5640239-c1d841c3fe10912f.png
Image.png
5640239-862f591a74b80313.png
Image.png

怎么配置输出es5的语法：

5640239-d30c55e2e933bf87.png
Image.png

指定将日志输出到哪个文件：

把6转为5需要安装模块

5640239-4f40dcdbad666e70.png
Image.png

出现babel

5640239-7612628417e26aba.png
Image.png

http://www.jscss.cc/2016/10/27/react-build.html

5640239-8642604285db6340.png
Image.png
5640239-2f900e2dd68d7bc1.png
Image.png
5640239-5dd2e9a6f9c07135.png
Image.png
5640239-26c69215d0532afd.png
Image.png

错误的安装例子

5640239-5df5886586ac8ddf.png
Image.png

复制进去，直接npm install

5640239-2809f5a9cec92d72.png
Image.png
5640239-ee6027dcd227f5ff.png
Image.png

es6在浏览器里运行不了；！！！为什么

5640239-0655a117feb151e3.png
Image.png

模块化打包工具：webpack

html:就是jsx

5640239-78be182084363d20.png
Image.png

编译以后的

5640239-a7c62ccfe814b356.png
Image.png

好处：拼接字符串的时候：没有引号
http://slides.fe.ioteams.com/slide/show?id=20#/

5640239-93572cba250af32a.png
Image.png

忘了全局的环境

5640239-f7291cb94e22bde4.png
Image.png
{
                    presets: [
                        "es2015",
                        "react",
                        "stage-2"
                    ],
                    plugins: [
                        'transform-runtime',
                        'transform-es2015-classes'
                    ]
                }
            }
5640239-fa3f2f84ef8798fe.png
Image.png

vim只能编辑文件
查看区域

5640239-b2cc34e9882ac50d.png
Image.png

输入a:右键paste
退出：esc
wq:

5640239-91802fe7e2346921.png
Image.png

查看文件：

5640239-bb1c8d72cef911ae.png
Image.png
5640239-8868f381deba19fb.png
Image.png

在编辑之前按a;把文本拿过来，即修改
退出编辑esc
退出文件：shift + ：
又修改又保存并退出：wq：小写

如果有冲突，把文件删除掉（命令是什么？），在建一个
进行修改：
回车删除掉 多余的花括号

5640239-174be9ee9a602c03.png
Image.png

如果存在，会修改，不存在，会创建

5640239-3b503eca9832f772.png
Image.png

声明的关系没有了

5640239-7ea9b28d0c933aa1.png
Image.png

把src的文件夹编译到build的文件夹底下去

5640239-89adf6866b68b208.png
Image.png

核心代码，虚拟技术：reactdom

5640239-ee49c47cad5f7b67.png
Image.png

写完过后进行编译：在build里面查看：

5640239-e598ee694674cbfe.png
Image.png

当做模块返回过去

5640239-57c58148faeba1f9.png
Image.png
5640239-027513b210577a84.png
Image.png

移动过来再编译一下：

5640239-af964806eb95c02e.png
Image.png

返回一个包含arr对象的

5640239-2f912fd012d9b918.png
Image.png
5640239-77b54f0d2f481c50.png
Image.png

处理后的，一个新的语法接收的

5640239-686ac85429dc6d58.png
Image.png

虚拟的dom转换为字符串，呈现的在body里面：
1.创建文件，根据文件做项目打包：

5640239-97879e1489a8639e.png
Image.png

fis：
bat：百度，阿里，腾讯
对所有模块打包：http://webpack.github.io/
AMD和cmd是什么？
http://webpack.github.io/docs/tutorials/getting-started/

http://webpack.github.io/docs/configuration.html

入口文件去关联其他的文件

5640239-d27ac4673fb49a57.png
Image.png

重新写一个正常正式的js的文件来进行配置

5640239-ade7ea6179bd1722.png
Image.png
5640239-284d0ef26a9289c2.png
Image.png
5640239-601164a0e74e6d35.png
Image.png

page1是我们定义输出的文件？

5640239-8f7edf0b1fcdd09c.png
Image.png

最后一行是我们的

5640239-ca0d934cdd45e54d.png
Image.png

在main.js中：第一个参数是函数的名字，怕在一个js里写很多模块

5640239-b0481ab60c57bbf9.png
Image.png

自动压缩时文件名作为模块名，把 文件路径名当成了模块名

弹性的打包机制：支持三种命名规范

五分钟上手：http://seajs.org/docs/

5640239-22885bd2b56d7fb4.png
Image.png

继续编译

5640239-52bfe07b0a15dced.png
Image.png

看代码

5640239-b551d63c9c8887e9.png
Image.png

自动创建？

5640239-a95027241301a1e5.png
Image.png
5640239-9fe837f1ed4b9317.png
Image.png

对象里面是逗号，最后没有

5640239-8df8418f00c0d686.png
Image.png

http://webpack.github.io/docs/using-loaders.html

5640239-5b28c682b75d7f51.png
Image.png

处理什么文件就引入

5640239-22ba195b5c2da513.png
Image.png

模块处理gulp和pipe一样：管道的意思

5640239-e03c3ffb08e653b8.png
Image.png
query: {
                    presets: [
                        "es2015",
                        "react",
                            "stage-2"
                       ],
                       plugins: [
                            "transform-runtime",
                            "transform-es2015-classes"
                       ]
              }

代码有变更就会自动编译：
webpack -w -d:监听文件变化后自动编译

5640239-cd4c2777044267ba.png
Image.png

直接压缩：webpack -p，编译时自动压缩


5640239-7710473eb1e6b660.png
Image.png
5640239-a6efa3e15b37932e.png
Image.png
posted @ 2017-09-30 06:46  前端视听  阅读(166)  评论(0)  编辑  收藏  举报