20190601 前端开发日报

中级前端工程师必须要掌握的 27 个 JavaScript 技巧;ES6 Class 与 ES5 构造函数对比(Babel编译);Vue项目引入CreateJS的方法(亲测);大型项目前端架构浅谈;【Vue项目总结】组件通信处理方案;借助CSS来管理js事件;vue-cli3+ts+webpack实现多入口多出口;从js来聊聊异步编程

  1. 中级前端工程师必须要掌握的 27 个 JavaScript 技巧 使用 Object.prototype.toString 配合闭包,在保证判断数据类型的准确性时,同时能让这个函数非常灵活,通过传入不同的判断类型来返回不同的判断函数(注意传入 type 参数时首字母大写) 2. ES5 实现数组 map 方法 值得一提的是,map 的第二个参数为第一个参数回调中的 this 指向,如果第一个参数为箭头函...
  2. ES6 Class 与 ES5 构造函数对比(Babel编译) User 类被编译以后转化为构造函数。被编译后生成了 _classCallCheck , _instanceof 方法。 class User{ } const user = new User(); console.log(user); // {} //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ "use strict"; function _instanceof(left, right) { if...
  3. Vue项目引入CreateJS的方法(亲测) 1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库,可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTM...
  4. 大型项目前端架构浅谈 大型项目前端架构浅谈 目录: 1、综合 1.1、使用场景 1.2、核心思想 1.3、切入角度 1.4、其他 2、基础层设计 2.1、自建Gitlab 2.2、版本管理 2.3、自动编译发布Jenkins 2.4、纯前...
  5. 【Vue项目总结】组件通信处理方案 Vue组件之间的通信是我们在项目中常常碰到的,而选择合适的通信方式尤为重要,这里总结下作者在实际项目中所运用到的通信方案,如有遗漏,请大家见谅。文章代码具体见 DEMO ;文章首发于 imondo.cn 父子组件 Vue中常见的是 父与子 组件间的通信,所要用到的关键字段是 props 和 $emit 。 props 接受父组件传给...
  6. 借助CSS来管理js事件CSS是一门很神奇的语言,很多和它不相干的功能却能起到很显著的效果,有些在js看起来实现都有一定的工作量,CSS一句属性就能轻而易举的解决,下面来看几个例子(主要和js事件相关)。
  7. vue-cli3+ts+webpack实现多入口多出口 最近公司有一个需求,需要在项目里面嵌套h5的页面,而且不止有一个嵌套的页面,那么就想办法运用webpack的多入口多出口的打包模式,网上查了很多资料,也有多入口多出口的案例,github上也有相应源码,我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包,相应的多入口多出口的源码在 这里 。使用的是vue2.x + we...
  8. 从js来聊聊异步编程揭开go的 gorouter,c#的 async/await等 使用同步的写法写异步代码的神秘面纱 , 证明其本质就是一个语法糖
  9. webpack核心概念 本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 从 webpack v4.0.0 开始,可以不用引入一个配置文件。然而,webpac...
  10. 前端小白写的Vue+Koa2+Mysql移动商城 大家好!本人前端新手,最近费劲脑汁撸了个vue移动端商城,请大佬们帮忙点评一下。 目前实现的功能有: 注册登录、购物车、搜索、收货地址 预览地址 (⊙▽⊙) Github地址是: github.com/lyfan13/Vue… 若觉得还可以的话希望给个star呀,谢谢大佬们 ~(~ ̄▽ ̄)~ 如果只运行前端vue的话在vue里npm run serve就可...
  11. JavaScript 究竟是如何工作的?(第一部分) 如果你是一个 JS 开发者或者是正在学习这门语言的学生,很大概率上你会遇到双字母词"V8"。在这篇文章中,我将会为你简述不同的 JS 引擎并深入探究 V8 引擎的工作机制。文章的第二部分涵盖了内存管理的概念,不久后将发布。 这篇文章是由 Bit ( GitHub ) 带来的。作为一个共享组件的平台,Bit 帮助每个人...
  12. React Native 版本九宫格转盘 本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘,先看最终效果图 也可以直接使用react-native-super-lottery组件开发抽奖功能。 一、布局 布局很简单,我们可以采用flex 3行布局,也可以单行、配合flex-wrap子控件自动折行实现。直接上代码 const LotteryStyle = Style...
  13. Vue核心50讲 | 第三回:速看Vue世界的生命轮回 书接上文,上一回咱们初入 Vue 框架的世界,跟着编写了和 Vue 说的一句话 Say Hello。了解了 Vue 里面一个核心的内容声明式渲染。接下来,咱们快速地领略一下 Vue 的生命周期。 可能你会问了,啥叫生命周期啊?生命周期就是说生老病死。这刚和 Vue Say 个 Hello,咋就给整死了呢?可不是啊!这个生老病死说的是从出生...
  14. Angular 重大版本升级: 8.0 正式发布 支持更多 Web 标准 Angular 8.0.0 版本正式发布了!8.0 是重大版本升级,整个平台,包括框架、Angular Material 和 CLI 都同步升级到了新版。Angular 8.0 版缩短了应用在现代浏览器上的启动时间,提供了用于访问 CLI 的新 API,并使 Angular 支持更多 Web 标准,追上了 Web 生态的前沿发展趋势。 如何更新到 Angular 8.0.0 版本 用户...
  15. eBay 实战 WebAssembly:50 倍性能提升 Ending定律:一切可编译为WebAssembly的,终将会被编译WebAssembly。 原文:https://www.ebayinc.com/stories/blogs/tech/webassembly-at-ebay-a-real-world-use-case/ WebAssembly完全是含着金汤勺出生,2018年发布1.0正式版本更是彻底引爆了整个软件行业——这是要彻底革大家的命啊!被大家期望主...
  16. 聊聊 vue-router 之前要做一个路由按需加载的需求,所以参考了 vue-router 的实现,进而更加深入的了解了 vue-router 。 看源码最好的就是打断点来看。将 vue-router 代码 clone 下来,可以看到他有一个 examples 目录,这里就是 vue-router 的一些使用 demo ,同时看下 package.JSON 文件,可以看到 scripts 中有一个 dev 命令,跑...
  17. 原生js如何实现懒加载? 前言:关于懒加载这个问题呢,是我大三暑假接到的一个电话面试问到的问题,当时我回答了大致的思路,但是极其含糊,离真正的实现还是有差距的,如今过了快一年了,现在我就来实现一下吧~ 原理:原理很简单,我们不用想的很复杂。就是让img的src为空,图片的真实地址可以存储在img一个自定义的属性里,就比如date-src吧...
  18. #前端技术#【可能是你需要的 React + TypeScript 50 条规范和经验】详见: 本文作者结合了日常开发经验分享了 50 条 React + TypeScript 规范,希望能够帮助你书写代码更具严谨性。(作者:乘风gg) 这篇文章没有对错之分,肯定也有不完善的地方,结合了自己日常开发和经验。可以让你书写代码更具严谨性,希望看完之后有所帮助。本文字数4000+ ,看完本文大概需半小时。 1. 注释 (1) 文件顶部的注释,包括描述、作者、日期 /** * @descripti

    可能是你需要的 React + TypeScript 50 条规范和经验
  19. GitLab CI/CD 在 Node.js 项目中的实践近期在按照业务划分项目时,我们组被分了好多的项目过来,大量的是基于 Node.js 的,也是我们组持续在使用的语言。
  20. 器环境下Node.js的内存管理 此文章最初发布在IBM Developer。 在基于容器的Node.js应用程序中管理内存的最佳实践 在docker容器中运行Node.js应用程序时,传统的内存参数调整并不总是按预期工作。本文我们将阐述在基于容器的Node.js应用程序内存参数调优中并不总是有效的原因,并提供了在容器环境中使用Node.js应用程序时可以遵循的建议和最佳...
  21. 手写我的 VUE-CLI webpack学习的大致过程在此记录一下。 先创建一份 vue-cli 作为参考。 cli.vuejs.org/zh/guide/in… $ yarn global add @vue/cli $ vue -V // 查看版本 $ vue init webpack vue-cli 复制代码 然后创建 my-vue-cli 初始化项目结构,添加.gitignore等。 $ npm init $ git init 复制代码 1. 初始化webpac...
  22. Gitlab 上使用 Maven 运行单元测试 Gitlab 除了基本的版本管理功能之外,还提供了很有用的持续集成能力,简单的在项目根目录中编写一段.gitlab-ci.yml,就能够让 Gitlab 按照其中的指示完成持续集成的工作。 Gitlab CI/CD 是 Gitlab 的一个组件,它利用 Gitlab Runner 来执行具体的构建任务。 Gitlab Runner 和 Gitlab 主程序一样...
  23. 【新手向】如何写一个超超超简单的 webpack? webpack 的定义和重要程度在此我不再赘述,直接进入正题,一个最最简单的 webpack 是如何实现的?我们从 webpack 的打包过程来进行分析 一. 准备活动 首先创建两个项目,一个叫 webpack-project ,另一个叫 mn-webpack 。前者用于观察打包结果,后者用于简单实现 webpack。 项目建立好之后,首先进入到 we...
  24. JS如何取得URL里的参数? 有一段时间没写过技术干货文了,这两天刚好遇到一个以前没太在意的一个功能实现-- 前端获取URL传递的参数 毕竟平时都是在后台处理,掉了一堆头发后,想想还是写出来跟你们分享一下,以后要是你们遇到了也有个参考 要只是获取一些常规字符串到没什么难的,关键还有些乱七八糟的需求,什么同一个参数名传递了多次啊,...
  25. Web 3.0 带来的商业模式     本文由 Max Mersch、Richard Muirhead、Anastasiya Belyaeva 和 Julien Thévenard 共同撰写。 在掀起密码学货币的热潮之后,Web 3.0 又裹挟着更多用例而来。Web 3.0 将创造更加多样的交互方式,打破全球范围内的交互壁垒,通过密码学手段把来自个人、企业和机器的数据与...
  26. 使用"BinaryAST"加快JavaScript脚本的解析速度? 原文: Faster script loading with BinaryAST? 本文首发于公众号:符合预期的CoyPan JavaScirpt的冷启动 web应用的表现,越来越受制于启动时间。我们已经习惯于使用大量的JavaScript代码来开发丰富的web交互体验。从 HTTPArchive 上,我们可以看到,一个移动设备平均会加载350KB的JavaSript代码,10%的页面会...
  27. Vue 2.x折腾记 - (20) JSX在业务中的具体实践以及跟React书写的差异化 写JSX很自然,毕竟是自家倡导的 类名需要做 classname 化 props 的传递可以直接 {...props} 节点的传递,通过 {props.children} 渲染 支持空节点包括同级节点, <><child/><child2/></> 支持花括号直接遍历数组生成节...
  28. 【第二篇】创建 @vue/cli3 插件,并整合 ssr 功能 在上一篇文章 《基于 @vue/cli3 与 koa 创建 ssr 工程》 中,我们讲解了如何基于 @vue/cli3 创建一个 ssr 工程。 在本篇文章,我们来创建一个 @vue/cli3 插件,并将第一篇文章中 ssr 工程的服务器端部分整合进插件中。 首先,我们来看一个 cli3 插件提供了那些功能: 使用脚手架创建一个新工程或在一个既...
  29. React 中的用户认证(登录态管理) React中的用户认证(登录态管理) 原文地址 : https://kentcdodds.com/blog/authentication-in-react-applications 本文主要展示在当下React应用开发中,怎么使用Context和Hooks来管理用户的认证(也就是登录态)。 先说结论 下面是本文最终要实现的的简化版,方便大佬们直接看最后的效果: ...
  30. 你要的 React 面试知识点,都在这了React是流行的javascript框架之一,在2019年及以后将会更加流行。React于2013年首次发布,多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。
  31. webpack HRM Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过新的模块替换老的模块,这样在不刷新浏览器的前提下就能够对应用进行更新。(注意不是浏览器刷新)。 webpack-dev-server实现自...
  32. 试读angular源码第二章:引导模块bootstrapModule 今天 angularv8的正式版发了,但是除了动态路由那里没觉得有啥大变化,有点小失望 承接上一章 项目地址 文章地址 angular 版本:8.0.0-rc.4 欢迎看看我的类angular框架 引导模块 Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule 。 ...
  33. Spring Boot实现STOMP协议的WebSocket 我们之前讨论过 Java Generics 的基础知识。在本文中,我们将了解Java中的通用构造函数。 泛型构造函数是至少需要有一个泛型类型参数的构造函数。我们将看到泛型构造函数并不都是在泛型类中出现的,而且并非所有泛型类中的构造函数都必须是泛型。 2.非泛型类 首先,先写一个简单的类:Entry,它不是泛型类: publi...
  34. web编程基础---1.javascript基础(介绍,变量,数据类型) 学习目标: JavaScript介绍 JavaScript的变量 JavaScript数据类型 网页、网站和应用程序 网页: 单独的一个页面 网站: 一些相关的网页组成在一起,就变成了网站 应用程序: 可以和用户产生交互,并且实现某种功能 使用web技术也可以用来做应用程序(百度脑图演示) ...
  35. Vue Router history模式的配置方法及其原理 vue-router 分为 hash 和 history 模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home ,比较难看。后者的url表现形式为 http://yoursite.com/home ,比较美观。 但如果要使用 history 模式,我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。 ...
  36. 详解vue组件三大核心概念本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能。

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

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

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