ajax
json
对对象进行字符串转换
let str = JSON.stringify(data)
手动对数据转化
let data = JSON.parse(xhr.response)
自动对数据转化
xhr.responsetype = ‘json’
页面加载机制
window.onload的意思是等页面完全加载完毕的意思,如果你不写这句的话,页面DOM节点还没有加载上,js就已经在运行了,可能就找不到节点
跨域(重点)
同源:协议、域名、端口号 必须完全相同
未被同源策略就是跨域
3.2 如何解决跨域
3.2.1 JSONP
3.2.2 CORS
webpack day31 学习笔记 2021-5-20
输入
输出
loader
(插件)plugin
(模式)mode
1.2webpack核心概念
1.运行指令:
开发环境:webpack .src/index.js -o ./build --mode=development
webpack会以./src/index.js为入口文件开始打包,打包后输出到./build
整体打包环境,是开发环境
生产环境:webpack ./src/index.js -o ./build --mode=production
1.3使用webpack配置文件打包
let path = require('path')
console.log(path.resolve(__dirname,'dist'))
module.exports = {
//入口文件
entry:"./src/index.js",
output:{
//输出详细名称
filename:'bundle.js',
//输出的路径
//绝对路径
path:path.resolve(__dirname,'dist')
},
//开发模式
mode:'development'
}
1.4 导入CSS文件
let path = require('path')
console.log(path.resolve(__dirname,'dist'))
module.exports = {
//入口文件
entry:"./src/index.js",
output:{
//输出详细名称
filename:'bundle.js',
//输出的路径
//绝对路径
path:path.resolve(__dirname,'dist')
},
//开发模式
mode:'development',
//loader的配置
module:{
//对某种格式的文件进行转换处理
rules:[
{
test:/\.css$/,
use:[
//use数组中的loader的顺序,是从下到上
//将js的样式内容插入到style标签里
'style-loader',
//将css文件转换为js
'css-loader'
]
}
]
}
}
1.5 plugin插件的使用
let path = require('path')
//安装html-webpack-plugin
let HtmlWebpackPlugin = require('html-webpack-plugin')
console.log(path.resolve(__dirname,'dist'))
module.exports = {
//入口文件
entry:"./src/index.js",
output:{
//输出详细名称
filename:'bundle.js',
//输出的路径
//绝对路径
path:path.resolve(__dirname,'dist')
},
//开发模式
mode:'development',
//loader的配置
module:{
//对某种格式的文件进行转换处理
rules:[
{
test:/\.css$/,
use:[
//use数组中的loader的顺序,是从下到上
//将js的样式内容插入到style标签里
'style-loader',
//将css文件转换为js
'css-loader'
]
}
]
},
//plugins插件配置
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html'
})
]
}
1.6 图片资源的打包
let path = require('path')
//安装html-webpack-plugin
let HtmlWebpackPlugin = require('html-webpack-plugin')
console.log(path.resolve(__dirname, 'dist'))
module.exports = {
//入口文件
entry: "./src/index.js",
output: {
//输出详细名称
filename: 'bundle.js',
//输出的路径
//绝对路径
path: path.resolve(__dirname, 'dist')
},
//开发模式
mode: 'development',
//loader的配置
module: {
//对某种格式的文件进行转换处理
rules: [
{
test: /\.css$/,
use: [
//use数组中的loader的顺序,是从下到上
//将js的样式内容插入到style标签里
'style-loader',
//将css文件转换为js
'css-loader'
]
}, {
//匹配图片文件
test: /\.(.jpg|png|gif)$/,
loader: 'url-loader',
//图片小于8kb base64处理,减少请求数量,会使体积更大
options: {
limit: 8 * 1024,
//url-loader的es6模块化解析
esModule: false,
//取图片哈希的前十位
//[ext]取图片的扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
//plugins插件配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
]
}
1.7 模块热更新
let path = require('path')
//安装html-webpack-plugin
let HtmlWebpackPlugin = require('html-webpack-plugin')
console.log(path.resolve(__dirname, 'dist'))
module.exports = {
//入口文件
entry: "./src/index.js",
output: {
//输出详细名称
filename: 'bundle.js',
//输出的路径
//绝对路径
path: path.resolve(__dirname, 'dist')
},
//开发模式
mode: 'development',
//loader的配置
module: {
//对某种格式的文件进行转换处理
rules: [
{
test: /\.css$/,
use: [
//use数组中的loader的顺序,是从下到上
//将js的样式内容插入到style标签里
'style-loader',
//将css文件转换为js
'css-loader'
]
}, {
//匹配图片文件
test: /\.(.jpg|png|gif)$/,
loader: 'url-loader',
//图片小于8kb base64处理,减少请求数量,会使体积更大
options: {
limit: 8 * 1024,
//url-loader的es6模块化解析
esModule: false,
//取图片哈希的前十位
//[ext]取图片的扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.html$/,
loader: 'html-loader'
}
]
},
//plugins插件配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
//
devServer:{
//项目构建路径
contentBase:path.resolve(__dirname,'dist'),
//启动gzip压缩
compress:true,
//端口号
port:3000,
//自动打开浏览器
open:true
}
}
2.1 Promise是什么?
2.1.1理解
1.抽象表达:
1)Promise是一门新的技术(ES6规范)
2)Promise是JS中进行异步编程的新解决方案
2.具体表达:
1)从语法上来说:Promise是一个构造函数
2)从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果值
异步昵称
- fs 文件操作
require(fs).readFile(’./index.html’,(err,data)=>{}) - 数据库操作
AJAX $.get("/server",(data)=>{}) - 定时器
setTimeout(()=>{},2000)