欢迎光临
我们一直在努力

JavaScript学习教程之cookie与webstorage

admin阅读(30)

cookie

由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,服务器单从网络连接上是没有办法知道用户身份的。cookie就是为了解决此问题而产生的,每次新的用户请求时,便给用户颁发一个独一无二的身份证,下次访问,必须带上身份证,这样服务器就会知道是哪个用户进行了访问,针对不同用户,做出不同的响应cookie是一个很小的纯文本文件(最多为4K),是浏览器储存在用户的机器上的。储存一些服务器需要的信息,每次请求站点,会发送相应的cookie,这些cookie可以用来辨别用户身份信息等作用。

cookie的属性字段

props intro
name cookie的名称
value cookie的值
domain 可以访问cookie的域名
path 可以访问此cookie的页面路径
expires/Max-Age cookie有效的时间
Size cookie的大小
httpOnly js能否读取到cookie信息
secure 是否只能通过https来传递此条cookie

cookie是以纯文本的方式存储,即cookie的数据类型为String类型

document.cookie = 'name=userInfo'; // 设置cookie的name属性
document.cookie = 'username=Jack'; // 在cookie中存储了username信息
console.log(document.cookie); // name=userInfo; username=Jack
document.cookie = 'name=userInfo'; // 设置cookie的name属性
document.cookie = 'username=Amy'; // 在cookie中存储了username信息
console.log(document.cookie); // name=userInfo; username=Amy

通过上面的实例可以知道,给cookie赋值时是不会覆盖cookie的原有的值,当等号前的属性名相同时,才会将原来相同属性名的值覆盖为后来设置的值。注意,cookie的两个字段之间是通过一个分号和空格分隔,而不是只有一个分号

当要给cookie设置非自定义的属性字段时,需要通过字符串追加的方式

例如

let expireDate = new Date();
document.cookie += ";expires=" + expireDate.toString();

注意: “;expires=”中的分号必须有,如果字段前不加分号则会认为这是一个自定义字段

domain

非顶级域名,如二级域名或者三级域名,设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身,不能设置其他二级域名的cookie,否则cookie无法生成。

顶级域名只能设置domain为顶级域名,不能设置为二级域名或者三级域名,否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie,不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享,需要设置domain为顶级域名,这样就可以在所有二级域名里面或者到这个cookie的值了。

顶级域名只能获取到domain设置为顶级域名的cookie,其他domain设置为二级域名的无法获取。

总的来说就是,上级域名不能访问下级域名的cookie,下级域名可以读取自身及上级域名的cookie,同级域名的cookie不共享,即同级域名之间不能互相访问对方的cookie,只能访问自身的cookie。

path

path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test,那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age

expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间,那么当到达此时间后,此cookie失效。不设置此字段时,默认值是Session,即当浏览器关闭(注意:不是浏览器标签页,而是整个浏览器) 后,此cookie失效。

let expireDate = new Date("2019-5-26T09:00:00");
document.cookie += ";expires=" + expireDate.toString();

若要删除某条cookie则设置此条cookie的expires为当前时间之前的时间的即可

let expireDate = new Date("1970-01-01T00:00:00");
document.cookie += ";expires=" + expireDate.toString();

size

Size字段 此cookie大小。

httpOnly

若此属性为true,则只有在http请求头中会带有此cookie的信息,而不能通过document.cookie来访问此cookie,设置为true可以减少受到Xss攻击的风险

secure

secure 字段 设置是否只能通过https来传递此条cookie

localstorage/sessionstorage

webstorage并不是要替代cookie,而是为了弥补随着web的发展,cookie在存储限制(存储容量最多为4k),安全性(在http协议中明文传输)存在的缺点而提出的

两者的API是相同的

function intro
setItem(key, value) 以键值对的形式保存一条数据
getItem(key) 根据键来获得值
removeItem(key) 根据键来删除一条数据
key(index) 根据索引获得键的名称
clear() 删除全部数据

两者都有length属性

sessionStorage.setItem("name", "Jack");
sessionStorage.setItem("phone", "18856894523");
console.log(sessionStorage.getItem('name')); // Jack
console.log(sessionStorage.key(0)); // name
console.log(sessionStorage.length); // 2
sessionStorage.removeItem('phone');
console.log(sessionStorage.length); // 1
sessionStorage.clear();    
console.log(sessionStorage.length); // 0

