您的位置:js12345金沙官网登入 > 网络编程 > 【金沙澳门娱乐网址】20190815 前端开发日报

【金沙澳门娱乐网址】20190815 前端开发日报

2019-12-22 13:37

Vue中created与mounted区别;javascript之闭包七;Compile 源码版 之 generate 拼接绑定的事件;22道JavaScript高频手写面试题;前端也能玩硬件:在ESP32上运行JavaScript;react知识点整理50问;Vue 导航守卫(路由的生命周期);Vue页面转Pdf实践

Vue-cli@3.0 是一个全新的 Vue 项目脚手架。不同于 1.x/2.x 基于模板的脚手架,Vue-cli@3.0 采用了一套基于插件的架构,它将部分核心功能收敛至 CLI 内部,同时对开发者暴露可拓展的 API 以供开发者对 CLI 的功能进行灵活的拓展和配置。接下来我们就通过 Vue-cli@3.0 的源码来看下这套插件架构是如何设计的。

vue中created与mounted区别关于vue.js中的生命周期,如果不是有特别的需求,一般在项目开发过程中更多的使用created和mounted,所以在本文中主要讲解created与mounted在开发中的主要使用区别。javascript之闭包七 原生的setTimeout传递的第一个函数不能带参数,通过闭包可以实现传参效果 setTimeout(function(param){ alert(param) },1000) //通过闭包可以实现传参效果 function func(param){ return function(){ alert(param) } } var f1 = func(1); setTimeout(f1,1...Compile - 源码版 之 generate 拼接绑定的事件 写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 如果你觉得排版难看,请点击 下面链接 或者 拉到 下面 关注公众号 也可以吧 Compile - 源码版 之 generate 拼接绑定的...22道JavaScript高频手写面试题 JavaScript笔试部分 点击关注本获取文档最新更新,并可以领取配套于本指南的 《前端面试手册》 以及 最标准的简历模板 . 实现防抖函数 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。 那么与节流函数的区别直接看这个动画实现即可。 手写简化版: // ...前端也能玩硬件:在ESP32上运行JavaScript 只想要可执行固件的请直接下载: github.com/nodemcujs/n… 本文的主要目的是描述如何让 ESP32 芯片运行 JavaScript,并且让 web 前端开发人员也能玩转硬件。 作者之前是 web 前端开发工程师,所以文章会尽量站在 web 前端开发工程师的角度,抛开底层的硬件知识,去掉一些目前不需要关心的,将重点放在软件上。 尽管这...react知识点整理50问react会将传入的参数对象和组件的当前状态合并,根据新的状态构建新的react元素树,计算react新树和老树的差异,根据差异最小化对界面进行最小化渲染Vue 导航守卫(路由的生命周期) 导航表示路由正在发生改变 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中,他们分为三种: 全局的 router.beforeEach router.beforeResolve router.afterEach 单个路由独享的 beforeEnter ...Vue页面转Pdf实践 作者:颜亦浠@毛豆前端 这一次我们来聊聊如何把页面转换成Pdf文件,经常会有这种场景,一些合同、协议等的页面需要进行下载,而且需要和页面保持一致,那么最好的方式就是直接把页面转换成相应的格式就好了,目前基本上就是Doc和Pdf这2种比较流行,我们就以Vue写的页面为例来看看如何转成Pdf文件。 模块依赖 主要依...自制数字滚动JS插件分享 jquery.numscroll.js是一款jQuery数字滚动累加动画插件,使用该插件可以快速的制作出炫酷的数字累计动画特效 下载地址 github.com/chaorenzeng… 效果展示 快速使用 1.引入jquery 和 jquery.numscroll.js script src=js/jquery-1.10.2.min.js type=text/javascript ...UIWebView和WKWebView与JS的交互详解 最近从同事那里了解到UIStackView这个API,之前使用到的自动布局有代码自动布局和拖 constraint 这两种。UIStackView和这两种相比可以减少重复繁琐的工作,使自动布局变得方便快捷。 UIStackView是苹果推出的一套可以自动布局的API,适配iOS9.0之后,iOS8.0之前的不支持,UIStackView是一个容器,UIStackV...前端20个真正灵魂拷问,吃透这些你就是中级前端工程师 网上参差不弃的面试题,本文由浅入深,让你在做面试官的时候,能够辨别出面试者是不是真的有点东西,也能让你去面试中级前端工程师更有底气。但是切记把背诵面试题当成了你的唯一求职方向Vue CLI3搭建项目实战操作 最近公司来了个新项目,之前Vue项目都是用Vue CLI2搭建的,现在准备用Vue CLI3搭建,谨以此文记录实战过程,如果觉得此文对您有帮助,帮忙点个赞,谢谢。持续更新中………… 一、安装Vue CLI3 npm uninstall vue-cli -g npm install -g @vue/cli vue --version 二、搭建Vue项目 新建文件夹,注意文件名字最好不...一周 GitHub 开源项目推荐:滴滴、美团、bilibili、去哪儿网…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 AoE:滴滴开源的终端侧 AI 集成运行时环境 AoE (AI on Edge) 是一个终端侧 AI 集成运行时环境 (IRE)。以 “稳定性、易用性、安全性” 为设计原则,帮助开发者将不同框架的深度学习算法轻松部署到终...Vue CLI 3.x 与 2.x的区别 安装与项目构建 项目目录变化 项目配置变化 安装项目构建 CLI安装 cli的包名变更 # cli 2.x npm install -g vue-cli # cli 3.x # 3.x 安装时,如果之前安装了2.x需要卸载2.x再安装 npm install -g @vue/cli 复制代码 项目构建 cli2.x vue init template-name project-name...babel 7.1.2升级babel 8记录 官方提供了很方便的插件 直接看代码 安装 npm i -g babel-upgrade 运行命令 npx babel-upgrade --write --install 输出的日志 devDependencies: { + @babel/core: ^7.0.0, + @babel/plugin-proposal-class-properties: ^7.0.0, + @babel...使用 Jest 进行 Vue 单元测试 本文介绍: 1、vue-cli3下jest环境的搭建 2、vue组件基本的测试方法 环境配置 vue-cli3 的插件使安装流程变得格外简单,通过 vue ui 启动可视化管理系统,在插件栏,点击 ‘添加插件’,搜索 @vue/cli-plugin-unit-jest,点击安装就可以了,对应命令行的 vue add @vue/cli-plugin-unit-jest 命令;这个过程实际上...你可能不知道的 Node.js DNS 模块 首发于我的博客: 作为 Node.js 的内置模块之一,dns 模块日常的使用率并不高。但在某些情况下 dns 模块却是非常有用的,例如在需要通过 Node.js 来判断本地网络是否畅通;或者在某些高并发的情况下,可以手动通过 dns 模块进行查询并缓存之后,再进行请求发送。 所以 dns 模块还是有必要好好...一些前端LeetCode题目集合及视频讲解前端LeetCode刷题 下面是已刷的题目的目录。GitHub:[链接] 针对一些题目录制的讲解视频。放在了在B站,免费,无广告,欢迎观看~ [链接] 数组类 26 删除排序数组中的重复项 27 移除元素 35 搜索插入位置 66 加1 8...node.js函数如何获取调用者的文件目录路径: 用callsite获取错误堆栈的每一层文件名及路径 在node.js中有时侯会想从被调用函数中获取调用者的文件位置和路径。可以用以下方法: callsite模块 使用这个模块可以获取调用堆栈的文件目录 var path = require('path'), callsite = require('callsite'); module.exports = { someFn: function () { var stack = callsite(), requester = stack .getFileNam...JS 中 this 在各个场景下的指向很多时候, JS 中的 this 对于咱们的初学者很容易产生困惑不解。 this 的功能很强大,但需要一定付出才能慢慢理解它。Node.js Koa2框架的理解 koa 框架一直都保持着简洁性, 它只对 node 的 HTTP 模块进行了封装, 而在真正实际使用, 我们还需要更多地像路由这样的模块来构建我们的应用, 而 koa-router 是常用的 koa 的路由库. 这里通过解析 koa-router 的源码来达到深入学习的目的. 参考链接 github.com/zhangxiang9… 深入浅出路由模块 基本使用 const K...如何在React中优雅的处理doubleClick上午楼主遇到一个需要处理双击事件的需求,在这里介绍下如何在触发doubleCLick时间的时候, 不触发click事件的解决办法, 顺便分享给大家。babel 7.4 配置文件 在babel 7.x中,babel有一个“根”目录的概念,默认为当前的工作目录。. 对于项目范围的配置,babel将自动在这个根目录中搜索“babel.config.js”。或者,用户可以使用显式的“config file”值来覆盖默认的配置文件搜索行为。 由于项目范围内的配置文件与配置文件的物理位置分离,因此它们非常适合必须广泛应用的配置,甚至允...批量转换 AMD 与 CommonJs 模块到 ES 模块就前端而言,ES6 的模块化写法已经是主流了,但很多老的项目都是用 AMD 或者 CommonJs 规范写的。由于 Webpack 现在已经慢慢不太支持 AMD 或者 CommonJs 规范的代码,所以需要把这两种规范的代码都转换成 ES6 规...

