网页中重要的三大块
三大块: 网站的头部 网站中间内容部分 网站的底部
通过代码的方式来实现 index. html的组成
1. 创建空文件夹 -- > webpack
2. 创建index. html index. js header. js content. js footer. js
3. index. html
< div id= "root" > < / div>
4. header. js
function Header ( ) {
var dom = document. getElementById ( "root" ) ;
let header = document. createElement ( 'div' ) ;
header. innerText = 'header' ;
dom. append ( header) ;
}
5. footer. js
function Footer ( ) {
var dom = document. getElementById ( "root" ) ;
let footer = document. createElement ( 'div' ) ;
footer. innerText = 'footer' ;
dom. append ( footer) ;
}
6. content. js
function Content ( ) {
var dom = document. getElementById ( "root" ) ;
let content = document. createElement ( 'div' ) ;
content. innerText = 'content' ;
dom. append ( content) ;
}
7. index. js
new Header ( ) ;
new Content ( ) ;
new Footer ( ) ;
8. index. html页面引入js文件
< script src= "./header.js" > < / script>
< script src= "./content.js" > < / script>
< script src= "./footer.js" > < / script>
< script src= "./index.js" > < / script>
这就是之前的方式实现的网页。
运行index. html 可以看到结果。
弊端:模块化实现不明显,不利于后期的项目维护。
webpack模块化
重要的两个关键字:
export 导出 相当于之前讲到的return 将函数里的内容抛出去
import 导入 接收export 抛出来的内容
代码中实现:
function Header ( ) {
var dom = document. getElementById ( "root" ) ;
let header = document. createElement ( 'div' ) ;
header. innerText = 'header' ;
dom. append ( header) ;
}
export default Header;
import Header from './header' ;
webpack的搭建
webpack 和 node.js 是不可分割的
基于npm管理
第一步:初始化命令; npm init 获得package . json文件 配置信息
第二步:如果需要进入到某个文件夹 cd 文件夹的名字
安装webpack
webpack的安装
命令:cnpm i webpack webpack- cli - D 获得node_modules文件夹 安装的依赖
- D 局部安装 - g 全局安装
局部安装使用
npx webpack index. js 获得dist文件夹 打包后的代码 可以直接放在服务器
Iterator迭代器 和 for…of 循环
遍历数组:
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
for ( var i = 0 ; i< arr. length; i++ ) {
console. log ( arr[ i] )
}
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
arr. forEach ( function ( value, index ) {
console. log ( value) ;
console. log ( index) ;
} )
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
for ( let a of arr) {
console. log ( a)
}
为什么要有iterator??
Map Set 等数据结构 需要一个统一的接口去处理 iterator就是提供了这么一个机制
作用
数据部署了iterator接口 就可以用for ... of 循环遍历
for…of 循环的遍历过程的本质
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
for ( let a of arr) {
console. log ( a)
}
需要有个游标指向1 的位置,这里的游标也就是我们说的指针对象(iterator本质就是一个指针对象),
接下来会移动游标的位置 指向2 ,
再移动游标的位置,指向3 ,
以此类推。也就是挨个走一遍。
let arr = [ 1 , 2 , 3 , 4 , 5 ] ;
function makeIterator ( array ) {
let nextIndex = 0 ;
return {
next : function ( ) {
return nextIndex < array. length ?
{ value: array[ nextIndex++ ] , done: false } :
{ value: undefined , done: true }
}
}
}
let res = makeIterator ( arr) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
console. log ( res. next ( ) ) ;
通过调用next函数,返回value和done两个属性;
value属性返回当前位置的成员,value的类型无限制。
done属性是一个布尔值,表示遍历是否结束,即是否还有必要再一次调用next方法;
当done为true 时,即遍历完成。
Iterator接口部署在数据结构的Symbol.iterator属性
let arr1 = [ 1 , 2 , 3 , 4 , 5 ] ;
let iter = arr1[ Symbol. iterator] ( ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
console. log ( iter. next ( ) ) ;
原生具备Iterator接口的数据结构
具有iterator接口 Array Map Set String
对象不具备Iterator接口 可以手动部署迭代器接口 让对象可以用for…of 循环遍历
let myIterator = {
a: 1 ,
b: 2 ,
c: 3
}
myIterator[ Symbol. iterator] = function ( ) {
let self = this ;
let arr = Object. keys ( self) ;
let index = 0 ;
return {
next ( ) {
return index < arr. length ? { value: self[ arr[ index++ ] ] , done: false } : { value: undefined , done: true } ;
}
}
}
var it = myIterator[ Symbol. iterator] ( ) ;
it. next ( ) ;
for ( const i of myIterator) {
console. log ( i) ;
}
let obj = {
data: [ 1 , 2 , 3 , 4 ] ,
[ Symbol. iterator] ( ) {
let index = 0
let that = this
return {
next ( ) {
if ( index< that. data. length) {
return {
value: that. data[ index++ ] ,
done: false
}
} else {
return {
value: undefined ,
done: true
}
}
}
}
}
}
for ( let i of obj ) {
console. log ( i) ;
}