两者的比较

  • localStorage和sessionStorage都是用来存储客户端临时信息的对象。均只能存储字符串类型的对象,虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现。
  • localStorage生命周期是永久,除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。
  • sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,sessionStorage存储的数据就被清空了。
  • 不同浏览器无法共享localStorage或sessionStorage中的信息。
  • 相同浏览器的不同页面(页面属于相同域名和端口)间可以共享相同的localStorage
  • 不同页面或标签页间无法共享sessionStorage的信息。注意,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且属于同源页面,那么他们之间是可以共享sessionStorage的。
  • 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据

cookie 与 webstorage的区别

存储限制

  • 每个domain中只能存储最多20条cookie,cookie数据不能超过4K
  • webStorage也有存储大小的限制,但是比cookie大得多,可以达到5M或更大

数据的有效期

  • sessionStorage:仅在当前的浏览器窗口关闭有效;
  • localStorage:始终有效,除非用户手动删除
  • cookie:cookie过期时间之前一直有效,即使窗口和浏览器关闭

作用域

  • sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面;
  • localStorage:同源窗口共享
  • cookie:同源窗口共享

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

React组件对子组件children进行加强的方法

admin阅读(34)

问题

如何对组件的children进行加强,如:添加属性、绑定事件,而不是使用<div>{this.props.children}</div>在<div>上进行处理。

前车之鉴

今天写组件遇到这个问题,在网上查阅了很多资料,都说可以使用React.cloneElement进行处理,但是结果并不是预期想要的。

先看看这个东西有什么用:

React.cloneElement(element, [props], [...childrn])

根据React官网的说法,以上代码等价于:

<element.type {...element.props} {...props}>{children}</element.type>

这么做其实也是给children包了一层标签,再对其进行间接处理,没有直接修改children。

如:

// App.jsx
<Father>
 <div style={{ color: 'red' }} onClick={() => console.log('hello')}>
  demo
 </div>
<Father>

我们希望在Father.jsx的内部将div转为inline-block。按照网上的做法,是这样的:

// Father.jsx
const Son = React.cloneElement(
 this.props.children,
 {
  style: {
   display: 'inline-block'
  }
 }
)

但是实际效果是这样的:

<div style={{ dispaly: 'inline-block' }}>
 <div style={{ color: 'red' }} onClick={() => console.log('hello')}>
  demo
 </div>
<div>

哈!?子元素的父元素被设为了inline-block,和我们想要的<div>demo</div>被设为inline-block。结果与预期完全不同,简直大失所望!!!

React.clone根本对不起它clone的名字!!!

自我探索

思路: jsx语法表示的元素只是react组件的一个语法糖。所以组件是对象。既然是对象我们就可以直接对其进行修改。

尝试在控制台打印一个如下react组件:

// this.props.children
console.log(
 <div
  style={{ color: 'red' }}
  onClick={() => {
   console.log('hello');
  }}
 >
  demo
 </div>
);

如下:

所以直接修改this.props.children即可:

// Father.jsx
const { children } = this.props;
const Son = {
 ...children,
 props: {
   ...children.props,
  dispaly: {
   ...children.style,
   display: 'inline-block'
  },
  onTransitionEnd: () => { console.log('hello world') }
 }
}

总结

如何对组件的children进行直接加强,直接修改this.props.children对象即可。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

vue使用websocket的方法实例分析

admin阅读(23)

本文实例讲述了vue使用websocket的方法。分享给大家供大家参考,具体如下:

最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下:

爬坑之路:vue里面this指向问题

第一版 使用原生js

mounted(){
 console.log(this)----------------------------------------------------------this指向vue
 this.initWebpack();
},
methods: {
  initWebpack() {
    let websocket = '';
    if ('WebSocket' in window) {
      websocket = new WebSocket("ws://192.168.1.99:8080/tv/websocket");
    } else {
      alert('当前浏览器 Not support websocket')
    } //连接成功建立的回调方法 websocket.onopen = function () { console.log("WebSocket连接成功")
    console.log(this)----------------------------------------------------------this指向websocket
  };
//接收到消息的回调方法
websocket.onmessage = function (event) {
console.log(this)
console.log(event);
 this.productinfos=JSON.parse(event.data);//websocket请求过来的是string 需要格式
 if(demo.offsetHeight<demo1.offsetHeight){//内部比外部高度大的时候滑动
this.upScroll()//这是this指向websocket 所以没有此方法 会报错
}
this.sliceArray() }
 }
 };
