vv_bug

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到性能优化、Portals、Render Props 等概念的分析，跟上节奏，我们一起出发吧！知识点性能优化PortalsRender Props类型检查准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行以下命令 clone 一份代码：g

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到 Refs 转发、Fragments、高阶组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点Refs 转发Fragments高阶组件深入 JSX准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执

最近在重学 React，很多小伙伴发出 “学完 Vue 还需要学 React？” 这样的疑问，下面我们就来探讨一下这个问题。首先不管是 React 还是 Vue，当然，还有 Angular 等其它的前端框架，它们都是很优秀的前端框架，目的就是为了让你能够高效、快速地开发一个前端项目，贴一张截止目前为止 React 跟 Vue 在 GitHub 上的 star 排行：可以看到，光从 star 人数来讲，Vue 还是领先于 React 的，当然，我们也不能只看 star 人数，就说 React 不如 Vu

简介我们继续上一节的内容，开始分析 React 官网：https://reactjs.org/docs/accessibility.html 的 “高级指引” 部分，这一部分会涉及到异步组件、全局上下文对象、错误边界组件等概念的分析，比前面章节的难度还是略微大一些的，所以一定要跟上节奏哦，我们一起出发吧！知识点代码分割异步组件全局上下文对象 Context错误边界组件准备我们直接用上一节中的 react-demo-day5 项目来作为我们的 Demo 项目，还没有创建的小伙伴可以直接执行

简介上一节我们完成了从 0 开始搭建一个企业级 React 项目的全部内容，项目是有了，但是我们一直都没有近距离接触过 React，所以接下来我们就快速撸一遍 React 官方文档内容，弄清楚一些概念性的东西，为后面的源码分析章节做铺垫。知识点项目搭建核心概念高级指引API 指引hook 指引后面这几节都比较轻松，因为我们基本上把 React 官网：https://reactjs.org/ 的内容跑一遍。让我们开始吧！项目搭建我们直接 clone 一个前面我们搭建的基础项目，然后取

简介上一节我们从 0 开始搭建了一个项目，完成了入口与出口的配置、ts 语法支持、react 基本库的安装、css 样式配置等工作，我们继续上一节的内容。知识点Eslint（代码质量校验）eslint-webpack-plugin（Eslint webpack 插件）eslint-config-react-app（React 官方 eslint 配置）fork-ts-checker-webpack-plugin（ts 语法校验插件）Optimization（分包优化等）准备上一节所有的

简介上一节我们介绍了 React 官方提供的脚手架（create-react-app），然后用官方脚手架创建了一个 react-demo1 项目，用脚手架创建出来的项目算是 React 官方认为的最佳项目实践了，但是从上一节使用中我们可以看出，官方脚手架可还是有一些弊端，它只提供一些可改的 webpack 配置，如果你想自己添加一个 loader、plugin 什么的，你可能就需自定义 webpack 配置了，就不能在依赖脚手架了，既然是重新学习 React，我们就来挑战一下自己，从 0 开始搭建一个企业

简介继续我们的 React 的学习，上一节我们介绍了什么是 JSX 语法，并且从 Babel 源码角度分析了 JSX 语法的转换过程，最后我们还用 CDN 的形式搭建了一个简单的 React 项目，这一节我们研究一下 React 官方提供的脚手架create-react-app。知识点React 官方脚手架（create-react-app）react-scriptsreact 项目中的 webpack 配置start 命令build 命令安装 React小伙伴可以先看一下官网的描述：

简介因为目前公司的技术栈都是 Vue，之前有在 React-Native 的项目中接触过 React，但并没有深入的去了解过， 从现在开始，我就把自己当成一个 React 小白了，决定挑战一下自己，从 0 开始入手 React，中间会不断的跟 Vue 进行对比，跟紧节奏，我们一起出发吧。知识点React 简介JSX 简介Babel 语法转换@babel/preset-react@vue/babel-preset-jsxHello ReactReact 是什么？我就不解释什么是 Rea

一文彻底弄懂 “CommonJs” 与 “EsModule” 区别简介文章中就不具体解释什么是 “CommonJs” 与 “EsModule” 了，我们先简单的描述一下 “CommonJs” 与 “EsModule” 的区别。它们有三个重大差异。CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。CommonJS 模块的require()是同步加载模块，ES6 模块的import命令是异步加载，有一个独立的

