- 博客(46)
- 收藏
- 关注
RSS订阅原创 flutter国内环境更换阿里镜像。
按照官方的上手步骤没什么问题。主要是如果没有梯子，就可能导致项目构建不成功。如果没有梯子。咋们也可以使用国内的一些镜像。这里我使用阿里云镜像。前面的项目初始化过程完全可以按照 官方文档 来，此处省略。初始化项目完成之后。不出意外如果采用国内网络F5运行项目会报错或者一直卡着不动。这个时候可以将国外的依赖源改成国内镜像源。主要修改项目文件下的android\build.gradle(此处只考虑windows) 以及 flutterSdk文件中的[rootPath]\flutter\packages\
2020-06-21 22:55:00
6622
4
原创 9.vue和react一起学 (*^_^*)
高阶组件（hoc）高阶组件： 高阶组件是参数为组件，返回值为新组件的函数。react里面有高阶组件的概率。vue虽然没有显式提出高阶组件大，但它也有高阶的影子。reactimport React from "react"; class Plan { subs; constructor(plans) { this.plans = plans; } addSubs(target) { this.subs.push(target);
2020-06-09 23:54:46
257
原创 8.vue和react一起学 (*^_^*)
嵌套逐级传递props的场景&refs嵌套逐级传递props的场景以组件为单元开发的react和vue都存在嵌套逐级传递props的场景。但它们在简化这种复杂场景的方法有不同。refsreact与vue都有引用的概念，其用法有不同。react嵌套逐级传递props的场景react解决嵌套逐级传递props的场景采用最外层创建context的方法结合发布订阅的设计模式。所有包含在发布者（provider）内的订阅者（consumer）在发布的数据源变化时，都能够重新渲染ui界面。
2020-06-07 23:56:01
252
原创 7.vue和react一起学 (*^_^*)
代码分割前面都是使用直接通过script引入的方式使用react或者vue框架，然而这种方式，我们得要考虑全局污染、兼容性、代码优化、依赖关系等众多问题。为了让我们的精力更多地放在框架学习上面，从这里开始我们使用构建工具管理我们的程序，当然不是自己去搭建配置。我们使用的是create-react-app或者vue-cli去使用通用的构建配置。全局安装：npm install -g @vue/clireact创建通用构建配置的react-appnpx create-react-app my-ap
2020-06-06 21:46:30
339
原创 6.vue和react一起学 (*^_^*)
继承&组合react 组件复用主要通过组合，继承也是可以的，只是组件之间关系的维护比较困难，官方推荐组合。reactclass Father extends React.Component { constructor() { super() this.state = { fatherName:"大头爸爸" } } get fatherName(){ return this.state.fath
2020-06-05 23:57:33
190
原创 5.vue和react一起学 (*^_^*)
条件渲染&循环渲染&表单&状态提升reactclass Demo extends React.Component { constructor(prop) { super(); this.state = {content:[], inputVal:"", demo1prop:1} } componentDidMount(){ // 模拟请求 setTimeout(() => { this.setState({
2020-06-03 23:50:23
149
原创 4.vue和react一起学 (*^_^*)
lifecycle生命周期&event事件vueconst Comp = Vue.component("comp",{ render(){ return( <div>组件 <slot name="title"></slot> </div> ) }, activated (){ console.lo
2020-06-01 23:57:01
227
原创 3.vue和react一起学 (*^_^*)
对比以下react和vue组件的属性和状态react// 类组件class Son extends React.Component { constructor(){ super() this.state = { knowledge: 0, experience: 0 }; this.advance.bind(this) } advance({type, payload}){ const { knowledge, experi
2020-05-31 23:51:32
345
原创 2.vue和react一起学 (*^_^*)
是不是觉得写createElement很抽象？vue和react官方都是提供了相应的转化jsx的支持，这些支持靠的的强大的转换器babel。react1.安装依赖以及相关配置首先我们cd 到 react-jsx目录下，npm init -y初始化项目。cd react-jsx && npm init -y安装babel相关依赖npm i --save-dev @babel/core @babel/cli @babel/preset-react 对babel相关配置，预设@b
2020-05-30 14:35:51
422
原创 1.vue和react一起学 (*^_^*)
先对比一下vue与react各自的creatElement函数。vue<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <
2020-05-28 01:47:43
350
原创 前端模块化开发浅析
目前在各种前端打包构建工具(如webpack)的支持下，我们在前端可以使用cmd，amd，Modules，Modules 1.1.1，esModule各种模块化规范去写我们的项目（注： 注意是规范，不是具体实现哦），最终模块之间的依赖关系的处理都交由构建工具去做了。但实际上我发现很多纯js库的作者是依然是直接用过引入requirejs这样的依赖去支持模块化的，比如echartjs。并且一般这些纯js库会配合rollup这样的模块打包器去实现资源整合。尽管以后前端工程化的发展是朝着esmodule统一，但我
2020-05-24 23:53:31
236
原创 4.babel@7.9.0学习总结
1.今天读一下 babel-plugin-import-master 这款babel插件为了方便我本次选择再node环境下进行调试(主要是看插件运行机制以及ast的转换过程)。注意： 因为node环境默认不支持es6的模块化，可以通过babel进行支持。此处只看具体的转换过程，故只将对应src\index.js以及src\Plugin.js文件中的import手动改为require。1.1调式工具介绍vscode自带的Node Debug插件(保证node在一个较新的版本),该插件支持node环
2020-05-18 23:55:06
238
原创 3.babel@7.9.0学习总结
1.今天继续学习剩下的几个babel对外开放的几个api（Tools）@babel/generator此工具依赖需要自行安装npm install --save-dev @babel/generator
2020-05-16 18:53:34
400
原创 2.babel@7.9.0学习总结
1.今天学习babel对外开放的几个api1.1 @babel/parser此方法是将字符源码根据配置转换成对应得ast：根据文档我们可以在插件里面去进行解析覆盖：// babel-plugin-my-plugin\index.jsconst {parse} = require("@babel/parser");module.exports = function() { return { parserOverride(code,opts){ let ast =
2020-05-13 23:57:14
334
原创 1.babel@7.9.0学习总结
webpack基础知识的学习已经告一段落了，后期就是不断实践了，我此次学习的目的是能够走通框架到原生的桥梁，实际上这座桥就是一些打包构建解析工具。比如源码从解析、转换、再到生成到浏览器或node环境能够执行的这一过程就可以靠babel实现。以下为babel三个过程的概率：解析:解析分为词法分析（Lexical Analysis） 和 语法分析（Syntactic Analysis)。词法分析: 将字符串形式的代码转换为 令牌（tokens） 流。说到这个 令牌（tokens） 流，虽然我还没有到
2020-05-12 23:53:47
189
原创 2.组件库webpack配置文件品读——antdvue（二）
1. 上一节读了开源项目ant-design-vue的package.json以及开发环境webpack.config.js，接下来读它的build产品环境配置。开发环境配置：偏向方便本地调试，故而优先考虑编译速度、代码未精简压缩。产品环境配置：偏向线下运行速度以及稳定性，故而优先考虑代码的优化精简压缩。const path = require('path');// node内模块cons...
2020-05-07 23:59:32
482
原创 1.组件库webpack配置文件品读——antdvue（一）
1.webpack的基本操作通过前面几节已经有了大致的了解，剩下的就是去实践或品读开源项目了，这里我首先选择开源项目ant-design-vue的wbpack配置进行学习。const HtmlWebpackPlugin = require('html-webpack-plugin'); // 控制index.html的输出const VueLoaderPlugin = require('vue...
2020-05-05 23:59:43
755
原创 12.webpack^4.42.1文档学习
1.之前咋们学习了pwa的一些概念，以及它的离线可用实现。随着项目的庞大，以及多人协作的风格不统一，不方便管理以及可读，typescript横空出世。这一节咋们学习webpack对于typescript的一些支持。1.1安装安装webpack、webpack-cli、typescript编译器，以及ts文件的loader----ts-loadernpm install --save-dev ...
2020-05-03 17:52:48
333
原创 11.webpack^4.42.1文档学习
1 上一节学习了老库的优化，这一节学习一个当前比较流线的前端技术应用-------Progressive Web Application - PWA。1.1PWA是什么？从它的英文全称大致可以看出两点：1、它符合渐进增强的特性(首先保证基本功能实现，后面再考虑新功能的适配)。2、它是一个web应用（js+html写的）。除此之外，它具有以下特点：1、浏览器的Service Worker支持...
2020-05-02 23:55:27
223
原创 9.webpack^4.42.1文档学习
1. 前面学习了webpack的基本操作，那么在open-source兴起的今天我们总是想将自己写的一些轮子分享给别人。但在模块化开发的今天，已不是单纯的通过script引入就能满足了，我们有amd、cmd、commonjs、es6这些模块引入的方式，那么我们怎么同时兼顾这几种模块引入方式呢？实际上，我们只要对webpack进行简单的配置就能够实现。1.1...
2020-05-01 13:04:16
187
原创 8.webpack^4.42.1文档学习
1.上一节说到为了降低网络流量，浏览器会有缓存机制。如果说我们以原输出文件名不变的情况下，将资源挂在到服务器上面，实际上，服务器实际会优先使用他的缓存文件，这就是所谓的命中缓存。...
2020-04-26 23:54:38
145
原创 7.webpack^4.42.1文档学习
1.上一节我们学习了code-split，能够减少打包后的代码量，但是页面加载的时候这些相应的文件还是会被请求。有没有一种方法可以实现类似有咋们图片懒加载呢，使用到这段代码逻辑的时候才请求它呢？结合咱们学习的code-split，咋们可以外加一个情景，这个情景可以是事件触发，也可以是条件判断；例如，在点击按钮的情景// index.js同级创建dynamic-file.js文件// 导出变...
2020-04-25 23:57:32
158
原创 6.webpack^4.42.1文档学习
思考: 在学习webpack之前， 如果不通过构建工具去构建项目，我们一般是通过scipt或者link标签去引入样式或者js代码，这叫代码逻辑的抽离封装，有了类似webpack这样的构建工具以及AMD、CMD、commonjs、es6之后，咋们管他叫做模块化开发。但是由于这些高级语法目前在浏览器还不完全支持。因此，我们要借助打包构建工具将其转化成内部实现的具有nodejs，requirejs或es...
2020-04-24 23:58:23
150
原创 5.webpack^4.42.1文档学习
今天犹大大直播对于vue3.0进行了一些讲解，看来vue3.0稳定版快要来，看来又要刚起来了。但是万丈高楼从高起，还是要先把基础打牢固。嗯今天加班回来得比较晚，给明天加个作业。...
2020-04-23 23:57:33
225
原创 4.webpack^4.42.1文档学习
1.上一节我们知道了如何搭建本地服务，将webpack打包后的文件放在本地服务上。但是这似乎还是有点不方便，每次都要先命令行打包然后才能侦听到变化，有没有一种方法使得开启服务器后，更改源文件，后页面实时响应呢？这里我们就要学习模块热替换( HMR )以及webpack内置的插件。首先进行wepack.config.js中的配置...const webpack = require('webp...
2020-04-21 23:41:29
270
原创 3.webpack^4.42.1文档学习
1.webpack打包后，运行打包后的代码出错了，如何定位对应打包前的改代码的位置？js支持sourse map，什么是soursemap？简单的来说他是用以定位打包后出错代码对应打包前的代码。具体可以去 阮一峰JavaScript Source Map 详解 细读。现在各大主流浏览器都是支持解析sourse map的，以Google浏览器为例：1.1 打开sourse map支持我们F1...
2020-04-19 23:50:06
197
原创 2.webpack^4.42.1文档学习
1. wepack是如何把控这个资源输出的过程的?这里官方文档给出了两个比较m抽象的名字：runtime和manifest。runtime，中文意思是“运行时”，通俗的来讲就是由打包后的模块之间的交互连接关系以及执行逻辑组成的环境。manifest，中文意思是“货单”，如果在此之前你有使用一下框架(比如uniapp)里面会有manifest.json配置文件。以下是官方原话：当编译器(c...
2020-04-18 23:55:20
250
原创 1.webpack^4.42.1文档学习
webpack是啥?说到webpack，一般没有特地地去系统学习的朋友(比如我[手动滑稽])，可能只会联想到loader，proxy，plugin等这些工作中的常用配置选项。其实在前端工程化、模块发之中，它举足轻重。如果能熟练使用它，绝对是能够对于项目开发，以及对于你构建代码的境界提升都有好处。1.首先我们本地新建一个文件webpack-demo，并通过npm初始化项目，命令如下:npm i...
2020-04-17 23:42:20
205
原创 温习，后台node + 加前台EventSouce实现简单的通信
由于最近比较忙，决定温习一下之前写的一些小demo。后台node一般我们工作中实现通信是使用的是websocket,但实际上eventsource也能实现通信，只是他是服务器单向推送,例如入消息推送，实时天气这些不需要很及时的通信。eventsouce基于http协议，必须编码成utf-8的格式进行传输，它能够实现断线重连，是单向的。而webscok基于tcp协议，是双向连接，多用于及时通...
2020-04-16 01:30:40
757
原创 利用vue-property-decorator以及vue-tsx-support实现vue的es6类写法(类似react)
首先咋们先看一下react的相关写法：import React,{Component} from 'react'// 导入样式react-cli,应该是默认支持css module,可以防止全局污染import './index.scss'class Home extends Component{ constructor(props){ //调用父类构造函数，实现继承 ...
2020-04-13 23:53:43
1747
原创 记录vue+tsx写法中使用css module的一点小坑
问题背景1.背景：如果以tsx的形式写render：Vnode以渲染出html，tsx文件中应该是不能用vue文件中的template写html结构，以及style写样式的。就要使用css module。2.问题：使用css module设置requireModuleExtension: false，省略xxx.module.css中的module后缀，第三方组件库的样式加载不出来。1.cs...
2020-04-12 23:54:44
5004
原创 2020年的我换了工作
换了工作 由于上份工作太过安逸（包吃住9k），并且在长沙这座软件行业不太发达的城市，考虑的很久，我得给我自己一个机会去看看外面的世界，所有也便提出了离职，来到了深圳的一家外包公司，其实我想进的是一家可以技术氛围，技术面比较多的公司，但是我想说，深圳真的是不缺技术牛人和高学历的人，怎么办呢？还...
2020-03-24 21:15:30
168
原创 11.vue2.x之vue2.x的实例方法 / 事件
重学vue2.x之vue2.x的实例方法 / 事件vm.$onvm.$on( event, callback )event:当前示例上的自定义事件。str或者array。callback :回调函数会接收所有传入事件触发函数的额外参数。vm.$on(['testone','testtwo'], function (msg) { console.log(msg)})vm.$emit...
2019-11-21 13:58:59
104
原创 10.vue2.x之vue2.x的实例方法 / 数据
重学vue2.x之vue2.x的实例方法 / 数据vm.$watchvm.$watch( expOrFn, callback, [options] )返回值：{fn} unwatchexpOrFn:字符串或者函数类似。为字符串时，表示侦听的对象。为函数时，函数返回依赖的data或者computed组成的表达式。callback：回调函数，当expOrFn变化时，其都会重新执行。opti...
2019-11-21 11:39:21
120
原创 9.vue2.x之vue2.x的实例属性
重学vue2.x之vue2.x的实例属性vm.$dataVue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。console.log(this.attrs)console.log(this.$data.attrs)//两种方式均可访问到数据vm.$props当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。...pro...
2019-11-18 23:47:41
372
原创 8.vue2.x之vue2.x的选项 / 其它(二)
重学vue2.x之vue2.x的选项 / 其它(二)name组件名，只有作为组件选项时起作用。Vue.component() 注册时，全局 ID 自动作为组件的 name。//ID即作为组件的nameVue.component('ID',{...}) 有利于vue-devtools组件树的构建，未命名组件显示为 < AnonymousComponent >delimit...
2019-11-17 15:18:56
179
原创 7.vue2.x之vue2.x的选项 / 其它(一)
重学vue2.x之vue2.x的选项 / 其它directives自定义指令，用法同全局指令。filters自定义过滤器，用法同全局过滤器。components自定义组件，用法同全局组件。parent指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。...
2019-11-08 23:12:47
151
原创 6.vue2.x之vue2.x的选项 / 生命周期钩子
重学vue2.x之vue2.x的选项 / 生命周期钩子beforeCreate此阶段，实例已开始初始化，VDOM和数据都还没有初始化。一般不会在这个周期里面进行操作。created数据已经初始化完成，数据观测能够进行 ，watch/method方法能够调用，但vdom未在页面渲染。beforeMount数据已经初始化完成，VDOM未挂载到页面，插值表达式{{}}此时能够看到显示在页面中...
2019-11-08 21:21:46
124
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人