//连接关闭的回调方法 websocket.onclose = function () {
console.log("WebSocket连接关闭");
};
//连接发生错误的回调方法 websocket.onerror = function () {
console.log("WebSocket连接发生错误");
};
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
 window.onbeforeunload = function () {
websocket.close();
//关闭WebSocket连接 };
 },
sliceArray(){//截取数组的后四位 },
 upScroll(){ },
}

第二版:正解

methods:{
 initWebpack(){//初始化websocket
  const wsuri = "ws地址";
  this.websock = new WebSocket(wsuri);//这里面的this都指向vue
  this.websock.onopen = this.websocketopen;
  this.websock.onmessage = this.websocketonmessage;
  this.websock.onclose = this.websocketclose;
  this.websock.onerror = this.websocketerror;
 },
 websocketopen(){//打开
  console.log("WebSocket连接成功")
 },
 websocketonmessage(e){ //数据接收
  console.log(e)
  this.productinfos = JSON.parse(e.data);
 },
 websocketclose(){ //关闭
  console.log("WebSocket关闭");
 },
 websocketerror(){ //失败
  console.log("WebSocket连接失败");
 },
}

this.websock.onopen  的 this指向的是websocket 如果想要给vue里面的data里面的变量赋值 就需要 this指向vue 所以需要对websocket的方法赋值

希望本文所述对大家vue.js程序设计有所帮助。

让 babel webpack vue 配置文件支持智能提示的方法

admin阅读(22)

让 babel webpack vue 配置文件支持智能提示,下面给大家介绍的非常详细,一起看看吧

 

如果非脚手架搭建的项目,往往需要手动配置 babel webpack。

每次都要打开官网,复制黏贴,然后一个一个配置。

如果配置也能智能提示,岂不美哉。

babel 配置

如果原先是 .babelrc 配置,请改成 .babelrc.js 或者 babel.config.js

然后安装依赖 npm i -D @types/babel__core yarn add -D @types/babel__core

接着在配置文件里加上 @type {import('@babel/core').TransformOptions} 声明。

 

非常简单,babel 就支持智能提示了。

webpack 配置

方法一样,先安装依赖 npm i -D @types/webpackyarn add -D @types/webpack

接着在配置文件里加上 @type {import('webpack').Configuration} 声明。

vue 配置

vue 配置则简单多了,不需要安装任何东西,

只要加上声明 @type {import('@vue/cli-service').ProjectOptions} 即可。

小结

其实就是利用 ts 的声明文件来实现智能提示。

很多人不知道 js 的 jsdoc 规范,也被 ts 兼容了,可以很好的为 js 服务。

本文只在 vscode 下测试,理论上所有主流开发环境都是支持这种方式的。

总结

以上所述是小编给大家介绍的让 babel webpack vue 配置文件支持智能提示的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

nodejs实现获取本地文件夹下图片信息功能示例

admin阅读(27)

本文实例讲述了nodejs实现获取本地文件夹下图片信息功能。分享给大家供大家参考,具体如下:

新建一个file.js

项目目录如下

