TZOF_-CSDN博客

原创用c语言编写前端开发中比例计算px转vw/vh的计算器

用c语言编写前端开发中比例计算px转vw/vh的计算器在写移动端页面的时候为了适配手机型号尺寸的变化，需要多次用到vw和vh相对单位。所以就自己用C语言写了一个简易版计算器。实现功能有：wpx/hpx转vw/vh （wpx元素的宽度，hpx元素的高度。本文中都以简称替代）vw/vh转wpx/hpxvw转vhvh转vw 首先我们需要知道进入哪种功能，定义一个判断进入功能的函数。输入V进入wpx/hpx转vw

2020-11-28 17:05:37 524

原创纯html+css实现点击显示再次点击隐藏并且不联动的多个下拉菜单

纯html+css实现点击显示再次点击隐藏不联动的多个下拉菜单实现不联动的下拉菜单核心思想：input<type=“checkbox”>（复选框）label和input的绑定溢出隐藏和高度的转换checked选择器使用复选框的特性：只有非选中和选中两种状态。再将label和input进行绑定。label的for和input的id进行绑定，可以实现点击label的时候input获取焦点。label和input可以不是紧挨的。<input type="ch

2020-11-27 23:30:30 4019

原创 proxy的特性

proxy的特性proxy作用：拦截对象中某一个所有属性的调用和变换基础格式：new Proxy(obj, {get(){},set(){}});参数一：拦截的对象参数二：方法中get调用时触发 set赋值时触发代码：let obj = { name: 'TZOF', age: 23, msg: 'you think'}obj = new Proxy(obj, { get() { console.log('调用时进入get');

2022-02-11 15:56:31 434

原创 defineProperty的特性

defineProperty的特性defineProperty作用：拦截对象中某一个指定属性的调用和变换基础格式：Object,defineProperty(obj, key, {get(){},set(){}});参数一：拦截的对象参数二：指定对象的属性名参数三：方法中get调用时触发 set赋值时触发代码：let obj = { name: 'TZOF', age: 23, msg: 'you think'}Object.definePropert

2022-02-11 15:17:13 323

原创 javascript数据类型

javascript数据类型基本类型（原始类型）数值（number）字符串（string）布尔值（boolean）nullundefined符号（symbol）引用类型（对象类型）除了基本类型之外的所有值都是引用类型数组（array）对象（object）函数（function）以上三种为常见的引用类型还有：Set、Map、RegExp、Date、Error...

2021-12-23 14:51:54 584

原创 for of和for in的区别

for of和for in的区别for ofof遍历的是元素itemfor inin遍历的是索引index示例代码let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];console.log('of遍历元素item------------------------------------------');for (let i of arr) { console.log(i)}console.log('in遍历索引index------------

2021-12-23 14:19:34 204

原创前端面试题HTML篇

前端面试题HTML篇doctype的作⽤是什么声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。HTML、XML 和 XHTML 有什么区别html(超文本标记语言)——xhtml(可扩展性超文本标记语言)——xml(可扩展性标记语言）h

2021-05-21 09:14:04 120

原创前端面试题Vue篇

前端面试题Vue篇核心问题概述：vue生命周期生命周期是什么？有什么内容？你是怎么用的？vue生命周期是组件从创建到销毁的全部过程，在整个过程中会触发11个生命周期函数。new Vue()初始化创建vue实例，指定vue的模板，通过判断template属性或者render函数方式默认模板。初始化数据，触发将数据与模板结合，触发beforeCreate与created生命周期函数。beforeCreate我用于处理页面过度效果如加载，created用于页面所有的初始化内容。将模板数据

2021-05-21 09:13:55 286

转载 JavaScript深入之从ECMAScript规范解读this

JavaScript深入之从ECMAScript规范解读thisJavaScript深入系列第六篇，本篇我们追根溯源，从ECMAScript5规范解读this在函数调用时到底是如何确定的。前言在《JavaScript深入之执行上下文栈》中讲到，当JavaScript代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性变量对象(Variable object，VO)作用域链(Scope

2021-05-21 09:13:20 154

转载 JavaScript深入之词法作用域和动态作用域

JavaScript深入之词法作用域和动态作用域JavaScript深入系列的第二篇，JavaScript采用词法作用域，什么语言采用了动态作用域？两者的区别又是什么？还有一个略难的思考题，快来看看吧。作用域作用域是指程序源代码中定义变量的区域。作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域。静态作用域与动态作用域因为 JavaScript 采用的是词法作用域，函数的作用域在函数定义

2021-05-21 09:13:15 114

转载 JavaScript深入之执行上下文栈

执行上下文栈js代码执行顺序是什么，大部分人都知道同步执行var foo = function(){ console.log('foo1'); } foo(); // foo1 var foo = function(){ console.log('foo2'); } foo() // foo2然后看以下下面代码 function foo(){

2021-05-21 09:13:09 104

转载 JavaScript深入之闭包

JavaScript深入之闭包JavaScript深入系列第八篇，介绍理论上的闭包和实践上的闭包，以及从作用域链的角度解析经典的闭包题。定义MDN 对闭包的定义为：闭包是指那些能够访问自由变量的函数。那什么是自由变量呢？自由变量是指在函数中使用的，但既不是函数参数也不是函数的局部变量的变量。由此，我们可以看出闭包共有两部分组成：闭包 = 函数 + 函数能够访问的自由变量举个例子：var a = 1;function foo() { console.log(a)

2021-05-21 09:12:53 98

转载 JavaScript深入之变量对象

JavaScript深入之变量对象JavaScript深入系列第四篇，具体讲解执行上下文中的变量对象与活动对象。全局上下文下的变量对象是什么？函数上下文下的活动对象是如何分析和执行的？还有两个思考题帮你加深印象，快来看看吧！前言在上篇《JavaScript深入之执行上下文栈》中讲到，当 JavaScript 代码执行一段可执行代码(executable code)时，会创建对应的执行上下文(execution context)。对于每个执行上下文，都有三个重要属性：变量对象(Variable

2021-05-21 09:12:43 107

转载 JavaScript深入之从原型到原型链

JavaScript深入之从原型到原型链JavaScript深入系列的第一篇，从原型与原型链开始讲起，如果你想知道构造函数的实例的原型，原型的原型，原型的原型的原型是什么，就来看看这篇文章吧。构造函数创建对象我们先使用构造函数创建一个对象：function Person() {}var person = new Person();person.name = 'Kevin';console.log(person.name) // Kevin在这个例子中，Person 就是一个构造函数

2021-05-20 09:13:14 101

转载 jsonwebtoken&&koa-jswt

jsonwebtoken&&koa-jswtjwt作用：鉴权。代替了 cookies sessionjwt特点（1）JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次。（2）JWT 不加密的情况下，不能将秘密数据写入 JWT。（3）JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JWT，可以降低服务器查询数据库的次数。（4）JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者

2021-05-20 09:13:07 299

转载 node后端代理接口

node后端代理接口方式一var http = require('http')var app = http.createServer(function (req, res) { // 访问服务时候执行 if (req.url === '/') { // 服务器向服务发送请求；叫做后端代理服务器；是不存在跨域问题 // http.get() 向另一个服务器发送气请求 // 参一请求地址；请求参数在请求地址上进行拼接的 // 请求完毕

2021-05-20 09:13:02 336

转载 centos上用docker部署环境

centos上用docker部署环境下载docker参考链接相关命令systemctl start docker 或者 service docker start //启动dokcersystemctl stop docker 或者 service docker stop //关闭dockerdocker images //看镜像docker ps -a //看启动的容器docker rmi dsad324(镜像id) //删除镜像docker logs name(容器名称) //查

2021-05-20 09:12:57 93

转载 ssh操作

ssh操作mac本地免密登录远程服务器① mac命令行ssh-keygen -t rsa 或者 ssh-keygen -t rsa -P ''然后一路回车即可，会在~/.ssh目录下生成 id_rsa和id_rsa.pub两个文件，id_rsa为私钥，id_rsa.pub为公钥② 登录远程服务器将mac公钥id_rsa.pub拷贝，并将该文件追加到~/.ssh/authorized_keys文件中，:wq保存③ 设置文件权限chmod 600 ~/.ssh/authorized_keys

2021-05-20 09:12:52 100

转载前端性能优化常用代码

前端性能优化常用代码为什么要做性能优化？性能优化到底有多重要？网站的性能优化对于用户的留存率、转化率有很大的影响，所以对于前端开发来说性能优化能力也是重要的考察点。性能优化的点非常的多，有的小伙伴觉得记起来非常的麻烦，所以这里主要梳理出一条线来帮助记忆。可以将性能优化分为两个大的分类：加载时优化运行时优加载时性能顾名思义加载时优化主要解决的就是让一个网站加载过程更快，比如压缩文件大小、使用CDN加速等方式可以优化加载性能。检查加载性能的指标一般看：白屏时间和首屏时间：白屏时间：指

2021-05-20 09:12:44 433

转载 centox7系统目录介绍

centox7系统目录介绍## /这就是根目录。对你的电脑来说，有且只有一个根目录。所有的东西，我是说所有的东西都是从这里开始。举个例子：当你在终端里输入“/home”，你其实是在告诉电脑，先从/(根目录)开始，再进入到home目录。/root是系统管理员(root user)的目录。对于系统来说，系统管理员就好比是上帝，它能对系统做任何事情，甚至包括删除你的文件。因此，请小心使用root帐号。/bin这里存放了标准的(或者说是缺省的)linux的工具，比如像“ls”、“vi”还有“m

2021-05-20 09:12:37 135

转载使用pm2+nginx部署koa2(https)

使用pm2+nginx部署koa2(https)今天先来写一下关于 koa2 网站运行部署以及 https 配置。目前网站的大致结构是： koa2 的应用跑在 1113 端口，然后 nginx 反向代理到 443 (https) 端口，同时 nginx 将 80 (http) 端口转发到 443 (https) 端口。pm2 配置pm2 是开源的基于Nodejs的进程管理器，包括守护进程，监控，日志的一整套完整的功能，基本是Nodejs应用程序不二的守护进程选择，事实上它并不仅仅可以启动No

2021-05-20 09:12:31 972

转载 node 常见10个错误

node 常见10个错误错误 #1：阻塞事件循环JavaScript在 Node.js (就像在浏览器一样) 提供单线程执行环境。这意味着你的程序不能同时执行两部分代码，但能通过 I/O 绑定异步回调函数实现并发。例如：一个来自Node.js 的请求是到数据库引擎获取一些文档，在这同时允许 Node.js 专注于应用程序其它部分：// Trying to fetch an user object from the database. Node.js is free to run other parts

2021-05-20 09:12:25 890

转载详解 Node.Js 中实现端口重启原理

详解 Node.Js 中实现端口重启原理起源，从官方实例中看多进程共用端口// app.js 自定义我们服务文件const http = require('http') // http模块const server = http.createServer((request, response) => { Math.random() > 0.5 ? aa() : '2' response.end('Hello ')})if (!module.parent) { server.l

2021-05-20 09:12:16 217

转载小程序access_token服务器存储处理

小程序access_token服务器存储处理适合小程序云开发也适合h5开发const rp = require("request-promise"); // 发送请求的const APPID = 'wxf6a3e4dfd65f066b'; // appidconst APPSECRET = 'f27efff51cc46b83ca5eb8f66cbd6903' // 小程序的秘钥const URL = `https://api.weixin.qq.com/cgi-bin/token?g

2021-05-19 21:41:28 491

转载 node 爬虫

node 爬虫1:安装 request cheerio2：cheerio 与jquery 使用基本上一样// 爬虫// 1：先有结构 ---> 获取html 解耦股 request // 2: 获取结构中内容 ---> cheeio ---> 与jq 一致// 3：将内容进行数据重组 var request = require('request');var cheeio = require('cheerio');request('https://www.jian

2021-05-19 21:40:40 113

转载 node代理服务器

node代理服务器1.下载http-proxynpm install http-proxy --save-dev2.在项目下面新建一个app.js文件，内容如下：var http = require('http'), httpProxy = require('http-proxy'); // 新建一个代理 Proxy Server 对象 var proxy = httpProxy.createProxyServer({}); // 捕获异常 pr

2021-05-19 21:39:50 801

转载 vue.js的运行机制

vue.js的运行机制引入vue.js，new Vue()干了什么呢？初始化调用Vue原型上的_init()进行初始化，会初始化vue的生命周期，props，data，methods，computed，watch等，最重要的是利用Object.definedPropty()对data对象里面的属性设置setter和getter函数，实现响应式和依赖收集。挂载组件初始化之后调用$mount挂载组件，如果是运行时编译，即不存在render function但是存在template的情况，需要进行【编

2021-05-19 21:38:27 139

转载 VUE的路由模式

VUE的路由模式hash: 使用 URL hash 值来作路由。默认模式。history: 依赖 HTML5 History API 和服务器配置。abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端abstract模式是使用一个不依赖于浏览器的浏览历史虚拟管理后端。根据平台差异可以看出，在 Weex 环境中只支持使用 abstract 模式。不过，vue-router 自身会对环境做校验，如果发现没有浏览器的 API，vue-router 会自动强制进

2021-05-19 21:31:31 180

转载 webpack配置基础篇

webpack配置基础篇这是一个基础篇；后期会出一个高级篇。系统的webpack教程入门中文官网作为项目依赖安装npm install --save-dev webpack@3.5.5最新版本bug太多，这里我们指定3.5.5版本window下若出现问题（Cannot find module 'webpack/lib/node/NodeTemplatePlugin”），则在命令行窗口输入npm config get prefix,会得到输出路径，添加至环境变量即可键：NODE-PAT

2021-05-19 21:25:59 154

转载 babel &es6垫片 polyfill

babel &es6垫片 polyfillBabel 作用编译es678语法。也可以配合其他工具使用例如：gulp webpac也有Babel 不能编译的可以使用垫片 pollyfill 解决；垫片采用是 es3 进行编写的es6/polyfillPolyfill 可以为旧浏览器提供和标准 API 一样的功能。比如你想要 IE 浏览器实现 Promise 和 fetch 功能，你需要手动引入 es6-promise、whatwg-fetch。而通过 Polyfill.io，你只需要

2021-05-19 21:12:16 517

转载用Yeoman&generator自定义脚手架

Yeoman&generator自定义脚手架制作属于自己的脚手架gennerator 的脚手架方式yo命令官网地址：https://yeoman.io/yoyeoman 制作脚手架命令安装npm install -g yoyo 命令的作用是制作脚手架命令yo --version 查看版本号制作脚手架generater-generator 可以制作脚手架工具npm install -g generator-generator生成脚手架工具yo gennerator-脚手

2021-05-19 11:50:49 117

转载 nodeJs中stream流基本概念与常见api

本节主要介绍 stream 的基本概念，以及常见的使用方式。本节以介绍基本概念为主，其中也会演示部分代码，和 stream 相关的 API 可不必深究，能通过代码看懂语义即可。后续章节会详细介绍这些 API 的原理和使用。开始本节主要内容有：什么是 stream为何要使用 streamstream 流转的过程stream 的常见使用场景什么是 stream在编写代码时，我们应该有一些方法将程序像连接水管一样连接起来 – 当我们需要获取一些数据时，可以去通过"拧"其他的部分来达到目的。这也

2021-05-19 10:44:22 311

转载 nodeJs中的stream流

什么是 stream在编写代码时，我们应该有一些方法将程序像连接水管一样连接起来 – 当我们需要获取一些数据时，可以去通过"拧"其他的部分来达到目的。这也应该是 I/O 应有的方式。 – Doug McIlroy. October 11, 1964stream 并不是 node.js 特有的。从早先的 unix 开始，stream 便开始进入了人们的视野，在过去的几十年的时间里，它被证明是一种可依赖的编程方式，它可以将一个大型的系统拆成一些很小的部分，并且让这些部分之间完美地进行合作。因此，只要有 I/

2021-05-19 10:41:14 172

空空如也

空空如也