项目难点(iframe,Fetch,swiper,addEventListener,noty,JSON.stringify,Vue,websocket,sessionStorage,this,set)

  1. iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。

  2. Fetch获取数据,请求json
    fetch(‘https://api.github.com/users/chriscoyier/repos’)
    .then(response => response.json())
    .then(data => {
    // data就是我们请求的repos
    console.log(data)
    });

    https://www.cnblogs.com/libin-1/p/6853677.html

  3. transform:rotate(90deg);//旋转90

  4. swiper插件
    https://mp.csdn.net/mdeditor/84583196#

  5. addEventListener() 方法用于向指定元素添加事件句柄。

    window.addEventListener(“load”, function (event) {
    new Noty({
    type: ‘error’,
    theme: ‘relax’,
    text: ‘在乘客广播时,请暂停使用!’
    }).show();
    });
    向 Window 对象添加事件句柄 window.addEventListener
    load 一张页面或一幅图像完成加载。
    https://blog.csdn.net/vincentblog/article/details/50629091

  6. noty是一个jQuery的通知(信息提示)插件,灵活轻便,是一个非常棒的用于替代传统提示对话框的插件。
    https://blog.csdn.net/u013485363/article/details/52981903
    //默认布局
    theme:‘defaultTheme’,
    // 默认主题
    type:‘alert’,
    // 默认类型
    text:’'ds"

  7. document.write(“浏览器的平台和版本:”+version);

  8. JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

  9. JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

  10. Vue
    生命周期:Vue中实例或者组件从创建到消灭中间经过的一系列过程Vue中实例或者组件从创建到消灭中间经过的一系列过程
    在这里插入图片描述
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    https://blog.csdn.net/xdnloveme/article/details/78035065

  11. WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。

示例:

// 创建WebSocket
   if ('WebSocket' in window) 

// 初始化一个 WebSocket 对象
var ws = new WebSocket("ws://localhost:9998/echo");

// 建立 web socket 连接成功触发事件
ws.onopen = function () {
  // 使用 send() 方法发送数据
  ws.send("发送数据");
  alert("数据发送中...");
};

// 接收服务端数据时触发事件
ws.onmessage = function (evt) {
  var received_msg = evt.data;
  alert("数据已接收...");
};

// 断开 web socket 连接成功触发事件
ws.onclose = function () {
  alert("连接已关闭...");
};

http://www.ruanyifeng.com/blog/2017/05/websocket.html

  1. sessionStorage
    先把页面存储数据在当前会话中,然后去跳转后的页面获取这些数据并且赋值给另一个变量

sessionStorage只能存储字符串类型数据,无法直接存储数组类型和JSON对象,
若想存数组或者json对象
首先将JSON对象通过JSON.stringify()方法转换成字符串,再存储到sessionstorage中,
然后通过JSON.parse()方法将字符串转换成JSON格式即可

var obj = {
  "name": "Tom",
  "age": 12,
  "gender": "man"
};
sessionstorage.setItem('jsonParams',JSON.stringify(obj));

var data = JSON.parse(sessionstorage.getItem('jsonParams'));
console.log(data);

在这里插入图片描述
https://blog.csdn.net/bs__q/article/details/78328037

  1. this的指向
    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this
    (1)this 都指代全局对象。
// 在浏览器中, window 对象同时也是全局对象:
console.log(this === window); // true

----------------
function f1(){
  return this;
}
//在浏览器中:
f1() === window;   //在浏览器中,全局对象是window

(2)在严格模式下,如果 this 没有被执行上下文(execution context)定义,那它将保持为 undefined。
(3)在箭头函数中,this与封闭词法上下文的this保持一致。在全局代码中,它将被设置为全局对象:

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true
  1. setAttribute() 方法创建或改变某个新属性。

    element.setAttribute(属性名,属性值)

上传京东,以前的fetch

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/84582873