前端
文章平均质量分 66
Litwak
- 为 未 来 实 现 你 想 要 的 改 变 -
展开
-
select组件结合anchor实现自由定位
实现select加锚点的效果原创 2022-06-06 14:40:51 · 306 阅读 · 0 评论 -
Angular、Vue、React响应式原理对比分析
AngularVueVue 的响应式,是使用观察者模式实现的。Vue 会遍历 data 数据对象,使用 Object.defineProperty() 将每个属性都转换为 getter/setter。每个 Vue 组件实例都有一个 watcher 实例,在组件初次渲染(render)时,会记录组件用到了(调用 getter)哪些数据。当数据发生改变时,会触发 setter 方法,并通知所有依赖这个数据的 watcher 实例,然后 watcher 实例调用对应组件的 render 方法,生成.原创 2021-05-31 16:19:48 · 2836 阅读 · 0 评论 -
聚合 schematic 脚手架
包地址:https://www.npmjs.com/package/ng-zhongyingjuhe1、 Install Angular ~10.1.3: (12测试服务器已安装angular@10.1.3)npminstall-g@angular/cli@10 @angular/core102、创建项目 ngnewproject_name --routing=false --style=less # Would you like to add Angular...原创 2021-04-14 17:46:34 · 216 阅读 · 0 评论 -
ref和reactive分析笔记
Reactive 例子<template> <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button></template><script>import { reactive, computed } from 'vue'export default { setup() {原创 2021-04-02 11:41:44 · 320 阅读 · 0 评论 -
微前端框架搭建 主应用为angular
demo域名没有备案,2021年3月6日可以正常访问。主应用配置1、新建项目, 我这里是新建了angular v10工程, 并安装qiankun包。ng new fe-maincd fe-mainnpm install qiankun2、设置子程序入口 micro-app.jsconst microApps = [ { name: 'fe-sub-vue', entry: '//localhost:7777/', activeRule: '/fe原创 2021-03-04 18:45:23 · 1360 阅读 · 2 评论 -
TCP协议是如何保证页面文件能被完整送达浏览器的
对于在网络中,我们知道一个文件通常会被拆分为很多数据包来进行传输,而数据包在传输过程中又有很大的可能会丢失或者出错,保证页面文件完整地送达浏览器是有必要的。下面就这三方面展开描述:数据包如何送达到主机 主机如何将数据包转交给应用 数据是如何被完整地送达到应用程序数据包从主机A送到主机B,数据包上会附加上主机B的IP地址信息,主机A本身的IP地址,这些附加的信息会被装进一个IP头的数据结构里(包含IP版本,源IP地址,目标IP地址,生存时间等)这些一般我们都了解,下面主要说明TCP(Tran转载 2021-02-07 19:42:18 · 402 阅读 · 3 评论 -
Chrome为什么打开一个页面,会有4个进程?
答案:因为打开1个页面:至少需要1个网络进程,1个浏览器进程,1个GPU进程以及1个渲染进程。解释:多进程架构的学习进程和线程的概念混淆从计算的角度来说,单线程就是一个接一个的计算,多线程就是同时处理多个计算。多线程是指程序中包含多个执行流,即在一个程序中可以同时运行多个不同的线程来执行不同的任务,就是说允许单个程序创建多个并行执行。单线程是程序中的一个执行流,每个线程都有自己的专有寄存器(栈指针、程序计数器等),但代码区是共享的,即不同的线程可以执行同样的函数。多线程也是转载 2021-02-07 19:40:53 · 1325 阅读 · 0 评论 -
远程调试保持连接不断
Xshellnohup ng serve --host 10.110.1.99 --port 4200 > ng.log 2>&1 &exit使用了nohup之后,很多人就这样不管了,其实这样有可能在当前账户非正常退出或者结束的时候,命令还是自己结束了。所以在使用nohup命令后台运行命令之后,需要使用exit正常退出当前账户,这样才能保证命令一直在后台运行。2与>结合代表错误重定向,而1则代表错误重定向到一个文件1,而不代表标准输出; 换成2>&a原创 2020-11-26 19:27:50 · 219 阅读 · 0 评论 -
图解 react、 angular、 vue、Flutter 生命周期
reactangularvue原创 2020-11-24 18:59:54 · 1062 阅读 · 0 评论 -
React route不刷新
使用withRouter关联页面组件实现跳转刷新。错误示例import './Body.css';import React, { lazy, Component, Suspense } from 'react';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';const Home = lazy(() => import('../Home'))const About = lazy(()原创 2020-11-02 19:14:58 · 1046 阅读 · 0 评论 -
npm 提速/换源
使用淘宝源临时使用npm --registry https://registry.npm.taobao.org install express持久使用npm config set registry https://registry.npm.taobao.org通过cnpmnpm install -g cnpm --registry=https://registry.npm.taobao.org使用官方源npm config set registry https://regi原创 2020-09-27 10:22:19 · 128 阅读 · 0 评论 -
直接启动AVD - android模拟器
注意,在android sdk目录下, 有两个emulator, 一个在tools文件夹里, 一个在emulator文件夹里。这里我们用emulator/emulator.exe。 我这里的地址是:C:\Android\Sdk\emulator第一步: 新建runEmulator.bat文件:内容:-avd后的是你安装的设备名称。emulator -avd Pixel_2_XL_API_29echo 模拟器已启动,欢迎使用Pixel_2_XL_API_29第二步:发送到桌面快捷方原创 2020-09-24 10:11:15 · 3234 阅读 · 0 评论 -
Flutter web环境搭建
在国内环境, 搭建Flutter web环境费了很大力气,以下就详细解答搭建过程。第一步: 下载beta版https://flutter.cn/docs/development/tools/sdk/releases版本列表里找到beta channel最新版。 我这里用的是1.22.0-12.1.pre。 大约700MB。解压到安装目录, 推荐放到 C:/src/flutter第二步:设置 Path 环境变量C:/src/flutter/bin设置 dart_pub, flutter..原创 2020-09-22 12:31:49 · 619 阅读 · 1 评论 -
[转载] [译] 理解TypeScript 中 any 和 unknown
在我们的项目中实现 TypeScript 时,我们努力写出最好的类型。我们可能经常觉得使用any类型违背了 TypeScript 的目的,确实如此。还有其他一些类型值得了解,我们可能会发现它们在尝试不使用 any 时很有用,比如 unknown 。Anyany 类型类似于纯 JavaScript 的工作方式。我们有时可能需要描述一个我们根本不知道类型的变量。let uncertain: any = 'Hello world'!;uncertain = 5;uncertain = { hel转载 2020-07-17 14:38:28 · 304 阅读 · 0 评论 -
package.json version中 ‘~‘ 和 ‘^‘ 的区别,
~version"Approximately equivalent to version" Seenpm semver - Tilde Ranges&semver (7). will update you to all future patch versions, without incrementing the minor version.~1.2.3will use releases from 1.2.3 to <1.3.0.^version"Compatible with...转载 2020-07-17 11:13:05 · 2922 阅读 · 0 评论 -
前端哲学
React:最容易的方式,是先用已有的数据模型渲染一个不包含交互功能的UI。最好将渲染UI和添加交互这两个过程分开。这是因为,编写一个应用的静态版本时,往往要编写太多的代码,而不需要考虑太多交互细节;添加交互功能时则要考虑大量细节,而不需要编写太多代码。所以,将这两个过程分开进行更为合适。 你可以自上而下或者自下而上构建应用:自上而下意味着首先编写层级较高的组件(比如Filterable...转载 2020-01-07 14:49:00 · 145 阅读 · 0 评论 -
解决angular中使用ng-zorro, cdk-overlay-backdrop-showing覆盖页面,需要点两次的问题。
这个问题,烦扰了我一段时间。曾尝试过了解cdk-overlay实现原理,看过ng-zorro源码。一直没找到解决方法。google搜到一篇文章:https://www.cnblogs.com/wangmiao2606/p/10179287.html, 尝试用文章中思路解决。我首先在styles.less里这样写:.cdk-overlay-backdrop-showing { d...原创 2019-11-21 15:46:02 · 994 阅读 · 0 评论 -
选择日期时间控件, 基于ng-zorro
import { Component, forwardRef, OnInit } from '@angular/core';import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';@Component({ selector: 'app-date-time', template: ` &...原创 2019-10-28 15:43:38 · 2108 阅读 · 0 评论 -
less 用法
Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。例子:@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shad...转载 2019-10-09 09:28:03 · 180 阅读 · 0 评论 -
lvy性能对比
1、新建一个项目lvy: --enable-ivyng new hy-bi-lvy --enable-ivy? Would you like to add Angular routing? Yes? Which stylesheet format would you like to use? Less [ http://lesscss.org ]常规:ng new t...原创 2019-08-07 11:53:48 · 868 阅读 · 1 评论 -
Unexpected value 'undefined' declared by the module ''
了解一下hmr ,重启服务 ng serve原创 2019-04-15 15:56:03 · 2487 阅读 · 2 评论 -
angular clone deep
Installnpm install ng-clone-deep --saveexampleImport the module into every module where you want to use the components.import { NgCloneDeepModule } from 'ng-clone-deep/public-api';@NgModule({...原创 2019-04-17 16:23:18 · 861 阅读 · 0 评论