ajax webpack day31 学习笔记 2021-5-20

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)

2.2.1 指定回调函数的方式更加灵活

2.2.2 （重要）支持链式调用，可以解决回调地狱问题