//获取项目工程里的图片
var fs = require('fs');//引用文件系统模块
var image = require("imageinfo"); //引用imageinfo模块
function readFileList(path, filesList) {
 var files = fs.readdirSync(path);
 files.forEach(function (itm, index) {
  var stat = fs.statSync(path + itm);
  if (stat.isDirectory()) {
   //递归读取文件
   readFileList(path + itm + "/", filesList)
  } else {
   var obj = {};//定义一个对象存放文件的路径和名字
   obj.path = path;//路径
   obj.filename = itm//名字
   filesList.push(obj);
  }
 })
}
var getFiles = {
 //获取文件夹下的所有文件
 getFileList: function (path) {
  var filesList = [];
  readFileList(path, filesList);
  return filesList;
 },
 //获取文件夹下的所有图片
 getImageFiles: function (path) {
  var imageList = [];
  this.getFileList(path).forEach((item) => {
   var ms = image(fs.readFileSync(item.path + item.filename));
   ms.mimeType && (imageList.push(item.filename))
  });
  return imageList;
 }
};
//获取文件夹下的所有图片
var srclist=getFiles.getImageFiles("../../static/images/");
var srcNewList=[];
console.log(srclist);
srclist.forEach(function (item, index){
 console.log(item);
 if(item.split(".")[1]=='jpg'){
  srcNewList.push({'imsrc':item})
 }else{
  srcNewList.push({'videosrc':item})
 }
})
console.log(srcNewList)
//获取文件夹下的所有文件以及路径
// console.log(getFiles.getFileList("../../static/"));

打印结果如下:

希望本文所述对大家node.js程序设计有所帮助。

vue使用websocket的方法实例分析

admin阅读(43)

本文实例讲述了vue使用websocket的方法。分享给大家供大家参考,具体如下:

最近项目需要使用到websocket 但是框架是vue  网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket  我这边需求是 只需要接受就好 不需要发送 代码如下:

爬坑之路:vue里面this指向问题

第一版 使用原生js

mounted(){
 console.log(this)----------------------------------------------------------this指向vue
 this.initWebpack();
},
methods: {
  initWebpack() {
    let websocket = '';
    if ('WebSocket' in window) {
      websocket = new WebSocket("ws://192.168.1.99:8080/tv/websocket");
    } else {
      alert('当前浏览器 Not support websocket')
    } //连接成功建立的回调方法 websocket.onopen = function () { console.log("WebSocket连接成功")
    console.log(this)----------------------------------------------------------this指向websocket
  };
//接收到消息的回调方法
websocket.onmessage = function (event) {
console.log(this)
console.log(event);
 this.productinfos=JSON.parse(event.data);//websocket请求过来的是string 需要格式
 if(demo.offsetHeight<demo1.offsetHeight){//内部比外部高度大的时候滑动
this.upScroll()//这是this指向websocket 所以没有此方法 会报错
}
this.sliceArray() }
 }
 };
//连接关闭的回调方法 websocket.onclose = function () {
console.log("WebSocket连接关闭");
};
//连接发生错误的回调方法 websocket.onerror = function () {
console.log("WebSocket连接发生错误");
};
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
 window.onbeforeunload = function () {
websocket.close();
//关闭WebSocket连接 };
 },
sliceArray(){//截取数组的后四位 },
 upScroll(){ },
}

第二版:正解

methods:{
 initWebpack(){//初始化websocket
  const wsuri = "ws地址";
  this.websock = new WebSocket(wsuri);//这里面的this都指向vue
  this.websock.onopen = this.websocketopen;
  this.websock.onmessage = this.websocketonmessage;
  this.websock.onclose = this.websocketclose;
  this.websock.onerror = this.websocketerror;
 },
 websocketopen(){//打开
  console.log("WebSocket连接成功")
 },
 websocketonmessage(e){ //数据接收
  console.log(e)
  this.productinfos = JSON.parse(e.data);
 },
 websocketclose(){ //关闭
  console.log("WebSocket关闭");
 },
 websocketerror(){ //失败
  console.log("WebSocket连接失败");
 },
}

this.websock.onopen  的 this指向的是websocket 如果想要给vue里面的data里面的变量赋值 就需要 this指向vue 所以需要对websocket的方法赋值

希望本文所述对大家vue.js程序设计有所帮助。

JS实现简单的文字无缝上下滚动功能示例

admin阅读(26)

本文实例讲述了JS实现简单的文字无缝上下滚动功能。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="author" content="" />
 <title>文字列表无缝滚动代码</title>
 <style type="text/css">
  *{
   margin:0px;
   padding:0px;
   border:0px;
  }
  body{font-size:12px}
  #demo{
   overflow:hidden;
   height:80px;
   width:280px;
   margin:90px auto;
   position:relative;
  }
  #demo1{
   height:auto;
   text-align:left;
  }
  #demo2{
   height:auto;
   text-align:left;
  }
  #demo1 li{
   list-style-type:none;
   height:22px;
   text-align:left;
   text-indent:15px;
  }
  #demo2 li{
   list-style-type:none;
   height:22px;
   text-align:left;
   text-indent:15px;
  }
 </style>
</head>
<body>
<div id="demo">
 <ul id="demo1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
 </ul>
 <div id="demo2"></div>
</div>
<script type="text/javascript">
 var speed=40
  // 向上滚动
  var demo=document.getElementById("demo");
  var demo2=document.getElementById("demo2");
  var demo1=document.getElementById("demo1");
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
   if(demo.scrollTop>=demo1.offsetHeight){
    demo.scrollTop=0;
   }
   else{
    demo.scrollTop=demo.scrollTop+1;
   }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function(){clearInterval(MyMar)}
  demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
 //向下滚动
 // demo2.innerHTML=demo1.innerHTML
 // demo.scrollTop=demo.scrollHeight
 // function Marquee2(){
 //  if(demo1.offsetTop-demo.scrollTop>=0)
 //   demo.scrollTop+=demo2.offsetHeight
 //  else{
 //   demo.scrollTop--
 //  }
 // }
 // var MyMar2=setInterval(Marquee2,speed)
 // demo.onmouseover=function() {clearInterval(MyMar2)}
 // demo.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}
</script>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

js图片查看器插件用法示例

admin阅读(23)

本文实例讲述了js图片查看器插件。分享给大家供大家参考,具体如下:

首先 在github上下载 js,css点击打开链接

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="../css/viewer.min.css" rel="external nofollow" >
  <script src="../lib/jquery.min.js"></script>
  <script src="../lib/viewer.min.js"></script>
</head>
<body>
<div id="viewer" class="viewer">
  <div><img src="images/thumbnails/tibet-1.jpg" data-original="images/tibet-1.jpg" alt="图片1"></div>
  <div><img src="images/thumbnails/tibet-2.jpg" data-original="images/tibet-2.jpg" alt="图片2"></div>
  <div><img src="images/thumbnails/tibet-3.jpg" data-original="images/tibet-3.jpg" alt="图片3"></div>
  <div><img src="images/thumbnails/tibet-4.jpg" data-original="images/tibet-4.jpg" alt="图片4"></div>
  <div><img src="images/thumbnails/tibet-5.jpg" data-original="images/tibet-5.jpg" alt="图片5"></div>
  <div><img src="images/thumbnails/tibet-6.jpg" data-original="images/tibet-6.jpg" alt="图片6"></div>
</div>
<script>
  $('.viewer').viewer();
//  $('.viewer').viewer({url:"data-original",});}
</script>
</body>
</html>

查看效果如下所示:

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

JS实现继承的几种常用方式示例

admin阅读(21)

本文实例讲述了JS实现继承的几种常用方式。分享给大家供大家参考,具体如下:

1,原型链继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>原型链继承</title>
</head>
<body>
<script>
  /**
   * 优点:
   * 实例是父类的实例也是子类的实例
   * 父类新增原型方法或者原型属性 子类都能访问到
   * 简单 易于实现
   * 缺点:
   * 无法实现多继承
   * 来自原型对象的引用属性和实例是所有子类共享的
   * 创建子类实例的时候,无法向父构造函数传参
   * 可以在Cat构造函数中,为Cat实例增加实例属性。如果要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行。
   * **/
  function Animal(name) {
    this.name=name;//属性
    this.sleep=function () {//实例方法
      console.log(this.name+'正在睡觉')
    }
  }
  //原型方法
  Animal.prototype.eat=function (food) {
    console.log(this.name+'正在吃'+food)
  };
  //原型链继承---核心:将父类的实例作为子类的原型
  function Cat() {
  }
  Cat.prototype=new Animal();
  Cat.prototype.name='cat';
  var cat=new Cat();
  console.log(cat);//cat._proto_====>Animal 可以使用Animal里面的name属性 sleep方法
  //  也可以使用 cat._proto_._proto_的eat方法 即animal的原型方法
  //  cat._proto_._proto_._proto_ 是object
  console.log(cat.name);
  cat.eat('fish');
  cat.sleep();
