一切福田，不離方寸，從心而覓，感無不通。

Category Archives: Frontend

HTML5 WebSocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。 在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。 HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。 当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。 以下 API 用于创建 WebSocket 对象。

1
var Socket = new WebSocket(url, [protocol] );

  以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。 WebSocket 属性 以下是 WebSocket 对象的属性。假定我们使用了以上代码创建了 Socket 对象： 属性 描述 Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值： 0 – 表示连接尚未建立。 1 – 表示连接已建立，可以进行通信。 2 – 表示连接正在进行关闭。 3 – 表示连接已经关闭或者连接不能打开。 Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。 WebSocket 事件 以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象： 事件 事件处理程序 描述 open Socket.onopen 连接建立时触发 […]

龙生   01 Mar 2020
View Details

Module not found: Error: Can’t resolve 'XXX' in 'XXXX'

故障 控制台运行webpack/npm时出现 Module not found: Error: Can’t resolve 'XXX' in 'XXXX' 1 解决方案 npm i XXX --save 1 重新运行即可 如果提示ERROR 尝试执行 npm uninstall XXX npm i XXX --save ———————————————— 版权声明：本文为CSDN博主「YooHoeh」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/u011215669/article/details/81231552

龙生   01 Mar 2020
View Details

ES6基本语法入门

一、用let代替var声明变量 ES5中，我们可以在代码中任意位置声明变量，甚至可以重写已经声明的变量，ES6引入了一个let关键字，它是新的var。

1
2
3
let language = 'javascript';
let language = 'zj'; //此处会报错
console.log(language);

因为同一作用域中let已经声明过了，所以再次声明会报错   二、常量 ES6还引入了const关键字，和let用法一样，唯一的区别就是，const变量是只读的   三、模板字符串拼接 用反引号拼接字符串

1
2
3
4
5
let language = 'javascript';
console.log(language);
 
let lan = `此处写字符串 ${language}`;
console.log(lan) //此处写字符串 javascript

只要把变量写在${}里面就好了；模板字符串也可以识别空格，可可以用于多行的字符串，再也不用写\n了。   四、箭头函数

1
2
3
4
5
let circle = (x) => {
const PI = 3.14;
let area = PI * r * r;
return area;
}

可以省略掉关键字function，如果函数只有一条语句，可以连关键字都省略掉

1
let circle2 = (x) => 3.14 * r * r;

  五、函数参数的默认值

1
2
let sum = (x = 1, y = 2, z = 3) => x + y + z;
console.log(sum());

可以声明函数参数的默认值   六、声明展开和剩余参数 ES6展开操作符 …

1
2
3
4
5
6
7
8
9
let params = [1,2,3];
console.log(...params); //1 2 3
 
let pro = {
one:0,
two:1,
three:2,
};
console.log({...pro}); //{ one: 0, two: 1, three: 2 }

  七、数组解构

1
var [a, b] = ['x', 'y'];

以上代码和下面的代码效果是一样的 a = 'x'; b = 'y'; 数组解构也可以进行值的互换 [x, y] = [y, x];   八、使用面向对象biancheng

1
2
3
4
5
6
7
8
9
//ES5语法
function Book (title, page, isbn) {
this.title = title;
this.page = page;
this.isbn = isbn;
}
Book.prototype.printTitle = function () {
console.log(this.title);
};

1
2
3
4
5
6
7
8
9
10
11
//ES6语法
class Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
}

ES6只需要使用class关键字，声明一个有constructor函数和诸如printIsbn等其他函数的类； 我们可以用extends扩展一个类并继承它的行为

1
2
3
4
5
6
7
8
9
10
11
12
//ES6语法
class ITDesk extends Desk {
constructor (title, pages, isbn){
this.title = title;
this.page = page;
this.isbn = isbn;
}
printIsbn () {
console.log(this.isbn);
}
 
}

更多es6细节请看： http://es6.ruanyifeng.com/#docs/array   from:https://www.cnblogs.com/plBlog/p/11431429.html

龙生   25 Feb 2020
View Details

vconsole 的安装以及使用

1. 安装

1
npm install vconsole

  2. 使用 main.js

1
2
3
import Vconsole from 'vconsole'
const vConsole = new Vconsole()
Vue.use(vConsole)

运行即可看到～右下角的vconsole from:https://blog.csdn.net/luckyzhoufangbing/article/details/95978480

龙生   20 Feb 2020
View Details

vue路由传参的三种基本方式

项目中很多情况下都需要进行路由之间的传值，想过很多种方式 sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异 下面我来说下vue自带的路由传参的三种基本方式 先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去

1
<div class="examine" @click="insurance(2)">查看详情</div>

  第一种方法 页面刷新数据不会丢失

1
2
3
4
5
6
7
methods：{
  insurance(id) {
       //直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/particulars/${id}`,
        })
}

  需要对应路由配置如下：

1
2
3
4
5
{
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }

  可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值 另外页面获取参数如下

1
this.$route.params.id

  第二种方法 页面刷新数据会丢失 通过路由属性中的name来确定匹配的路由，通过params来传递参数。

1
2
3
4
5
6
7
8
9
methods：{
  insurance(id) {
       this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
  }

  对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。

1
2
3
4
5
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

  子组件中: 这样来获取参数

1
this.$route.params.id

  第三种方法 使用path来匹配路由，然后通过query来传递参数 这种情况下 query传递的参数会显示在url后面?id=？

1
2
3
4
5
6
7
8
9
methods：{
  insurance(id) {
        this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
        })
  }

  对应路由配置：

1
2
3
4
5
{
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }

  对应子组件: 这样来获取参数

1
this.$route.query.id

  特别注意哦， 组件中 获取参数的时候是router 这很重要~~~ 作者：w夏了夏天 链接：https://www.jianshu.com/p/d276dcde6656 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