整个插件系统当中包含2个重要的组成部分:

@vue/cli,提供 cli 命令服务,例如vue create创建一个新的项目; @vue/cli-service,提供了本地开发构建服务。

@vue/cli-service

当你使用 vue create 创建一个新的 Vue 项目,你会发现生成的项目相较于 1.x/2.x 初始化一个项目时从远程拉取的模板发生了很大的变化,其中关于 webpack 相关的配置以及 npm script 都没有在模板里面直接暴露出来,而是提供了新的 npm script:

// package.json"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint"}

前 2 个脚本命令是项目本地安装的 @vue/cli-service 所提供的基于 webpack 及相关的插件进行封装的本地开发/构建的服务。@vue/cli-service 将 webpack 及相关插件提供的功能都收敛到 @vue/cli-service 内部来实现。

这 2 个命令对应于 node_modules/@vue/cli-service/lib/commands 下的 serve.js 和 build/index.js。

在 serve.js 和 build/index.js 的内部分别暴露了一个函数及一个 defaultModes 属性供外部来使用。 事实上这两者都是作为 built-in插件来供 vue-cli-service 来使用的 。

说到这里那么就来看看 @vue/cli-service 内部是如何搭建整个插件系统的。就拿执行 npm run serve 启动本地开发服务来说,大概流程是这样的:

首先来看下 @vue/cli-service 提供的 cli 启动入口服务(@vue/cli-service/bin/vue-cli-service.js):

#!/usr/bin/env nodeconst semver = requireconst { error } = require('@vue/cli-shared-utils')const Service = require // 引入 Service 基类const service = new Service(process.env.VUE_CLI_CONTEXT || process.cwd // 实例化 serviceconst rawArgv = process.argv.sliceconst args = requireconst command = args._[0]service.run(command, args, rawArgv).catch(err => { // 开始执行对应的 service 服务 error})

看到这里你会发现在 bin 里面并未提供和本地开发 serve 相关的服务,事实上在项目当中本地安装的 @vue/cli-service 提供的不管是内置的还是插件提供的服务都是动态的去完成相关 CLI 服务的注册。

在 lib/Service.js 内部定义了一个核心的类 Service,它作为 @vue/cli 的运行时的服务而存在。在执行 npm run serve 后,首先完成 Service 的实例化工作:

class Service { constructor { ... this.webpackChainFns = [] // 数组内部每项为一个fn this.webpackRawConfigFns = [] // 数组内部每项为一个 fn 或 webpack 对象字面量配置项 this.devServerConfigFns = [] this.commands = {} // 缓存动态注册 CLI 命令 ... this.plugins = this.resolvePlugins // 完成插件的加载 this.modes = this.plugins.reduce((modes, { apply: { defaultModes }}) => { // 缓存不同 CLI 命令执行时所对应的mode值 return Object.assign }, {}) }}

在实例化 Service 的过程当中完成了两个比较重要的工作:

加载插件

将插件提供的不同命令服务所使用的 mode 进行缓存

当 Service 实例化完成后,调用实例上的 run 方法来启动对应的 CLI 命令所提供的服务。

async run (name, args = {}, rawArgv = []) { const mode = args.mode || (name === 'build' && args.watch ? 'development' : this.modes[name]) // load env variables, load user config, apply plugins // 执行所有被加载进来的插件 this.init ... const { fn } = command return fn // 开始执行对应的 cli 命令服务}init (mode = process.env.VUE_CLI_MODE) { ... // 执行plugins // apply plugins. this.plugins.forEach => { // 传入一个实例化的PluginAPI实例,插件名作为插件的id标识,在插件内部完成注册 cli 命令服务和 webpack 配置的更新的工作 apply(new PluginAPI, this.projectOptions) }) ... // apply webpack configs from project config file if (this.projectOptions.chainWebpack) { this.webpackChainFns.push(this.projectOptions.chainWebpack) } if (this.projectOptions.configureWebpack) { this.webpackRawConfigFns.push(this.projectOptions.configureWebpack) }}

接下来我们先看下 @vue/cli-service当中的 Service 实例化的过程:通过 resolvePlugins 方法去完成插件的加载工作:

resolvePlugins(inlinePlugins, useBuiltIn) { const idToPlugin = id => ({ id: id.replace, apply: require let plugins // @vue/cli-service内部提供的插件 const builtInPlugins = [ './commands/serve', './commands/build', './commands/inspect', './commands/help', // config plugins are order sensitive './config/base', './config/css', './config/dev', './config/prod', './config/app' ].map if  { plugins = useBuiltIn !== false ? builtInPlugins.concat : inlinePlugins } else { // 加载项目当中使用的插件 const projectPlugins = Object.keys(this.pkg.devDependencies || {}) .concat(Object.keys(this.pkg.dependencies || {})) .filter .map plugins = builtInPlugins.concat } // Local plugins if (this.pkg.vuePlugins && this.pkg.vuePlugins.service) { const files = this.pkg.vuePlugins.service if ) { throw new Error(`Invalid type for option 'vuePlugins.service', expected 'array' but got ${typeof files}.`) } plugins = plugins.concat(files.map(file => ({ id: `local:${file}`, apply: loadModule(file, this.pkgContext) }))) } return plugins }

在这个 resolvePlugins 方法当中,主要完成了对于 @vue/cli-service 内部提供的插件以及项目应用当中需要使用的插件的加载,并将对应的插件进行缓存。在其提供的内部插件当中又分为两类:

'./commands/serve''./commands/build''./commands/inspect''./commands/help'

这一类插件在内部动态注册新的 CLI 命令,开发者即可通过 npm script 的形式去启动对应的 CLI 命令服务。

'./config/base''./config/css''./config/dev''./config/prod''./config/app'

这一类插件主要是完成 webpack 本地编译构建时的各种相关的配置。@vue/cli-service 将 webpack 的开发构建功能收敛到内部来完成。

插件加载完成,开始调用 service.run 方法,在这个方法内部开始执行所有被加载的插件:

this.plugins.forEach => { apply(new PluginAPI, this.projectOptions) })

在每个插件执行的过程中,接收到的第一个参数都是 PluginAPI 的实例,PluginAPI 也是整个 @vue/cli-service 服务当中一个核心的基类:

class PluginAPI { constructor  { this.id = id // 对应这个插件名 this.service = service // 对应 Service 类的实例 } ... registerCommand  { // 注册自定义 cli 命令 if (typeof opts === 'function') { fn = opts opts = null } this.service.commands[name] = { fn, opts: opts || {}} } chainWebpack  { // 缓存变更的 webpack 配置 this.service.webpackChainFns.push } configureWebpack  { // 缓存变更的 webpack 配置 this.service.webpackRawConfigFns.push } ...}

每个由 PluginAPI 实例化的 api 实例都提供了:

注册 cli 命令服务( api.registerCommand ) 通过 api 形式去更新的 webpack 配置 通过 raw 配置形式去更新的 webpack 配置( api.configureWebpack ),与 api.chainWebpack 提供的链式 api 操作 webpack 配置的方式不同, api.configureWebpack 可接受raw式的配置形式,并通过 webpack-merge 对 webpack 配置进行合并。 resolve wepack 配置( api.resolveWebpackConfig ),调用之前通过 chainWebpack 和 configureWebpack 上完成的对于 webpack 配置的改造,并生成最终的 webpack 配置 ...

首先我们来看下 @vue/cli-service 提供的关于动态注册 CLI 服务的插件,拿 serve 服务来说:

// commands/servemodule.exports =  => { api.registerCommand( 'serve', { description: 'start development server', usage: 'vue-cli-service serve [options] [entry]', options: { '--open': `open browser on server start`, '--copy': `copy url to clipboard on server start`, '--mode': `specify env mode `, '--host': `specify host (default: ${defaults.host})`, '--port': `specify port (default: ${defaults.port})`, '--https': `use https (default: ${defaults.https})`, '--public': `specify the public network URL for the HMR client` } }, async function serve { // do something } )}

./commands/serve 对外暴露一个函数,接收到的第一个参数 PluginAPI 的实例 api,并通过 api 提供的 registerCommand 方法来完成 CLI 命令的注册。

再来看下 @vue/cli-service 内部提供的关于 webpack 配置的插件:

本文由js12345金沙官网登入发布于网络编程,转载请注明出处:【金沙澳门娱乐网址】20190815 前端开发日报

关键词: