10 2020 档案
摘要：URL模块是Nodejs的核心模块之一，用于解析url字符串和url对象 1.url.parse(url_str[,boolean]) url.parse(url_str[,boolean])用于将url字符串转为对象格式。该方法有两个参数，第一个参数为url字符串，第二个为布尔值，可以不写，表示是
阅读全文
摘要：Multer是一个Node.js中间件，用于处理 multipart/form-data 类型的表单数据，主要用于文件上传，注意：Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。 Multer会自动添加一个body对象及file或files对象到 expre
阅读全文
摘要：moment、dayjs、date-fns 是三个较为广泛使用的时间库。 安装 三个库的安装分别如下： npm install moment npm install dayjs npm install date-fns 在页面引入： <script src="/node_modules/moment
阅读全文
摘要：测试的意义是什么？ 在编程术语中，测试意味着检查我们的代码是否符合某些期望。例如：一个名为 “ transformer” 的函数应在给定某些输入的情况下返回期望的输出。 测试类型很多，但简单来说测试分为三大类： 单元测试 集成测试 UI 测试 在本 Jest 教程中，我们将仅介绍单元测试，但是在本文
阅读全文
摘要：JavaScript怎么调用函数？其实在JavaScript中函数有4种调用方式。下面本篇文章就来给大家介绍一下JavaScript函数的4种调用方式，希望对大家有所帮助。 JavaScript函数有4种调用方式，每种方式的不同在于 this 的初始化。 this 关键字 this 是保留关键字。一
阅读全文
摘要：数组是 js 最常见的一种数据结构，咱们在开发中也经常用到,在这篇文章中,提供一些小技巧,帮助咱们提高开发效率。 1. 删除数组的重复项 var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grap
阅读全文
摘要：构造函数创建对象 我们先使用构造函数创建一个对象： function Person() { } var person = new Person(); person.name = 'name'; console.log(person.name) // name 在这个例子中，Person就是一个构造函
阅读全文
摘要：首先看call和apply，第一个参数就是改变的this指向，写谁就是谁，如果是非严格模式下，传递null或undefined指向的也是window，二者唯一的区别是执行函数时，传递的参数方式不同，call是一个个的传递，apply是把需要传递的参数放到数组中整体传递。 ·func.call([co
阅读全文
摘要：Array.prototype.flat() 在Array的显示原型下有一个flat方法，可以将多维数组，降维，传的参数是多少就降多少维 let arr = [1, [2, 3, [4, 5, [12, 3, "zs"], 7, [8, 9, [10, 11, [1, 2, [3, 4]]]]]]]
阅读全文
摘要：if else 是我们写代码时，使用频率最高的关键词之一，然而有时过多的 if else 会让我们感到脑壳疼，例如下面这个伪代码： 是不是很奔溃？虽然他是伪代码，并且看起来也很夸张，但在现实中，当我们无数次 review 别人代码时，都会发现类似的场景，那么我们本文就来详细聊聊，有没有什么方法可以让
阅读全文
摘要：this的指向是JavaScript中一个经久不衰的热门问题，在不同的场景下指向规则也不同，在此本文总结了this在不同场景下的指向规则以及ES6中新增的箭头函数中this的指向问题。 关于this this提供了一种更优雅的方式来隐式"传递"一个对象引用,因此可以将API设计得更加简洁并且易于复用
阅读全文
摘要：前言 纯函数 是一个常见的概念，在日常工作中也经常会遇到，它其实非常简单，今天我们来了解一下它的好处以及为什么要使用它。 两个特点 一个函数，如果符合以下两个特点，那么它就可以称之为 纯函数： 对于相同的输入，永远得到相同的输出 没有任何可观察到的副作用 相同输入得到相同输出 我们先来看一个不纯的反
阅读全文
摘要：良好的设计模式可以显著提高代码的可读性，降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。 今天先从最简单的一个入手：单例模式。 文中的示例代码会使用 ES6 语法，尽量简化不必要的细节 概念 单例模式（Singleton）属于创建型的设计模式，它限制我们只能创建单一对
阅读全文
摘要：方法（method）是通过对象调用的JavaScript函数。也就是说，方法也是函数，只是比较特殊的函数。JavaScript中的匿名方法即匿名函数是没有函数名称的函数。 JavaScript中匿名函数的使用： 一、在Javascript定义一个函数一般有如下三种方式： 函数关键字(function
阅读全文
摘要：前言 关于模块化，最直接的表现就是我们写的 require 和 import 关键字，如果查阅相关资料，就一定会遇到 Commonjs 、CMD AMD 这些名词，以及 Requirejs、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范，Sea.js 遵循
阅读全文
摘要：V8 Object 内存结构与属性访问 上世纪九十年代，随着网景浏览器的发行，JavaScript 首次进入人们的视线。之后随着 AJAX 的大规模应用与富客户端、单页应用时代的到来，JavaScript 在 Web 开发中占据了越来越重要的地位。在早期的 JavaScript 引擎中，性能越发成为
阅读全文
摘要：计时器setTimeout是我们经常会用到的，它用于在指定的毫秒数后调用函数或计算表达式。 语法：setTimeout(code, millisec, args); 注意：如果code为字符串，相当于执行eval()方法来执行code。 当然，这一篇文章并不仅仅告诉你怎么用setTimeout，而且
阅读全文
摘要：近年来，函数式编程（Functional Programming）已经成为了JavaScript社区中炙手可热的主题之一，无论你是否欣赏这种编程理念，相信你都已经对它有所了解。即使是前几年函数式编程尚未流行的时候，我已经在很多的大型应用代码库中发现了不少对于函数式编程理念的深度实践。函数式编程即是在
阅读全文
摘要：JavaScript继承概念：js是基于对象的，他没有类的概念，所以实现继承，需要使用js的原型prototype机制或者用applay和call方法实现。 1、原型链继承： 即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child，从而实现了继承 为了让子
阅读全文
摘要：程序的运行需要内存。只要程序提出要求，操作系统或者运行时就必须供给内存。所谓的内存泄漏简单来说是不再用到的内存，没有及时释放。为了更好避免内存泄漏，我们先介绍JavaScript垃圾回收机制。 在C与C++等语言中，开发人员可以直接控制内存的申请和回收。但是在Java、C#、JavaScript语言
阅读全文
摘要：如今，代码质量分析和审核已成为每个企业的基本流程。随着开源代码库使用的增加，安全性和代码质量对于构建高质量软件至关重要。不良的代码不仅会影响代码的可维护性，而且还会在某些情况下影响其性能。此外，更好的代码质量还有助于企业将来减少维护和降低成本。幸运的是，有很多审核和管理代码的工具，为开发者和程序员提
阅读全文
摘要：好代码的用处 实际上本书建立在一个相当不可靠的前提之上：好的代码是有意义的。我见过太多丑陋的代码给他们的主人赚着大把钞票，所以在我看来，软件要取得商业成功或者广泛使用，“好的代码质量”既不必要也不充分。即使如此，我仍然相信，尽管代码质量不能保证美好的未来，他仍然有其意义：有了质量良好的代码以后，业务
阅读全文
摘要：世界上唯一不变的就是变化的存在。 时代的发展变化在互联网革命后变得更加迅猛——人工智能刚刚热了几年，虚拟现实、大数据和金融科技等一波波新技术概念不断涌现，让我们眼花缭乱。 在不断鼓噪的创新颠覆中，莫名的焦虑感笼罩着所有人，我们都害怕被时代抛下。尤其是作为产品经理的我们，时刻保持对新事物的好奇心是优秀
阅读全文
摘要：网站的关键词优化是一个漫长的工作，而且需要企业的人员经常分析关键词。而有的企业在短期没看到效果就不继续优化，导致网站的关键词没靠前的排名，网站的关键词是需要优化很长时间，大概需要一个月到三个月才能看到网站关键词排名的变化。那么，关键词的优化怎么调整才能让网站排名靠前? 大家怎样进行网站关键词优化才能
阅读全文
摘要：http传输如下： 此时信息是明文传输，如果信息被人截获，则能看到里面的内容，极不安全 那就需要对内容加密，过程如下： 浏览器生成一个秘钥 浏览器向服务器请求公钥 服务器向浏览器发送它的公钥 浏览器接收服务器发送的公钥，并使用公钥加密随机生成的对称密钥，发送给服务器 服务器接收浏览器发送的数据，用自
阅读全文
摘要：请问，跟非常典型的程序猿约会，要事先准备文档发送给对方吗？比如：我比较喜欢AA制，喜欢咖啡馆、书店和可以一起跑步的公园，不喜欢吵闹的地方，不需要送回家（当然如果聊得来顺路聊天也是不错的），基本都爱吃尤其是辣的和日料（但不要约会去沙县小吃）啥的 >.<约会对象貌似很可爱也很帅，但我怕他木讷，get不到
阅读全文
摘要：概念说明 用户空间与内核空间 现在操作系统都是采用虚拟存储器，那么对32位操作系统而言，它的寻址空间（虚拟存储空间）为4G（2的32次方）。操作系统的核心是内核，独立于普通的应用程序，可以访问受保护的内存空间，也有访问底层硬件设备的所有权限。为了保证用户进程不能直接操作内核（kernel），保证内核
阅读全文
摘要：本篇介绍一些提高生产力的工具，包括网站、浏览器插件、VSCode插件和命令行工具~ 网站篇 Bundlephobia 如果你想要安装一个新的依赖，这个网站可以查看这个依赖的大小、是否支持 tree-shaking 等各项指标。（仅限 npm 包哈） https://bundlephobia.com/
阅读全文
摘要：众所周知，人工智能、AI、大数据等技术的出现，掀开了智能时代的新篇章，众多专家及各领域精英纷纷预测未来是属于人工智能的时代。那么近年来同样火热的前端开发，在人工智能时代能做些什么呢? 要完成一个完整的人工智能项目，三种东西是不可或缺的：算法，数据和工程。 而前端在这三个方向中，最容易参与进去，同时也
阅读全文
摘要：以下是匿名用户的回答： 毕业一年，工资9.5k，加上补贴奖励， 税后10.5k左右 。 1. html、css、js基础自我感觉良好。语义化、写点css3动画、写写原生js等。 2. 在学校期间就学了前端用jq、bootstrap做过一些项目，学了vue基础，能简单搭个vue项目。 3. webpa
阅读全文
摘要：restful是一种架构风格，其核心是面向资源，更简单；而webService底层SOAP协议，主要核心是面向活动；两个都是通过web请求调用接口 RESTful是什么： 首先要了解什么是REST，REST就是(REpresentational State Transfer单词太长记不住就对了）是一
阅读全文
摘要：作为码农，工作以来我一直在断断续续思考和实践主动学习这件事，不过效果一直不尽人意，直到最近，我感觉状态有所改善，偶有所得。所以，在这篇文章中，我整理了 我对码农主动学习这件事的感悟以及可能有用的主动学习的方法 ，抛砖引玉，无论你是同意或是不同意，欢迎和我交流，对我意义重大。 郑重声明：本文内容不保证
阅读全文
摘要：前言 兄弟们,你们还在边喝营养快线边看 pornxxx 吗 ? 休息一下吧,营养跟不上啦,跟我一起学习吧,一起"科学"上网 ! 1. Codewars https://www.codewars.com Codewars 提供了大量由他们自己的社区提交和编辑的编程挑战,在这里,你可以使用多种编程语言像
阅读全文
摘要：网站主题和内容应该是最先要考虑的。这决定了你后面很多的事情和选择及操作。我大致将其分为三个类型： 1 、 纯原创，比如个人博客。那么要注意的，就是不要写成生活流水记账，而是要有核心主题，所有文章，创业，内容都是为这个主题服务。然后再想办法去引流，宣传，推广。好处是，既然是原创，如果你的内容不是太差，
阅读全文
摘要：漏洞原理 HTTP慢速攻击也叫slow http attack，是一种DoS攻击的方式。由于HTTP请求底层使用TCP网络连接进行会话，因此如果中间件对会话超时时间设置不合理，并且HTTP在发送请求的时候采用慢速发HTTP请求，就会导致占用一个HTTP连接会话。如果发送大量慢速的HTTP包就会导致拒
阅读全文
摘要：当进程要获取某些资源（例如从网卡读取数据）的时候，但资源并没有准备好（例如网卡还没接收到数据），这时候内核必须切换到其他进程运行，直到资源准备好再唤醒进程。 waitqueue (等待队列) 就是内核用于管理等待资源的进程，当某个进程获取的资源没有准备好的时候，可以通过调用 add_wait_que
阅读全文
摘要：给每个 Commit 签名 作为个人开发者，给自己的每个 Commit 签名，可能有点多此一举（或许会有这么想的人），但是在一个多人合作开发的项目里，管理员可以要求所有的项目成员，都必须签名自己的 Commit，不接受未经签名的 PR，那就产生了一定的意义（虽然是什么意义我还没想得太明白）。 上面图
阅读全文
摘要：1.Socket和TCP/IP的关系 "All problems in computer science can be solved by another level of indirection." 为满足应用层需求，系统对TCP/IP层进行细节屏蔽和抽象，Socket层就相当于TCP/IP和应用
阅读全文
摘要：原则上API接口设计一般出现在开发的详细设计中，但是随着诸多公司建立开放平台，产品经理也逐渐需要能理解API接口，尤其是做平台性的产品，还要学会定义接口。本文就关于产品经理在设计接口中需要定义什么、需要注意什么来展开陈述。 看到人人都是产品经理社区已经有关于API接口的相关介绍，因此本文就不做过多的
阅读全文
摘要：近年来，Web 应用在整个软件与互联网行业承载的责任越来越重，软件复杂度和维护成本越来越高，Web 技术，尤其是 Web 客户端技术，迎来了爆发式的发展。 1.用Node做中间层的前端工程化方案2.webpack、Rollup 这样的打包工具；Babel、Postcss 这样的转译工具3.前端三架马
阅读全文
摘要：1. 三元运算符 事例1 带有IF的代码： function saveCustomer(customer) { if (isCustomerValid(customer)) { database.save(customer) } else { alert('customer is invalid')
阅读全文
摘要：1.为什么分析asap Promise 异步执行是通过 asap 这个库来实现的。所以为了进一步深入 Promise 异步执行的原理，深入分析一下 asap 是有必要的。补充说明：这里提及的Promise并不是Node和浏览器的原生实现，是一个第三方库实现，仅以此为参考。 2.asap概述 asap
阅读全文
摘要：问题重现 需求是要获取一个车型列表，并且输出到页面上按年份排序，故而接口提供的对象简化如下 let obj = { '2018': { modelCode: "204313", modelName: "2018款 Vanquish 6.0L S Coupe" }, '2017': { modelCo
阅读全文
摘要：一个例子 下面是一个常见的 vue 代码片段： async initStore(query) { await this.getConfig(); await this.getUser(); await this.checkRussianContext(query); await this.getBa
阅读全文
摘要：定义 我们先来看看它的定义 当js在一个对象上查找属性的时候,首先查找对象本身的属性(即声明时候定义的属性),如果在这些属性中没有找到目标属性,那么js会找它的__proto__对象,如果这个对象没有,那么继续找__proto__对象的__proto__对象,直到__proto__为null或者找到
阅读全文
摘要：双问号操作符 由于JavaScript是动态类型的，因此在分配变量时，我们需要牢记JavaScript对真值/假值的处理。 很多时候数字0和空字符串''就是我们需要的值，我们来看一下下面这个对象 双管道 || let player = { profile: { number: 0, name: un
阅读全文
摘要：中止信号（Abort signal） 在将 Promise 引入 ES2015 并出现了一些支持新异步解决方案的 Web API 之后不久，需要取消异步任务的需求就出现了。最初的尝试集中在创建通用解决方案上，并期待以后可以成为 ECMAScript 标准的一部分。但是，讨论很快陷入僵局，无法解决问题
阅读全文
摘要：什么是 Commonjs？ CommonJS 是 2009 年的标准，为 JavaScript 模块建立了约定。它最初打算在 Web 浏览器之外使用，主要用于服务器端。 使用 CommonJS，你可以定义模块，从中导出功能，以及将其导入其他模块中。例如，下面的代码段定义了一个模块，该模块导出五个功能
阅读全文
摘要：对于 JavaScript 新手来说，this 是非常基础同时也难以理解的知识点。 比如下面的代码，this 指向就有三种方式。 function foo() { console.log(this.a); } var a = 1; var obj = { a: 2, foo: foo }; foo(
阅读全文
摘要：前言 Promise，用于解决回调地域带来的问题，将异步操作以同步的操作编程表达出来，避免了层层嵌套的回调函数。 什么是 Promise 所谓的 promise，简单的来说就是一个容器，里面保存着某个未来才会结束的事件(也就是我们的异步操作)的结果。从语法上面来说，Promise 是一个对象，从它可
阅读全文
摘要：提到new，肯定会和类和实例联系起来，如： function Func() { let x = 100; this.num = x + } let f = new Func(); 上面的代码，我们首先创建了一个函数，如果是用面向对象的说法就是创建了一个Function类的实例，如果直接执行这个函数，
阅读全文
摘要：在 JavaScript 中，new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。创建一个对象很简单，为什么我们还要多此一举使用 new 运算符呢？它到底有什么样的魔力？ 认识 new 运算符 通过下面的例子理解 new 运算符： function Person (name
阅读全文
摘要：网站开发的实践从设计方面开始，包括客户端编程语言。大体上说，在网页设计中使用了三种语言：html，css和JavaScript。自从网站发明以来，html和css已经成为网页设计的基础，但是JavaScript被用于添加网站的动态视图。 在提供吸引人的UI / UX中，JavaScript扮演着至关
阅读全文
摘要：webbench的标准测试可以向我们展示服务器的两项内容：每秒钟响应请求数和每秒钟传输数据量。webbench不但能具有便准静态页面的测试能力，还能对动态页面（ASP,php,JAVA,CGI）进 行测试的能力。 他支持对含有SSL的安全网站例如电子商务网站进行静态或动态的性能测试。 Webbenc
阅读全文
摘要：1. 交换变量 通常交换两个变量的方法需要一个额外的临时变量,来看看例子： let a = 1; let b = 2; let temp; temp = a; a = b; b = temp; a; // => 2 b; // => 1 temp是一个临时变量，它先保存a的值。然后把b的值赋值给a，
阅读全文
摘要：介绍 事件是用户或浏览器自身执行的某种行动（如click、mousemove等）。而处理对应事件的程序称为事件处理程序（或事件监听器）。 html事件处理程序 通过在html标签中设置与相应事件处理程序同名的属性来指定事件处理程序的方法被称之为 HTML事件处理程序。如下面这段代码： <!DOCTY
阅读全文
摘要：看一下以下几个单选题，正确的输出是什么呢？ (1) var p = new Promise((resolve, reject) => { reject(Error('The Fails!')); }); p.catch(error => console.log(error.message)); p.
阅读全文
摘要：this指针 JavaScript中this指针是动态的,主要是根据当前函数执行上下文及函数调用方式决定的. 以函数方法调用时this指针全局或严格模式中为undefined 以方法调用时this是指针当前对象实例的. 以构造函数方式时this指向当前创建的实现对象 apply、call 、lamb
阅读全文
摘要：Node.js 是什么 传统意义上的 JavaScript 运行在浏览器上，这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 html + css，后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8，它的速度非常快
阅读全文
摘要：No1.语法和类型 1.声明定义 变量类型：var，定义变量；let，定义块域(scope)本地变量；const，定义只读常量。变量格式：以字母、下划线“_”或者$符号开头，大小写敏感。变量赋值：声明但未赋值的变量在使用时值为undefined，未声明的变量直接使用会抛异常。未赋值变量作计算：结果为
阅读全文
摘要：前言 XSS 自动点按钮有什么危害？ 在社交网络里，很多操作都是通过点击按钮发起的，例如发表留言。假如留言系统有 XSS，用户中招后除了基本攻击外，还能进行传播 —— XSS 自动填入留言内容，并模拟点击发表按钮，于是就能发布带有恶意代码的留言。好友看了中招后，又传播给他们的好友。。。从而形成蠕虫扩
阅读全文
摘要：弹性布局的名称概念： 1、容器：需要添加弹性布局的父元素；项目：弹性布局容器中的每一个子元素，称为项目。 2、主轴：在弹性布局中，我们会通过属性规定水平/垂直方向（flex-direction）为主轴；与主轴垂直的另一方向，称为交叉轴。 弹性布局的重要的几大基础属性： 1、flex-directio
阅读全文
摘要：无规矩不成方圆，软件开发当然不能例外。Web开发涉及的厂商和技术非常多，所以必须要有参考的标准，而且需要一系列的标准。Web程序都是通过浏览器来解析执行的，通过页面的展示内容与用户互动，所以Web标准不仅要求各个浏览器都要遵循，开发者一样要遵循相同的标准。而似乎和Web相关标准的制作组织机构很多，例
阅读全文
摘要：原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给<input>元素设置为透明，然后通过定位让用户看到的是<label>元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即 input[type=checkbox]:checke
阅读全文
摘要：当我们学习css时，我们大多数人学到的第一件事是css中盒子的各个部分的细节，这部分通过叫做 CSS盒、模型。“盒模型”中的元素之一是margin，即盒子周围的透明区域，它会将其他元素从盒子内容中推开。 CSS1中描述了 margin-top、margin-right、margin-bottom和m
阅读全文
摘要：1. 问题由来 在做两款H5的APP项目，前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想，组件不丰富，最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4（项目结构 webpack+vue+vuex+vue-router+vant+less）。相信
阅读全文
摘要：是这样的需求，有一个web页面，里面图片的上传和预览来自于一个独立的文件服务器，对http的请求需要进行访问权限的设置，就是在请求的header里加一个Authorization的字段。上传好说我用的Axios直接添加一个header就行了，但是预览就比较麻烦了，因为img这个标签图片下载展示是浏览
阅读全文
摘要：当一个页面使用了iframe作为嵌套时，如何想要将父页面的数据传给iframe子页面，那iframe所指向的呢个子页面是怎么获取呢，又或者子页面的数据要给父页面使用，那么父页面又如何获取子页面的数据呢？下面根据这种情况作了一个简单的demo案例： 父页面是parentPage.html，子页面是ch
阅读全文
摘要：Docker中部署tomcat相信大家也都知道，不知道的可以google 或者bing 一下。这里主要是为了记录在我们启动容器之后，tomcat需要直接定位到网站信息，而不是打开域名之后，还得加个blog后缀才能访问到我们的网站首页。 Docker exec -it [容器id] bash 进到/u
阅读全文
摘要：1、实现不等宽背景条纹 实现如上图所示的效果，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css"> .cont{ width: 500px; height: 200px
阅读全文
摘要：具体需求： 有一个登陆页面， 上面有2个textbox, 一个提交按钮。 请针对这个页面设计30个以上的test case. 此题的考察目的： 面试者是否熟悉各种测试方法，是否有丰富的Web测试经验， 是否了解Web开发，以及设计Test case的能力，这个题目还是相当有难度的， 一般的人很难把这
阅读全文
摘要：本文介绍在html中使用 pdfjs插件在线预览PDF文件的方法。 下载 pdfjs 并引入项目中 到PDFJS官网 http://mozilla.github.io/pdf.js/getting_started/#download,下载pdfjs插件包，注意下载Stable稳定版的包。将下载的压缩
阅读全文
摘要：前端 index.html <!DOCTYPE html> <html> <head> <script src="jquery-3.4.1.js"></script> <meta charset="utf-8" /> <title>Ajax提交form</title> <script type="t
阅读全文
摘要：长度单位 像素 px 百分比 % em - 像素是我们在网页中使用的最多的一个单位，* 一个像素就相当于我们屏幕中的一个小点，* 我们的屏幕实际上就是由这些像素点构成的* 但是这些像素点，是不能直接看见。* - 不同显示器一个像素的大小也不相同，* 显示效果越好越清晰，像素就越小，反之像素越大。 -
阅读全文
摘要：前言 最近我正在公司做一个中后台管理系统的前端框架搭建工作，虽然说公司已经有现成的中后台框架可供选择，但是并不特别适合我们部门的项目，因此在借鉴原有框架的基础上融入了我的一些个人想法和思考在里面。 这篇文章便主要来谈谈在架构一个中后台系统的前端部分上我的实践点。 技术选型 不管是前端抑或后端，从零开
阅读全文
摘要：效果 效果图如下，纯css实现超酷炫的星级评分动画效果 实现思路 5个类型为radio的input，label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋转的动画 dom结构 用form实现 <form> <div class="star"> <input
阅读全文
摘要：meta元素有4个属性：name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。按照属性设置分类，meta可以分为三类: name属性和content属
阅读全文
摘要：前言 该篇文章会为您分享在前端性能优化中非常重要的一环-白屏时间，将从白屏时间的概念、重要性以及白屏的过程一一进行阐述，同时提供性能优化的策略与实践。 一、概念 白屏时间：即用户点击一个链接或打开浏览器输入URL地址后，从屏幕空白到显示第一个画面的时间。 白屏时间的长短将直接影响用户对该网站的第一印
阅读全文
摘要：基本概念 有信息交换就会产生编码、传输、解码三个过程。编码是信息从一种形式转变成另一种形式的过程，正如人类的语言通过声带编码，转换成声波。解码是编码的逆函数，耳膜接收声波，通过脑神经解码成人类文化所能理解的信息。字符集是一种文化上下文下的所有文字符号集合，它的作用是规定了某个文化下的所有字符，以及该
阅读全文
摘要：转换 改变元素在页面中位置，大小，角度以及形状的一种方式 2D转换：只在x轴和y轴上发生转换效果 3D转换：增加了z轴的转换效果 一、转换属性 transform 取值： （1）none，默认值，无任何转换效果 （2）transform-function 一个或多个转换函数，多个的话，中间用空格隔开
阅读全文
摘要：a标签点击事件方法汇总 <a> 标签的 href 属性用于指定超链接目标的 URL，href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。这里的href="JavaScript:;"，其中javascript:是伪协议，它可以让我们通过一个链接来调
阅读全文
摘要：前言 作为程序员的我们，书写代码也需要大量的技巧。一份良好的代码能让人耳目一新，让人容易理解，同时也让自己成就感满满。因此，在这里简单的整理一些css开发技巧，希望能让你写出耳目一新、容易理解、舒服自然的代码。 本小结主要是围绕css对文字处理的技巧，有兴趣的小伙伴可以收藏一下。 文本对齐方式 CS
阅读全文
摘要：导致JavaScript效率低的两大原因：操作DOM和使用页面动画。 通常我们会通过频繁的操作 DOM的css来实现视觉上的动画效果，导致js效率低的两个因素都包括在内了在频繁的操作DOM和css时，浏览器会不停的执行重排和重绘，在PC版本的浏览器中，因为浏览器可用的内存比较大，用户肉眼几乎看不见页
阅读全文
摘要：1.URL - Uniform Resource Locator 当您点击 html 页面中的某个链接时，对应的 <a>标签指向万维网上的一个地址。 统一资源定位器（URL）用于定位万维网上的文档（或其他数据）。 2. ？ 1）连接作用：比如 http://www.xxx.com/Show.asp?
阅读全文
摘要：颜色 如果我们相给页面设置颜色可以采用多种方法进行设置： 一、命名颜色 假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了，就可以直接给定颜色的名称。css称这些有名称的颜色为命名颜色。 命名颜色的关键字有限，css定义了17个标准色：浅绿色，黑色，蓝色，紫红色，灰色，橙色，绿色，石灰，栗色，海
阅读全文
摘要：该标签不是html3.2的一部分，并且只支持MSIE3以后内核，所以如果你使用非IE内核浏览器(如：Netscape)可能无法看到下面一些很有意思的效果，该标签是个容器标签。 语法： <marquee></marquee> 以下是一个最简单的例子，代码如下: <marquee><font size=
阅读全文
摘要：处理指令（PIs）允许文档包含用于应用程序的指令。指令并不是文档字符数据的一部分，但是必须通过应用程序传递。 处理指令可以用于将信息传递给应用程序。处理指令可以出现在文档任意位置的标记外部。可以出现在序言中，包括文档的类型定义（DTD），文本内容或者文档之后。处理指令，允许文档中包含由应用程序来处理
阅读全文
摘要：结构元素不具有任何样式，只是使页面元素的的语义更加明确。 header元素 header元素是一种具有引导和导航作用的的结构元素，该元素可以包含所有通常放在页面头部的内容。header元素通常用来放置整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片、搜索表单或者其他相关内容。 <he
阅读全文
摘要：IndexedDB 是什么 在现代浏览器的本地存储方案中，indexedDB 是一项重要的能力组成， 它是可以在浏览器端使用的本地数据库，可以存储大量数据，提供接口来查询，还可以建立索引，这些都是其他存储方案 Cookie 或者 LocalStorage 无法提供的能力。单从数据库类型来看，Inde
阅读全文
摘要：rem： rem即是以html文件中font-size的大小的倍数 rem布局的原理： 通过媒体查询设置不同屏幕宽度下的html的font-size大小，然后在css布局时用rem单位取代px，从而实现页面元素大小的动态适配，做出更漂亮整洁的页面 rem布局的好处：1.页面整洁2.动态适配 缺点：1
阅读全文
摘要：一.a标签完成 <a href="文件链接" download='下载文件名'></a> <--!但是其中的download对应音频文件和视频文件无效--> 二.js实现下载 <script> const a = document.createElement('a'); a.setAttribute
阅读全文
摘要：如何能提高css编写技巧？怎么学好Web前端开发？很多人在学习Web前端时，刚开始都会学习html和css，html用于文本内容，CSS用于样式设计，掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失，因此你需要掌握一些技巧，以提高CSS编写效率。 1、使用flex进
阅读全文
摘要：应该很多人都会有PO这种东西，但是对刚学css的人真的很重要，尤其像我这种英文不好的人，这些是必背的的单字喔^^，这些数据只是我在学习的时候，参考别人的数据之后用自己的思考整理出来的，像参考书写的真的都看不懂，通常翻第一页之后，永远就不会再翻第二页了，当然我也是搂..... 一、常用的css命名规则
阅读全文
摘要：1、背景颜色 background-color 取值：合法的颜色值和transparent 注：背景颜色和背景图片，填充都是从边框开始 2、背景图片 background-image：url（图片路径） 3、背景图平铺 background-repeat： 取值： repeat：平铺 no-repe
阅读全文
摘要：一、什么叫框模型 页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。 二、外边距 围绕在元素边框外的空白距离（元素与元素之间的距离） 语法：margin，定义4个方向的外边距 1、单边定义：margin-top/right/bottom/left （1）取值：以px
阅读全文
摘要：业务需求 数据结构中含有图片、名称、children的树形结构，需要展示出每一级的图片名称和图片，找了些树形图的插件，都没有展示大的图片的，一般都是小图标，就自己试着写一个包含图的简单的插件。 树形图的结构 <ul> <li class="tree-item"> <span class="icon
阅读全文
摘要：说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它
阅读全文
摘要：前言 自从前端三大框架react、vue、Angular面世以来，前端开发逐渐趋向规范化、统一化，大多数时候新建前端项目，首先想到使用的技术一定是三大框架之一，框架给前端开发带来了极大的便利和规范，但是由于这三大框架都是js驱动，在js没有解析加载完成之前页面无法展示，会处于长时间的白屏，带来了一定
阅读全文
摘要：在软件开发中，研发效率永远是开发人员不断追求的主题之一。于公司而言，在竞争激烈的互联网行业中，产出得快和慢也许就决定着公司的生死存亡；于个人而言，效率高了就可以少加班，多出时间去提升自己、发展爱好、陪伴家人，工作、生活两不误。 提升效率的途径，无外乎就是「方法」和「工具」。以一个开发者的思维来想，就
阅读全文
摘要：效果 效果图如下 实现思路 使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案 after伪元素写下面的投影样式 before伪元素写黄色闪电的样式 dom结构 用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素
阅读全文
摘要：1. Redux大多是规约 考虑如下这个使用了Redux架构的简单的计数器应用。如果你想跳过的话可以直接查看Github Repo。 1.1 State存储在一棵树中 该应用程序的状态看起来如下： const initialState = { count: 0 }; 1.2 Action声明状态更改
阅读全文
摘要：一、现象 综合开发需要，需要引用使用 二、解决 1、先安装jquer插件，命令运行： npm i jquery --save-dev (tips: i 也就是 install --save-dev为添加到package.json) 2、利用 expose-loader 模块 来引用jquery插件
阅读全文
摘要：1.使用生命周期方法请求数据 应用程序Employees.org做两件事： 1.一进入程序就获取20名员工。2.可以通过过滤条件来筛选员工。 在实现这两个需求之前，先来回顾一下react 类组件的2个生命周期方法: componentDidMount()：组件挂载后执行 componentDidUp
阅读全文
摘要：前言 Hooks出来已经有段时间了，相信大家都用过段时间了，有没有小伙伴们遇到坑呢，我这边就有个 setInterval 的坑，和小伙伴们分享下解决方案。 前言 写个 count 每秒自增的定时器，如下写法结果，界面上 count 为 1 ？ function Counter() { let [co
阅读全文
摘要：1. 使用生命周期函数获取数据 下面这个应用必须要做两件事情： (1) 初始化获取该公司的20位员工； (2) 筛选出名称包含查询条件的员工。在实现这些需求之前，回顾一下类组件的2个生命周期方法: (1) componentDidMount()：在组件挂载后执行一次；(2) componentDid
阅读全文
摘要：在Walmart Labs的产品开发中，我们进行了大量的Code Review工作，这也保证了我有机会从很多优秀的工程师的代码中学习他们的代码风格与样式。在这篇博文里我会分享出我最欣赏的五种组件模式与代码片。不过我首先还是要谈谈为什么我们需要执着于提高代码的阅读体验。就好像你有很多种方式去装扮一只猫
阅读全文
摘要：简介 有人说递归很难理解，也有人不这么认为。递归函数简单的定义是：一个自调用函数，这意味着它将在执行的某个时刻调用自己。 从理论上讲，递归是一种需要两个属性的行为： 结束点：停止递归的情况 一组规则：负责将所有的操作减少到结束点 咱们无法决定哪一个更重要。如果没有结束点，递归将成为一个无限循环，但是
阅读全文
摘要：前提条件 前端登录后，后端返回token和token有效时间段tokenExprieIn，当token过期时间到了，前端需要主动用旧token去获取一个新的token，做到用户无感知地去刷新token。 PS: tokenExprieIn是一个单位为秒的时间段，不建议使用绝对时间，绝对时间可能会由于
阅读全文
摘要：前言 开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长
阅读全文
摘要：引言 在开发中台过程中 我们的原型中有很多表单，antd有表单组件，但是粒度比较细，就单纯组件而言，无可厚非，但是在开发过程中，可能会造成代码不够聚合，有些表单公共逻辑无法提取，copy paste比较多，所以可以加以封装，搞一个兼容性和扩展性都契合项目本身的组件。 主要思路 我简单查阅了一番资料，
阅读全文
摘要：概述 vue.js 使用了基于 html 的模板语法，允许开发者声明式地将 DOM 绑定至底层 vue 实例的数据。所有 Vue.js 的模板都是合法的 html ，所以能被遵循规范的浏览器和 HTML 解析器解析。 普通文本 数据绑定最常见的形式就是使用“Mustache[小胡子]”语法 (双大括
阅读全文
摘要：一、全局组件注册有两种方法： 1、在main.js文件中引入组件： import UserData from './components/UserData.vue' vue.component('UserData',UserData) 就可以直接在vue文件中使用 <user-data></user
阅读全文
摘要：一直对通过浏览器工作台启动本地项目感兴趣，类似 vue-cli3 中提供的 vue ui，在浏览器中打开工作台，就能够创建、启动、停止、打包、部署你的项目，很好奇这一系列背后的实现原理。 最近在用 umijs 写项目，就顺便看了它提供的 cli 工具，并解开了自己的疑问。正好自己项目中也要实现类似的
阅读全文
摘要：概述 在vue开发中，模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。当你想要在模板中多次引用相同表达式时，就会更加难以处理。所以，对于任何复杂逻辑，你都应当使用计算属性。本文主要讲解vue中的计算属性和侦听器，仅供学习分享使用。 计算属性
阅读全文
摘要：使用 Enzyme 库测试 react。这样可以使你的程序将更加可靠，并且更加容易避免回归。我们在这里用了 Jest，不过 Enzyme 也可以与 Mocha 和 Chai 之类的库一起使用。 Enzyme 基础 Enzyme 是一个库，用于在测试时处理你的 react 组件。它由 Airbnb 开
阅读全文
摘要：使用Loading分为2种情况，第一种是使用一些组件库自带的loading，另一种是使用我们自己写的loading，现分开介绍使用方法 一、使用element ui 带的Loading 1、在main.js 中引入axios 和elementui // 引入element-ui 组件 import
阅读全文
摘要：如何利用微前端技术实现单体应用程序的现代化改造？在本篇教程中，我们将探讨如何将前端从单体架构当中剥离出来，并快速完成微前端架构迁移。本文作者将结合个人项目实践经验为大家介绍心得。 问题所在 我们假设有这么一个单体代码库，它使用了某种后端模板引擎或者系统（例如 Ejs 或者 ERB），但没有认真考虑前
阅读全文
摘要：新版本前瞻 10 月 5 日，尤雨溪在 GitHub 开放了 vue 3.0 处于 pre-alpha 状态的源码，这次 vue 3.0 Updates 版本的更新，将带来五项重大改进： 速度 体积 可维护性 面向原生 易用性 截止目前，Vue 3.0 主要的架构改进、优化和新功能均已完成，剩下的主
阅读全文
摘要：1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Esca
阅读全文
摘要：Express简介： 让我们来创建Express应用程序，Express是一个Node.js Web应用框架，它很强大，可以为用户创建各种Web应用和HTTP工具，使用Express框架可以搭建一个完整功能的网站。 Express框架的优点： 可以用中间件来响应HTTP请求，可以定义路由表用于执行不
阅读全文
摘要：一、背景 现在的App开发，或多或少都会用到Hybrid模式，到了WebView这边，经常会加载一些js文件（例如和WebView用来Native通信的bridge.js），而这些js文件不会经常发生变化，所以我们希望js在WebView里面加载一次之后，如果js没有发生变化，下次就不用再发起网络请
阅读全文
摘要：哎，Flutter真香啊 早在一年前想学习下flutter，但当时对于它布局中地狱式的嵌套有点望而生畏，心想为什么嵌套这么复杂，就没有xml布局方式吗，用jsx方式也行啊，为什么要用dart而不用JavaScript，走开，劳资不学了。 然而，随着今年google io大会flutter新版本发布，
阅读全文
摘要：程序调试是程序投入运行之前，使用手工或编译程序等方法进行的测试，主要用以修正语法错误和逻辑错误。程序调试是保证计算机信息系统正确性的必不可少的步骤。在Flutter应用开发中，Android Studio和VSCode是两种比较常见的集成开发环境，因此项目调试也围绕这两款IDE进行。Android
阅读全文
摘要：1 Appium概念 1）概念：appium是一个自动化测试开源工具，支持IOS、Android平台上的原生应用、web应用和混合应用 2）原生应用：是指使用ios或者android编写的应用 web应用：是指移动浏览器访问的应用，即H5页面 混合应用：原生代码和web内容交互，即APP内嵌的H5页
阅读全文
摘要：我们知道 vue 模板是非常强大的，基本可以完成我们日常开发的所有任务。但是，有一些用例，如基于输入或插槽值创建动态组件方式，render 函数会比模板完成的更好也更出色。 用过 react 开发的人对 render 函数应该非常熟悉，因为react组件通过 jsX和 render 函数来构建的。
阅读全文
摘要：现在很多项目的前端都是用vue单页面实现的，而单页面中最重要的一个环节就是路由，今天来实现一个简易版本的vue-router。 路由 先来看下路由的工作流程 后端路由 输入url 请求发送到服务器，服务器解析请求的路径 拿到相应数据-返回给前端 前端路由 输入url js解析地址，找到对应地址的页面
阅读全文
摘要：进程与线程是操作系统中两个重要的角色，它们维系着不同程序的执行流程，通过系统内核的调度，完成多任务执行。今天我们从 Node.js（以下简称 Node）的角度来一起学习相关知识，通过本文读者将了解 Node 进程与线程的特点、代码层面的使用以及它们之间的通信。 概念 首先，我们还是回顾一下相关的定义
阅读全文
摘要：引言 前几天写了一篇关于Vue 3.0 reactive API 源码实现的文章，发现大家还是蛮有兴趣对于源码这一块的。阅读的人数虽然不多，但是 200 多次阅读，还是阔以的！并且，在当时阿里的一位前辈也指出了文章存在的不足，就是没有分析 Proxy 是如何配合 Effect 实现响应式的原理，即依
阅读全文
摘要：vue所有的生命周期钩子自动绑定在this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文，因此this与你期待的vue实例不同。 详细解释可参考这里。 1、beforeCreate 在实例初始化（new Vu
阅读全文
摘要：vue提供了两种不同的存储变量：props和data。 这些方法一开始可能会让人感到困惑，因为它们做的事情很相似，而且也不清楚什何时使用props，何时使用data。 那么props和data有什么区别呢？ data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到
阅读全文
摘要：前言 我日常工作都是使用react来做开发，但是我对react一直不是很满意，特别是在推出React Hooks以后。 不可否认React Hooks极大地方便了开发者，但是它又有非常多反直觉的地方，让我难以接受。所以在很长一段时间，我都在尝试寻找React的替代品，我尝试过不少别的前端框架，但都有
阅读全文
摘要：我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。 一、axios的封装 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如
阅读全文
摘要：定制 select 标签的设计非常困难。有时候，如果不使用样式化的 div 和自定义 JavaScript 的结合来构建自己的脚本，那是不可能的。在本文中，你将学习如何构建使用完全自定义 css 设置样式的 vue.js 组件。 html <template> <div class="custom-
阅读全文
摘要：什么是 webpack ? 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包
阅读全文
摘要：web开发中，尤其使用react开发项目时，我们可以很方便的动态定义标签(jsx) const props = { id: '', className: '', data-a: '' } <button {...props} /> 动态配置标签的好处一是所有逻辑在js端控制，二是使得我们的模板非常规
阅读全文
摘要：去年年末，微信小程序的分包大小已经到达了 12M 大小,一方面说明小程序的确逐步为开发者放开更大的权限，另一方面也说明了对于某些小程序 8M 的大小已经不够用了。我个人今年也是在开发一个 to B 小程序应用。这里列举一些跨页面交互的场景。 对于 B 端应用的业务需求来说，小程序开发的复杂度相对比网
阅读全文
摘要：简介 混入 (mixins) 是一种分发 vue 组件中可复用功能的非常灵活的方式。 混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。 // 定义一个混入对象 var myMixin = { created: function () { this.he
阅读全文
摘要：学习组件化开发，首先掌握组件化的开发思想，组件的注册方式，组件间的数据交互方式，组件插槽的用法，vue调式工具的用法，组件的方式来实现业务逻辑功能。 组件化开发思想，组件注册，组件调式，组件间的数据交互，组件插槽 组件化规范，就是多的可能性重用 全局组件注册语法 vue.component(组件名称
阅读全文
摘要：随着小程序的发展与功能的逐步完善，越来越多的产品需要小程序与 APP 的功能能有一些共性，社区跨平台的解决方案越来越多，比如 taro 等为代表的把一套代码编译成多端运行的机制，本文会使用 Swift 作为原生语言，在 iOS 应用上运行一个小程序 Demo， 使用 Android && react
阅读全文
摘要：v-bind绑定标签属性通过添加v-bind:标签属性来控制标签的属性,设置后自动查询vue里面的数据,通常简写成:标签属性,也可以传入对象,通过对象的值来控制是否为真 <body> <div id="app"> <a v-bind:href="BaiDuUrl">{{txt}}</a> <p :c
阅读全文
摘要：前端开发中总免不了关于文件的上传、下载需求。下面来总结一下常用的方法，欢迎讨论和吐槽。 form 表单提交 最传统的文件上传方法是使用form表单上传文件的，只需要把enctype设置为 multipart/form-data。这种方式上传文件不需要 js ，而且没有兼容问题，所有浏览器都支持，就是
阅读全文
摘要：尾部添加(push) push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。 从解释中可以看出，push方法只要将要添加的元素依次放到数组的最后即可，不会改变原有数组元素的索引。所以循环参数列表，将新元素依次放到数组的最后即可。 Array.prototype._push = f
阅读全文
摘要：摘要 近期在开发H5页面相关需求，需求中有个微信静默授权登录的功能，之前没有接触过这个功能，经过调研官方文档，开发出了初级方案；初级方案可以解决获取code，但是页面返回上一个页面时，需要连续返回两次才可以回到上一个页面。经过获取流程分析，解决了返回循环的bug。 初级方案原理 当时调研完官方文档后
阅读全文
摘要：摘要 在开发中展示点赞数时，当数量级超过10000后，需要使用更加简洁的小数式去显现数量（例如1.22万）。下面就给大家分享数量小数式后保留两位小数的实现方式。 四色五入 使用toFixed()方法处理小数的四色五入，运行示例如下： // 四色五入 var num =2.2354234234; nu
阅读全文
摘要：在传统网站开发中，我们一般使用比如asp、php、jsp等技术进行开发，开发完成后统一部署在服务器上，我们访问时，会在浏览器中发送带有'.asp','.php','.jsp'等后缀路径的url请求，服务器会根据对应的路由映射表，找到我们请求的页面并渲染成html，然后把html页面直接返回给浏览器展
阅读全文
摘要：本文概述了 TypeScript 的工作原理：典型的 TypeScript 项目的结构是什么？什么被编译以及怎样编译？我们如何使用 IDE 编写 TypeScript？ TypeScript项目的结构 以下是 TypeScript 项目的一种可能的文件结构： typescript-project/
阅读全文
摘要：JavaScript实现许愿墙效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
阅读全文
摘要：前言 在日常的开发中，整天赶需求的我们好像没有时间顾及自动化测试，尤其是在敏捷开发的时候。但其实自动化测试可以帮助我们提高代码和功能的健壮程度，大幅减少可能出现的bug。 尤其是在复杂系统中，自动化测试的作用不容忽视。本篇文章是我自己的学习记录，使用测试框架jest和前端框架react来简单梳理的自
阅读全文
摘要：继承 定义：可以使得子类别具有父类别的各种属性和方法，而不需要编写相同的代码。在令子类别继承父类别的同时，可以重新定义某些属性，并重写某些方法，即覆盖父类别的原有属性和方法，使其获得与父类别不同的功能。同时也能添加新的属性和方法。 实现方式 一、属性拷贝 定义：将对象的所有成员复制一份给需要继承的对
阅读全文
摘要：Reflect对象 Reflect对象的出现主要有以下几点原因： 1. 将Object 对象上的属于语言内部的方法放到 Reflect 对象上，从 Reflect 上获得语言内部的方法 // let obj = { color: 'red' } // // Object.preventExtensi
阅读全文
摘要：Proxy对象 在一个系统中，总要存储一些数据，对于这些数据，可能有一些是希望我们访问的，但是总有一些是中重要的，不希望我们访问的，希望保护起来，因此ES6新增了代理，在目标对象前架设个“拦截“层，外界对该对象的访问必须通过这层拦截，我们可以对外界的访问进行过滤和改写。 注意：Proxy修改了某些操
阅读全文
摘要：正文 尾调用是函数式编程的一个重要的概念，本篇文章就来学习下尾调用相关的知识。 尾调用 在之前的文章理解Javascript的高阶函数中，有说过在一个函数中输出一个函数，则这个函数可以被成为高阶函数。本文的主角尾调用和它类似，如果一个函数返回的是另一个函数的调用结果，那么就被称为尾调用。例子： fu
阅读全文
摘要：数据属性和访问器属性 数据属性访问器属性 共同特性 [[enumerable]] [[configurable]] 特有特性 [[writable]] [[get]] [[value]] [[set]] 设置单个属性方法 Object.defineProperty(obj, prop, descri
阅读全文
摘要：许多算法需要交换2个变量。在编码面试中，可能会问您“如何在没有临时变量的情况下交换2个变量？”。我很高兴知道执行变量交换的多种方法。在本文中，您将了解大约4种交换方式（2种使用额外的内存，而2种不使用额外的内存）。 1. 解构赋值 解构赋值语法（ES2015的功能）使您可以将数组的项提取到变量中。例
阅读全文
摘要：相信大家都知道登录操作都会有一个接收验证码的过程,我之前一直对这个非常感兴趣,经常问同学手机验证码是怎么搞的,但是现在我们不用手机也照样可以实现这个功能。 01 前言 其实对于手机验证码来说，一般都要收费的，免费的一般是比较少的，而且都会有数量的限制。既然我们不能使用手机验证码来发送，那么我们就以曲
阅读全文
摘要：一、Blob 是什么 Blob（Binary Large Object）表示二进制类型的大对象。在数据库管理系统中，将二进制数据存储为一个单一个体的集合。Blob 通常是影像、声音或多媒体文件。在 JavaScript 中 Blob 类型的对象表示不可变的类似文件对象的原始数据。 为了更直观的感受
阅读全文
摘要：1浅克隆 arr.slice(0) arr.concat() let obj2 = {... obj} 2深克隆 function deepClone(obj){ //判断参数是不是一个对象 let objClone = new obj.constructor(); if(obj && typeof
阅读全文
摘要：为了提供新鲜、别致的用户体验，很多网站都会使用 JavaScript来改善设计、验证表单、检查浏览器，以及Ajax请求，cookie操作等等，实现无刷新动态效果 。但是，要将大量内容在浏览器呈现，如果处理不好，网站性能将会急剧下降。所以我们有必要了解下，如何提高JavaScript的执行效率。 一、
阅读全文
摘要：当然，我们已经有可以使用的很好的Web编辑器：你只需下载，并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如，我为CodeMirror写了一个插件来支持PlantUML。然而，这些编辑器有一个问题：它们难以扩展和难以理解。 当我看到这些产品的代码时，有一些我不能轻易理解，有一些我没有
阅读全文
摘要：JavaScript使我们有能力创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。那么，javascript的事件有哪些？本篇文章将给大家来介绍关于javascript中常用的事件。 javascript事件是什么？ J
阅读全文
摘要：webkit滚动条样式重置 1、scrollbar包含scrollbar buttons和一个track。track进一步细分为track pieces和thumb。trace pieces为thumb的上半部分和半下部分。2、scrollbar corner为横向和竖向的交叉角区域3、resize
阅读全文
摘要：吞吐量定义 吞吐量是指对网络、设备、端口、虚电路或其他设施，单位时间内成功地传送数据的数量（以比特、字节、分组等测量）。 以上的定义比较宽泛，定义到网站或者接口的吞吐量是这样的：吞吐量是指系统在单位时间内处理请求的数量。这里有一个注意点就是 单位时间内 ，对于网站的吞吐量这个单位时间一般定义为1秒，
阅读全文
摘要：概念 使用 @ 符号定义变量，变量分配使用 : 完成。 声明格式：@变量名：变量值 。 通常看到很多重复的相同的值，我们可以通过使用变量来避免。Less中的变量和其他编程语言一样，可以实现值的复用，同样的它也有作用域，简单的来说就是变量的作用域就是局部变量和全局变量的概念；变量作用域采用的是就近原则
阅读全文
摘要：昨天临下班测试给我问我为什么图片上传插件打开文件夹的速度这么慢，让我想办法优化一下 ,然后我就努力的搞了起来_(:з」∠)_ 由于我们内部系统不兼容ie，所以我就没有管ie，在浏览器里面玩了起来，经过测试发现，在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有
阅读全文
摘要：昨天临下班测试给我问我为什么图片上传插件打开文件夹的速度这么慢，让我想办法优化一下 ,然后我就努力的搞了起来_(:з」∠)_ 由于我们内部系统不兼容ie，所以我就没有管ie，在浏览器里面玩了起来，经过测试发现，在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有
阅读全文
摘要：css是层叠样式表（ Cascading Style Sheets ）的缩写，是一种样式表语言，用于描述以 html 之类的标记语言编写的文档的布局。 它是用于设计Web页面的三剑客之一，另外两位浩客是html和JavaScript。 css 的设计目的是使样式和内容分离，包括布局、颜色和字体。这种
阅读全文
摘要：前言 总所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下： flex布局 grid布局 table布局 line-height搭配height position搭配margin position搭配
阅读全文
摘要：本文说的white-space是一个控制换行和空白处理的css属性。我曾经被这个属性烦死，一直没记住，今天决定还是写下来好好琢磨下。 属性值 normal 默认值，正常换行，空白和换行符会被浏览器忽略。啥意思呢？ 正常换行的意思是，单词间会正常换行，如果下一个单词太长，不足以在当前行剩余部分完整展示
阅读全文
摘要：本文以react为例。 用css变量来切换黑暗模式，易于维护和扩展。 css变量的用法： .selector { --black-color: #282c34; } :root { --black-color: #282c34; } 方案一 设置主题对应的CSS变量，切换主题只需切换css属性的变量
阅读全文
摘要：响应式布局 一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。 媒体类型 在何种设备或者软件上将页面打开 all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似
阅读全文
摘要：准备工作 安装 webpack： npm init -y npm i -D webpack webpack-cli css-loader 创建 webpack.config.js 进行配置： const path = require('path'); const MinicssExtractPlug
阅读全文
摘要：css实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果： 效果说明： 1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部 2、当数据过多时需要显示滚动条，**并且滚动条需要拉到最底部** 3、数据从websocket中推送过来，推送间隔为几十毫秒 4
阅读全文
摘要：如今，随着各种新趋势的层出不穷，Web和移动领域的创新不仅改变了人们、乃至整个社会的日常行为习惯、以及业务处理方式，而且也使得开发人员能够轻松、且高效地创建出各种实用的解决方案。 我们作为业内人员显然需要通过不断的学习来保持知识的储备，熟悉各种新的趋势，并在竞争中站稳脚跟。下面，我们来一起讨论那些本
阅读全文
摘要：一、float介绍 float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。简单来说，就是让block元素无视float元素，让inline元素让流水一样围绕着float元素来实现浮
阅读全文
摘要：开发人员需要做的决策有很多。当 Web 应用程序的需求确定下来之后，就该选择效率最高的 Web 技术栈了。Web 技术栈是用于创建 Web 应用程序的技术工具集。一套 Web 技术栈由 OS（操作系统）、Web 服务器、数据库软件以及编程语言（通常前端和后端都需要自己的语言）组成。一些常见的编程语言
阅读全文
摘要：1、第一种写法： <a href="JavaScript:js_method();">This is Test</a> 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且JavaScript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeun
阅读全文
摘要：学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？ 对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标
阅读全文
摘要：在每个Web应用程序中，作为用户直接可见的应用程序外观，“前端”包括：图形化的用户界面、相应的功能、及其整体站点的可用性。我们可以毫不夸张地说：如果前端无法正常工作，您将无法“拉新”网站的潜在用户。这也正是我们需要对Web应用执行前端测试的重要原因。 为了确保Web应用无论发生了何种变更之后，其对应
阅读全文
摘要：最近接的新项目，登录注册页根据需求要使用手机号获取验证码登录或者注册，一开始的想法是要做6个inputshur输入框，但是光标问题太严重。在网上看别人的实现方法，发现可以用一个input+6个span或者6个div来做，经过构思，实现了以下的方法。 代码 html： <div class="pc_i
阅读全文
摘要：元素的显示与隐藏 在css中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩
阅读全文
摘要：最开始的网站架构 最初业务量不大，访问量小，此时的架构，应用程序、数据库、文件都部署在一台服务器上，有些甚至仅仅是租用主机空间 1. 应用、数据、文件分离 将应用程序、数据库、文件各自部署在独立的服务器上，并且根据服务器的用途配置不同的硬件，达到最佳的性能效果。 2. 利用缓存改善网站性能 大部分网
阅读全文
摘要：1. 页面适配 这一点不能算是建议，应该说是解决方案。 最近查了好多关于移动端适配的资料，把人都看懵了，收获了以下名词 css像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport 说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不
阅读全文
摘要：网站的设计是吸引客户的非常重要的因素。如今，互联网上存在着很多竞争，每个人都可以点击其客户，但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。 如今，最常见的方法是访问Internet查找产品或服务，搜索引擎在每次搜索中显示成千上万的结果，这就是第一印象发挥作用的地方。几秒钟内，客户可以选择
阅读全文
摘要：概念 Sass由hampton catlin设计，natalie weizenbaum于2006年开发，它可以免费下载和使用。 Sass是一个将脚本解析成css的脚本语言（SassScript），也是一款css预处理器，它减少了CSS的重复，也因此节省了时间。 Sass 是对CSS3（层叠样式表）的
阅读全文
摘要：那一年，我所在公司的用户量达到了公司成立以来的新高峰，经过多个程序员日日夜夜加班，每个业务系统达到了几乎四个 9 的稳定性，同时业务在业界也有了一定的知名度。 PS：以下业务场景只针对于 Web 系统，而且 Web 页面有后台服务程序的场景。 那一天突然有一个合作商登门拜访，提出合作共赢的意向。业务
阅读全文
摘要：Sass 使 css代码保持DRY（也就是不要重复），编写代码的一种方式是将相关的代码保存在单独的文件中，我们可以创建带有css片段的小文件，以包含在其他Sass文件中，比如：重置文件、变量、颜色、字体或者是字体大小等等。 导入文件 与CSS一样，Sass也支持 @import 指令，它允许我们将一
阅读全文
摘要：介绍 Dojo 是基于 html 的技术，使用 css 为框架中的元素和用它开发的应用程序设置样式。 Dojo 鼓励将结构样式封装在各部件中，以便最大限度复用；同时将外观主题设置到应用程序所有部件上。用户为他们的应用程序设置样式和主题时，这种模式提供了固定的套路，即使混合使用 Dojo 的 @doj
阅读全文
摘要：前端页面的成功呈现，不仅要求在理想情况下没问题，当一些后台接口访问异常、静态文件获取失败时，仍然需要尽可能提供降级方案或给用户良好的反馈，不至于整个页面的奔溃。今天我将分享一些提高页面健壮性的技巧。 异常处理 主要指数据类型。这种情况最常出现在读取后台数据的时候，尤其是需要取数组、对象等引用类型时，
阅读全文
摘要：Web应用安全测试可对Web应用程序执行功能测试，找到尽可能多的安全问题，大大降低黑客入侵几率。 在研究并推荐一些优秀的开源Web应用安全测试工具之前，让我们首先了解一下安全测试的定义、功用和价值。 安全测试的定义 安全测试可以提高信息系统中的数据安全性，防止未经批准的用户访问。在Web应用安全范畴
阅读全文
摘要：本文针对 SwissDev Jobs 网站的优化实践，介绍我们是如何把网站加载时间减少24% 的。上周，我们有机会对 SwissDev Jobs 网站性能进行了微调。 之所以要提升 SwissDevJobs.ch 网站性能，主要是有两方面原因： 良好的用户体验——即加载时间更短（且互动性更好）和使用
阅读全文
摘要：css 书写位置 行内样式，style标签link标签 行内样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css书写位置</title> </head> <body> <p style="color:
阅读全文
摘要：概述 浏览器的缓存机制也就是我们说的 HTTP 缓存机制，其机制是根据 HTTP 报文的缓存标示进行的。所以在分析浏览器缓存之前，我们先使用图文简单介绍一下 HTTP 报文，HTTP 报文分为两种： HTTP 请求（Request）报文。报文格式为： 请求行。 HTTP 头（通用信息头，请求头，实体
阅读全文
摘要：简单理解： repaint主要是针对某一个DOM元素进行的重绘，reflow则是回流，针对整个页面的重排。字面意思来说：repaint就是重绘，reflow就是回流。repaint和reflow的目的是：展示一个新的页面样貌。 性能消耗： 在性能优先的前提下，性能消耗 reflow大于repaint
阅读全文
摘要：1. css Reset为什么存在？ 只要您的客户存在使用不同浏览器（ie,firefox,chrome等）的可能，那你就不得不从完美的理想状态回到现实，因为不同核心的浏览器对css的解析效果呈现各异，导致您所期望的效果跟浏览器的“理解”效果有偏差，今天提到的css reset就是用来重置（复位）元
阅读全文
摘要：互联网的诞生彻底改变了世界。以前习惯于在电视和报纸广告上一掷千金的企业开始渐渐意识到互联网带来的变化。他们不得不改变他们的投资方向，把他们的钱投向更有潜力，更能为客户带来利润的地方。于是，如果企业想要能有立足之地能够存活能够享誉世界的话，那么拥有网上身份成为了一种强制手段。现在的企业往往会通过网站高
阅读全文
摘要：虽然说现在服务器的硬件比之前是便宜了很多了，也有VPS和云服务器可以选择。但是对新手来说，如何选择适合自己的服务器也是一个很让人头疼的问题。 虚拟主机，VPS，还是独立服务器？ 对新手来说，可能一开始到是不会考虑到独立服务器。但还是想拉到一起讨论一下。 如果是个人博客，又没什么计划说这个博客会做商业
阅读全文
摘要：封装成mixin复用 在写css的时候, 很多样式都是很常用但是写起来很麻烦, 虽然现在有很多成熟的ui框架, 但是我们也不能一个简单的活动页也引入那么大个框架吧? 在工作中我也攒下了不少常用css, 我把他们封装成了mixin, 挑选了5个分享给大家, 希望大家喜欢. 做一名合格的"CV"工程师,
阅读全文
摘要：css 句法( css Syntax ) 语法是语言表达的规则。各种语言都有不同的语法，包括人类语言和计算机语言等。 语法有时候也指句法( syntax )，指的是句子由词汇构成的规律。也可以将它看作组成句子的规则。它包含两个方面的涵义： 词汇：即，可以构成句子的有效用词。例如，英语中的单词，Jav
阅读全文
摘要：前端安全的范围 将Web安全问题按照发生的区域来分类，发生在浏览器、Web页面中的安全问题就是前端安全问题。 同源策略 同源：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。 URL是否同源原因 http://test.test.com/dir2/other
阅读全文
摘要：本来早就想写这篇文章的，由于有其他事情耽搁了（可能还是因为太懒），就拖到了现在，如果再不记下来，估计会抛到九霄云外了。 Nodejs的出现，让前端工程化的理念不断深入，正在向正规军靠近。先是带来了Gulp、webpack等强大的构建工具，随后又出现了vue-cli和create-react-app等
阅读全文
