javascript
文章平均质量分 72
我的小英短
Q版前端开发攻城狮
展开
-
使用 Vue.js,React.js 及 Hypernova 构建微前端服务
使用Vue.js,React.js和Hypernova 构建微前端服务如果大家不熟悉Hypernova,则可以阅读本文。软件架构的演变在软件开发的早期,前端和后端代码是由同一团队使用相同的运行时环境和部署过程来维护的,如今,我们将这些代码称为整体应用程序。随着系统变得越来越复杂,我们开始将代码分成两个小组,分别由两个具有专门技能的团队维护:前端和后端,后端团队可以专注于构建弹性和高可用性的系统,而前端团队可以专注于浏览器的兼容性, UI设计和UX。但这还不够,随着复杂性的增长,我们开始将后端的业原创 2020-08-24 14:57:22 · 411 阅读 · 0 评论 -
TypeScript 类型声明书写踩坑全解析
本文总结了TypeScript类型声明的书写,很多时候写TypeScript不是问题,写类型就特别纠结,我总结下,我在使用TypeScript中遇到的问题。如果你遇到类型声明不会写的时候,多看看lodash的声明,因为lodash对数据进行各种变形操作,所以你能遇到的,都有参考示例。基本类型 // 变量 const num: number = 1; const str: string = 'str'; const bool: boolean = true; const nulls: null.原创 2020-06-12 10:43:45 · 9978 阅读 · 0 评论 -
如果有人问,从输入URL到页面展示,这中间发生了什么?
“在浏览器里,从输入 URL 到页面展示,这中间发生了什么? ”这是一道经典的面试题,能比较全面地考察应聘者知识的掌握程度,其中涉及到了网络、操作系统、Web 等一系列的知识。所以我在面试应聘者时也必问这道题,但遗憾的是大多数人只能回答其中部分零散的知识点,并不能将这些知识点串联成线,无法系统而又全面地回答这个问题。从输入 URL 到页面展示完整流程示意图:从图中可以看出,整个过程需要各个进程之间的配合,所以在开始正式流程之前,我们还是先来快速回顾下浏览器进程、渲染进程和网络进程的主要职责。浏览原创 2020-06-08 11:45:56 · 417 阅读 · 0 评论 -
18行JavaScript代码构建一个倒数计时器
18行JavaScript代码构建一个倒数计时器有时,您将需要构建一个JavaScript倒数时钟。您可能有活动,销售,促销或游戏。您可以使用原始JavaScript构建时钟,而不用寻找最近的插件。虽然有很多很棒的时钟插件,但是使用原始JavaScript可以带来以下好处:您的代码将是轻量级的,因为它将具有零依赖性。您的网站将表现更好。您无需加载外部脚本和样式表。您将拥有更多控制权。您将构建时钟,使其行为完全符合您希望的方式(而不是尝试将插件弯曲到您的意愿)因此,事不宜迟,这里介绍了如何仅原创 2020-06-03 15:31:25 · 1930 阅读 · 0 评论 -
使用cURL和JavaScript操作线上Airtable API图文详解
带有cURL和JavaScript的Airtable API教程如果您正在寻找一种快速简便的方式来保存应用程序数据,那么Airtable就是您的最佳选择。Airtable基本上是一个像数据库一样的Excel工作表,具有大量的灵活性和用于检查/创建数据的GUI。目录基础入门APIPostman中带有HTTP请求的CRUD操作使用JavaScript进行CRUD操作小结最近,我已经将Airtable用作我的一些演示应用程序的数据库,我喜欢它。例如,还有其他一些不错的选择,例如Firebas原创 2020-05-26 15:47:46 · 1577 阅读 · 0 评论 -
Deno 与 Node 两款前端神器的争锋与较量
Deno 正式发布啦,还不清楚 Deno和 Node 的区别嘛?那就赶紧 take part in ....前言Deno 已经正式发布了????!我说这句话时候,是不是很多前端 和 NodeJS 工(码)程(农)师已经按不住自己的40米大刀了。心中的不仅感慨前端是真的会造轮子,有了 node 还不够吗,还没学会 node 又搞了个 deno,node 和 deno 啥区别?!的确,deno 和 node 形态很相似,要解决的问题似乎也相同,那他们到底有啥区别,让我们走进本篇文章,一探究竟。Deno原创 2020-05-25 16:57:20 · 953 阅读 · 1 评论 -
NW.JS 客户端开发入坑指南
基础概述NW.js 是基于 Chromium 和 Node.js 运行的, 以前也叫nodeWebkit。这就给了你使用HTML和JavaScript来制作桌面应用的可能。在应用里你可以直接调用Node.js的各种api以及现有的第三方包。因为Chromium和 Node.js 的跨平台,那么你的应用也是可以跨平台的。Getting Started1、安装对应的模块包:cnpm install nw nw-builder -Snw :基于Chromium和io.js的应用程序运行时。用于构建将原创 2020-05-21 13:43:51 · 957 阅读 · 0 评论 -
虚拟DOM的实现原理和优劣对比
虚拟DOM的实现原理和优劣对比原创 2019-12-24 17:28:39 · 3236 阅读 · 0 评论 -
generator、async函数的异步编程应用研究
简介:Generator函数主要应用于函数的异步操作,在ES6诞生之前,异步编程的方法,大概有下面四种: “ 回调函数 、事件监听 、发布/订阅 、Promise对象 ”。但是Generator函数的出现使异步编程更加的方便快捷。 一、Generator函数应用研究 1. 测试小体验:function* gen(x){ try { var y = yield ...原创 2018-12-11 13:55:49 · 1211 阅读 · 0 评论 -
fetch请求获取blob和arraybuffer文件流及核心API使用总结
123原创 2018-12-22 23:16:26 · 27086 阅读 · 0 评论 -
Generator函数相关基础知识点回顾总结
最近有项目需要用到koa,所以就顺带来回顾下当年学了但已忘得差不多的Generator函数,时隔接近两年的时光,再次回顾ES6 Generator函数,说没有感慨是不可能的,想想以前是多么的青涩,觉得自己对前端无所不能,无所不通。一年多后才知道,还是太年轻啦,学的东西还有很多,脚踏实地,一步一个脚印,踩稳,踩实。详细文档地址:http://es6.ruanyifeng.com/#docs/ge...原创 2018-12-10 21:55:37 · 1292 阅读 · 0 评论 -
eslint+sublime text 3 配置和使用(全)
1.全局安装ESlintcnpm install eslint -g2.在项目目录初始化.eslintrc.js配置文件D:\me\web\case03\kdew_internet_website>eslint --init? How would you like to configure ESLint? Answer questions about your style? Wh...原创 2018-12-28 16:19:12 · 2062 阅读 · 0 评论 -
Javascript高性能开发之阻塞和数据存取
一、脚本的加载和运行的阻塞性能优化script标签的出现,每次都需要让页面等待下载,解析,执行,如果把script写在head标签里面,页面的下载和渲染都需要等待脚本执行完毕。虽说目前的大多浏览器都都有并发请求加载的机制,但是script脚本的解析和运行依旧是阻塞页面内容加载和交互的一个问题。待优化的案例脚本:<!DOCTYPE html><html><he...原创 2019-01-04 19:12:18 · 770 阅读 · 0 评论 -
ES6+Koa2+Web Audio API 可视化音频应用开发
目录导读项目成品预览一、整个开发思路二、后端配置1. 安装koa应用生成器2. 新增路由 `/musc`三、前端配置1. 目标页面 `views/index.ejs`, 编辑如下2. 配置前端交互脚本 `public/javascript/music.js`四. 项目源码地址导读这段时间遇到个项目需要涉及音频流的可视化开发,可H5 Web Audio API 都是好几年前在慕课网有接触过了,然...原创 2019-01-01 18:17:14 · 1399 阅读 · 0 评论 -
gulp-util、del及gulp-bytediff插件案例开发
导读gulp中很多非常实用的插件,可以大大的增加了前端任务自动化的范围,这篇文章就分门别类的对如下3款常用插件的使用进行详细的介绍gulp-utilgulp-util带有很多方便的函数,其中最常用的应该就是log了。$.util.log()支持传入多个参数,打印结果会将多个参数用空格连接起来。它与console.log的区别就是所有$.util.log的结果会自动带上时间前缀。另外,它还支持...原创 2019-05-19 21:15:24 · 1111 阅读 · 0 评论 -
Mockjs前端开发数据模拟测试及深度解析
在项目开发接口联调的过程中,前端开发人员经常需要等待后端提供好数据接口后才能动手联调,所以为了提升开发效率,mockjs这个第三方库诞生了,这个库主要是为了满足前端开发获取接口数据,渲染页面,功能开发,可以不经过mysql、redis等数据库就可以直接联调,所以极大的提高了我们前端开发攻城狮的开发效率;记得之前的博客我介绍过json-server这款前端数据服务第三方库,json-serv...原创 2018-12-09 23:41:28 · 4414 阅读 · 1 评论 -
从零开始构建VUE 客户端和服务端SSR项目
一、服务端渲染 1.基本概念Vue.js 是构建客户端应用程序的框架。默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM。然而,也可以将同一个组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将这些静态标记"激活"为客户端上完全可交互的应用程序。2.为什么要使用服务端渲染优点:(1)更好的 SEO,由于搜索引擎爬虫抓取工具可以直...原创 2018-12-15 00:18:54 · 4294 阅读 · 0 评论 -
MVVM框架热门常用的组件库收集整理
在前端项目的开发过程中,少不了需要选择一款组件库作为项目开发的基础,而只要选择对了一款的合适的组件库就能极大的提升开发效率,直接让人体会到飞一般的感觉,简直爽的不要不要的。减少很多冗余的操作,和一些基础的代码整理,让开发更加快乐,让体验更加美好。1.Vue常用的组件库A.element-ui 地址:http://element-cn.eleme.io/#/zh-CNgithub地...原创 2018-12-06 15:32:39 · 1347 阅读 · 0 评论 -
根据vue-router实现简易版router路由
快深夜了,简单写点东西,不然还真睡不着觉哒 ~ ~写什么好呢?前些天看了下vue-router的源码结构,理解了下 router-view 和 router-link 的基本实现;所以简单写一个vue-router的小功能版本,实现基本的路由切换,就可以了;好吧,接下来我们开始吧 ~~一、最终路由切换展示二、使用方式其使用方式与原生的使用方式几乎一致,也有部分不同,由于并非使用...原创 2018-10-28 23:30:35 · 1471 阅读 · 0 评论 -
请求图片处理二进制乱码采坑记
今天日常做项目,项目中有一个功能,需要获取第三方登录的时候,返回一张可供扫描的二维码图片,展示在页面中。一般来所,直接axios请求就可以了,但是返回给了我一堆二进制乱码,乱码情况如下:然后一脸懵逼,正好我在坐窗子旁边,被太阳烤得精神恍惚,毫无头绪。然后,找原因呗,一直尝试了好多办法;都没想起是没传递responseType的原因引起的,由于axios的默认response是:applic...原创 2018-10-30 15:53:19 · 6570 阅读 · 1 评论 -
Vuex源码阅读理解
1. 提出问题:Vuex是如把store注入到Vue实例中去的呢?this.$store目标文件:mixin.js每个vue实例里面访问this.$store都是访问的mixin混入在beforeCreate生命周期里面的this.$store根据这个mixin.js中的代码逻辑可以知道,在vue2.x的条件下:if (version >= 2) { /*通过m...原创 2018-11-08 12:22:22 · 1765 阅读 · 0 评论 -
JS中for和setTimeout配合使用易错点分析
现在很多前端小伙伴太过注重各类框架的学习,各类第三方包的使用;但是冷落了好些开发最重要的前端基础。没有基础,怎能建成高楼大厦呢?会些基本的node、php、python后端语言,mysql、mongodb数据库,会用些后端框架,模板解析框架,写些api,文件系统操作等,然后动不动就把全栈挂在嘴巴上,这样做意义好像真心不大。学习是一个不断重复的过程,基础知识一个需要不断回顾的过程,一切的框架第三方库...原创 2018-11-15 14:39:20 · 1827 阅读 · 0 评论 -
2018年末前端核心基础扩展知识点积累
1.优雅降级和渐进增强概述:渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功...原创 2018-11-20 17:49:48 · 1780 阅读 · 0 评论 -
FormData全解析及多文件上传前后端案例实战
这几天做项目都是个文件流各种打交道,当然其中就免不了和FormData接触了了呀,所以这次仔细研读下FormData类的所有常用的特性,以及总结所用的领域有哪些?一、案例分析(热身)在了解FormData之前先来了解一个前端上传多个附件,且能对上传的附件进行删除,后端用express、multer接受处理文件的小案例,此案例涉及的一些技术栈:node、express、fetch、For...原创 2018-11-23 17:00:22 · 7966 阅读 · 0 评论 -
cnpm install报错:Connect timeout for 5000ms 踩坑
这次发布项目自动化打包,cnpm install 报错,报错如下:Get /binary-mirror-config/latest from https://registry.npm.taobao.org error: ConnectionTimeoutError: Connect timeout for 5000ms, GET https://registry.npmjs.com/binar...原创 2018-11-29 14:22:21 · 14262 阅读 · 3 评论 -
ES6核心常用基础知识点积累
1.ES6 对于数组,字符串的扩展(1)字符串:模板字符串 [ `${变量}` ]字符串复制 [‘abc’.repeat(2) // abcabc ]查找返回布尔值 [‘smile’.includes(‘sm’) // true]判断开头位置,返回布尔值 [ ‘smile’.startWith(‘s’) // true ]判断结尾的位置,返回布尔值 [ ‘smile’.startW...原创 2018-12-04 14:39:34 · 1757 阅读 · 0 评论 -
gulp-print、gulp-bump与gulp-header npm第三方库插件解读
导读在实际开发过程中,我们需要使用一些工具来带打印出我们的文件,所以我们需要使用gulp-print这个插件,这个插件有一个回调,回调的参数是当前处理的文件路径,当然在某些时候,我们也需要修改json配置,所以我们需要用到gulp-bump这个插件;最最常用的就是我们需要在很多文件的头部需要加上我们开发者自己专属签名,所以需要使用gulp-header这个插件解读 gulp-print文档地...原创 2019-05-20 23:08:24 · 1334 阅读 · 0 评论 -
gulp处理多文件流合并处理及根据注释向页面自动植入js和css
导读在前端自动化项目过程中,会根据项目需求,实现一些特殊的需求,就比如把本地引入的第三方库资源批量植入页面html,或者类似于一些相同工作流,只是入口出口不一样,我们需要合并统一处理工作流,减少我们的task,使用函数封装一个单独的定制的task根据上面这些功能,我们引入merge-stream和wiredep这两个功能插件,具体实现的功能,请看下面的小案例:merge-stream一个g...原创 2019-05-24 15:31:47 · 2049 阅读 · 0 评论 -
webpack 引入の公共模块代码分离及懒加载
webpack 公共引入模块代码分离及懒加载导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test基本的代码分离案例在src目录下编辑index.js如下:import _ from 'lodash' // index.js中引入了lodashimpor...原创 2019-06-18 15:48:42 · 1395 阅读 · 0 评论 -
webpack开发生产环境配置
webpack 生产/线上环境构建导读在该篇博文中,我们将分别部署生产和开发的webpack打包编译以及项目运行环境项目地址:https://github.com/RiversCoder/webpack-test配置文件安装webpack-mergecnpm install --save-dev webpack-merge在项目主目录中新建如下几个js文件:D:\me\...原创 2019-06-17 14:14:16 · 1202 阅读 · 0 评论 -
webpack安装和基本构建
webpack指南梳理学习 - 安装和基本构建导读webpack是前端开发过程中使用超多,用户量超广的一款前端开发打包编译工具,用起来让你欲罢不能,爱不释手。作为目前最火的打包工具,它又是如何使用工作的呢?接下来,我们来通过官网的指南学习梳理webpack的基础知识,掌握webpack的常用功能知识点webpack安装前提在学习之前,我相信你们已经基本掌握前端的相关基础知识点,而且本地电...原创 2019-06-11 10:57:26 · 767 阅读 · 0 评论 -
webpack 缓存问题处理解决与性能优化方案
webpack 缓存问题处理解决方案导读在该篇博文中,我们将逐步实现文件hash后缀的输出,修改某个文件,才会对应输出修改该文件的hash后缀,同时满足性能优化,客服端服务端代码同步更新项目地址:https://github.com/RiversCoder/webpack-test官网介绍在之前的指南案例中,我们使用 webpack 来打包我们的模块化后的应用程序,webpack 会生...原创 2019-06-20 17:04:18 · 2623 阅读 · 0 评论 -
如何制作一个gulp生态插件?gulp插件实战案例开发
在使用`gulp`构建前端项目的时候,可能会需要一些功能,但这些功能目前没有`gulp`插件实现,所以可能需要自己写一个插件来满足开发使用。但是,如何开发一款`gulp`插件呢?原创 2019-06-04 14:46:20 · 989 阅读 · 0 评论 -
gulp-jade 动态数据渲染编译模板 热更新案例开发
导读我们今天来聊一聊如何使用gulp编译生成jade模板;如果你想快速编写html,就可以使用node下很火的一款模板语法jade,但你便写完代码后,想要立即看到效果就可以使用gulp生态里面的gulp-jade插件,它可以把jade文件动态编译渲染成html,包括数据列表的渲染我们要实现的目标效果是:编辑jade文件保存,页面自动热更新案例代码 - 第一阶段 ( 初级阶段 )下面这个...原创 2019-06-03 16:09:47 · 1213 阅读 · 0 评论 -
webpack热更新案例实现
webpack热更新案例操作导读模块热替换(Hot Module Replacement 或 HMR), 也叫热更新,它是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块,而无需进行浏览器刷新或者命令行重启。注意:热更新 HMR只能在开发环境使用,不适用于生产环境使用webpack.config.js启用 HMR启用该功能实际上相当简单。而我们要做的,就是更新 we...原创 2019-06-14 14:50:57 · 2242 阅读 · 0 评论 -
webpack常用开发工具模块介绍
webpack常用开发工具模块介绍导读在webpack的构建过程中我们需要用到一些基本构建开发工具来提升我们的工作效率,这些工具有哪些呢?source map 自动追踪代码错误所在的文件webpack watch 观察者模式自动编译webpack-dev-server 指定目录启动本地服务webpack-dev-middleware 传递文件给服务器source map 自动追...原创 2019-06-13 17:54:42 · 968 阅读 · 0 评论 -
webpack静态资源管理加载及输出管理
webpack指南梳理学习 - 静态资源管理加载及输出管理导读在webpack中,静态资源管理加载和输出管理是非常重要的一个功能,在模块化开发中起到了很重要的作用,我们通过加载打包css、图片、字体、数据文件等来了解webpack对资源的管理安装依赖cnpm install --save-dev style-loader css-loader # 加载csscnpm install -...原创 2019-06-12 14:38:33 · 1875 阅读 · 0 评论 -
使用 gulp-html-replace 前端自动化配置替换html模板中指定内容
导读在某些开发项目中,我们需要用到动态输出index.html文件,而这个页面文件内的资源也是需要动态加载的,就比如说在线面这些开发条件:一些静态资源需要加版本号动态编译sass,把编译后的内容动态植入html的style标签中,或者自动引用编译好的css文件在index.html文件中,动态插入多个js文件的script脚本内容如果你想往页面中动态插入一些你需要的一些内容,那gulp...原创 2019-05-31 15:00:03 · 5317 阅读 · 0 评论 -
gulp-swig动态数据模板编译输出html文件
导读在node开发的过程中使用使用swig模板的情况比较多的,所以呢,如何快速便捷编译swig模板成为我们的一个面临的选择,使用webpack下的loader,还是gulp生态圈的插件呢?这里我推荐使用gulp-swig插件,可以在本地使用swig快速开发web项目,包括数据的输入,模板的继承等等推荐官网文档:https://www.npmjs.com/package/gulp-swig...原创 2019-06-05 15:35:55 · 1371 阅读 · 0 评论 -
gulp-zip、gulp-task-listing、yargs 插件gulp项目案例实战练习
导读在工作开发中经常需要压缩工具,进行对自定文件进行自动压缩打包,所以我们用到gulp-zip这个插件有时候在gulp工作流定义太多的时候,需要随时查看task的数量和状态,所以我这个时候就可以用到gulp-task-listing,不过使用命令行gulp --tasks也可以做到在处理一些生产环境 ( dev )或者线上环境 ( prod )需要单独打包编译的情况下,我们就需要对命令行进...原创 2019-05-18 11:52:27 · 1215 阅读 · 0 评论