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

简介: 扩展的方法:es6 安装模块builder

Image.png

检测浏览器可支持es5,不支持就扩展,做兼容;

扩展的方法:



Image.png

取所有对象的键值;

object类型的长度:

循环一遍,用



Image.png

做表单,不小心空格,去空格的作用?


对原型链的理解:和document冒泡是一样的;数组中找不到,就冒泡到原型上,在没有,就是没有,

作用玉 一直往上查找



Image.png


Image.png

首先:事件行为由Windows触发的

ie9以下捕获不支持;

先记录两个

匹配的话,事件就是他触发的

true是捕获,flase:是冒泡


==



Image.png

如果版本低于9;就把js引进来;

能把优化做到最高


怎么把es6代码编译成es5:



Image.png

http://babeljs.io/

sass用来编译什么文件

babel用来编译js文件:

把 语法直接编译成js



Image.png

把6的类模拟成5的方法:

http://www.jscss.cc/2016/10/26/babel.html


安装babel的环境:

安装 Babel

babel-cli

在项目内运行 Babel CLI

1. babel-register
2. babel-node
3. babel-core

配置 Babel

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

执行 Babel 生成的代码

1. babel-polyfill
2. babel-runtime

配置 Babel(进阶)

手动指定插件

插件选项

基于环境自定义 Babel

制作你自己的预设(preset)

Babel 和其他工具


静态分析工具

语法检查(Linting)

代码风格



Image.png

2.查看版本



Image.png

3.开始写helloword.js



Image.png


Image.png

怎么配置输出es5的语法:



Image.png

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


把6转为5需要安装模块



Image.png

出现babel



Image.png

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



Image.png


Image.png


Image.png


Image.png

错误的安装例子



Image.png

复制进去,直接npm install



Image.png


Image.png

es6在浏览器里运行不了;!!!为什么



Image.png

模块化打包工具:webpack

html:就是jsx



Image.png

编译以后的



Image.png

好处:拼接字符串的时候:没有引号

http://slides.fe.ioteams.com/slide/show?id=20#/



Image.png

忘了全局的环境

Image.png

{
                    presets: [
                        "es2015",
                        "react",
                        "stage-2"
                    ],
                    plugins: [
                        'transform-runtime',
                        'transform-es2015-classes'
                    ]
                }
            }

Image.png

vim只能编辑文件

查看区域



Image.png

输入a:右键paste

退出:esc

wq:



Image.png

查看文件:



Image.png


Image.png

在编辑之前按a;把文本拿过来,即修改

退出编辑esc

退出文件:shift + :

又修改又保存并退出:wq:小写


如果有冲突,把文件删除掉(命令是什么?),在建一个

进行修改:

回车删除掉 多余的花括号



Image.png

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



Image.png

声明的关系没有了



Image.png

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



Image.png

核心代码,虚拟技术:reactdom



Image.png

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



Image.png

当做模块返回过去



Image.png


Image.png

移动过来再编译一下:



Image.png

返回一个包含arr对象的



Image.png


Image.png

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



Image.png

虚拟的dom转换为字符串,呈现的在body里面:

1.创建文件,根据文件做项目打包:



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


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



Image.png

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



Image.png


Image.png


Image.png

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



Image.png

最后一行是我们的



Image.png

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



Image.png

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


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


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



Image.png

继续编译



Image.png

看代码



Image.png

自动创建?



Image.png


Image.png

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



Image.png

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



Image.png

处理什么文件就引入



Image.png

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

Image.png

query: {
                    presets: [
                        "es2015",
                        "react",
                            "stage-2"
                       ],
                       plugins: [
                            "transform-runtime",
                            "transform-es2015-classes"
                       ]
              }

代码有变更就会自动编译:

webpack -w -d:监听文件变化后自动编译



Image.png

直接压缩:webpack -p,编译时自动压缩


Image.png


Image.png


相关文章
|
1月前
|
前端开发 网络架构
ES6对函数做了哪些扩展?
本文首发于微信公众号“前端徐徐”,介绍了 ES6 中函数参数的默认值、rest 参数、严格模式、name 属性、箭头函数、尾调用优化等新特性,并详细解释了各个特性的使用方法和注意事项。同时,还介绍了 ES2017 和 ES2019 中关于函数的一些改进,如函数参数尾逗号、`Function.prototype.toString()` 方法的修改以及 `catch` 语句参数的省略。
14 1
|
6月前
|
存储 API
使用Webpack的module.hot API来定义模块的热替换
使用Webpack的`module.hot` API实现模块热替换,简单示例展示如何在`myModule`变化时执行回调。`module.hot.accept`接收模块路径和回调函数,当模块或其依赖变更时触发回调,用于执行更新逻辑。可通过`module.hot.data`保存和恢复状态以实现热替换时保持应用程序的状态。
|
6月前
|
JavaScript 前端开发
ES6之对象的简化
ES6(ECMAScript 2015)引入了一些新的语法特性,使得对象的定义和使用更加简洁和方便。以下是一些ES6中对象的简化写法:
|
6月前
ES6对象新增了哪些扩展?
ES6对象新增了哪些扩展?
65 0
|
6月前
|
网络架构
ES6函数新增了哪些扩展?
ES6函数新增了哪些扩展?
59 0
ES6中对象新增了哪些扩展?
ES6中,当对象键名与对应值名相等的时候,可以进行简写
|
Java 数据库连接
【ES系列四】——ESjdbc的封装
【ES系列四】——ESjdbc的封装
|
Java Android开发
Java工具IDEA创建模块(Module)、如何创建 Module:、如何删除模块
Java工具IDEA创建模块(Module)、如何创建 Module:、如何删除模块
Java工具IDEA创建模块(Module)、如何创建 Module:、如何删除模块
下一篇
无影云桌面