12 2020 档案
摘要：在 Node.js 社区中，其实不乏通过 Markdown 生成 RESTful API 的框架，按照一定的格式约定好 API 所需要的数据，然后再通过解析 Markdown 文档，将这些关键数据提取出来，最后生成数据库模型和 HTTPS 服务。 YodaOS 作为一个前端操作系统，同样使用了类似的
阅读全文
摘要：最近前端届多端框架频出，相信很多有代码多端运行需求的开发者都会产生一些疑惑：这些框架都有什么优缺点？到底应该用哪个？ 作为 Taro 开发团队一员，笔者想在本文尽量站在一个客观公正的角度去评价各个框架的选型和优劣。但宥于利益相关，本文的观点很可能是带有偏向性的，大家可以带着批判的眼光去看待，权当抛砖
阅读全文
摘要：vue vue通过设定对象属性的setter/getter方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图。 将数据data变成可观察的（observable） 那么Vue是如何将所有data下面的属性变成可观察的呢？ fu
阅读全文
摘要：事件分发 之前讲述了事件如何绑定在document上，那么具体事件触发的时候是如何分发到具体的监听者呢？我们接着上次注册的事件代理看。当我点击update counter按钮时，触发注册的click事件代理。 function dispatchInteractiveEvent(topLevelTyp
阅读全文
摘要：1. currency (货币处理) 使用currency可以将数字格式化为货币，默认是美元符号，你可以自己传入所需的符号，例如我传入人民币： {{num | currency : '￥'}} 2. date (日期格式化) 原生的js对日期的格式化能力有限，ng提供的date过滤器基本可以满足一般
阅读全文
摘要：在Angular网络请求是一个最常见的应用之一，下列我将以 ng-alain 项目为基础描述 Angular 网络请求。 注：示例中代码都以简化的形式出现。 写在前面 Angular发起一个请求再简单不过即使用 HttpClient 类的各种方法，然在开始之前我们应退一小步，先从如何构建一个 Res
阅读全文
摘要：用 Karma 在项目中遇到了坑 最近新换了一个项目，去的时候项目已经做了两个月了，因为前期赶功能，没有对单元测试做要求，CI/CD 的时候也没有强制跑单元测试。所以虽然有用 Angular CLI 自动生成的测试文件，但是基本上都是测试不通过。项目做久了，人员变动多，新来的成员对之前的业务逻辑不清
阅读全文
摘要：如何使用vue写一个组件库 组件以插件的形式引入使用，当然，也可以直接在页面引入组件文件，两者按需使用。 安装插件： import Button from './oyButton'; Button.install = function (vue) { Vue.component(Button.nam
阅读全文
摘要：可以说 react 为Web开发者带来了全新的开发模式，而在各类新功能下，如何达到性能最优仍是我们需要关心的。今天做一次精读尝试，原文地址在文末，话不多说，先呈上一份性能清单： 1. 测量组件级渲染性能 Chrome DevTools Performance 面板 react DevTools pr
阅读全文
摘要：刚开始接触vue的时候，哇nextTick好强，咋就在这里面写就是dom更新之后，当时连什么macrotask、microtask都不知道(如果你也不是很清楚，推荐点这里去看一下，也有助于你更好地理解本文)，再后来，写的多了看得多了愈发膨胀了，就想看看这个nextTick到底是咋实现的 一、源码 关
阅读全文
摘要：现在前端开发一般都是前后端分离，mvvm和mvc的开发框架，如Angular、react和vue等，虽然写框架能够使我们快速的完成开发，但是由于前后台分离，给项目seo带来很大的不便，搜索引擎在检索的时候是在网页中爬取数据，由于单页面应用读取到的页面是几乎空白的，无法爬取到任何数据信息。 <!DOC
阅读全文
摘要：vue 路由的原理 说实话，路由我一直也就光顾着用，没认真思考过这个问题，还是那次人家面试问了这个，我才反应过来是应该好好的了解一下了。 无刷新跳转页面，是单页应用的一大优势，用户体验好，加载速度快，vue 路由的跳转就是无刷新的，它有两种形式，可以在定义路由的时候通过 mode 字段去配置，如果不
阅读全文
摘要：在react写应用的时候，难免遇到跨组件通信的问题。现在已经有很多的解决方案。 react本身的Context Redux结合React-redux Mobx结合mobx-react React 的新的Context api本质上并不是React或者Mbox这种状态管理工具的替代品，充其量只是对Re
阅读全文
摘要：简单介绍，使用keep-alive的时候，返回前一页，没有保持滚动条位置。事实上，就算不使用keep-alive，位置也没有被记录。但是，在不使用keep-alive的时候，页面内容会刷新，所以就随他去了……就是这么任性…… 思路 官方有推荐一个scrollBehavior，链接，但是上面标注，只在
阅读全文
摘要：vue的响应式系统 vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的JavaScript 对象，而当你修改它们时，视图会进行更新，这使得状态管理非常简单直接，我们可以只关注数据本身，而不用手动处理数据到视图的渲染，避免了繁琐的 DOM 操作，提高了开发效率。 vue 的响应式
阅读全文
摘要：DOM操作 从Prototype.js到风靡全球的jQuery.js，都是在解决浏览器间DOM操作的差异化问题，同时也提供了简洁友好的API，但是随着标准的不断的推进，现在浏览器间的差异化可以说已经没有了，像Github就宣布了弃用jQuery.js，直接使用浏览器提供的DOM操作更新界面。 尽管浏
阅读全文
摘要：数据初始化 vue 实例在建立的时候会运行一系列的初始化操作，而在这些初始化操作里面，和数据绑定关联最大的是 initState。 首先，来看一下他的代码： function initState(vm) { vm._watchers = []; var opts = vm.$options; if(
阅读全文
摘要：1.前端框架的根本意义 1.1 前端框架的好处 最开始学习前端框架的时候(我第一个框架是 react)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框架就 out 了.随着使用的深入我逐渐理解到框架的好处: 1.组件化: 其中以 react 的组件化
阅读全文
摘要：前言 在一个项目中，一些功能会涉及到重要的数据管理，为了确保数据的安全，我们会在项目中加入权限来限制每个用户的操作。作为前端，我们要做的是配合后端给到的权限数据，做页面上的各种各样的限制。 需求 因为这是一个工作上的业务需求，所以对于我来说主要有两个地方需要进行权限控制。 第一个是侧边菜单栏，需要控
阅读全文
摘要：最近做公司新项目用的angular7，中碰到了一个很头疼的问题在绑定对象中的数据改变时，页面视图没有跟新，需点击页面中的时间元素后才会更新。以前使用angularjs也经常碰到类似情况，这种时候一般的方式使使用脏检查（Dirty checking）让angularjs检查绑定到视图上的数据来实现对页
阅读全文
摘要：Proxy是ES6规范定义的标准内置对象，可以对目标对象的读取、函数调用等操作进行拦截。一般来说，通过Proxy可以让目标对象“可控”，比如是否能调用对象的某个方法，能否往对象添加属性等等。 const originalObj = { name: 'xialei' }; const publicOb
阅读全文
摘要：ES2015 二进制和八进制 在 JavaScript 中，二进制操作并不常见，但有时也会遇到，否则无法切实解决你的问题。你可能正在为低功耗设备编写高性能代码，将位压缩到本地存储中，在浏览器中进行像素 RGB 操作，或者必须处理紧密打包的二进制数据格式。 这可能意味着有很多工作需要对二进制数字进行处
阅读全文
摘要：想要明白workers，首先需要明白node是怎样构成的。当一个node进程开始，它其实是: 一个进程。 一个线程。 一个事件轮垂。 一个js引擎实例。 一个node.js实例。 一个进程：是指一个全局对象，这个对象能够访问任何地方，并且包含当前处理时的此时信息。 一个线程：单线程意味着单位时间内只
阅读全文
摘要：使用for循环的代码 var arr = [1, 2, 3, 4, 5]; for (var i = 0; i < arr.length; i++) { (function(a) { setTimeout(function() { console.log(arr[a]); }, 5000); })(
阅读全文
摘要：JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。在本文中，我们将介绍一些在JavaScript中发出HTTP请求的流行方法。 Ajax Ajax是发出异步HTTP请求的传统方式。可以使用HTTP POST方法发送数据，并使用HTTP GET方法接收数据
阅读全文
摘要：基础题 题一 const promise = new Promise((resolve, reject) => { console.log(1) resolve() console.log(2) }) promise.then(() => { console.log(3) }) console.lo
阅读全文
摘要：ts为typescript的缩写，是JavaScript的超集。 npm源改为国内 由于 Node 的官方模块仓库网速太慢，模块仓库需要切换到阿里的源。 npm config set registry https://registry.npm.taobao.org/ 执行下面的命令，确认是否切换成功
阅读全文
摘要：1、concat（）把元素衔接到数组中。 例子： var str1 = "Hello "; var str2 = "world!"; var n = str1.concat(str2); Hello world! 输出结果 2 every() 方法使用指定函数检测数组中的所有元素： 如果数组中检测到
阅读全文
摘要：我们知道，在创建一个函数时如果要用到变量来存取信息的话，要尽量使用局部变量。 因为一方面局部变量会随着函数的执行结束被销毁；另一方面在不执行函数的时候也不会创建这个局部变量，对节省空间资源有很大的好处。 下面我们来看一个案例： var num = 1;//全局变量num function a() {
阅读全文
摘要：前言 最近在做一个项目，需要对webRTC录制的音频进行处理，包括音频的裁剪、多音频合并，甚至要将某个音频的某一部分替换成另一个音频。 原本笔者打算将这件工作交给服务端去完成，但考虑，其实无论是前端还是后台，所做的工作是差不多的，而且交给服务端还需要再额外走一个上传、下载音频的流程，这不仅增添了服务
阅读全文
摘要：尽管从第一次遇到空值引起的bug开始，我就一直要求自己注意空值，但还是经常犯这样的错误，js中的空值真的需要多加注意。这里说的空值包括undefined和null 为什么js容易出现空值bug？ 首先JS是一个动态类型语言，与之相对的是静态类型语言如Java。在Java中要定义数据模型意味着定义一个
阅读全文
摘要：前言 new关键字在实例化获取对象时都做了什么？是一道经常出现在前端面试时的问题。如果只是简单的了解new关键字是实例化构造函数获取对象，是万万不能够的。更深入的层级发生了什么呢？同时面试官想从这道题里面考察什么呢？ 一、new关键字 new关键字的作用：通过new关键字实例化构造函数，获取对象。说
阅读全文
摘要：深入了解 ES6 Modules 当下， 我们几乎所有的项目都是基于 webpack、rollup 等构建工具进行开发的，模块化已经是常态。 我们对它并不陌生，今天，我们就再系统的回顾一下ES6的模块机制， 并总结下常用的操作和最佳实践， 希望对你有所帮助。 一些简单的背景 随用随取， 是一种我们都
阅读全文
摘要：clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 兼容性：
阅读全文
摘要：函子（Functor） 在正式学习函子之前，我会先抛出一个问题，先用普通的方式解决，然后转换为用函子解决，这能帮助我们更好的理解函子。同时，这也是我想说的，在我们学习一个新的知识点前，首先必须清楚为什么会有它，或者说它是为了解决什么问题而生的，这也是我们学习新知识后能够快速达到学以致用的最有效方法，
阅读全文
摘要：1. ajax的介绍 1.1 含义 ajax 的全称是Asynchronous JavaScript and XML简单理解下:ajax就是异步的js和服务端的数据 1.2 组成 异步的js:事件,对象等 其他js:数据处理和解析的js 服务器的载体:xhr对象 服务端的数据:json,xhr,ht
阅读全文
摘要：原型是个好东西，通常除了Object的原型不应该扩展，向原型添加新方法是很好的选择。 我们看一下如何为数组取最大值与最小值。最笨的方法估计是这样： Array.prototype.max = function() { var max = this[0]; var len = this.length;
阅读全文
摘要：我们在表单验证时，经常遇到字符串的包含问题，比如说邮件必须包含indexOf。我们现在说一下indexOf。这是es3.1引进的API ，与lastIndexOf是一套的。可以用于字符串与数组中。一些面试经常用问数组的indexOf是如何实现的，但鲜有问如何实现字符串的indexOf是如何实现，因为
阅读全文
摘要：1. onchange onchange 事件会在域的内容改变时触发。支持的标签, , ,。 注意：在元素的值改变了且失去焦点时触发（两次的值一样不会触发）。缺陷：通过js代码改变DOM的值不会触发，解决在js代码里改值了调用其change 的*function() *或者调.change()方法。
阅读全文
摘要：通过使用此模块，只需将鼠标悬停在浏览器中，即可快速查看DOM元素的属性。基本上它是一个即时检查器。 将鼠标悬停在 DOM 元素上会显示其属性！ 自己尝试一下 复制下面的整个代码块，并将其粘贴到浏览器 Web 控制台中。现在将鼠标悬停在你正在浏览的任何网页上。 看到了什么？ (function Spy
阅读全文
摘要：客户端有些硬件的接口需要调试，是在电脑上连了一些硬件的设备，比如打印机、扫描仪或者进行串口通信等等。单靠js是完成不了了，我们决定通过把C++或者C#把这些功能打包成Dll，然后在Electron客户端中通过Node调用Dll来实现所需要的功能。 Dll类型 先简单说一下什么是Dll，Dll是动态链
阅读全文
摘要：组件化是vue的精髓，vue就是由一个一个的组件构成的。Vue的组件化设计到的内容又非常多，当在面试时，被问到：谈一下你对Vue组件化的理解。这时候又有可能无从下手，因此在这里阐释一下个人对Vue的组件化的理解。 组件的分类 一般来说，组件大致可以分为三类： 页面级别的组件。 业务上可复用的基础组件
阅读全文
摘要：我们都知道，基于props做组件的跨层级数据传递是非常困难并且麻烦的，中间层组件要为了传递数据添加一些无用的props。而react自身早已提供了context API来解决这种问题，但是16.3.0之前官方都建议不要使用，认为会迟早会被废弃掉。说归说，很多库已经采用了context API。可见呼
阅读全文
摘要：最近发布不久的vue 2.6，使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣，以便为我们基于vue的项目提供可重用性，新功能和更清晰的可读性。 真正有能力的插槽是什么？ 如果你是Vue的新手，或者还没有看到2.6版的变化，请继续阅读。也许学习插槽的最佳资源是Vue自己的
阅读全文
摘要：由于之前的 vue 项目打包成果物一直是嵌入集成平台中，所以一直没有关注过项目的 title。直到最近，突然有个需求，要求点击按钮在集成平台外新开一个页面，此时我才发现，原来我的项目的 title 一直是万年不变的 vue-project。理所应当的，这个问题被测试爸爸提了一个大大的缺陷。 犯了错的
阅读全文
摘要：什么是事件冒泡？ 先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（即dom树组成的），当我们在一个时间触发的时候，这个事件就像这个气泡一样，从dom树的
阅读全文
摘要：何时使用context Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。 // Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。 // 为当前的 theme 创建一个 context（“light”为默认值）
阅读全文
摘要：在工作中通过Three.js开发项目的时候，一些特定的情况下你可能需要计算一个三维模型的表面积或者体积，比如在3D打印的Web项目中，你需要计算一个三维模型的体积，然后通过体积计算打印一个三维模型所需要的3D打印材料费；比如开发的一个程序中，需要自动计算一个地面、墙面或某个零件的表面需要多少涂料，肯
阅读全文
摘要：最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下做个笔记。 什么是SSR 把vue组件渲染为服务器端的html字符串，将他们直接发送到
阅读全文
摘要：有没有遇到这样一种情况，你花了很大精力在业务项目中写了一个组件，你觉得这个组件很通用，除了当前的业务场景还应该有其他的应用场景，所以你想开源这个组件，但又不知道从何入手。这篇文章就来聊聊如何开源一个前端组件，无论是业务中已有的组件还是新的组件。 1. 初始化 1.1 Git 可以在 Github 上
阅读全文
摘要：微信小程序的市场在进一步的扩大，而背后的技术社区仍在摸索着最好的实践方案。我在帮助Nike，沃尔玛以及一些创业公司开发小程序后，依旧认为使用小程序原生框架是一个更高效，稳定的选择，而使用原生框架唯独缺少一个好的状态管理库，如果不引入状态管理则会让我们在模块化，项目结构以及单元测试上都有些捉襟见肘。
阅读全文
摘要：多页面vue应用中，在请求接口之前统一加上Loading作为未请求到数据之前的过渡展示。由于多页面未使用vuex做状态管理，只在入口统一注册了bus，所以此例子使用eventbus做事件通信。 在Loading.vue中，一个简单的公共loading组件 这个loading组件用showLoadin
阅读全文
摘要：一款to-do app基本等同于前端开发的“Hello world”。虽然涵盖了创建应用程序的CRUD方面，但它通常只涉及那些框架或库也能做到的皮毛而已。 Angular看起来似乎总是在改变和更新 - 但实际上，还是有一些事情仍然保持不变。以下是关于Angular所需要学习的核心概念的概述，以便大家
阅读全文
摘要：ipcMain 从 主进程 到 渲染进程 的异步通信。ipcMain模块是EventEmitter类的一个实例。 当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息。 从渲染器进程发送的消息将被发送到该模块。 举个例子 // 在主进程中. const { ipcMain } =
阅读全文
摘要：本文适合无论是否有爬虫以及 Node.js 基础的朋友观看~ 需求： Node.js PDF 如果你是一名技术人员，那么可以看我接下来的文章，否则，请直接移步到我的 github 仓库，直接看文档使用即可，仓库地址: 附带文档和源码 ,别忘了给个 star 哦 本需求使用到的技术： Node.js
阅读全文
摘要：react社区一直在探寻使用react语法开发小程序的方式，其中比较著名的项目有Taro，nanachi。而使用React语法开发小程序的难点主要就是在jsX语法上，jsX本质上是JS，相比于小程序静态模版来说太灵活。本文所说的新思路就是在处理JSX语法上的新思路，这是一种更加动态的处理思路，相比于
阅读全文
摘要：简介 Flutter 新建组件有俩种状态组件： StatelessWidget 和 StatefulWidget ，这些在新建 Flutter 项目就能看到相关展示代码，下面就详细解释下这俩者区别： StatefulWidget ：是指 有状态变化 的组件，例如系统提供的 Checkbox , Ra
阅读全文
摘要：如果你是一个已经在学习前端开发的初学者亦或者是一名在代码界纵横多年的程序员，那你一定知道现在最火的前端框架之一vue.js。它相比于react与Angular上手更加容易，或许这也是很多初学者选择vue的原因之一。 我们看到很多招聘上都写着掌握vue开发项目，那么面试都会问什么呢？别急，下面是我给大
阅读全文
摘要：一般程序员都会了解，类似于 IO、网络请求等都应该是 异步 的。在Dart中，我们使用 Future 来管理，这样就不用担心线程或者死锁的问题。 那么当 Flutter 涉及到 Future 的时候，widget 该如何去构建呢？在网络请求 开始前、请求中、请求完成或失败，我们应该如何去管理我们的U
阅读全文
摘要：Web前端技术由 html、css 和 JavaScript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学习新的知识点，因此对于初学者很难理清楚整个体系的脉络结构。本文将对Web前端知识体系进行简单的梳理，
阅读全文
摘要：文件上传漏洞及危害 文件上传漏洞是指网络攻击者上传了一个可执行的文件到服务器上，当开发者没有对该文件进行合理的校验及处理的时候，很有可能让程序执行这个上传文件导致安全漏洞。大部分网站都会有文件上传的功能，例如头像、图片、视频等，这块的逻辑如果处理不当，很容易触发服务器漏洞。这种漏洞在以文件名为 UR
阅读全文
摘要：无障碍 Web “Accessibility”，在 Web 发展的初期，人们习惯把它翻译成“无障碍”，因为它主要考虑如何让残障人士更容易地访问 Web 内容。诸如有行动障碍的人难以完成需要用鼠标进行的精确手部动作，他们更多的需要靠键盘；有视觉障碍的人（低视力、色盲、失明）需要使用屏幕放大镜（物理放大
阅读全文
摘要：这篇文章所实现的动画效果起源于一个小小的想法，这个想法来自于另一个网站的一篇文章，它介绍了如何在网页中使用css、图片和JavaScript创建立体的柱状图。在阅读了那篇文章之后，我想挑战一下，尝试使用纯css来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体，而后面的难点在于如何创建一个
阅读全文
摘要：移动端app分类 1、Native App 原生app手机应用程序使用原生的语言开发的手机应用，Android系统用的是java，iOS系统用的是object-C2、Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用3、Web App 基于Web的app手
阅读全文
摘要：css 动画主要分为css 动画分类和CSS 常用动画库简介与js 动画；然后CSS 动画分类又分为过渡动画transition和关键帧动画keyframes，keyframes主要是从keyframes规则和keyframes属性来介绍。CSS 常用动画简介库简介与js 动画主要是Animate.
阅读全文
摘要：1、通过window.open()打开新页面下载文件 window.open(`url`, '_self') 使用场景：下载excel文件，后端提供接口，接口返回的是文件流，可以直接使用window.open()，最简单的方式。 优点：最简洁； 弊端：当参数错误时，或其它原因导致接口请求失败，这时无
阅读全文
摘要：Ben Frain曾经说过，写css代码很容易，但是扩展和维护却很难。本文就介绍了一套方案来解决这个问题。 OOcss OOCSS 意为面向对象的CSS。这种方法有两种主要 观点: 结构与设计分离 容器和内容分离 使用这套结构，开发者能得到可以在不同地方使用的一般类。 在这一步，会存在两点（通常就好
阅读全文
摘要：每天，数以百万计的开发人员使用 npm 或 yarn 来构建项目。运行npm init或npx create- response -app等命令几乎构建js项目的首选方式，无论是为客户端或服务器端，还是桌面应用程序。 但是npm不仅仅是初始化项目或安装包。在本文中，我们将会介绍 npm 的13个技巧
阅读全文
摘要：在开发者的弹药箱里，命令行是最具生产力的工具之一。掌握它们可以给你的工作流程带来非常积极的影响。因为，许多日常任务都可以用一条命令然后按回车来解决。 在本文中，我们为你准备了一系列常用命令，帮你充分利用你的终端。这其中有些命令是系统内置的，另外的一些则是需要另外安装的免费工具，不过这些免费工具是经历
阅读全文
摘要：在日常页面开发中，常常会涉及到图片的展示。有时候当图片资源过多时，我们希望能将图片延迟加载，同时当图片加载失败后，能用一张默认图片去代替其进行展示。 一、图片懒加载 其实图片懒加载的核心思想很简单： 通过预先将图片的src资源指向一张小图片或空，并通过 data-src 来记录其实际图片地址。 通过
阅读全文
摘要：我们将使用纯css打造一些切换开关并使其拥有类似于checkbox的用户体验。 很多时候我们都需要用户通过勾选/取消checkbox来表明他们对一些问题的答案。我们设置了一个标签，一个checkbox，并在提交表单后获取checkbox值，以查看用户是否已经选中或取消选中该checkbox。我们都知
阅读全文
摘要：最近接触了很多前端的小伙伴，和他们谈了很多职业发展的问题。他们大部分是做了一到三年的前端新手。 在交流中我发现了一个很有意思的现象，大家同样是入门不足三年，一部分感觉前端是一个很有前途的职业，甚至一部分两年经验的前端同学透露年薪已经30W以上了，而另一部分则表示前端薪资水平不高，技术体系庞杂，迭代速
阅读全文
摘要：我们都有这样的经历：当学习了一种前端技术的时候，同时会有几种新的前端技术诞生。 还有，你选择的那种前端技术，也许已经过时了。然而我们似乎也从来没有关注为什么会这样。 典型的解释似乎是 web 开发者天生不耐烦，永远追求最前沿的技术，赶时髦。总的来说：前端技术更迭如此之快是整个开发者社区的不明智（而你
阅读全文
摘要：于页面相应时间，有一条著名的“2-5-8原则”。当用户访问一个页面： 在2秒内得到响应时，会感觉系统响应很快；在2-5秒之间得到响应时，会感觉系统的响应速度还可以；在5-8秒以内得到响应时，会感觉系统的响应速度很慢，但可以接受；而超过8秒后仍然无法得到响应时，用户会感觉系统糟透了，进而选择离开这个站
阅读全文
摘要：除了使用 js 追踪用户，现在有人提出了还可以使用 css 进行网页追踪和分析，译者认为，这种方式更为 优雅，更为 简洁，且 不好屏蔽，值得尝试一波 我们可以用它来做什么 我们可以收集关于用户的一些基本信息，例如 屏幕分辨率（当浏览器最大化时）以及用户使用的什么浏览器（引擎） 此外，我们可以监测用户
阅读全文
摘要：在过去的几星期里，随着 Martin Fowler 博客上，那篇 Cam Jackson 写的微前端的文章发布，到处都在讨论 Microfrontend。作为一个微前端 “专家”，我也分享一下：如何去落地微前端。 微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单
阅读全文
摘要：埋点方案的确定，业界的埋点方案主要分为以下三类： 代码埋点：在需要埋点的节点调用接口，携带数据上传。如百度统计等；可视化埋点：使用可视化工具进行配置化的埋点，即所谓的「无痕埋点」，前端在页面加载时，可以读取配置数据，自动调用接口进行埋点。如开源的Mixpanel;无埋点：前端自动采集全部事件并上报埋
阅读全文
摘要：css3 的 calc() 函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 css 预处理器，比如 SASS，以上示例你或许
阅读全文
摘要：互联网有数不清的网页，且不断在以指数级速度产生新内容。到 2022 年，整个互联网创建和复制的数据将达到 44 ZB，也就是 44 万亿 GB。这么大体量内容的背后也带来了丰富信息源，唯一的问题是怎么在这浩如烟海的信息中检索到你想要的信息并带来价值。 直接解决方案就是使用 Web 挖掘工具 。Web
阅读全文
摘要：vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。本文详细介绍了vue.js的常用指令。 Vue.js 使用了基于 html 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。 <!DOCTYPE h
阅读全文
摘要：前言 上传文件在开发中是很常见的操作，今天我选择使用koa-multer中间件来实现这一功能，除了上传文件外，我还会对文件上传进行限制，以及发生上传错误时的处理。由于原来的 koa-multer 已经停止维护，我们要使用最新的 @koa/multer 。这个模块是 koa-multer 的一个分支，
阅读全文
摘要：今天分享的是一个简单的轮播图，这个轮播图的特效很简单，能够进行图片的轮播以及点击相应图片，图片能够跳转到相应位置，首先书写的div部分： <div id="scrollPics"> <ul class="slider"> <li><img src="../images/1.jpg" alt=""><
阅读全文
摘要：示例一 文件结构 假设你已经创建好了一个Django项目和一个App，部分结构如下： mysite myapp |___views.py |___models.py |___forms.py |___urls.py templates |___ajax_test.html 示例代码 ajaxTest
阅读全文
摘要：在使用 GraphQL （以下简称 gql）的前端项目中，往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了，前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践，我选择了 moc
阅读全文
摘要：两种方法获取的数据在servlet层传递的方法相同，下面为Servlet中代码，以查询表中所有信息为例。 //重写doGet方法 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws
阅读全文
摘要：一、全局组件的注册 通过Vue.component()创建一个全局组件之后，我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
阅读全文
摘要：在vue项目开发过程中，为了方便在各个组件中调用axios，我们通常会在入口文件将axios挂载到vue原型身上，如下：main.ts import Vue from 'vue' import axios from './utils/http' Vue.prototype.$axios = axio
阅读全文
摘要：增加Node运行内存 在Node中通过JavaScript使用内存时只能使用部分内存（64位系统下约为1.4 GB，32位系统下约为0.7 GB）。所以不管电脑实际的运行内存是多少，Node在运行代码编译的时候，使用内存大小不会发生变化。这样就可能导致因为原有的内存不够，导致内存溢出。所以可以增加N
阅读全文
摘要：子组件代码 //子组件请求接口，用自己封装的axios getupdate(){ this.$post({ url:this.$apis.unitupdate, postType:'json' }) .then( () => { this.$emit("getlist")//成功之后触发更新列表 }
阅读全文
摘要：此文使用的 vue 版本是 2.0+，在线例子看这里，下面顺便也把关键代码贴出来。 <template> <div class="hello"> <button @click="inputvalue.aaaa = 'aaaa is here'">show aaaa</button> <button
阅读全文
摘要：1. 效果图展示 2. 工程目录结构 注意: webapp下的resources目录放置easyui和js(jQuery文件是另外的) 3. 代码 index.jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %>
阅读全文
摘要：我们知道在react中，常用props实现子组件数据到父组件的传递，但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择，但是想着偷懒不学redux，在网上找了很多教程，要不就是hook的讲的太少，要不就是父子组件傻傻分不清，于是只好再啃了一下文档，就学了一下其它hook的api。在
阅读全文
摘要：extend是jQuery中一个比较核心的代码，如果有查看jQuery的源码的话，就会发现jQuery在多处调用了extend方法。 作用 对任意对象进行扩展 扩展某个实例对象 对jquery本身的实例方法进行扩展 实现 基础版本， 对简单对象进行扩展 jQuery.prototype.extend
阅读全文
摘要：1. 不依赖新旧值的watch 很多时候，我们监听一个属性，不会使用到改变前后的值，只是为了执行一些方法，这时可以使用字符串代替 data:{ name:'Joe' }, watch:{ name:'sayName' }, methods:{ sayName(){ console.log(this.
阅读全文
摘要：前期准备 初始化project 这里我们使用vue-cli来初始化一个vue项目。 npm install -g @vue/cli or yarn global add @vue/cli vue create personal-component-set 首先我们来开发一个可复用的顶栏控件，这里是用
阅读全文
摘要：attr() 设置属性值或者 返回被选元素的属性值 //获取值：attr()设置一个属性值的时候 只是获取值 var id = $('div').attr('id') console.log(id) var cla = $('div').attr('class') console.log(cla)
阅读全文
摘要：前言 这篇文章将还是通过实例的方式记录一下 react 中组件之间的通信方式，在 react 中，需要组件通信的情况一般有以下几种： 父组件向子组件通信 子组件向父组件通信 跨级组件通信 非嵌套组件通信 父组件向子组件通信 React 中采用数据单向流动的方式，父组件向子组件传递数据也是很常见的情况
阅读全文
摘要：Bootstrap Table 插件含有样式的数据如何排序，如下面的字段stargazers_count var data = [{ "name": "bootstrap-table", "stargazers_count": "<span>526</span>", "stargazers_coun
阅读全文
摘要：state也就是vuex里的值，也即是整个vuex的状态，而strict和state的设置有关，如果设置strict为true，那么不能直接修改state里的值，只能通过mutation来设置 例1: <!DOCTYPE html> <html lang="en"> <head> <meta cha
阅读全文
摘要：什么是流？ 流是为 Node.js 应用提供动力的基本概念之一。它们是数据处理方法，用于将输入的数据顺序读取或把数据写入输出。 流是一种以有效方式处理读写文件、网络通信或任何类型的端到端信息交换的方式。 流的处理方式非常独特，流不是像传统方式那样将文件一次全部读取到存储器中，而是逐段读取数据块并处理
阅读全文
摘要：将jQuery的ajax、axios和fetch做个简单的比较，所谓仁者见仁智者见智，最终使用哪个还是自行斟酌 1.jQuery ajax $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: functi
阅读全文
摘要：前言 js是一种基于对象的语言，在js中几乎所有的东西都可以看成是一个对象，但是JS中的对象模型和大多数面向对象语言的对象模型不太一样，因此理解JS中面向对象思想十分重要，接下来本篇文章将从多态、封装、继承三个基本特征来理解JS的面向对象思想 多态 含义 同一操作作用于不同的对象上面，可以产生不同的
阅读全文
摘要：JavaScript 语言越来越被广泛地用于各种环境中。除了 Web 浏览器（这是 JavaScript 的最常见的宿主环境类型）之外，你还可以在服务器，智能手机甚至机器人硬件中运行 JavaScript 程序。 每个环境都有其自己的对象模型，并提供了不同的语法来访问全局对象。例如，在Web浏览器中
阅读全文
摘要：Promise 并行 Promise.all是所有的Promise执行完毕后（reject|resolve）返回一个Promise对象。最近在开发一个项目中，需要等接口拿到全部数据后刷新页面，取消loding效果 // 项目中请求接口 function getShowProject(resolve,
阅读全文
摘要：前言 在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必有成长。本文试图
阅读全文
摘要：1、ts的泛型很难吗？ 如果你： 刚开始学ts 刚开始接触泛型 正在挣扎得学习ts的泛型 看到以下代码有没有很疑惑？ function makePair< F extends number | string, S extends boolean | F >() Java是和typescript一样支
阅读全文
摘要：JavaScript历史 它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：E
阅读全文
摘要：实现简单，便于做加减乘除使用，由于项目临时要用记录下，如需要更加复杂的计算类库，可以考虑 math.js等知名类库 代码 /** * floatTool 包含加减乘除四个方法，能确保浮点数运算不丢失精度 * * 我们知道计算机编程语言里浮点数计算会存在精度丢失问题（或称舍入误差），其根本原因是二进制
阅读全文
摘要：元素创建的三种方式: 1. document.write("标签的代码及内容"); 2. 对象.innerhtml="标签及代码"; 3. document.createElement("标签的名字"); 1. document.write("标签的代码及内容"); my$("btn").oncli
阅读全文
摘要：JavaScript中的函数可以通过几种方式创建，如下。 // 函数声明 function getName() { return 'Michael' } // 函数表达式 const getName = function() { return 'Michael' } // 箭头函数（同样也是表达式）
阅读全文
摘要：比较和逻辑运算符用于测试 true 或 false。 比较运算符 比较运算符在逻辑语句中使用，以判定变量或值是否相等。我们给定 x = 5，下表中解释了比较运算符： 运算符描述比较返回 == 等于 x == 8 false x == 5 true x == "5" true 值相等并且类型相等 x
阅读全文
摘要：1、filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 原数组不变不会对空数组进行检测 let arr1 = [1,2,3,4] let arr2 = arr1.filter(item=>item 1) console.log(arr1, 'arr1')
阅读全文
摘要：Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数： 实例 Math.random(); // 返回随机数 JavaScript 随机整数 Math.random() 与 Math.floor() 一起使用用于返回随机整数。 实例 Math.floor(Math.rando
阅读全文
摘要：1、js中使用new Date()来获取当前设备的时间，修改当前设备的时间 var now = new Date(); now; // Thu Nov 07 2019 16:08:51 GMT+0800 (中国标准时间) now.getFullYear(); // 2015, 年份 now.getM
阅读全文
摘要：需求： 前端js，已知开始时间a、结束时间b和间隔天数c，要求取在a-b这两个时间范围内、间隔c天的所有日期。 代码： // startDate: 计划开始时间； endDate：计划结束时间；dayLength：每隔几天，0-代表每天，1-代表日期间隔一天 function getDateStr(
阅读全文
摘要：一、原生css.supports语法 返回布尔值 true 或者 false ，用来检测是否支持某css属性。 语法 CSS.supports(propertyName, value); CSS.supports(supportCondition); 参数 propertyName字符串。用来检测的
阅读全文
摘要：!function(n){ var e=n.document, t=e.documentElement, i=720, d=i/100, o="orientationchange"in n?"orientationchange":"resize", a=function(){ var n=t.cli
阅读全文
摘要：1. 内容概要 本文主要讨论以下两个问题： JavaScript 的位运算：先简单回顾下位运算，平时用的少，相信不少人和我一样忘的差不多了 权限设计：根据位运算的特点，设计一个权限系统（添加、删除、判断等） 2. JavaScript 位运算 2.1. Number 在讲位运算之前，首先简单看下 J
阅读全文
摘要：对象常量属性 概念：将属性的writable和configurable设置为false； //将属性的writable和configurable设置为false var damu={}; Object.defineProperty(damu,"wife",{ value:"fbb" }) Objec
阅读全文
摘要：前言 本篇内容主要由 the-super-tiny-compiler中的注释翻译而来，该项目实现了一款包含编译器核心组成的极简的编译器。希望能够给想要初步了解编译过程的同学提供到一些帮助。 概要 本篇和大家一起学习写一款超级简单轻量,去掉注释只有不到200行代码的编译器。 该编译器将类 lisp 语
阅读全文
摘要：一、显示信息的命令 <!DOCTYPE html> <html> <head> <title>常用console命令</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body
阅读全文
摘要：前端工程师有时候面试时会遇到一类面试官，他们问的问题对于语言本身非常较真儿，往往不是候选人可能期待的面向实际的问题(有些候选人强调能干活就行，至于知不知道其中缘由是无关痛痒的)。这类题目，虽然没有逻辑，但某种程度说，确实考察了候选人对于JavaScript这门语言的理解。 突然想到这个话题是无聊在翻
阅读全文
摘要：有时候在生活中，你需要一个JavaScript倒计时时钟，而不是一个末日装置设备。不管你是否有一次约会，销售、促销、或者游戏，你可以受益于使用原生JavaScript构建一个时钟，而不是拿到一个现成的插件。虽然有许多很棒的时钟插件，但如果使用原生 JavaScript 实现，那你将得到以下好处： 代
阅读全文
摘要：1.Three.js 超过46K的星星，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、css3D 和 WebGL渲染器，让咱们在设备和浏览器之间创建丰富的交互体验。该库于2010年4月首次推出，目前仍有近1000名贡献者在开发中
阅读全文
摘要：基本格式化 4空格缩进 不省略分号(在原生及使用工具函数的情况不建议省略,在使用比较完善的框架如vue或者自己配置好 webpack 时可以省略) 1行代码长度不超过80个字符(个人比较推荐,毕竟编辑器的自动换行有时真的很难受) 运算符后换行,换行后增加2个缩进单位(变量赋值换行,变量保持和上一行等
阅读全文
摘要：转化为Boolean类型所有JavaScript中的值都能隐式的转化为Boolean类型，比如： 0 == false; // true 1 == true; // true '' == false // true null == false // true 但是这些值都不是Boolean类型。因此
阅读全文
摘要：我们先从一组 用例说起. 看代码: null > 0 // false null == 0 // false null >= 0 //true 我们今天讨论的主要内容,并不是这个结果可能看起来多么奇怪. 而是为什么会这样. 之所以特别记一篇随笔在这里,主要是因为,我在得到了 Brendan Eich
阅读全文
摘要：Nodejs中调用函数的方式有多种，可以在内部调用普通函数，还可以调用外部单个函数以及调用外部多个函数等。普通内部函数可以直接调用，外部函数需要先使用module.exports=fun将函数导出，然后就可以直接调用了。 nodejs调用函数的方法如下： 一、内部调用普通函数 保存d2_functi
阅读全文
摘要：Node.js path模块提供了一些用于处理文件路径的小工具，我们可以通过以下方式引入该模块： var path = require("path") path模块介绍： 方法 1、path.normalize(p) 规范化路径，注意'..' 和 '.'。 2、path.join([path1][,
阅读全文
摘要：网上大部分答案是用使用nginx的反向代理，我记录一下apache服务器怎么设置。 配置： 在Apache的配置文件中，打开 mod_proxy 和 mod_proxy_http 等等，即去掉 httpd.conf 中的# LoadModule proxy_module modules/mod_pr
阅读全文
摘要：JavaScript是一种基于原型的语言，JavaScript中的每个对象都有一个名为[[原型]]的隐藏内部属性，可用于扩展对象属性和方法。 直到最近，勤奋的开发人员使用构造函数来模仿JavaScript中面向对象的设计模式。语言规范ECMAScript 2015（通常称为ES6）引入了JavaSc
阅读全文
摘要：npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种： 允许用户从npm服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
阅读全文
