qt的博客

前端核心知识深入的html提到 HTML 标签，前端工程师会非常熟悉，因为在开发页面时经常使用。但往往关注更多的是页面渲染效果及交互逻辑，也就是对用户可见可操作的部分，比如表单、菜单栏、列表、图文。其实还有一些非常重要却容易被忽视的标签，这些标签大多数用在页面头部 head 标签内，虽然对用户不可见，但如果在某些场景下，比如交互实现、性能优化、搜索优化，合理利用它们就可以达到事半功倍的效果。常见的meta标签在代码开发中，推荐使用Less code，Less bug ，编写代码阅多，成本越高

1.Promise.all 并行执行promisegetA和getB并行执行，然后输出结果。如果有一个错误，就抛出错误/** * 每一个promise都必须返回resolve结果才正确 * 每一个promise都不处理错误 */const getA = new Promise((resolve, reject) => { //模拟异步任务 setTimeout(function(){ resolve(2); }, 1000) }).then(result

Cocos create是什么轻量、易⽤的跨平台 2D、3D 游戏创作⼯具Cocos Creator 是以内容创作为核心，实现了脚本化、组件化和数据驱动的游戏开发工具。 具备了易于上手的内容生产工作流，以及功能强大的开发者工具套件，可用于实现游戏逻辑和高性能游戏效果。 秉承着 Cocos ⼀贯的开源、易上⼿、⾼性能和跨平台等产品特性，这款全新的游戏引擎旨在成为开发者创作 2D、 3D 游戏的新选择。优势完善的功能特性编辑器全面升级，实时预览，动画预览，插件支持多性能，多渲染后端框架2D

1. 立即执行函数立即执行函数，即Immediately Invoked Function Expression (IIFE)，正如它的名字，就是创建函数的同时立即执行。它没有绑定任何事件，也无需等待任何异步操作：(function() { // 代码 // ... })();**function(){…}**是一个匿名函数，包围它的一对括号将其转换为一个表达式，紧跟其后的一对括号调用了这个函数。立即执行函数也可以理解为立即调用一个匿名函数。立即执行函数最常见的应用场景就是：将var变量的作用域限制于你

需求：需要保证代码在多个异步处理之后执行,我们通常会使用Promise.all(promises: []).then(fun: function);Promise.all可以保证，promises数组中所有promise对象都达到resolve状态，才执行then回调那么会出现的情况是，你在瞬间发出几十万http请求（tcp连接数不足可能造成等待），或者堆积了无数调用栈导致内存溢出.这个时候需要我们对HTTP的连接数做限制。实现//promise并发限制class PromisePool {

了解HTML5 details, summary默认交互行为<details>标签在Chrome，Firefox等浏览器下默认是有展开收起行为的，例如下面HTML：<details> <summary>折叠效果</summary> <p>这里具体描述，标签相对随意，例如这里使用的&lt;p&gt;标签。</p></details>只显示了<summary>标签内

XSS攻击XSS(Cross SiteScripting)，跨站脚本攻击。XSS是常见的Web攻击技术之一.所谓的跨站脚本攻击指得是:恶意攻击者往Web页面里注入恶意Script代码，用户浏览这些网页时，就会执行其中的恶意代码，可对用户进行盗取cookie信息、会话劫持等各种攻击.例如：在表单提交时，输入js代码<script>alert(“hey!you are attacked”)</script>等或是增加提交请求时的网页，盗取信息解决方法：输入过滤，对输入的数

遇到js控制radio选中和切换的问题，之前使用的是切换checked属性但是这个属性有个问题，就是用js给选中radio的赋值，使用的$().attr("checked",true);当切换的时候，把name相同的radio的attr(“checked”,false)，再把要选中的radio.attr(“checked”,true)；出现问题，每个radio只能被赋值一次，当第二次给他赋值的时候，赋不上值后来发现，checkbox在这种情况下会出现一样的问题w3cshool上关于这个属性的介绍

1. js实现查找字符串数组中的最长公共前缀编写一个函数来查找字符串数组中的最长公共前缀。如果不存在公共前缀，返回空字符串 “”。输入: [“flower”,“flow”,“flight”] 输出: “fl”思路：是很直观的方法，记录数组中第一个字符串的每个字符，依次判断数组中的每个字符串是否都有这个字符，使用every方法，如果返回false，说明该字符不是公共前缀了，不再判断。 var longestCommonPrefix = function(arr) { i

1. 通信基本原理网络通讯模型，http协议，tcp等相关协议主要解决网络之间通信通信必要条件主机之间需要有传输介质(光纤，网线，蓝牙，wifi等)，保障主题之间连通状态主机上必须有网卡设备，网卡可以完成信号的调制与解调制，把二进制转为低电压的过程就是调制自己之间需要协商网络速率2. 网络通讯方式常见通讯方式交换机通讯路由器通讯如何建立多台主机互联？不可能去买多个网卡，就需要使用交换机进行通过交换机进行连接多台主机，就形成一个网络，就是局域网如何定位局域网其他的主机

1、已知如下对象，请基于es6的proxy方法设计一个属性拦截读取操作的例子，要求实现去访问目标对象example中不存在的属性时，抛出错误：Property “$(property)” does not exist （2018 今日头条）// 案例代码const man = { name:'jscoder', age:22}// 补全代码const proxy = new Proxy(...)proxy.name // "jscoder"proxy.age // 22prox

概述Node.js 可以做什么？轻量级、高性能的web服务前后端Javascript同构开发便捷高效的前端工程化学习目标Node.js的架构和运行过程Node.js的异步IO和事件驱动Node.js的单线程Node.js实现API服务Nodejs核心模块及API使用1. Nodejs的架构首先最上层的内置核心模块，在这一层是暴露了相应的JS功能接口，提供开发者直接调用中间层是找到对应c++功能实现的 Bindings ，是需要v8引擎配合实现最下层是v8引擎除了构建nod

Angular 企业实战开发1. 概述Angular 是一个使用 HTML、CSS、TypeScript 构建客户端应用的框架，用来构建单页应用程序。Angular 是一个重量级的框架，内部集成了大量开箱即用的功能模块。Angular 为大型应用开发而设计，提供了干净且松耦合的代码组织方式，使应用程序整洁更易于维护。Angular Angular 中文 Angular CLI2. 架构预览2.1 模块Angular 应用是由一个个模块组成的，此模块指的不是ESModule，而是 Ng

1.通过该项目，请简要说明 typescript 比 javascript 的优势在哪？语言层面：• JavaScript 和 TypeScript 都是 ECMAScript 的具体实现• TypeScript 是静态类型，而 JavaScript 是动态类型• TypeScript 扩展了 JavaScript 并且完全包容 JavaScript• 说白了就是给 JavaScript 增加了类型系统• 执行层面： • TypeScript 需要编译 • JavaScript 不需要编译（除

性能优化1.CDN的用法是什么？什么时候用到2.如何优化dom操作的性能。3.单页面应用有什么SEO方案？相关问题正则表达式.发展及应用：前期，正则表达式被广泛地应用到各种UNIX或类似于UNIX的工具中，如：Perl内部集成了正则表达位，在主流的计算机开发语言中（delphi、Scala、PHP、C#C++JavascriptRuby以及Python正则表达式的特点是：1.灵活性、逻辑性和功能性非常强2.可以迅速地用极简单的方式达到字符串的复杂控制3.对于刚接触的人来说，比较晦

1．基本数据构：（数组、对列、链表、堆、二叉树、嘻哈表等等）数组：数组是最最基本的数据结构，很多语言都内置支持数组。数组是使用一块连续的内存空间保存数据，保存的数据的个数在分配内存的时候就是确定的。（如图所示）链表：存储的数据在地址空间上可连续，可不连续，链表中的每一个节点都包括数据和指向下一个地址的指针，查找数据的时间复杂度为O(n)，方便数据的增删。栈：栈是一种先入后出的逻辑结构，每次加入新的元素和拿走元素都在顶部操作。对列：是一种先入后出的逻辑结构，对于元素的操作分别在队头和队尾，

1. 对node.js有没有了解node是运行环境, 也是个新的语言…它本身是基于google的javascriptv8引擎开发 的,因此在编写基于它的代码的时候使用javascript语言. 但是又不同于传统概念的javascript…它的服务端功能以及部分客户端功能必须在服务端运行, 所以它实际上是一种在服务端的开发+运行的javascript语言. 有一点类似于Perl+PHP或者Python的概念. 它本身可以作为HTTPServer, 也可以当作TCPServer用.2.Expr

为什么会有跨域的问题出现？跨域,指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制，防止他人恶意攻击网站比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过JavaScript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。前端安全XSS,CSRF这些是什么？xss：跨站脚本攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie

js的基本类型有哪些？引用类型有哪些？null和undefined的区别。如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）。从原型入手，Array.prototype.isPrototypeOf(obj);也可以从构造函数入手，objinstanceofArray根据对象的class属性(类属性)，跨原型链调用toString()方法。Array.isArray()方法。isNaN（）是一个函数，用isNaN判断一个变量，返回一个Boolean值。若返回的值为f

1.邮箱export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}2.手机号码export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}3.电话号码export const isPhone = (s) => { re

第一课 HTML5结构HTML5 是新一代的 HTMLDTD声明改变 < !DOCTYPE html>新的结构标签注意的地方 ie8 不兼容常用的一些新的结构标签增加标签：1、结构标签（1）section：独立内容区块，可以用h1~h6组成大纲，表示文档结构，也可以有章节、页眉、页脚或页眉的其他部分；（2）article：特殊独立区块，表示这篇页眉中的核心内容；（3）aside：标签内容之外与标签内容相关的辅助信息；（4）header：某个区块的头部信息/标题；.

判断是否为数组 判断数组类型的方法： var arr=[1,2,3];1.检测类的instanceof console.log(arr instanceof Array) ;true为数组2.判断数组的__proto__属性和Array的prototype是否相等 console.log(Array.prototype==arr.__proto__);//true为数组3.判断构造函数constructorconsole.log(arr.constructor===Array);//

1. React 介绍React 是一个用于构建用户界面的 JavaScript 库，它只负责应用的视图层，帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面，它是一种 JavaScript 语法扩展。在 React 代码执行之前，Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语法糖，让开发人员使用更加舒服的代码构建用户界面。利用 JSX 编

环境：vue + TS 上传视频 + 上传到阿里云主要处理前端在vue下上传视频使用的是阿里云的视频点播服务需要后台去申请一个开发API,请求阿里云的接口访问控制有了开发视频的token，供给前端前端去请求阿里云存储video.vue<template> <div class="container"> <el-card> <div slot="header"> <div>课程：</d

环境：在vue + TS 中使用富文本编辑器markdown文本编辑器更加适合开发者使用普通用户更适合类似word的使用方式，所见即所得推荐使用的富文本编辑器ckeditor5，内置插件和扩展性非常好quillmedium-editor，比较老牌wangEditor，近几年国产的ueditor，百度开发，但是不再维护tinymce使用时候可以查看是否还在维护，在根据自己的应用场景，富文本编辑器是个有优缺点，列出的都是比较稳定的使用wangEditor官网： www.wangEdi

一 、 搭建项目架构使用vue-cli创建项目vue create edu-boss-fed使用自定义选项，选择babel,ts,route,vuex,css预处理，linter使用class风格描述组件选择ts和babel编译不选择history路由模式选择预处理器Sass，建议选择 dart-sass选择ESlint单独存放个自的配置文件进入项目中，npm run serve 启动，默认打开8080地址加入git 版本管理创建远程仓库本地代码提交远程仓库生成git本地仓

Partial<T> 是怎么实现的type Partial<T> = { [P in keyof T]?: T[P] }keyof：获取一个类型中所有的成员名称RequiredPick：从一个已知类型中挑选需要的成员字段，形成新的类型Record：快速创建一个字典（键值对集合）类型typeof：跟 JS 里的 typeof 没有关系interface 与 typeinterface A { name: string age: number}type

1）基本操作安装 @vue/cli 最新版本使用 @vue/cli 创建一个项目（不选 TypeScript)使用 @vue/cli 安装 TypeScript 插件2）通过 Git Diff 对比介绍使用 TypeScript 的 Vue.js 项目差异安装了 @vue/cli-plugin-typescript 等插件shims-vue.d.ts 文件的作用shims-tsx.d.ts 文件的作用定义 Vue 组件的几种不同方式写法 1：使用 Options APIs组件仍

为什么使用虚拟DOM手动操作DOM比较麻烦，而且需考虑兼容性，但是随项目复杂度，dom操作更复杂为了简化DOM的复杂操作出现mvvm框架，解决视图-状态的同步问题为简化视图操作可使用模板引擎，但是模板没解决跟踪状态变化的问题，所以使用Virtual dom VirtualDom好处是状态改变不需要更新DOM，只需要虚拟树描述，Virtual DOM内部将有效更新dom什么是虚拟DOMVirtual DOM 就是 普通的JS对象，以对象的结构描述DOM结构因为不是真实DOM节点，所以叫做虚

自动编译watch工作模式监听文件变化，自动从新打包启动命令时 yarn webpack --watch自动刷新浏览器BrowserSyncbrowser-sync dist --files “**/*”操作麻烦开发效率低webpack Dev Server提供用于开发的HTTP Server集成了自动编译 和自动刷新浏览器等功能yarn add webpack-dev-server --devyarn webpack-dev-server为提高工作效率，并没有将打包结果写

测试性能JSperf使用流程使用github账号登录填写个人信息填写详细的测试用例信息（title，slug）准备填写代码（dom操作经常使用）填写必要的setup与reardown代码填写测试代码片段慎用全局变量为什么全局变量定义在全局执行上下文，是所有作用域链的顶端全局执行上下文一直存在于上下文执行栈，直到全局退出如果某个举报作用域出现了同名变量则会遮蔽或污染全局 var i,str=""; for(i=0;i<1000;i++){ str += i }

强类型和弱类型（类型安全）静态类型和动态类型class Main{ static void foo(int num){ System.out.println(num); } public static void main(String[] args){ Main.foo(100) // ok Main.foo("100") // ok Main.foo(parseInt("100")) // oK }}

// Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象let _Vue = nullexport default class VueRouter { // 静态方法， 注意参数是 Vue构造器 static install(Vue){ // 1. 判断是否已经被注册过（单例模式） if(VueRouter.install.installed){ retur

为什么使用PerformanceGC的目的是为了实现内存空间的良性循环良性循环的基石是合理使用时刻关注才能确定是否合理Performance提供多种监控方式通过Performance时刻监控内存打开浏览器输入目标网站进入开发人员工具面板，选择性能开启录制功能，访问具体界面执行用户行为，一段时间后停止录制分析界面中记录的内存信息内存问题的体现界面出现延迟加载或经常性暂停界面持续性出现糟糕的性能界面的性能随着时间延迟越来越差监控内存的方式标准内存泄漏：是内存的持续升高内存膨胀

V8是一款主流的Javascript的执行引擎V8采用即时编译V8内存设限 1.5GV8垃圾回收策略采用分代回收的思想内存分为新生代，老生代V8中常见GC算法分代回收空间复制标记清楚标记整理标记增量V8如何回收新生代对象V8内存空间一分为二小空间用于存储新生代对象（32M| 16M）新生代指的是存活时间较短的对象新生代对象回收的实现回收过程采用复制算法+标记整理新生代内存区分为二个等大小空间使用空间为From，空闲空间为To 活动对象存储于From空间标记整

实现 new先用文字描述一下 new 的实现过程新定义一个 json 对象对象 继承 构造函数的原型链将构造函数的 this 指向这个对象根据构造函数的返回值类型返回结果， function myNew(fn) { let obj = {} obj = Object.create(fn.prototype) let args = Array.prototype.slice.call(arguments, 1) // 获取除去fn之外的参数 let resu

Vue Router 实现原理Vue Router基础Hash模式 和 history模式模拟实现自己的Vue Router基本使用在使用vue创建项目时，使用Rouer选项自动安装依赖项import Vue from 'vue'import VueRouter from 'vue-router'import Index from '../views/Index.vue'// 1. 注册路由插件Vue.use(VueRouter)// 路由规则const routes = [

概述主流的前端开发范式之一主流的代码组织方式，划分模块，单独维护，降低成本模块化规范模块化标准 + 模块化加载器CommonJS规范 node提出的一种约定一个文件是一个模块每个模块都有单独的作用域通过module.exports导出成员通过require函数载入模块CommonJS是以同步模式加载模块，浏览器端支持不好AMD(Asynchronous Module Definition) 异步的模块定义规范Require.js 实现了AMD规范，是一种模块加载

JSBench 的使用堆栈中的JS执行过程 let a = 10;function foo(b) { let a=2; function baz(c) { console.log(a + b +c) } return baz}let fn = foo(2)fn(3) // 7减少判断层级// function doSomething(part,chaapter) {// const parts= [1,2,3,

一、this指向this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，例如对象中的方法，该方法被哪个对象调用了，那么方法中的this就指向该对象默认全局环境下function a(){ var user = "window"; console.log(this.user); //undefined console.log(this); //Window}a();函数上下文调用函数直接调用普通函数内部的this分两种情况，严格