20190906 前端开发日报

Vue从甜小白到皮大佬系列(七) Vue Router;一道题弄清楚JavaScript继承演化史;前端自动化单元测试初探;webpack-从零开始定制一个自己的vue-cli;vue中如何使用i18n实现国际化;vue中如何实现后台管理系统的权限控制;这一次,彻底弄懂 Promise 原理;新手学习 react 迷惑的点(二)

  1. Vue从甜小白到皮大佬系列(七) Vue Router 官方传送门 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,在我们项目中也是必会技能之一。下面我想通过以下几个方面来分享。 一、集成Vue Router 1.如果安装了vue脚手架cli3 在create项目的时候会有安装Vue router的选项,选中敲空格就会默认安装Vue r…
  2. 一道题弄清楚JavaScript继承演化史 写出一个构造函数 Animal 输入:空 输出:一个新对象,该对象的共有属性为 {行动: function(){}},没有自有属性 再写出一个构造函数 Human Human 继承 Animal 输入:一个对象,如 {name: ‘Frank’, birthday: ‘2000-10-10’} 输出:一个新对象,该对象自有的属性有 name …
  3. 前端自动化单元测试初探 本篇文章是我在学习前端自动化单元测试时的一些思路整理,之前也从未接触过单元测试相关工具,如有错漏,请读者斧正。要是觉得不专业…你打我呀~~~ 示例代码的github地址: github.com/BboyAwey/au… 1. 什么是单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。对于单元测试中单元…
  4. webpack-从零开始定制一个自己的vue-cli 用vue的都知道vue-cli是一个强大的构建vue项目的工具。vue-cli3.0前,它所有的配置都能看到,到vue-cli3.0后所有的配置都隐藏了。 既然vue-cli那么好,作为一个搞技术的,往往会想自己能不能也弄一次个类似的出来捏~ emmm..最近刚好有点空闲时间,自己就从零开始搭建了一个自己的vue-cli,顺便也踩踩坑。 在配置中细节…
  5. vue中如何使用i18n实现国际化 在4k广告机中需要实现多语言切换,这时候接触到国际化,前端框架无数,其中几种热门的框架都有相匹配的国际化插件工具。比如: vue  +  vue-i18n angular  +  angular-translate react  +  react-intl jquery  +  jquery.i18n.property 在4K广告机…
  6. vue中如何实现后台管理系统的权限控制 在广告机项目中,角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单中的页面是否能被访问 页面中的按钮(增、删、改)的权限控制是否显示 下面我们就看一看是如何实现这些个权限控制的…
  7. 这一次,彻底弄懂 Promise 原理 Promise 必须为以下三种状态之一:等待态(Pending)、执行态(Fulfilled)和拒绝态(Rejected)。一旦Promise 被 resolve 或 reject,不能再迁移至其他任何状态(即状态 immutable)。 基本过程: 初始化 Promise 状态(pending) 执行 then(..) 注册回调处理数组(then 方法可被同一个 promise 调用多次) 立…
  8. 新手学习 react 迷惑的点(二)第一篇反响也还不错,很多新手都觉得很有帮助,解答了他们很久以来的疑惑,其实第一篇里面的还算基础的,主要是 ES6 语法和 JSX 没有深刻理解。
  9. 带你撸一遍JS隐式转换细则 写在开篇之前:记录学习点滴,如有错误与补充,希望大家积极指正。 js的数据类型 js数据类型: null , undefined , String , Number , Boolean , Symbol , Object ,其中 原始类型: Number 、 String 、 Null 、 Undefined 、 Boolean 引用类型: Object ,包含 Array JavaScript 是一种弱类型或…
  10. JS中的【位操作符】浅识 二进制数(binaries)是逢2进位的进位制,0、1是基本算符;计算机运算基础采用二进制。电脑的基础是二进制。在早期设计的常用的进制主要是十进制(因为我们有十个手指,所以十进制是比较合理的选择,用手指可以表示十个数字,0的概念直到很久以后才出现,所以是1-10而不是0-9)。电子计算机出现以后,使用电子管来表示…
  11. JS中,如何提高展开运算符的性能为了回馈读者,《大迁世界》不定期举行(每个月一到三次),现金抽奖活动,保底200,外加用户赞赏,希望你能成为大迁世界的小锦鲤,快来试试吧
  12. 全面解析JavaScript – this作用域详解 this 是 JavaScript 中的一个关键字,当一个函数被调用时,除了传入函数的显式参数以外,名为 this 的隐式参数也被传入函数。 this 参数指向了一个自动生成的内部对象,这个内部对象被成为 函数上下文 二、This的使用场景 1. 全局&调用普通函数 在全局环境中,this 永远指向 window。 console.log(this…
  13. Dark Mode,你准备好了么?;Angular V8新特性;Raywenderlich 新教程:MVVM + Combine 关键词: Dark Mode 、 Combine 、 VIPER Dark Mode,你准备好了么? 苹果向开发者发送邮件,Dark Mode 的适配终于列上了日程。 Dark Mode为iPhone和iPad带来了一种引人注目的全新外观,可以在整个系统中无缝集成,并且可以从Control Center或Siri轻松打开。使用 Dark Mode 时,您的应用内容将成为焦点。 启用…
  14. 【辟邪剑法】探秘javascript 中的 void public class Test { public static void main(String ); } } } 复制代码 不好意思,放错了,我们换一个 <a href="javascript:void(0);"> </a> 复制代码 这下是不是就不陌生了呢 void定义 MDN说明 voi…
  15. Mocha js官方文档翻译 —— 简单、灵活、有趣 本次翻译时间为2016年9月底,目前Mocha的版本为3.1.0。 官方文档地址:mochajs.org/ —— Awey 1. 简介 Mocha是一个能够运行在Node和浏览器中的多功能的JavaScript测试框架,它让异步测试简单且有趣。Mocha连续地运行测试,并给出灵活而精确的报告,同时能够将错误精确地映射到测试用例上。它托管在 GitHub 上。 …
  16. JavaScript 之 this 与箭头函数 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。 由于箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数(不能绑定this),他们的第一个参数会被忽略。 前言 阅读下面的内容要先看下《你不知道的javascript(上)》中的第二部分:this和对象原型(里面对于…
  17. 手写promise跑promiseA+规范 promise 是什么,主要用来解决什么 promise 有哪些实例方法和静态方法 promise 为什么可以进行链式调用 怎样实现promise状态的不可逆 promise是什么? Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大,就是用同步的书写代码方式来替代回调地狱式的写法 promise 的状态 …
  18. 函数式 JavaScript:大家所关心的高阶函数 原文: FUNCTIONAL JAVASCRIPT: WHAT ARE HIGHER-ORDER FUNCTIONS, AND WHY SHOULD ANYONE CARE? 声明:翻译原文从国外知名博客网站上获取,并利用业余时间进行翻译。如果发现网络上有其他译文,可能是因为开始翻译时没有发现已存在译文或是感觉原译文翻译质量不佳而重新翻译。不论出于哪类原因,本译文不会包含任何…
  19. 给手机端页面留一个调试后门吧(vue)当我们在浏览器开发vue页面时,由于浏览器对于调试有天然的支持,我们开发起来很方便。但是现在已经进入了移动端时代,移动端页面的需求越来越大。
  20. 如何在 JavaScript 中使用强大的复合函数 原文: How to use powerful function composition in Javascript 声明:翻译原文从国外知名博客网站上获取,并利用业余时间进行翻译。如果发现网络上有其他译文,可能是因为开始翻译时没有发现已存在译文或是感觉原译文翻译质量不佳而重新翻译。不论出于哪类原因,本译文不会包含任何抄袭行为。 复合函数(Functi…
  21. antV G6流程图在Vue中的使用 最新版本 请关注G6官方的github仓库 github.com/antvis/g6 2.x版本后,可以通过 npm install 直接安装使用了 相关资源下载 antV G6( v1.2.8) 字体图标 最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文…
  22. 转行前端第二年需求来源于我自己,我很想看看,大家都是怎么一步步走过来的,有时候对你帮助最大的不是一个10年老鸟,而是领先你一点点的学长
  23. React进阶 会使用Hook吗?紫棋的一句想要我帮你唱hook吗?让hook红了一把!做为一个开发,尤其是前端开发,在电视上听到这个词还是有点小兴奋的(虽然彼hook非此hook)。玩够这个梗,是不是也要了解一下自己的react hook?
  24. JSX在render函数中的应用 const element = <h1>Hello, world!</h1>; 复制代码 JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能。 Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。 以下两种示例代码完全等效: const element = ( &lt…
  25. 在 JavaScript 中用海龟图形概念绘图对于那些不熟悉海龟图形的人来说,这是一个使用虚拟“海龟”绘制图形的概念,当海龟四处移动时,它的尾巴会在屏幕上留下痕迹。海龟有几个简单的命令:向前/向后移动 x 步,向左/向右转 x 度等。
  26. 【梯云纵】一文搞定前端跨域的所有方式 广义的跨域是指一个域下对的文档或者脚本试图去请求另外一个域下的资源。 <frame>、<link>、<script>、<img> background:url()、@font-face() 狭义的跨域是指浏览器同源策略限制的一类请求场景。 同源策略 前端跨域的主要解决方法 1.jsonp跨域 原理:动态创建 …
  27. 精读《前端深水区》其实关于前端深水区的讨论,已经有了很多,也有了很多相关的文章。我也想借这篇关于深水区的讨论文章,讲一下自己对于深水区的理解。原文链接:技术路线:前端开发已进入深水区
  28. Vue同构赋能之 NUXT 篇 上次和大家分享了VUE同构赋能 VUE SSR 篇,链接在这里 juejin.im/post/5d5b4f… 今天是下篇:NUXT 上篇有可能讲的太复杂了:joy:,这次咋们直奔主题 还是上次的 DEMO,我们用NUXT来实现这个页面 github地址在文章末尾 Nuxt Nuxt是基于Vue ssr之上,集成了Vue-Router,Vuex,webpack等框架、组件…
  29. 《蚂蚁金服的前端框架和工程化实践》文字稿 本文为在 GMTC 2019 上分享的文字稿,同步发在《前端之巅》公众号。 开篇 自我介绍 目录 框架发展历史 这是我们的框架发展时间线。 2015 年之前我们有 Sea.JS、Arale、SPM 开源技术方案,大家可以有所耳闻 2015 年我们接入 React…
  30. Chai js断言库API中文文档 基于chai.js官方API文档翻译。仅列出BDD风格的expect/should API。TDD风格的Assert API由于不打算使用,暂时不放,后续可能会更新。 BDD expect 和 should 是BDD风格的,二者使用相同的链式语言来组织断言,但不同在于他们初始化断言的方式:expect使用构造函数来创建断言对象实例,而should通过为Object.prototyp…

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

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


关注我

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

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

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