前端学习(三十五）模块化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（笔记）

最新文章

热门文章