20190601 前端开发日报-前端开发博客

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

中级前端工程师必须要掌握的 27 个 JavaScript 技巧使用 Object.prototype.toString 配合闭包，在保证判断数据类型的准确性时，同时能让这个函数非常灵活，通过传入不同的判断类型来返回不同的判断函数（注意传入 type 参数时首字母大写） 2. ES5 实现数组 map 方法值得一提的是，map 的第二个参数为第一个参数回调中的 this 指向，如果第一个参数为箭头函…
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…
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…
大型项目前端架构浅谈大型项目前端架构浅谈目录： 1、综合 1.1、使用场景 1.2、核心思想 1.3、切入角度 1.4、其他 2、基础层设计 2.1、自建Gitlab 2.2、版本管理 2.3、自动编译发布Jenkins 2.4、纯前…
【Vue项目总结】组件通信处理方案 Vue组件之间的通信是我们在项目中常常碰到的，而选择合适的通信方式尤为重要，这里总结下作者在实际项目中所运用到的通信方案，如有遗漏，请大家见谅。文章代码具体见 DEMO ；文章首发于 imondo.cn 父子组件 Vue中常见的是父与子组件间的通信，所要用到的关键字段是 props 和 $emit 。 props 接受父组件传给…
借助CSS来管理js事件CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。
vue-cli3+ts+webpack实现多入口多出口最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在这里。使用的是vue2.x + we…
从js来聊聊异步编程揭开go的 gorouter,c#的 async/await等使用同步的写法写异步代码的神秘面纱 , 证明其本质就是一个语法糖
webpack核心概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpac…
前端小白写的Vue+Koa2+Mysql移动商城大家好！本人前端新手，最近费劲脑汁撸了个vue移动端商城，请大佬们帮忙点评一下。目前实现的功能有：注册登录、购物车、搜索、收货地址预览地址 (⊙▽⊙) Github地址是： github.com/lyfan13/Vue… 若觉得还可以的话希望给个star呀，谢谢大佬们 ~(～￣▽￣)～如果只运行前端vue的话在vue里npm run serve就可…
JavaScript 究竟是如何工作的？（第一部分）如果你是一个 JS 开发者或者是正在学习这门语言的学生，很大概率上你会遇到双字母词"V8"。在这篇文章中，我将会为你简述不同的 JS 引擎并深入探究 V8 引擎的工作机制。文章的第二部分涵盖了内存管理的概念，不久后将发布。这篇文章是由 Bit ( GitHub ) 带来的。作为一个共享组件的平台，Bit 帮助每个人…
React Native 版本九宫格转盘本文将介绍从零开始实现一个 React Native 版本的九宫格抽奖转盘，先看最终效果图也可以直接使用react-native-super-lottery组件开发抽奖功能。一、布局布局很简单，我们可以采用flex 3行布局，也可以单行、配合flex-wrap子控件自动折行实现。直接上代码 const LotteryStyle = Style…
Vue核心50讲 | 第三回：速看Vue世界的生命轮回书接上文，上一回咱们初入 Vue 框架的世界，跟着编写了和 Vue 说的一句话 Say Hello。了解了 Vue 里面一个核心的内容声明式渲染。接下来，咱们快速地领略一下 Vue 的生命周期。可能你会问了，啥叫生命周期啊？生命周期就是说生老病死。这刚和 Vue Say 个 Hello，咋就给整死了呢？可不是啊！这个生老病死说的是从出生…
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 版本用户…
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正式版本更是彻底引爆了整个软件行业——这是要彻底革大家的命啊！被大家期望主…
聊聊 vue-router 之前要做一个路由按需加载的需求，所以参考了 vue-router 的实现，进而更加深入的了解了 vue-router 。看源码最好的就是打断点来看。将 vue-router 代码 clone 下来，可以看到他有一个 examples 目录，这里就是 vue-router 的一些使用 demo ，同时看下 package.json 文件，可以看到 scripts 中有一个 dev 命令，跑…
原生js如何实现懒加载？前言：关于懒加载这个问题呢，是我大三暑假接到的一个电话面试问到的问题，当时我回答了大致的思路，但是极其含糊，离真正的实现还是有差距的，如今过了快一年了，现在我就来实现一下吧~ 原理:原理很简单，我们不用想的很复杂。就是让img的src为空，图片的真实地址可以存储在img一个自定义的属性里，就比如date-src吧…
#前端技术#【可能是你需要的 React + TypeScript 50 条规范和经验】详见：本文作者结合了日常开发经验分享了 50 条 React + TypeScript 规范，希望能够帮助你书写代码更具严谨性。（作者：乘风gg）这篇文章没有对错之分，肯定也有不完善的地方，结合了自己日常开发和经验。可以让你书写代码更具严谨性,希望看完之后有所帮助。本文字数4000+ ，看完本文大概需半小时。 1. 注释 (1) 文件顶部的注释，包括描述、作者、日期 /** * @descripti
GitLab CI/CD 在 Node.js 项目中的实践近期在按照业务划分项目时，我们组被分了好多的项目过来，大量的是基于 Node.js 的，也是我们组持续在使用的语言。
器环境下Node.js的内存管理此文章最初发布在IBM Developer。在基于容器的Node.js应用程序中管理内存的最佳实践在docker容器中运行Node.js应用程序时，传统的内存参数调整并不总是按预期工作。本文我们将阐述在基于容器的Node.js应用程序内存参数调优中并不总是有效的原因，并提供了在容器环境中使用Node.js应用程序时可以遵循的建议和最佳…
手写我的 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…
Gitlab 上使用 Maven 运行单元测试 Gitlab 除了基本的版本管理功能之外，还提供了很有用的持续集成能力，简单的在项目根目录中编写一段.gitlab-ci.yml，就能够让 Gitlab 按照其中的指示完成持续集成的工作。 Gitlab CI/CD 是 Gitlab 的一个组件，它利用 Gitlab Runner 来执行具体的构建任务。 Gitlab Runner 和 Gitlab 主程序一样…
【新手向】如何写一个超超超简单的 webpack? webpack 的定义和重要程度在此我不再赘述，直接进入正题，一个最最简单的 webpack 是如何实现的？我们从 webpack 的打包过程来进行分析一. 准备活动首先创建两个项目，一个叫 webpack-project ，另一个叫 mn-webpack 。前者用于观察打包结果，后者用于简单实现 webpack。项目建立好之后，首先进入到 we…
JS如何取得URL里的参数？有一段时间没写过技术干货文了，这两天刚好遇到一个以前没太在意的一个功能实现– 前端获取URL传递的参数毕竟平时都是在后台处理，掉了一堆头发后，想想还是写出来跟你们分享一下，以后要是你们遇到了也有个参考要只是获取一些常规字符串到没什么难的，关键还有些乱七八糟的需求，什么同一个参数名传递了多次啊，…
Web 3.0 带来的商业模式本文由 Max Mersch、Richard Muirhead、Anastasiya Belyaeva 和 Julien Thévenard 共同撰写。在掀起密码学货币的热潮之后，Web 3.0 又裹挟着更多用例而来。Web 3.0 将创造更加多样的交互方式，打破全球范围内的交互壁垒，通过密码学手段把来自个人、企业和机器的数据与…
使用"BinaryAST"加快JavaScript脚本的解析速度？原文： Faster script loading with BinaryAST? 本文首发于公众号：符合预期的CoyPan JavaScirpt的冷启动 web应用的表现，越来越受制于启动时间。我们已经习惯于使用大量的JavaScript代码来开发丰富的web交互体验。从 HTTPArchive 上，我们可以看到，一个移动设备平均会加载350KB的JavaSript代码，10%的页面会…
Vue 2.x折腾记 – (20) JSX在业务中的具体实践以及跟React书写的差异化写JSX很自然，毕竟是自家倡导的类名需要做 classname 化 props 的传递可以直接 {…props} 节点的传递，通过 {props.children} 渲染支持空节点包括同级节点, <><child/><child2/></> 支持花括号直接遍历数组生成节…
【第二篇】创建 @vue/cli3 插件，并整合 ssr 功能在上一篇文章《基于 @vue/cli3 与 koa 创建 ssr 工程》中，我们讲解了如何基于 @vue/cli3 创建一个 ssr 工程。在本篇文章，我们来创建一个 @vue/cli3 插件，并将第一篇文章中 ssr 工程的服务器端部分整合进插件中。首先，我们来看一个 cli3 插件提供了那些功能：使用脚手架创建一个新工程或在一个既…
React 中的用户认证（登录态管理） React中的用户认证(登录态管理) 原文地址： https://kentcdodds.com/blog/authentication-in-react-applications 本文主要展示在当下React应用开发中，怎么使用Context和Hooks来管理用户的认证(也就是登录态)。先说结论下面是本文最终要实现的的简化版，方便大佬们直接看最后的效果： …
你要的 React 面试知识点，都在这了React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。
webpack HRM Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。(注意不是浏览器刷新)。 webpack-dev-server实现自…
试读angular源码第二章：引导模块bootstrapModule 今天 angularv8的正式版发了，但是除了动态路由那里没觉得有啥大变化，有点小失望承接上一章项目地址文章地址 angular 版本：8.0.0-rc.4 欢迎看看我的类angular框架引导模块 Angular 应用是模块化的，它拥有自己的模块化系统，称作 NgModule 。 …
Spring Boot实现STOMP协议的WebSocket 我们之前讨论过 Java Generics 的基础知识。在本文中，我们将了解Java中的通用构造函数。泛型构造函数是至少需要有一个泛型类型参数的构造函数。我们将看到泛型构造函数并不都是在泛型类中出现的，而且并非所有泛型类中的构造函数都必须是泛型。 2.非泛型类首先，先写一个简单的类:Entry，它不是泛型类： publi…
web编程基础—1.javascript基础（介绍，变量，数据类型）学习目标： JavaScript介绍 JavaScript的变量 JavaScript数据类型网页、网站和应用程序网页：单独的一个页面网站：一些相关的网页组成在一起，就变成了网站应用程序：可以和用户产生交互，并且实现某种功能使用web技术也可以用来做应用程序（百度脑图演示） …
Vue Router history模式的配置方法及其原理 vue-router 分为 hash 和 history 模式，前者为其默认模式，url的表现形式为 http://yoursite.com#home ，比较难看。后者的url表现形式为 http://yoursite.com/home ，比较美观。但如果要使用 history 模式，我们需要在后端进行额外配置。本文将讨论如何配置以及为什么要这样配置。 …
详解vue组件三大核心概念本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件，也可以从这三个部分展开，它们可以帮助你快速了解一个组件的所有功能。