龙生   17 Feb 2020
View Details

js 的forEach不支持continue解决

break—-用return false; continue --用return true; 代码如下： Object.keys(flatMenuData).forEach((key) => { if (item.routeName === this.$route.name && !rs.activeItem) { //如果开启了首页不展示左侧菜单，则屏蔽左侧菜单 if(this.inner_sideMenu.opt.notActiveIndex){ if(this.$route.name ==’index'){ return true } } } } ———————————————— 版权声明：本文为CSDN博主「CarryBest」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/carrybest/article/details/89000582

龙生   17 Feb 2020
View Details

Vue项目静态文件之图片的引用

一、前提 工程文件目录 |- mock |- node_modules |- public |- src |-- api |-- assets |-- components |-- router |-- store |-- style |-- test1.scss |-- test1_main.scss |-- utils |-- views |-- static_test |-- test1.scss |-- App.vue |-- main.js 二、背景图的引用 背景图样式直接写在element的style属性里 直接在html模板里，在dom对象的style里加背景图，不起效果，代码如下：

1
2
3
<div style="height:100px; background:url('../../assets/img/bg.png') center top no-repeat">
不起效果。。。
</div>

  背景样式class写在vue文件的style标签里 写法： background: url('图片相对当前的路径') center top no-repeat

1
2
3
4
5
6
7
8
<el-card class="box-card sudoku_item">
  <div slot="header" class="clearfix">
    <span>背景图写在css里</span>
  </div>
  <div class='testBackground'>
    起效果。。。
  </div>
</el-card>

 

1
2
3
4
5
6
<style lang="scss" scoped>
  .testBackground {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }
</style>

  编译后的css：

1
2
3
4
.testBackground[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

  背景样式class写在样式文件里，在vue文件里引入样式文件 样式写法：

1
background: url('图片相对当前vue文件的路径') center top no-repeat

  这个图片路径很重要，url是图片相对于当前vue文件的路径，而不是图片相对于样式文件的路径。 html写法， /views/static_test/test1.vue:

1
2
3
4
5
6
7
8
  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景图写在style file里</span>
    </div>
    <div class='testBackground_file'>
      起效果。。。
    </div>
  </el-card>

  样式写法， /style/test1.scss：

1
2
3
4
  .testBackground_file {
    height: 100px;
    background: url('../../assets/img/bg.png') center top no-repeat
  }

  /views/static_test/test1.vue，引入样式文件写法：

1
2
3
  <style lang="scss" scoped>
  @import "../../style/test1.scss";
  </style>

  编译后：

1
2
3
4
.testBackground_file[data-v-eb2b930e] {
    height: 100px;
    background: url(../img/bg.187d48cd.png) top no-repeat;
}

  背景样式class写在样式文件里，在main.js里引入样式文件 html写法， /views/static_test/test1.vue:

1
2
3
4
5
6
7
8
  <el-card class="box-card sudoku_item">
    <div slot="header" class="clearfix">
      <span>背景图写在style file里</span>
    </div>
    <div class='testBackground_file_main'>
      起效果。。。
    </div>
  </el-card>

  样式写法, /style/test1_main.scss：

1
2
3
4
  .testBackground_file_main {
    height: 100px;
    background: url('../assets/img/bg.png') center top no-repeat
  }

  请注意，url是main.js相对于图片文件的路径。 引入样式文件方法，main.js：

1
2
// style
import './style/test1_main.scss'

[…]

龙生   14 Feb 2020
View Details

css3 字体自动换行第二行缩进一格

我们知道css中text-indent属性可以使每个段落首行开头文字缩进，如缩进2个文字距离样式。 p{ 　　text-indent: 2em; /*em是相对单位*/ } 注：em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。 那如果我们想让第二行缩进一格呢： p { text-indent: -2em; margin-left: 2em; } 设置text-indent: -2em;以后p标签中第一行文字向左偏移，这样第二行开始的文字就等于缩进了， 但是这样设置会导致第一行向左超出div，所以再用margin-left使p标签整体右移即可， 不过也可以用 padding-left:2em ，这样IE8里也能显示。   from:https://www.cnblogs.com/lvyeconghua/p/9375817.html

龙生   14 Feb 2020
View Details

'cross-env' 不是内部或外部命令，也不是可运行的程序

运行: cnpm  i cross-env --save-dev   from:https://www.cnblogs.com/linsx/p/9353429.html

龙生   15 Jan 2020
View Details

JS-iframe高度自适应内容

iframe：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/iframe iframe 内容加载后不改变 使用：onload="this.height=this.contentWindow.document.documentElement.scrollHeight" 例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>自适应高度</h1>
  <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
 
  <h1>非自适应高度</h1>
  <iframe srcdoc='<div style="height: 400px;width: 400px;background: #ddd;"></div>' frameborder="1" scrolling="no" width="100%"></iframe>
</body>
</html>

  iframe 内容加载后改变 定时改变 iframe 高度：

1
2
3
setInterval(()=>{
  document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight;
}, 200);

  例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h1>自适应高度</h1>
  <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe>
 
  <h1>非自适应高度</h1>
  <iframe srcdoc='<button onclick="this.parentNode.appendChild(this.cloneNode())" style="width: 100px; height: 100px;display: block;"></button>' frameborder="1" scrolling="no" width="100%"></iframe>
  <script>
    setInterval(()=>{
      document.querySelector('iframe').height = window.frames[0].document.documentElement.scrollHeight;
    }, 200);
  </script>
</body>
</html>

  from:https://www.cnblogs.com/jffun-blog/p/9774121.html

龙生   15 Jan 2020
View Details
1 … 19 20 21 … 58

Copyright © 2025 Longsheng All rights reserved