web前端

在用户离开页面时可靠地发送 HTTP 请求

HTTP在某些情况下,当用户执行诸如导航到不同页面或提交表单之类的操作时,我需要发送带有一些数据的请求以进行记录。考虑这个在点击链接时向外部服务发送一些信息的人为示例:

<a href="/some-other-page" id="link">Go to Page</a>

<script>
document.getElementById('link').addEventListener('click', (e) => {

使用JavaScript动态变量名

在编程中,动态变量名称在脚本中没有硬编码的特定名称。它们使用来自其他来源的字符串值动态命名。JavaScript 中很少使用动态变量。但在某些情况下,它们很有用。与 PHP 不同,JavaScript中没有动态变量名的特殊实现。但是通过使用其他一些方法也可以获得类似的结果。在 JavaScript 中,可以使用下面给出的 2 种方法/方式来实现动态变量名称。

eval(): eval() 函数计算在参数中表示为字符串的 JavaScript 代码。字符串作为参数传递给 eval()。如果字符串表示表达式,则 eval() 计算表达式。在 eval() 中,我们传递一个字符串,其中声明了变量valuei ,并为每次迭代分配了i的值。eval() 函数执行此操作并使用分配的值创建变量。下面给出的代码实现了使用 eval() 创建动态变量名。

例子:

<script>
    var k = 'value';
    var i = 0;
    for(i = 1; i < 5; i++) 

CSS实现文字垂直居中的7种方法

一、问题描述: 当高度固定或不固定时,单行或多行文本难以实现垂直居中;

二、解决方法:

1、使用line-height属性,将line-height设置与元素高度等高。

局限性:只适用于单行文本,局限性大。

代码:

.box {
	height: 100px;
	line-height: 100px;
	white-space: nowrap;
}

2.padding:设置相等的上下padding值。

局限性:有高度限制时不能垂直居中。

代码:

.box{
	padding-top: 30px;
	padding-bottom: 30px;
}

3.绝对定位居中:top:0; bottom:0; left:0; right:0; margin:auto;

npm install和npm run的过程

npm 是什么

npmnode pakage manage) 第三方包的管理器,并且是 Node.js 平台的默认包管理工具。

npm 做什么

通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

例子:

  • 在配置webpack的时候 需要的很多第三方模块(模块占个坑) 就需要通过npm install 去安装
  • 在实际项目工作中,项目比较庞大就需要做项目的拆分,但很多基础工具方法,和功能,都可以公用的,我们可以 将公共代码放到自己公司提供的对应的私库上,日后根据业务的拓展 只要 去更新库 ,各个项目 去更新对应版本号重新install就能实现代码同步更新,从而避免重复性工作

npm inatsll的过程

  • 先检查node_modules 目录下是否存在 如果不存在(会检查电脑上/usr/local/bin下的压缩包) 则继续下面操作
  • npm 向 registry查询模块压缩包的网址
  • 下载压缩包,存放到全局对应的/.npm目录下
  • 同时解压压缩到当前项目的node_modules目录下

npm install的几种方式的区别

写给后端程序员的前端开发流程与正确姿势.

写给后端程序员的前端开发流程与正确姿势.

关键词:node.js,npm,webpack,laravel mix,package.json,js代码压缩.

一直以来,后端程序员可能出于对前端的不太熟悉,尤其对于现代的前端工程化更不太熟悉.一看到nodejs,npm等名词就发懵.但后端程序员在实践中还是多多少少会接触前端的.可能你需要修改别人的前端代码,或自己开发前端代码(您可能是全栈程序员了).

想必你修改或写前端代码,也和我以前一样,直接从网上找模板(包括html,css.js)修改成自己样式.或自己从头写html.css.js.

不管是哪种类型,你一般是直接修改Html页面里引入的css.js吧:).

你可能也有些困惑 ,怎么别人的js代码看着像加密过似的,不知如何下手修改?

而你自己从头写的css,js则会直接被引入到Html页面里.

css,js代码里有一些注释,还有一些空格,空行等内容 ,直接在html页里引用是其实是没有经过压缩(去空格,去空行,去注释)的代码.会加大网络传输量,导致加载会慢一些.

而且,你写的js.没有经过压缩(去空格,注释,变量,函数重命名为短名称等),导致别人可能会偷盗你的代码.

如果你压缩了js后,再发布你的代码 ,而你的js看起来像经过加密一样,别人也基本看不懂你的代码了.

而你要做的就是开发代码与发布代码相分离.

本教程教你使用laravel-mix进行正确前端开发(注:laravel-mix最初是用于php框架laravel的前端资源编译工作 ,现在可用于任何语言的任何前端项目).

 

你项目的目录结构应该如下:

my-app/

----------index.html

-----------src/

----------------app.css

----------------app.js

-----------dist/

-----------------app.js

-----------------app.css

 

其中…

                    

npm install和npm run的过程

npm 是什么

npmnode pakage manage) 第三方包的管理器,并且是 Node.js 平台的默认包管理工具。

npm 做什么

通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

例子:

  • 在配置webpack的时候 需要的很多第三方模块(模块占个坑) 就需要通过npm install 去安装
  • 在实际项目工作中,项目比较庞大就需要做项目的拆分,但很多基础工具方法,和功能,都可以公用的,我们可以 将公共代码放到自己公司提供的对应的私库上,日后根据业务的拓展 只要 去更新库 ,各个项目 去更新对应版本号重新install就能实现代码同步更新,从而避免重复性工作

npm inatsll的过程

  • 先检查node_modules 目录下是否存在 如果不存在(会检查电脑上/usr/local/bin下的压缩包) 则继续下面操作
  • npm 向 registry查询模块压缩包的网址
  • 下载压缩包,存放到全局对应的/.npm目录下
  • 同时解压压缩到当前项目的node_modules目录下

npm install的几种方式的区别

package.json 文件详解

前言

随着前端由多页面到单页面,由零散的文件到模块化开发,在一个完整的项目中,package.json 文件无处不在。首先,在项目根目录会有,其次在 node_modules 中也频现。那么这个文件到底是干嘛的,又有什么作用,今天给大家揭晓。

一、package.json 文件作用

package.json 文件其实就是对项目或者模块包的描述,里面包含许多元信息。比如项目名称,项目版本,项目执行入口文件,项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。

二、package.json 文件创建

package.json 文件创建有两种方式,手动创建或者自动创建。

  • 手动创建
    直接在项目根目录新建一个 package.json 文件,然后输入相关的内容。
  • 自动创建
    也是在项目根目录下执行 npm init,然后根据提示一步步输入相应的内容完成后即可自动创建。

三、package.json

在html5页面上播放 RTSP 的 7 种方法

在页面上流式传输 RTSP 的 7 种方法

在页面上流式传输 RTSP 的 7 种方法

在本文中,我们展示了 7 种不同的技术方法,用于在浏览器的网页上显示来自支持 RTSP 的 IP 摄像机的视频流。

通常,浏览器不支持 RTSP,因此使用中间服务器为浏览器转换视频流。

 

方法 1 – RTMP

浏览器不支持 RTMP 协议,但猜猜谁支持?忠实的老版Flash Player,虽然不支持所有浏览器,但运行良好,因此可以显示视频流。

Flash播放器

播放器的代码基于 Action Script 3 构建,如下所示:

1
2
3
var nc:NetConnection = nc.connect("rtmp://192.168.88.59/live",obj);
var subscribeStream:NetStream =