</script>
</body>
</html>

运行结果:

2,构造继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>构造继承</title>
</head>
<body>
<script>
  /**
   *构造继承 相当于复制父类的实例给子类 (没有用到原型)
   * 只能使用父类的属性和方法 不能继承原型属性和方法 所以cat不能使用eat方法
   * **/
  function Animal(name) {
    this.name=name;//属性
    this.sleep=function () {//实例方法
      console.log(this.name + '正在睡觉!');
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃:' + food);
  };
  function Cat(name) {
    Animal.call(this,name);//Cat就可以使用Animal的
//    this.name=name
  }
  var cat=new Cat('Tom');
  console.log(cat);//只能使用Animal的属性和实例方法 不能使用原型的方法
  //cat的_proto_(指向的是一个函数) 是cat 构造器是Cat cat的_proto_._proto_ 是object
  console.log(cat.name);
//  cat.eat('fish');
  cat.sleep()
</script>
</body>
</html>

运行结果:

3,组合继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组合继承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡觉");
    };
  }
  Animal.prototype.eat=function (food) {
    console.log(this.name+"正在吃"+food);
  }
  function Cat(name) {
    Animal.call(this,name)
  }
  Cat.prototype=new Animal();
//  组合继承也是需要修复构造函数指向的。
  Cat.prototype.constructor=Cat;//构造器进行修改
  Cat.prototype.show=function () {//可以在子类的原型上加方法 不影响父类
    console.log("11111")
  };
  var cat=new Cat('Tom');
  console.log(cat);//cat可以直接使用animal的属性和实例方法
  //cat.proto是Animal cat.proto_._proto_ 是eat cat.proto_._proto_._proto_是object
  console.log(cat.name);
  cat.sleep();
  cat.eat('fish')
  cat.show()
</script>
</body>
</html>

运行结果:

4,寄生组合继承

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>寄生组合继承</title>
</head>
<body>
<script>
  function Animal(name) {
    this.name=name;
    this.sleep=function () {
      console.log(this.name+"正在睡觉");
    }
  }
  // 原型方法
  Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃:' + food);
  };
  function Cat(name) {
    Animal.call(this,name);
  }
//  (function () {
    //创建一个没有实例方法的类
    var Super=function () {
    };
    Super.prototype=Animal.prototype;//eat
    console.log(Animal.prototype);//构造方法还是Animal 可以使用eat方法 eat的_proto_ 是object
    //初始化这个实例 把它作为子类(Cat)的原型
    Cat.prototype=new Super();//一般 的话是new Animal()
    Cat.prototype.constructor=Cat;//Cat的构造器还是Cat
//  })();
  var cat=new Cat('Tom');
  console.log(cat.name);
  cat.sleep();
  cat.eat('food')
</script>
</body>
</html>

运行结果:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

让 babel webpack vue 配置文件支持智能提示的方法

admin阅读(19)

让 babel webpack vue 配置文件支持智能提示,下面给大家介绍的非常详细,一起看看吧

 

如果非脚手架搭建的项目,往往需要手动配置 babel webpack。

每次都要打开官网,复制黏贴,然后一个一个配置。

如果配置也能智能提示,岂不美哉。

babel 配置

如果原先是 .babelrc 配置,请改成 .babelrc.js 或者 babel.config.js

然后安装依赖 npm i -D @types/babel__core yarn add -D @types/babel__core

接着在配置文件里加上 @type {import('@babel/core').TransformOptions} 声明。

 

非常简单,babel 就支持智能提示了。

webpack 配置

方法一样,先安装依赖 npm i -D @types/webpackyarn add -D @types/webpack

接着在配置文件里加上 @type {import('webpack').Configuration} 声明。

vue 配置

vue 配置则简单多了,不需要安装任何东西,

只要加上声明 @type {import('@vue/cli-service').ProjectOptions} 即可。

小结

其实就是利用 ts 的声明文件来实现智能提示。

很多人不知道 js 的 jsdoc 规范,也被 ts 兼容了,可以很好的为 js 服务。

本文只在 vscode 下测试,理论上所有主流开发环境都是支持这种方式的。

总结

以上所述是小编给大家介绍的让 babel webpack vue 配置文件支持智能提示的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!