前端学习笔记

date
May 27, 2021
slug
39
status
Published
tags
Frontend
summary
type
Post

同源策略和跨域

什么是同源?

协议域名和端口相同就是同源
notion image

什么是同源策略?

浏览器提供的安全策略.
A源的js不允许和B源进行资源交互
  • Cookie localStorage
  • B源的DOM
  • B源的Ajax

如何实现跨域?

什么是跨域?

不同源就是跨域

JSONP

<script> 中的src属性请求B源的js脚本
<script>
        function abc(data) {
            console.log('拿到了Data数据:')
            console.log(data)
        }
    </script>

    <!-- <script>
    success({ name: 'zs', age: 20 })
  </script> -->
    <script src="./js/getdata.js?callback=abc"></script>
Jquery实现JSONP
$.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 代表我们要发起JSONP的数据请求
    dataType: 'jsonp',
    // 给B源的参数的名称
    jsonp: 'callback',
    // 回调的名称
    jsonpCallback: 'abc',
    success: function (res) {
        console.log(res)
    }
})

CORS

notion image
简单请求
get post head 没有自定义header并且header只能是*&^*(^&(那几个
预检请求
剩下的都需要预检请求. 譬如application/json格式的数据
先发送OPTION请求进行预检. 服务器允许之后,浏览器才会发送真实数据.

commonJS

const m1 = require('./007.js') // .js也可以省略
通过module.exports 共享资源, 在node中 exports和module.exports是同一个资源.

ES6的模块化

在你的 HTML 中需要包含 type="module" 的 <script> 元素这样的脚本,以便它被识别为模块并正确处理
import defaultExport from "module-name";
import * as name from "module-name";
//导入全部
import * as myModule from '/modules/my-module.js';
myModule.doAllTheAmazingThings();

import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
export
// 导出单个特性
export let name1, name2,, nameN; // also var, const
export let name1 =, name2 =,, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2,, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2,, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function () {} // also class, function*
export default function name1() {} // also class, function*
export { name1 as default,};

// 导出模块合集
export * from; // does not set the default export
export * as name1 from; // Draft ECMAScript® 2O21
export { name1, name2,, nameN } from;
export { import1 as name1, import2 as name2,, nameN } from;
export { default } from;
重定向, 多重导入
notion image

npm

npm init -y 生成package.json
npm install 读取package.json
npm i moment -g 全局安装,一般建议本地安装
node_modules 本地安装在这里
package.json npm配置文件
package-lock.json 不要修改,看看还行
npm uninstall

yarn

notion image
 

© chaleaoch 2021