20190623 前端开发日报

前端单元测试实践(koa篇);【整理】20个让你效率更高的CSS代码技巧;CSS改变鼠标样式(图片);一文搞懂eggjs中上传文件;Vue和MVVM的对应关系;vue项目工程化规范;Vue.js 高级概念:Mixins,自定义指令,过滤器,过渡,状态管理和服务端渲染;10 种 JavaScript 最常见的错误

  1. 前端单元测试实践(koa篇) 前端的业务逻辑日益复杂,对于逻辑正确性的要求也越来越高,单元测试作为一种简单快捷的测试工具为前端业务的正确性提供了有力的支持。所谓单元测试,就是通过测试单个代码单元以测试代码的单一功能,单元测试可以让开发人发现很多潜在的问题。 为什么要写单元测试 单元测试费时费力的苦力活,很多人都不愿意写,甚…
  2. 【整理】20个让你效率更高的CSS代码技巧在本文中,我们想与您分享一个由各大CSS网站总结推荐的20个有用的规则和实践经验集合。有一些是面向CSS初学者的,有一些知识点是进阶型的。希望每个人通过这篇文章都能学到对自己有用的知识。
  3. CSS改变鼠标样式(图片)如果你想让你的网站看起来更酷炫,可以改变鼠标样式,用你喜欢的图片来代替。 下面就来介绍下步骤方法: 首页把鼠标图标格式转换成.ico格式,大小为32*32转换格式网址为:[链接] 然后在CSS样式中增加代码: {代码…
  4. 一文搞懂eggjs中上传文件 在 eggjs 中上传文件的 官方文档 1、配置上传的路由 module.exports = (app) => { const { router, controller } = app; router.resources(‘file’, ‘/api/v1/file’, controller.file); }; 复制代码 2、在 config/config.default.js 中配置上传的基本配置(可以参考 官方文档 )…
  5. Vue和MVVM的对应关系 Vue是受MVVM启发的,那么有哪些相同之处呢?以及对应关系? MVVM(Model-view-viewmodel) MVVM还有一种模式 model-view-binder ,主要用来简化用户界面的 事件驱动程序设计 MVVM可以分成四部分 Model:模型 View:视图 ViewModel:视图模型 Binder:绑定器 主要形式还是 Model-ViewModel-View 模…
  6. vue项目工程化规范 在一个团队中,一般会同时有多个项目在开发,我们除了要开发自己主要负责的项目,偶尔也会因为客观因素去开发别的团队或个人主导的项目。这时问题就出现了,我们需要花一定的时间去了解项目的目录结构,并且努力遵循当前项目的一些潜在的规范(即使这些规范内心是拒绝的,为了不破坏整体性也会去遵守)。那么我们对于采…
  7. Vue.js 高级概念:Mixins,自定义指令,过滤器,过渡,状态管理和服务端渲染 搭建环境 (Vue.js 2.x) 下面利用 Vue-cli 搭建一个工程,首先安装Vue-cli npm install -g vue-cli 复制代码 安装完成 执行Vue -V 检查是否安装成功,我的 Vue-cli 版本是2.9.6。 Mixins Vue 官方网站对 Mixins 定义:混入 (Mixins) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一…
  8. 10 种 JavaScript 最常见的错误 前言 查看了数千个项目后,发现了 10 个最常见的 JavaScript 错误。我们会告诉你什么原因导致了这些错误,以及如何防止这些错误发生。如果你能够避免落入这些 “陷阱”,你将会成为一个更好的开发者。 JavaScript 常见错误 Top 10: 为了便于阅读,我们将每个错误描述都尽量简化。接下来,让我们深入到每一个错…
  9. Vue单页SPA后台管理点击刷新当前页面 ​ 使用vue都知道 SPA页面中跳转当前页面是不会有反应的,例如 在login页面使用 this.$router.push(‘login’) ,页面是不会出现任何现象的,push的路由也不会进入你是记录,那么我们如何实现在单页应用的刷新呢? 需求: 点击左侧菜单的当前导航页面属性 我们看一下Vue-router的文档 导航式编程 router.pus…
  10. 前端的排序算法总结思路:两层循环,内层循环对比相邻两个数据(j,j+1),假设j > j + 1则交换元素位置。外层循环为长度限制,在内层第一次循环完成后减少长度1(因为最后一个泡已经固定,为这个数组的最大值)
  11. 入门 TypeScript 编写 React 使用 create-react-app 开启 TypeScript Create React App 是一个官方支持的创建 React 单页应用程序的CLI,它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时,你可以运行: $ npx create-react-app my-app –typescript $ # 或者 $ yarn create reac…
  12. 记开发一个webpack插件的心路历程 作为一名前端菜:chicken:,日常工作就是写各种业务代码, 看着大佬们写的小工具、插件啥的,羡慕不已。 偶然想到要不也写个插件试试?试试就试试,抱着试试看的态度,开始了。 第一次写,有不当之处还望各位大佬指正。 一、插件介绍。 auto-export-plugin 看图 良辰:在左边test文件中…
  13. NodeJs 模仿SIP话机注册 NodeJs readline:命令行输入 ws:与服务端建立websocket连接 superagent:与服务端建立请求连接,效果类似ajax请求 tsk_md5:项目登录密码使用MD5加密 项目需求 模拟SIP话机频繁向服务器发起注册请求,以得到服务器最大SIP注册数 项目实现概述 终端输入连续注册分机的开始分机号和结束分机…
  14. Vue生命周期钩子简介[每日前端夜话0x8A] 每日前端夜话 0x8A 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:1993 字 预计阅读时间: 6 分钟 作者:Nwose Lotanna 翻译:疯狂的技术宅 来源: logrocket 在本文中,我们来学习可用于 Vue JS 工作流程中的所有 hooks 。 Vue Vue JS 是…
  15. 重新介绍 JavaScript(JS 教程) JavaScript 是一种多范式的动态语言,它包含类型、运算符、标准内置( built-in)对象和方法。它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适用于 JavaScript。JavaScript 通过原型链而不是类来支持面向对象编程(有关 ES6 类的内容参考这里 Classes ,有关对象原型参考见此继承与原型链)。Jav…
  16. Golang websocket结合一致性哈希算法构建高并发推送服务 2018年9月2日 1 场景介绍 web应用中,常有业务状态需要实时更新的场景。如一个较长的后台任务,从浏览器用户触发执行到执行完成可能需几十秒的时间,这时前端需隔几秒请求一次后台,查询任务执行进度。此种方式是长轮询的方式,是存在一定弊端的,增加了后台服务的负载,若并发操作量太大,后台压力会成倍激增。…
  17. js中call、bind、apply你知多少? @ TOC 在我们日常开发过程中call、bind、apply无疑是我们用的比较多的语法,今天在开发中看到有同事傻傻分不清call和bind的区别,故在解释一通之后,写下此文; 首先查看文档理解含义 call() 从MDN 文档 call我们可以了解到: call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。 f…
  18. 【Vue项目总结】项目nginx部署项目开发完成,接下来是上线,关于vue项目的部署,我司前端是部署在nginx服务器上,关于nginx的相关文档,请自行查阅;本文只记录部署时碰到的一些问题。
  19. 基于animatge.css的js动画库 本项目是基于animate.css进行的二次开发,主要功能是对animate.css里面的动画进行了js控制。 Animate.css项目地址: Daniel Eden – Animate.css 二、项目功能 自定义动画 贝塞尔曲线 回调函数 动画暂停和开始 按需调用 三、使用 (一)引入animate.js文件 <script type="text/javascript&q…
  20. 异步解决方案一:promise 之前一直对于promise,就是一顿用,从来没有深究其内部原理,无意间看到一些关于promise输出顺序的题目也是一顿瞎猜。。。哈哈,在我的同事对promise进行分享之后(虽然我因为起不来没有听),但是学习promise的意识就此种下。。。啥也不说了,就是学。。。 带着疑问去学习: promise是干什么的? pro…
  21. 教你用webpack4打造优化到极致的活动页面 一般待过大公司的同学都知道,一个成熟稳定的公司肯定需要销售产品或推广产品来盈利,推广自己的产品则需要活动页面来引流。下面,我将分享自己在公司的探索经历,教你用webpack4打造优化到极致的活动页面。 项目结构 spcial为项目名称,build为webpack配置,common为公用文件,dist为打包后的文件(这里就是要上线…
  22. websocket借助Redis实现实时双工通信 最近在梳理一些知识点,已脱敏并去除公司实现,做一些自己理解上的实践。 结构 本次打算模拟下一个实时双工交互的业务实践,先来张图。 模式结构图 可以看出,实时双工通信的基础在于 Redis 部分,核心就在于 Pub/Sub 模型,其余部分在此基础上丰富了交互内容。 Server 端 ,用于…
  23. 详解javascript中的正则表达式 作为一名合格的前端开发工程师,了解并掌握正则表达式是非常有必要的。多年的项目经验告诉我,学好正则表达式可以让我们少写很多的代码。这篇文章非常适合哪些初中级和对正则表达式掌握不是很清楚的同学,废话不多少,我门开始吧。。。 正则表达式的定义 js中的正则表达式用 RegExp 对象表示,可以使用 RegExp() 构…
  24. JS学习笔记整理五 面向对象的程序设计 对象的属性类型包含:数据属性、访问器属性 数据属性 可配置:Configurable,是否能用delete删除。能否修改属性特性。此值一旦设为false,就不可逆。 可修改:Writable,能否修改value值。 可枚举:Enumerable,能否通过for…in枚举。 值:Value 访问器属性 没有value和writa…
  25. Web Storage 和 cookie 的用法和区别 它们都可以用于存储用户数据 它们存储数据的格式都是字符串形式 它们存储的数据都有大小限制 Web Storage 和 cookie 也有不同之处: 它们的生命周期不同。sessionStorage 的生命周期是一个会话,localStorage的生命周期是永久,cookie 的生命周期可以自定义,cookie 可以设置过期时间,数据在过期时间之前可…
  26. webpack开发环境配置 日常吐槽 经过不断的调整和测试,关于 react 的 webpack 配置终于新鲜出炉。本次的重点主要集中在开发环境上,生产环境则是使用 webpack 的 production 默认模式。 本次配置主要有: eslint+prettier ; optimization.splitChunks ; happypack ; DllReferencePlugin & DllPlugin ;…
  27. 前端架构师亲述:前端工程师成长之路的 N 问 及 回答问题回答者:黄轶,目前就职于 Zoom 公司担任前端架构师,曾就职于滴滴和百度,毕业于北京科技大学。
  28. js解密剖析—爬虫之网易云音乐加密破解 网络爬虫的大障碍,就是各种加密。这其中包过登录的验证码以及加密。js混淆、js参数加密等等。其实以前也就了解过js加密。但是没有深入研究,借着这次实践研究了一下网易云音乐的加密方式。 博主通过网易云音乐评论加密的实例来做个学习过程的分析和分享。 如果有问题或者不懂的地方可以关注我的 微信公众号(bigsai…
  29. 让 babel webpack vue 配置文件支持智能提示 如果非脚手架搭建的项目,往往需要手动配置 babel webpack。 每次都要打开官网,复制黏贴,然后一个一个配置。 如果配置也能智能提示,岂不美哉。 babel 配置 如果原先是 .babelrc 配置,请改成 .babelrc.js 或者 babel.config.js 然后安装依赖 npm i -D @types/babel__core 或 yarn add -D @types/babel__co…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流