抢先了解前沿技术栈，掌握前端必须框架 Vue 3，本课程将带你从源码的角度一探究竟。全程干货满满，让你在掌握 Vue 3 源码后具有实战开发能力，轻松搞定开发任务与面试。从官方宣布 Vue3 开发就开始关注，一直到 2020 年 9 月 18 日正式版发布才去深入了解它，这一次的版本简直就是 “颠覆” 来形容，总结下来就是：“更快”、“类型更友好”、“更小”、“更好的警告信息”、“更好的 API 特性”，官方还称在 2020 年底之前对所有文档链接、分支和资源包标签的默认值转换为 3，当然， Vue 2

2021 开工第一天就给我个大大的惊喜。ERROR in Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html. - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult [vu

前言最近经常有小伙伴问我一些关于 Vue3.0 的问题，有些甚至恐慌 Vue3.0 发布后自己不会咋办？会不会以后就要失业了呢？当一些新技术的出现，总有些人会对自己不自信，当然，你问我怕不怕？说实话，我是一点都不慌的，别人写出来的东西你去用你还怕啥？无非就是你自己在怀疑你自己能力罢了，年轻人怕啥？干就完了！不过既然有小伙伴问到了 Vue3.0，我还是花了点时间去研究了一下，下面就聊一下当我遇到新技术的时候我是怎么做的。准备工作首先我简单的浏览了一下 Vue3.0 的 官网，然后重点浏览了一下跟 Vue

最近项目中有小伙伴找到我，问我“为啥他写的页面第一次进去可以触发 onCreate 函数，第二次再进的时候就不触发了呢？”（因为我们项目是一个大型的项目，每个开发可能只接触到自己开发的一小部分），然后我就说你可以试着在 activated 钩子函数中做处理，然后他又接着问我“activated 钩子函数又是怎么调用的呢？”，ok！这小子是问上瘾了，我们下面就来详细解析一下。keep-alive<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <tra

简介JavaScript 作为一种弱类型的语言，类型推断只能提供很有限的支持，TypeScript 提供了一种描述对象形状的方法。可以帮助提供更好的文档，还可以验证你的代码可以正常工作，在一些大型的项目中，使用 TypeScript 非常必要，从代码层次就已经避免了很多错误，而且方便文档的书写，最主要的就是后期迭代特别爽，但是对于没有接触过强类型语言（Java、C）的童鞋来说，TypeScript 上手还是有点困难了，单就目前前端发展趋势来说，TypeScript 还是很重要的，想了解更多 TypeScr

问题描述今天有童鞋在用 vue 项目写代码的时候，问我为啥会出现以下报错？[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.(found in <Root>

一文让你彻底弄懂 “vue-style-loader” 跟 “style-loader” 区别简介用过 vue-cli 脚手架搭建 vue 项目都知道，vue-cli 中内置了 vue-style-loader 去加载样式模块，最后通过 <style> 标签把样式加载到页面，但是 style-loader 同样可以达到同样的效果，那么 vue 官方为啥还封装一个 vue-style-loader 库呢？那么它们到底有啥区别？平时项目中又该如何选择呢？下面先看一下它们各自官网的简介。开始

Webpack 是实现前端工程化的一个重要工具。本课程由浅及深，逐步掌握基础知识并具有实战开发能力。幽默风趣的课堂氛围，带给你的都是最前沿的前端技术，进阶前端开发。你将学到的webpack 简介webpack 基础用法webpack 流程图webpack 源码解析webpack 扩展插件企业级项目实战课程介绍webpack 是实现前端工程化的一个重要工具，一些公司甚至会设置一个叫 webpack 工程师的角色，可见 webpack 在前端开发中起到了一个很重要的作用。本次课程将包

问题描述vue文件中的样式失效环境vue-cli 4.4.6css-loader 4.2.1vue-style-loader 4.1.2原因vue-cli 4.4.6vue-cli 4.4.6默认对css-loader配置为空css-loader 4.2.1css-loader4.0后默认对esModule设置的是truevue-style-loader 4.1.2vue-style-loader 4.1.2默认接收的是commonjs的结果，也就是默认接收的是“css-load

前言前面我们写过几篇关于webpack的文章：webpack源码解析一…webpack源码解析七（optimization）然后结合之前babel、eslint知识搭了一个比较复杂的vue项目：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目（完结）在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。简介This plugin extracts CSS in

前言前面我们分析了webpack，最后还实战了一个vue的项目：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目(完结）强烈推荐大家去阅读一下前面的文章哈！今天我们带来点干货，我们利用前面的知识撸一个h5移动端适配的框架，我们取名为"fpx-css-loader"。说到h5移动端适配的，大家都会想到rem跟vw，我们去caniuse看一下这两个方案的兼容性：rem可以看到，绝大多数的浏览器是兼容的，平时项目用它完全是没毛病！vwvm

前言前面写过两篇webpack实战的文章：webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目（完结）强烈建议小伙伴们去看一下前面几个章节的内容，这一节我们研究一下vue-loader。介绍Vue Loader 是什么？Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：<template> <div class="example">

前言上一节webpack实战之（手把手教你从0开始搭建一个vue项目）最后我们完成了css样式的配置：webpack.config.js：const path = require("path");const config = new (require("webpack-chain"))();const isDev = process.env.WEBPACK_DEV_SERVER;config .context(path.resolve(__dirname, ".")) //webpack

前言我们前面从前端架构：前端框架系列之（装饰器Decorator）前端框架系列之（vue-class-component）前端框架系列之(vue-property-decorator)前端框架系列之（mvc）前端框架系列之（mvp）前端框架系列之（mvvm）到项目工程化工具eslint、babel、webpack等，分别结合demo跟源码做了具体的分析：前端框架系列之（eslint源码解析）前端框架系列之（eslint自定义插件）babe从入门到精通…webpack源码解析七

前言前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四webpack源码解析五webpack源码解析六（webpack-chain）今天我们结合demo来看一下webpack的Optimization配置。demo还是前面几节中的: https://github.com/913453448/we

前言前面我们写了几篇文章用来介绍webpack源码，跟着官网结合demo把整个webpack配置撸了一遍：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四webpack源码解析五今天我们说一下一个关于webpack配置的第三方库webpack-chain,为什么要讲它呢？ 可以借助IDE可以做到智能提示，让我们配置起来不容易出错，而且完全链式语法，用起来比较爽！开始我们还是接着我们之前章节的w

前言我们继续前面的内容，把webpack剩下的配置项撸一遍，推荐大家先看一下前面的文章：webpack源码解析一webpack源码解析二（html-webpack-plugin插件）webpack源码解析三webpack源码解析四配置devtool此选项控制是否生成，以及如何生成 source map。什么是Source map？简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置（source map更多的介绍跟

前言我们接着前面的文章webpack源码解析二继续往下探索webpack的配置，demo的github地址：https://github.com/913453448/webpack-demo.git。DevServerwebpack的devServer配置主要是针对webpack/**webpack-dev-server跟webpack/webpack-dev-middleware**的配置，因为webpack-dev-server依赖webpack-dev-middleware。我们首先在我们的因

前言前面写了一篇文章webpack源码解析一梳理了一遍webpack的编译过程，今天我们结合demo来过一遍webpack的所有配置项。开始为了更好的了解每一个选项的用法我们首先clone一份webpack的源码（demo用的是5.0.0-beta.7版本）：git clone https://github.com/webpack/webpack.git源码clone完毕后在当前页面执行setup操作并且安装webpack-cli：yarn setup && yarn add

前言前面我们写了几篇很长的文章去介绍babel源码、preset-env、runtime，babel源码解析一babel源码解析之（@babel/preset-env）babel源码解析之（@babel/plugin-transform-runtime）在babel配置中我们可能用过@babel/polyfill、core-js、core-js-pure、@babel/runtime、@babel/runtime-corejs2、@babel/runtime-corejs3、@babel/pl

前言前面我们用了一篇很长的文章介绍了@babel/preset-env,感兴趣的可以去看我之前的一篇文章babel源码解析之（@babel/preset-env）,今天我们要分析的是babel的一个插件，叫@babel/plugin-transform-runtime.简介我们看一下官网对它的描述：A plugin that enables the re-use of Babel’s injected helper code to save on codesize.很简短的一个描述信息，翻译一

前言还记得之前写过一篇文章:babel源码解析一,里面把babel的整个流程跑了一遍，最后还自定义了一个插件用来转换“尖头函数”，通过前面的源码解析我们知道，preset其实就是一些插件的集合，这一节我们来介绍一个babel中比较重要的preset“@babel/preset-env”，可能有些小伙伴已经用过了，没用过的话至少也应该见过，废话不多说，我们直接盘它。开始我们从项目创建开始，首先我们创建一个叫babel-demo的项目用来测试babel，然后执行npm初始化npm init 然后我们

开始前面已经写了两篇关于eslint的文章了，想必都对eslint应该有一个简单的认识了，在平常的项目中使用应该是问题不大，面试应该也是问题不大的，大家有兴趣可以看看前面两篇文章：前端框架系列之（eslint入门）前端框架系列之（eslint源码解析）接下来我们更深入的了解一下eslint，我们直接结合demo创建一个我们自己的plugin。我们还是用前面我们的eslint-demo项目，代码已经上传github了大家可以直接clone一份,我们在eslint-demo项目根目录直接创建一个p

开始我们直接clone一份eslint的源码git clone https://github.com/eslint/eslint.git为了更好的理解源码，我直接贴一张自己整理的eslint的流程图，我们对照流程图再一步步解析源码bin我们首先找到了eslint命令的入口文件bin/eslint.js：...(async function main() { ... process.exitCode = await require("../lib/cli").execute(

创建工程我们创建一个叫eslint-demo的工程，然后执行npm初始化https://github.com/913453448/eslint-demonpm init安装使用安装eslint$ npm install eslint --save-dev创建配置文件执行eslint的初始化npx eslint --init执行完毕后可以看到一个配置文件，我选的是json格式的配置文件，还有package.json中直接引用、yaml、js格式的配置文件，后面我们会讲到。.esli

简介前面我们介绍过了mvc 前端框架系列之（mvc），mvp 前端框架系列之（mvp）,MVP中我们说过随着业务逻辑的增加，UI的改变多的情况下，会有非常多的跟UI相关的case，这样就会造成View的接口会很庞大。而MVVM就解决了这个问题，通过双向绑定的机制，实现数据和UI内容，只要想改其中一方，另一方都能够及时更新的一种设计理念，这样就省去了很多在View层中写很多case的情况，只需要改变数据就行。Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录

简介前面我们介绍过了mvc 前端框架系列之（mvc），最后其实view跟controller的耦合度还是没有完全分离，所以会导致一大堆逻辑还是在view视图层了，所以为了解决这个问题，就把controller换成了presenter。Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录）。Presenter（代理）负责逻辑的处理我们再看一下mvc的设计图：再看一下mvp的设计图：MVP跟MVC很相像，我们把MVP当成MVC来看也不为过，pres

前言前面我们写了三篇关于es装饰器的文章了，感兴趣的可以去看看：前端框架系列之（装饰器Decorator）前端框架系列之（vue-class-component)前端框架系列之(vue-property-decorator)简介MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：Model（模型）表示应用程序核心（比如数据库记录列表）。View（视图）显示数据（数据库记录）。Controller（控制器）处理输

简介：这节我们继续解析一个叫vue-property-decorator的第三方库，首先可以看它官网的一个介绍：This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library.也就是说它是基于vue-class-component库的，在上一篇文章中我们介绍了如何在v

简介：说到函数式组件跟类组件在react官方就有提供，具体差异的话大家可以自行查阅react开发文档，下面我们看一下在react中怎么使用这两种方式定义组件：函数式组件：function Welcome (props) { return <h1>Welcome {props.name}</h1>}类组件：class Welcome extends React.Component { render() { return ( <h1>

简介：装饰器是ES2016 stage-2的一个草案，但是在babel的支持下，已被广泛使用，有点类似java里面的注解。提案地址Class and Property Decorators用法：如果我们要在我们项目中使用最新的stage-2的装饰器提案怎么做呢？Preset: babel-preset-stage-1Plugins: babel-plugin-transform-decorators, babel-plugin-transform-decorators-legacyFirst

void 0;void会把后面变量都置成undefined；函数声明后面不可以跟括号，函数表达式可以所以我们经常看到比如：(function(){})();或者!function(){}();"!"跟"()"强制把函数声明变成表达式最好是加一个void，因为void符合语意，在java中表示没有返回值比如：void function(){}();...

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> /** * 转十进制 * @param str 进制字符串 * @param n 目标进制

你是不是也和我一样，总忘记~和^的区别？（哈哈，或者你压根就不知道？）哈哈，不瞒你们说，今天忍住没看源码只盯着semver的api看了很久（????真是的又长又丑），终于是看到它的规律了（已经懂了的大牛就略过哈）我们常见的大概有这些：~1.0.0(^1): >=1.0.0 <1.1.0 ( >=1.0.0 <2.0.0)~1.0.1(^1.0.1): >=1.0...

parse–>AST(解析源码为ast)if (ast) { if (ast.type === "Program") { ast = t.file(ast, [], []); } else if (ast.type !== "File") { throw new Error("AST root must be a Program or File no...

传输对象模式传输对象模式（Transfer Object Pattern）用于从客户端向服务器一次性传递带有多个属性的数据。传输对象也被称为数值对象。传输对象是一个具有 getter/setter 方法的简单的 POJO 类，它是可序列化的，所以它可以通过网络传输。它没有任何的行为。服务器端的业务类通常从数据库读取数据，然后填充 POJO，并把它发送到客户端或按值传递它。对于客户端，传输对象是只...

状态模式在状态模式（State Pattern）中，类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。在状态模式中，我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。介绍意图：允许对象在内部状态发生改变时改变它的行为，对象看起来好像修改了它的类。主要解决：对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为。何...

解释器模式解释器模式（Interpreter Pattern）提供了评估语言的语法或表达式的方式，它属于行为型模式。这种模式实现了一个表达式接口，该接口解释一个特定的上下文。这种模式被用在 SQL 解析.符号处理引擎等。介绍意图：给定一个语言，定义它的文法表示，并定义一个解释器，这个解释器使用该标识来解释语言中的句子。主要解决：对于一些固定文法构建一个解释句子的解释器。何时使用：如...

命令模式命令模式（Command Pattern）是一种数据驱动的设计模式，它属于行为型模式。请求以命令的形式包裹在对象中，并传给调用对象。调用对象寻找可以处理该命令的合适的对象，并把该命令传给相应的对象，该对象执行命令。介绍意图:将一个请求封装成一个对象，从而使您可以用不同的请求对客户进行参数化。主要解决:在软件系统中，行为请求者与行为实现者通常是一种紧耦合的关系，但某些场合，比如需...

桥接模式桥接（Bridge）是用于把抽象化与实现化解耦，使得二者可以独立变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。这种模式涉及到一个作为桥接的接口，使得实体类的功能独立于接口实现类。这两种类型的类可被结构化改变而互不影响。介绍意图：将抽象部分与实现部分分离，使它们都可以独立的变化。主要解决：在有多种可能会变化的情况下，用继承会造...

我们接着上一节从源码研究一下html-webpack-plugin插件，感兴趣的童鞋可以看一下我上一篇文章 webpack源码解析一文章开始先上一下源码：html-webpack-plugin源码地址，不废话，我们开车咯～～首先安装：yarn add html-webpack-plugin配置webpack.config.js： plugins: [ new HtmlPlugin(...

先上一张流程图，小伙伴可以跟着这个流程图结合代码往下走：图片来源于：细说webpack之流程篇开始git clone https://github.com/webpack/webpack.gityarnyarn setup打包node ./bin/webpack.jsbin/webpack.js//判断有没有安装webpack-cli，没有话的就提示是否需要安装con...

前言：好久没写博客了，今年确实有点小忙，学习跟工作都很充实，身边也有小伙伴也经常说：技术是学不完的，能不能专一搞点自己喜欢的东西呢？学完新技术然后过几年又没了，岂不是白学了呢？ 哈哈～ 说的确定有一点道理啊，但是没办法啊，新技术还是得去了解啊，至少要去看看别人的文档跟设计思想吧，也不怕小伙伴笑哈，最近还在补js跟css基础知识，学无止境，加油吧～骚年！前面有写过两篇vue的源码的文章，有兴趣的童...

前言: 很久没写东西了,并不是偷懒去了哈,最近一直在学东西,学用node搭服务器、学sql语句、学习jekins、docker、服务器配置等等,哈哈~感觉时间真的不够用,但是没办法啊,看到各大公司都在疯狂的裁员,只有不断的强化自己才能保住这碗饭,之后也会系统的总结一下整个学习过程,也欢迎大牛提意见跟指正,也不能说互联网前景不好了吧,只能说对程序员的要求变高了,加油,骚年!下面进入正题~~~在前...

在开发中，当我们用npm或者yarn安装一个全局cli的时候：npm install -g xxx然后我们直接在命令行执行的时候会报错：-bash: xxx: command not found我用的是mac电脑，windows的原理一致~首先找到你的npm的安装路径：$ npm prefix -g/usr/local/Cellar/node/7.10.0可以看到你的npm安...

前言:前面我们根据vue官网的生命周期图走了一遍vue的源码,感兴趣的小伙伴可以去看我之前的文章Vue源码解析(一),今天我们重点研究一下render跟mount方法,这也是vue中两个比较重要的方法了,废话不多说了,我们开撸~~我们先回顾下上节内容,我们打开vue的源码,然后找到/vue/src/core/instance/init.js: Vue.prototype._init = fun...

前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却步了,小伙伴是不是也跟我当初一样呢? 下面分享一下我看vue源码的一些感触,然后记录一下我对源码的理解,欢迎指正,纯属个人笔记,大牛勿喷!我们直接上一张vue官网的vue的生命周期图:我们跟着源...

前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码.附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...

前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码.附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...

前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染.什么是预渲染?为什么需要用预加载呢?以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的:然后我们运行下页面后:...

前言：vue已经放弃维护vue-resource了，然后推荐使用axios，这一推荐不得了了，axios的人气大增啊，在github已经是50多k的star了，axios算是成功打入了vue全家桶了，既然官方这么推荐，我们接下来就来研究一下axios，顺便再啰嗦几句，我们一直在研究这个框架那个框架的，其实说白了，框架其实就是别人的一种编程思想，都是一些大牛总结的一些编程经验，形象一点就比如一辆汽车...

前言:vue全家桶的内容我们已经研究过了vuex、vue-router,有兴趣的童鞋可以去看看我之前的两个系列的文章vuex源码解析一、vue-router全解析一,之前结合项目分析vuex的时候,当我们需要在vuex的action中处理路由跳转的时候,没认识vuex-router-sync的时候,我一般都是直接拿到router对象,然后稍微封装了一下进行跳转的,哈哈~~ 在看vue的github...

前言：之前做android的时候还是比较反感做h5的童鞋的，因为感觉他们只是在浏览器上适配一下，然后负责任的会在自己手机上看一下ok后，就不管了，然后android机型太jb多了，每次一遇到问题测试就会说：“看吧看吧，在ios上好好的，为啥到android上就不行了，然后android小伙伴很懵逼，md这能怪我啊？”，哈哈，如今自己也开始接触web前端了（打脸了），每次为了不让原生小伙伴也向我之前...

前言：对于前端开发而言，写写ui想必对于小伙伴来说也就是分分钟的事，大部分的时间可以说都是耗在后台接口对接加调试上了，当然，这也不能怪后端的小伙伴，因为主要逻辑都在后端，他们还是比较辛苦滴，为了让前端跟后端依赖性降低，因此提前定义好接口文档就很必要了，那接口文档出来后，我们想模拟mock数据又该怎么办呢？哈哈，之前做android没接触过web前端的时候，都是java结合tomcat直接搭建一个...

**前言：每次在android、rn跟h5中切换的时候，代码总是会闹各种笑话，比如在rn中变量都是包含在“{}”只有一层花括号，但是在vue中“{{}}”会有两层花括号，样式的话rn是驼峰fontSize这种，但在h5中是font-size,然后在android中老喜欢把一个字符串定义为String a=‘123’,/苦笑，说多了都是泪啊，也做了1年多的rn了，总觉得自己react上手应该问题不大...

上一节前端入门之(vue-router全解析二)我们带着vue-router的push方法走了一遍源码,然后还分析了router-view的源码,最后还差router-link组件没有分析了,我们今天继续vue-router解析.我们在源码中找到router-link组件的代码:var Link = { name: 'router-link', props: { to: { ...

前言: 一直想着啥时候能把vue全家桶的东西源码全部撸一遍,可惜无奈能力有限啊(哈哈,最近一直在补js基础),看vuex代码的时候觉得也还好,基本上是边学边解析源码的方式把vuex撸了一遍(毕竟整个vuex加起来也没多少代码),可当碰到vue-router的时候,首先就被它那几千行代码吓到了,刚开始看的时候是有点懵逼啊,所以把vue-router官网上的api看了一遍又一遍, 然后带着某个api功...

前言: 一直想着啥时候能把vue全家桶的东西源码全部撸一遍,可惜无奈能力有限啊(哈哈,最近一直在补js基础),看vuex代码的时候觉得也还好,基本上是边学边解析源码的方式把vuex撸了一遍(毕竟整个vuex加起来也没多少代码),可当碰到vue-router的时候,首先就被它那几千行代码吓到了,刚开始看的时候是有点懵逼啊,所以把vue-router官网上的api看了一遍又一遍, 然后带着某个api功...

前言: 2018已经过了一大半了,并没有感觉在本命年中有啥不顺的,每天过得还是挺开心的��,很感谢身边的朋友一路的陪伴,感恩!! 已经半年多没回家了,不久前跟麻麻发了一个视频,跟过年比,家里妹妹长了10cm,麻麻瘦了10kg,我家狗狗从小奶狗长到了30kg了,麻麻说:“你胡子长了要刮一刮了” ��! 才发现自己真的不小了~~为梦想历经沧桑、阅尽千帆、归去才发现自己早已非少年了啊!!! 不逼逼了...

我们继续我们上一节的前端入门之(vue图片加载框架一)往下~~上一节我们最后已经把框架的基本构造弄完了,最后也能够看到我们的效果了: 可以看到,我们已经简单的实现了我们的占位图的功能了,然后代码很简单:&lt;template&gt; &lt;div class="opt-container"&gt; &lt;img v-lazy="{src:111+images[1]}...

前言: 之前做android的时候,会接触各种图片加载框架,也自己封装过,封装网络框架目的无非就是为了提高图片的复用性、减少内存消耗、监听图片的加载过程等等.换成web前端其实是一样的操作,好啦! 说了那么多我们来简单的实现一个图片加载框架,小伙伴跟紧了哦!!!因为一直在做vue,所以我就以vue为基础来开发我们的图片加载框架了,我们新见一个vue项目,然后运行(我就以之前的vuex的demo...

上两节前端入门之(vuex源码解析二)我们把vuex的源码大概的撸了一遍,还剩下(插件、getters跟module),我们继续哈~插件童鞋们可以去看看vuex在各个浏览器的状态显示插件,小伙伴可以直接看官网然后集成哈,我这边网连github太慢了,就不带着一起安装了,附上vue-devtools插件地址: https://github.com/vuejs/vue-devtools我们简...

上一节前端入门之(vuex源码解析一)我们简单的过了一下vuex的源码,然后也大概了解了vuex的原理,这一节我们继续带着demo,然后对照着vuex源码做解析.先看一张官网文档vuex工作的流程图: 可以看到,当我们点击view中的某个按钮(+号)然后触发了一个action(‘increase‘)然后action继续commit到了mutation,mutation改变state(st...

前言: 这两天听到最多的就是“假疫苗“事件了,唉唉~~ 真的是为了利益可以不管不顾一切啊,这可能也是当今社会的一个现象,悲哀!! 说是有台风啥的,在家一个人默默地待了两天,一个人的时候总喜欢胡思乱想,甚至会花上一整天的时间思考完整个人生,有时候真希望自己能够活得天真或者自私点,这样就不会有太多烦恼了.bb了一会进入今天的主题哈,入坑前端也有一段时间了,从android的(data-bindi...

博客已经停滞了一段时间了,目前一年是在跟js打交道,从最初的android到React-Native然后再到H5,也就短短的1年的时间,几乎明天都在学习,我tm都佩服我自己是怎么坚持下来的……^^,因为有android基础,所以RN上手相对容易一点,但是对于h5真的是从几乎0开始,一开始做东西的时候是灰常恐惧的,都不知道自己写出来的东西运行起来到底咋样,慢慢的遇到的坑多了,也就没什么感觉了(虽然现...

前言:做rn项目的时候,有可能会碰到有些页面是原生做的,有些页面是rn做的,那么rn页面与原生页面相互跳转的时候就很尴尬了,尴尬也得解决啊(rn存在的目的就是为了干掉原生页面,现在你硬是混合开发,怪我咯?) 先说一下目前遇到的坑: 因为我们目前所有的rn页面都在一个叫RNActivity的容器中,所以rn页面要跳转原生页面时候,调用native的jump方法开启一个叫原生activity的...

前言:最近一直在看h5相关的书跟博客,rn偶尔有需求才会动一动,android是真的很少碰了(/忧伤),从h5基础-&gt;js-&gt;typescript-&gt;node-&gt;webpack,每天地铁来回两小时的时间我是一点没落下,学习真的是一件很枯燥的东西,贵在坚持,要给自己点鼓励,昨晚还因为自己学习了node,然后写了一个自动发包的小脚本激动了夜晚没睡觉(嗯嗯,就这么点出息了~),所...

前言: 一周又过去了,一直在赶需求,除了自己利用空余时间学习一下外压根就没时间去研究新东西,唉~程序猿就是这样,活到老学到老!! 废话不多说了,公司产品觉得某电商的商品详情页面很nice,问我们能不能实现(宝宝心里苦),于是研究了一波,下面把我研究的东西分享一下,小伙伴有啥好的实现方式还谢谢分享一下哦~拜谢!先看一下最终实现的效果: ios/android简单来说就是分为两个部分(上...

1、退出浏览器 2、open -a /Applications/Google\ Chrome.app --args --disable-web-security --user-data-dir

上一节我们已经简单的实现了侧滑删除， 我们最后还留了一个小小的功能，那就是当手指抬起的时候，我们需要选择打开或者关闭侧滑功能，我们分几种情况考虑：大的条件分两种： 一、侧滑已经打开 1、抬起手指的时候，如果偏移的距离&gt;=删除按钮距离（打开）1、抬起手指的时候，如果偏移的距离&lt;删除按钮距离（关闭）二、侧滑没有打开 1、抬起手指的时候，如果偏移的距离&gt;=删除按...

前言：好久没有写博客了，回想起刚开始写博客的时候对自己的要求，“每周至少一篇！！！“（还有当初说减肥跟写博客同步进行，结果越减越肥。），嗯嗯，说多了都是泪，最近在一直在学习h5，然后看到现在rn项目中有小伙伴在用一个第三方的侧滑删除控件，于是想去看看那些大神是咋实现的，最后发现，也就这样哈～没想象中的那么难，写这篇博客的目的也就是当作一个学习笔记，大牛勿喷！！2017对我来说是不平凡的一年，期间换...

前言：因为刚换工作的原因，好久没写博客了，目前一直在做跟rn相关的东西，android已经停滞快半年了，h5也差不多，说多了感觉心累啊，有些东西你不碰的话还真会忘记，真是二者不可兼得额，废话不多说了，最近在看rn的webview，很听很多小伙伴说了，rn的webview很多坑，特别是android！！好吧～那我们就带着小伙伴的需求跟坑一步一步的解析下源码～～一、获取webview的加载进度，r

前言：无奈研究了一下CodePush，遇到了很多坑～～ 但是原理呢不是很难理解，就是配置有点多，原理可以简单的参考一下我之前的一篇博客React-Native 热更新尝试（Android），下面说一下期间遇到的坑～大家可以看一下官网：https://github.com/Microsoft/react-native-code-push，如果觉得自己英文不太好的话可以看一下这哥们的博客： React

前言：最近有点迷茫，学的东西太多，然后感觉有点力不从心，也不知道还能坚持多久这样写博客，不说了～～ 烦！！ 撸一下代码平复下心情~React Native中我们都知道，所有的view摆在一个activity中（原谅我只能用android为例子），然后原生android启动的时候，如果后台进程比较多，或者手机比较渣一点的话，多多少少都会看到一个短暂的白屏现象，然后当自己的activity切换到rnac

前言：上一节React Native带你实现scrollable-tab-view（五）中我们最后实现了我们scrollable-tab-view的效果为： 我们要做的就只差一步了，那就是点击tab的时候，让指定tab居中，也就是要改变srollview的水平偏移量，但是偏移量控制范围为： （0<=x<=tabcontainer的宽度-container的宽度），也就是scrollview到顶部和

上一节React Native带你实现scrollable-tab-view（三）中我们最后实现了我们scrollable-tab-view的效果为： 比如有很多页面，我们的tabview需要跟随scrollview的滑动而滑动：我们现在用的还是默认的tabview，比如我们多加一些页面， 这样肯定不行，我们需要的是上面的那种效果，所以每个view的flex=1这种模式肯定不适合了，我们需

上一节React Native带你实现scrollable-tab-view（三）中我们最后实现了我们scrollable-tab-view的效果为： 还记得我们上一节最后留下的问题吗？比如我们有很多个页面，然后一出来就加载那么多页面的话，再牛掰的手机都扛不住，我们想做的是： 1、第一次加载页面的时候，假设有三个页面，第一次就只加载第一个页面，（用户也可以选择预加载出第二个和第三个页面）。 2

上一节React Native带你实现scrollable-tab-view（二）中我们最后实现了我们scrollable-tab-view的效果为： 我们接下来来实现一下点击某个tab跳转到指定的页面，所以当我们点击了哪个tab我们得回调给scrolltabview，于是我们传入回调函数给DefaultTabBar: /** * 渲染tabview * @private

上一节React Native带你实现scrollable-tab-view（一）中我们最后实现了我们scrollable-tab-view的效果为： 代码为：/** * @author YASIN * @version [React-Native Pactera V01, 2017/9/5] * @date 2017/9/5 * @description index */......

前言：项目中很多地方用到了react-native-scrollable-tab-view这个第三方框架，觉得有必要拿出来研究一下，因为其中也遇到了很多bug，哈哈！都是些小bug，这框架写的还是很牛逼的，所以就开启我们的scrollable-tab-view之旅吧。先看一下react-native-scrollable-tab-view的效果图：小伙伴貌似都比较熟悉此框架，主体分为两个部分： 一

纯属于工具类，简单的说一下原理， 1、在不给text设置numberOfLines的时候计算出text的高度。 2、给text一个特定的numberOfLines，然后再次计算高度。 3、比较两次获取的高度，如果第二次获取的高度<最大高度，说明需要换行，回调给页面。 4、页面通过回调知道需不需要显示“加载更多操作”。用法：<MutiRowText st

前言：有朋友需要实现一个仿某电商app店铺首页的效果，花了一点点时间简单的实现了一下，最后的效果大概是这样的：1、可以看到，当底部的滑动控件滑动的时候tabview滑动到指定的位置后悬浮。 2、当底部的滑动控件滑动的时候状态栏view透明度从0到1的转变。 3、当底部的滑动控件滑动的时候背景view需要根据滑动的距离缩放最后跟状态栏view重合。当然，需求远不止这些，我只是简单的实现了一下功能，

前言：前一篇 React Native打造自己的fetch（一）我们已经通过源码带大家走了一遍fetch，感觉吧也不是那么有难度，总结起来就是：rn端通过fetch传递url跟一些参数（header、body）对传入的url跟参数做一系列的封装，封装成 var request = new Request(input, init)然后通过request对象把请求需要的设置给XMLHttpRequ