前端学习(三十五)模块化es6(笔记)
RequireJs:
一、安装、下载
官网: requirejs.org
Npm: npm i requirejs
二、使用
以前的开发方式的问题:
1)、js 是阻塞加载
2)、变量名冲突
3)、多个JS文件之间相互依赖(必须保证一个正确的顺序)
1、简单示例
require(['js/a1.js']);
—— 不阻塞页面渲染了
2、定义模块:(AMD) define
一个模块就是一个JS文件。
define(function(){
//....
return 模块要返回(导出)的东西
});
3、模块的调用:require
require([模块1,模块2...],function(mod1,mod2....){
//所有模块加载完成后要做的事情
});
4、模块返回值:可以是任何东西
define(function(){
return {
a,
show(){}
}
});
5、在一个模块里可以引入其它模块
define(['想引入的模块1','想引入的模块2'...],function(mod1,mod2){
mod1 -> 想引入的模块1
...
});
注意:引入模块的路径,是由html文件决定。
6、路径问题
/1.html
/html/2.html
/js/
a1.js
a2.js (依赖a1.js)
1) 1.html
require(['js/a2.js']);
a2.js :
define(['a1.js']); ×
define(['js/a1.js']) √
2)2.html
require(['../js/a2.js']);
a2.js:
define(['js/a1.js']) ×
define(['../js/a1.js']) √
奇怪的事:
使用 define(['../js/a1.js']) √
1.html 能正常使用
7、配置
1) baseUrl
require.config({
baseUrl: // 用于指定模块的根目录
});
/1.thml
baseUrl: 'js2'
/html/2.html
baseUrl:'../js2'
有baseUrl ,不能加 .js 扩展名
没有baseUrl,可加可不加
建议: 使用baseUrl, 不加 .js
2) paths:
类似于给某个模块起别名
8、程序主入口
<script src="require.js" data-main="js/main" ></script>
==========================
ES6:
自己支持模块化。
let
块作用域
const
...:
...args —— 用于扩展函数参数
?
()=>
?let map = new Map();
map.set
map.get
map.delete
``
?str.startsWith
str.endsWith
数组方法
==========================
ES6:
let a = 12;
浏览器对ES6的支持不完整。不同的浏览器支持的程度也不同。
在不支持的情况下,要使用ES6,借助工具 —— 可以把 ES6的语法翻译成ES5或以前的。
工具:
1)网页
http://babeljs.io/repl/
https://google.github.io/traceur-compiler/demo/repl.html#let%20a%20%20%3D%2012%3B%0A
用于 测试语法的正确性。
2)本地环境
babel
traceur:
浏览器端 直接使用 ES6语法,进行翻译的一个较方便的工具:
traceur.js
bootstrap.js —— 和前端布局使用的bootstrap没有任何关系
<script src="js/traceur.js"></script>
<script src="js/bootstrap.js"></script>
<script type="module">
============================================
ES6模块化:
定义(导出):
1、
export 定义
export let a = 12;
export let b = 5;
export function show(){}
2、
let a = 12;
export default {
a
}
使用:
1、import {a,b,show} from 'js/a.js' //注意名字必须和导出的名字一致
2、
import modA from 'js/a.js' //a.js 扩展名 .js 不能省略
在模块中引用其它模块:
a.js
import modA from './b.js'
==========================
node中引模块:
const express = require('express'); //node_modules
自己定义的模块,非系统模块的引入:
const modA = requires('./modules/modA');
==========================
ES6常用补充:
1、 ... 扩展参数 Rest Arguments
1) function show(a,b,...arg){}
2) 复制数组: arr=[...arr2];
a. 循环赋值
b. ...
c. arr2 = Array.from(arr); //不支持ie
2、字符串新增
str.startsWith('字符串1') //判断 str 是否以 字符串1 开头 —— true/false
str.endsWith('字符串2') //判断 str 是否以 字符串2 结尾 —— true/false
3、Map
一种新的数据结构。也是一种 key/value的形式。 键/值 对。
结构: [] {}
1) let map = new Map(); // 得到一个Map 对象
2) 增加一项
map.set('key',value);
3) 取一项
map.get('key');
//返回 key 对应的value值
//如果找不到,返回 undefined
4) 删一项
map.delete('key');
4、for ... of
循环:
for
for...in
while
循环数组:
for(let item in arr){
item -> 数组的每一项
}
循环JSON: 不能
循环Map:
1)
for(let item of map){
item[0] —— key
item[1] —— value
}
item 是数组
2) 解构赋值
for(let [k,v] of map){
k —— key
v —— value
}
[k,v] = item;
3) for(let item of map.entries()){} //默认值,如果用 map 和 map.nentries() 效果一样
4) for(let key of map.keys()){}
5) for(let val of map.values()){}
再循环数组:
1) for(let item of arr.entries()){}
item -> [下标,值]
2) for(let key of arr.keys()){}
key -> 数组下标
3) for(let v of arr.values()){} ×
5、箭头函数的简写
1) 如果函数体只有一句话,并且是return
—— 可以把 return 和 {} 省略
2) 如果函数参数只有一个
—— 可以把 () 省略
(a)=>{...}
a=>{...}
6、数组新方法
数组方法: push pop shift unshift splice sort concat reverse join
indexOf
ES6新增:
1) map —— 映射
对数组中的每一项做相同的操作——产生一个新数组
let arr2 = arr.map(function(item){
//alert(item);
return item + 1;
});
arr2 ——> arr 的每一项加1的结果
2) forEach —— 循环
arr.forEach(function(val,index){
val ——> 数组每一项的值
index ——> 数组的下标
});
3) filter —— 过滤
let arr2 = arr.filter(function(item){
return item > 5; // 条件: true /false
});
arr2 ——> arr中值 大于5的
4) reduce —— 汇总
a.
arr.reduce(function(前一个,当前,索引,自己){
前一个:第一次 是 第一个数
以后 是 undefined
});
b.
arr.reduce(function(前一个,当前,索引,自己){
return xxx; //xxx 就是下一次的 前一个
});
c.
arr.reduce(function(pre,cue,index,self){},前一个);
* reduce方法,如果给定前一个值,那么第一次的前一个就是给定值
如果没有给定前一个值,那么把数组的第一项做为前一个
应用:
1)数组求和
let sum = arr.reduce((pre,cur,index,self)=>{
return pre + cur;
});
2)二维数组扁平化
let arr = [
[1,2],
[3,4],
[5,6]
];
前端学习(三十五)模块化es6(笔记)的更多相关文章
- 前端学习(十五):了解 Javascript
进击のpython ***** 前端学习--了解JavaScript Javascript是一种运行在浏览器中的解释型的编程语言 还记得我们在说python的时候提过解释型和编译型的区别 在解释型语言 ...
- 前端学习(三十四)对象&模块化(笔记)
人,工人 //类的定义 function Person(name,age){ //构造函数 //工厂模式 //1.原料 //var obj = new ...
- 前端学习(三十)es6的一些问题(笔记)
赋值表达式 document.onclick = document.onmouseover = fn; var a = b = c = d = 5; 不推荐 逗号表 ...
- 前端学习(三十六)promise(笔记)
一个页面: 头部.用户信息.新闻列表 jquery ajax: 1.$.ajax({ url:'', dataType:'json', }).then(res=>{ //r ...
- 前端学习(三十九)移动端app(笔记)
移动端App 开发App的三种方式 Native App 原生 底层语言 java Android oc ...
- 前端学习(三十八)vue(笔记)
Angular+Vue+React Vue性能最好,Vue最轻=======================================================Angular ...
- 前端学习(二十八)es6&ajax(笔记)
ES6 let 块级作用域 const 解构赋值 字符串拼接 扩展运算符 ------------------------------------------ ...
- Salesforce LWC学习(三十五) 使用 REST API实现不写Apex的批量创建/更新数据
本篇参考: https://developer.salesforce.com/docs/atlas.en-us.224.0.api_rest.meta/api_rest/resources_compo ...
- Java开发学习(三十五)----SpringBoot快速入门及起步依赖解析
一.SpringBoot简介 SpringBoot 是由 Pivotal 团队提供的全新框架,其设计目的是用来简化 Spring 应用的初始搭建以及开发过程. 使用了 Spring 框架后已经简化了我 ...
随机推荐
- iOS取消按钮点击时的动画效果
当存在图片或者背景图片时,点击图片往往意味着高亮,但是高亮的同时往往还伴随着按钮按下的动画效果,取消这种动画效果只需两步 Btn.adjustImageWhenHighlighted =NO; [Bt ...
- 简述php标记符有哪些
<?php ?> 是PHP的解析符(长标记),所有需要运行的代码都要放到解析符中. 1 2 3 <?php echo "hello world"; ?> 短 ...
- Codeforces 850A - Five Dimensional Points(暴力)
原题链接:http://codeforces.com/problemset/problem/850/A 题意:有n个五维空间内的点,如果其中三个点A,B,C,向量AB,AC的夹角不大于90°,则点A是 ...
- 循序渐进实现仿QQ界面(一):园角矩形与双缓冲贴图窗口
印象里仿QQ界面的程序应该有很多,搜了一下,虽然出来一大堆,排除了重复的,却只有两三个,没我想象的好.经常看到CSDN上有人问,QQ这个功能怎么实现,那个界面怎么实现,归纳了一下,决定写这么一个仿QQ ...
- Gym 100917M Matrix, The
题目链接: http://codeforces.com/gym/100917/problem/M --------------------------------------------------- ...
- vs2019里没有linq to sql或EF工具,导致dbml或者edmx无法通过设计器浏览
点击:工具->获取工具或功能 选择需要安装的工具,然后点击底部的修改按钮就可以了,等待安装完成,如下图:
- 知道css有个content属性吗?有什么作用?有什么应用?
css的content属性专门应用在 before/after 伪元素上,用来插入生成内容.最常见的应用是利用伪类清除浮动. //一种常见利用伪类清除浮动的代码 .clearfix:after { c ...
- 简单了解winform
WinForm是·Net开发平台中对Windows Form的一种称谓. Windows窗体可用于设计窗体和可视控件,以创建丰富的基于Windows的窗体应用程序.可以访问数据库中的数据,并在窗体上显 ...
- 《图解设计模式》读书笔记1-1 Iterator模式
目录 迭代器模式的类图 类图的解释 迭代器模式的代码 解释 原因 思想 迭代器模式的类图 类图的解释 名称 说明 Aggregate 集合接口,有提供迭代器的方法 Iterator 迭代器接口,提供迭 ...
- CentOS 7安装图形界面
之前公司的服务器都是用的CentOS 的系统,需要安装图形界面的时候我会执行以下命令 yum -y groupinstall "X Window System" "Fon ...