20191208 前端开发日报

JS中的CallBack与Promise间的对比;Vue 实现LED数字时钟(开箱即用);终于轮到Vue来带给React灵感了?;这些js技巧可以让你的开发事半功倍;lubjs(鲁班):快速开发并使用你的命令行工具;20 个新的且值得关注的 Vue 开源项目;HTTPS 证书认证原理分析;JS性能优化策略

  1. JS中的CallBack与Promise间的对比 如果您不熟悉JavaScript,并且很难理解Promise的工作原理,希望本文能帮助您更清楚地了解Promise。 话虽如此,本文针对的是那些对Promise不太熟悉的人。 这篇文章不会讨论使用async / await执行Promise(尽管它们在功能上是一样的,但在大多数情况下 async/await 才是真正的语法糖)。 冷知识 实际上,在JavaScript...
  2. vue 实现LED数字时钟(开箱即用) 实现思路 每一个数字由七个元素构成,即每一个segment元素。0~9 的数字都有自己的构成方式,用数组表示,即digitSegments数组。例如: 数字0用数组表示就是 ,定时器每隔一秒获取最新时间,然后通过改变透明度将之前的数字消失,显示最新的数字。通过transition展示动态效果。 代码细节 s...
  3. 终于轮到Vue来带给React灵感了? 今天在查看 react-transition-group 的时候,突然发现多出来了一个组件: 咦?奇怪,我记得以前明明只有仨啊,啥时候更新出来的,好奇心驱使我点了进去新出现的那个 SwitchTransition ,真是不看不得了,一看吓一跳啊! 考虑到大家的英文水平…(当然这句话好像不用啥英语水平都能看懂),我来给...
  4. 这些js技巧可以让你的开发事半功倍 数组的reduce方法用途很广。它一般被用来把数组中每一项规约到单个值。但是你可以利用它做更多的事。 1.1 使用reduce同时实现map和filter 假设现在有一个数列,你希望更新它的每一项(map的功能)然后筛选出一部分(filter的功能)。如果是先使用map然后filter的话,你需要遍历这个数组两次。 在下面的代码中,我们将...
  5. lubjs(鲁班):快速开发并使用你的命令行工具 最近王者荣耀出了一个新英雄:鲁班大师,lubjs第一版也开发完成(碰个瓷哈哈) 项目地址: https://github.com/lubjs/lub 命名由来: 鲁班是中国古代著名的工匠,木工师傅们用的手工工具,如钻、刨子、铲子、曲尺,划线用的墨斗,据说都是鲁班发明的。而每一件工具的发明,都是鲁班在生产实践中得到...
  6. 20 个新的且值得关注的 Vue 开源项目Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 web 应用程序。 因此,时时了解一些新出现又好用的Vue 开源项目也是挺重要,一方面可以帮助咱们更加高效...
  7. HTTPS 证书认证原理分析 这篇是我两年前发布在知乎上的一篇旧文,没想到被人抢先发到了公众号,结果微信检测到雷同不让标原创,看来技术文章还是要首发公众号,带上水印,让抄袭者见鬼去吧。 HTTPS 协议栈与 HTTP 的唯一区别在于多了一个安全层(Security Layer)—— TLS/SSL,SSL 是最早的安全层协议,TLS 由 SSL 发展而来,两者...
  8. JS性能优化策略 JS 是一门弱类型语言,拥有独特的原型链机制,在宿主中的拥有一套 DOM、BOM 操作接口,增加其性能控制的复杂性。JavaScript 主要应用场景依然围绕浏览器展开,所以,它在浏览器中的行为表现依然重要。本篇将从笔者的实践经验出发,分别从加载解析、语法优化、DOM 操作等各方面归纳总结优秀的 JS 代码性能优化策略。与此...
  9. Promise 使用、原理以及实现过程1.什么是 Promise promise 是目前 JS 异步编程的主流解决方案,遵循 Promises/A+ 方案。 2.Promise 原理简析 (1)promise 本身相当于一个状态机,拥有三种状态 pending fulfilled rejected一个 promise 对象初始...
  10. VUE路由组件复用的一个技巧 VUE的灵魂在于组件化开发,在VUE的世界里,我们可以把一切东西定义为组件,包括每一个路由对应的页面。而我之前开发都没有充分认识到页面也是组件这个概念,无形中增加了很多工作量,直到这两天写网站后台某个需求时才突然醒悟,原来路由对应的页面组件也是可以复用的,而且用起来一时爽,一直用真的一直爽。 从一...
  11. JS正则表达式全局匹配的那些坑 前段时间工作中遇到了正则全局匹配模式下的一些坑,在此查找总结了一下,以供参考。 什么是全局匹配 如果我们期望重复匹配目标字符串多次,可以使用 /.../g 或创建 new RegExp(..., 'g') 全局匹配,这样正则表达式的 global 属性将是 true let reg = /test/g; reg.global // true 复制代码 全局的正则表达式...
  12. js 回调地狱的另类解决方案尝试 例如 通过学生获取学生所在学校信息,需要先查询学生所在班级,再通过班级查询所在学校信息。js代码类似写法如下: function getStudentSchool(id) { ajax.get("/Test/GetStudent", { "studentId": id }, function (student) { if (student != null && student.ClassId != null) { ...
  13. How do toggle Angular2 use bootstrap 4 modal使用Bootstrap的模态框,再创建标签时,创建完成应该隐藏该模态框,在Angular Component使用Bootstrap模态框中Methods时,遇到一些小的问题!!!
  14. JavaScript的函数申明、函数表达式、箭头函数 JavaScript中的函数可以通过几种方式创建,如下。 // 函数声明 function getName() {   return 'Michael' } // 函数表达式 const getName = function() {   return 'Michael' } // 箭头函数(同样也是表达式) const getName = () => {   return 'Michael' } 函数声明和表达式之间的差别是 JavaScript...
  15. (译) 理解 JavaScript 的异步 JavaScript 是一种单线程编程语言,这也就意味着在同一时刻它只能做一件事情。更明确地说,也就是 JavaScript 引擎在同一时刻单一线程内只能处理一个语句。 使用单线程语言写代码是一件很轻松愉悦的事情,因为你不需要担心因为并发而导致的问题,这也就意味着你不能执行长操作,例如:不阻塞主线程的网络访问。 可以...
  16. 在Node.js上纵享丝滑地操纵SQL~【TypeORM】相信很多前端的玩家,在刚开始使用Node.js连接sql并且使用的时候,会感觉相当繁琐,甚至是有些困难。不用怕!TypeORM帮你解决关于一切关于操作sql的问题!
  17. ExtJS 下拉框监听事件、日期选择器监听事件、实现动态给items添加删除数据 1、下拉框 下拉框选择时,触发事件的方法: 在 Ext.form.ComboBox 组件中新增 listeners 监听事件 基本写法为 :  listeners { ‘ 事件 ‘,function(){ 处理方法 } } listeners:{ select:{ fn:function(combo,record,index) { } } } 2、日期选择器 选择日期时,值发生变化,并且在失...
  18. vue+leaflet+PruneCluster实现地图点聚合效果 前言 当地图上的标记点太多,就会造成信息的不直观,已经画面的不美观(过于密集),因此就需要使用点聚合来合并相邻的标记点。(又是咸鱼了一天才搞出来的) 目前这个效果使用了leaflet 搭配PruneCluster实现,官网的api其实挺详细的,但奈何本人英文不过关,网上的资料又少的可怜,着实花了一段时间。官网传送门...
  19. vue+TypeScript需要注意的点 // ts-loader typescript 必须安装,其他的相信你以后也会装上的 npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev 复制代码 ts-loader:TypeScript 为 Webpack 提供了 ts-loader,其实就是为了让webpack识别 .ts .tsx文件 tslint-loader跟tslint:我想你也会在.ts .tsx文...
  20. 深入理解JS中call,apply及bind的用法 举个栗子 有一天你一时兴起想做个红烧肉,但万事具备只欠口锅,但是买一个又不太划算,可下一次做,得到猴年马月。但此时你发现与你合租的小姐姐刚好有这么一口锅,于是你便借了过来做起了红烧肉。 这就是 apply 的用法, thisArg 表示你自己, func 则表示那口锅, apply 表示借用。 方法优点:靠改变this指向...
  21. ZooTeam 前端周刊|第 59 期实现单机支持100万用户,同时模拟了2015年微信红包的1400万QPS的场景,让服务器在压力下,轻松地完成业务。
  22. 基于vue-cli4脚手架搭建的cesium所踩的坑 使用过cesium地图框架的小伙伴都知道1.6版本之前的都是AMD模式的框架,后来改成ES6模块化,所以就想着如果是模块化开发了是不是可以用下当下前端流行的那些框架呢,react、vue、ng等等; 一般开这这种先河的小伙伴还是有不少的,就在Git社区寻找了下,但是发现有的不是运行不了,就是有的依赖包安装不了,不论是搭梯子...
  23. 泛型,很多人因它放弃学习 TypeScript?1、ts的泛型很难吗? 如果你: 刚开始学ts 刚开始接触泛型 正在挣扎得学习ts的泛型 看到以下代码有没有很疑惑? {代码...} Java是和typescript一样支持泛型的,当我在大学开始学习Java的时候,我还是一个菜鸟码农...
  24. 前端加载优化实战 作者简介 张海超    百度高级前端研发工程师 负责百度智能运维产品(Noah)、智慧机场等前端研发工作,对前端性能优化有广泛的实战经验。 干货概览 说到页面性能优化,我们常常想到首次加载、交互响应和渲染帧率等页面性能指标。为了给用户流畅...
  25. 浅谈JavaScript深拷贝 JavaScript的浅拷贝、深拷贝是一个老生常谈的话题,真正完美的深拷贝其实是比较困难的,但相对的能应用的场景也同样比较少,个人感觉浅拷贝和深拷贝的核心概念无非是对JavaScript引用类型的理解,普通的值类型可以直接复制,应用类型的直接复制则是对其地址的复制,这个其实就是C语言中的指针的概念。明白了这些深浅拷贝...
  26. Angular 相对路径在上周刚好看到《相对与绝对路径》这一节,刚开始看也没细细研究,就按着教程走一遍,直到后来看到了本节小测:本来心想,TeacherAddComponent模块的跳转都摆在这了,这不就是照着写的事吗。
  27. 除了HTML、CSS与JS 现在WASM也是标准Web语言 WebAssembly 也叫 WASM,它是为基于栈的虚拟机设计的二进制指令格式,WASM 作为可移植目标,用于编译高级语言(如 C/C++/Rust),从而可以在 Web 上部署高性能客户端和服务器应用,同时它也可以在许多其它环境中使用。 WebAssembly 描述了一种内存安全的沙箱执行环境,该环境甚至可以在现有 JavaScript 虚拟...
  28. Vue.js 中的无渲染行为插槽在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。
  29. 使用javaScript学习栈-队列-链表 栈是一种遵从 后进先出 原则的有序集合。新添加或待删除的元素都保存在栈的同一段,称做栈顶,另一端叫栈底。类比叠书取书的过程。 stack-demo 完整代码 使用对象来模拟栈 下面代码声明了一个 Stack 类, items 用于存储栈内所有的元素, count 记录了当前元素的个数。并且在原型上添加了 push , po...
  30. WebSSH画龙点睛之lrzsz上传下载文件 本篇文章没有太多的源码,主要讲一下实现思路和技术原理 当使用Xshell或者SecureCRT终端工具时,我的所有文件传输工作都是通过 lrzsz 来完成的,主要是因为其简单方便,不需要额外打开sftp之类的工具,通过命令就可轻松搞定,在用了WebSSH之后一直在想,这么便捷的操作WebSSH能够实现吗? 答案是肯定的,能实现!...
  31. 手把手用代码教你实现一个 webpack plugin插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中。
  32. 十六种炫酷纯css加载动画(一)有没有遇到过打开页面加载一段时间,页面内容才加载出来。在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次。下面的十六种炫酷炸裂的css加载动画,会让你在等待的过程中,体验视觉盛...

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

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

原文:20191208 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20191208.html)