- 博客(436)
- 收藏
- 关注
RSS订阅原创 （二）指针
p 自己的地址是 0Xff12，但是她存放的是 0Xff96。第一种方法：地址前面加 *，表示根据地址找到对应的值。第二种方法：通过 地址[] 也可以进去。
2024-03-17 14:54:43
330
原创 函数更新数据
当点击页面按钮的时候，时间更新，一般做需求会遇到这种情况，如果有多个场景同时更新时间的场景，refreshTime.value = new Date() 就会写很多遍，采用一种简洁的办法。
2023-09-02 05:30:00
153
原创 webpack 之 Loader开发（一）
Loader 只在编译时执行一次，也就是启动时，所以在开发过程中有改动，需要重启验证，又或者配合 webpack watch。我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。以上是打印的日志，是在Node的终端中打印，不是在浏览器中，Loader其实是Node语言。2. Loader可能经过一层层链路、又或者只有一层，最终的处理都是转化成 js，（当然这是只有一个Loader的情况，还会有Loader链式调用的情况～
2023-04-16 00:47:39
518
1
原创 （五）搜索广告
搜索广告是典型的竞价广告产品，其特点是广告主就（关键词）的广告展示机会展开拍卖式的竞争，并根据竞争结果依次占据该广告展示的若干位置。与展示量合约广告不同，不在保证量，广告主需要自行调整效果与量的平衡；其次，价格的约定也被去掉，每个广告主都可以随时调整某个关键词上的出价。如英语培训：---> 英语培训暑假班、英语培训哪家好、英语相关培训、培训英语。如英语培训：---> 英语培训、培训英语。如英语培训： 四级证书、雅思、托福。哪些搜索关键字下，不展示该广告。
2023-04-08 18:38:11
192
原创 （三）合约广告
网站把某一个广告位卖给广告商，这段时间归广告商所有，到点了下线。（2）典型场景：高曝光广告位、开屏广告、导航网站等。（1）流量选择的维度：时间段、地域等。受众定向即为打标签的过程。
2023-04-08 17:16:09
414
原创 （二）认识商业化体系
广告组（Ad Group）：一个具体的广告投放策略，主要是 受众条件、出价。（1）ECPM（effective cost per mille）:每一千次展示可以获得的广告收入（广告千次展示收入）广告计划（Campaign）：一次广告主的投放活动，其中包含了预算、时间范围等基本信息。广告创意（Creative）：广告最终展示出来的素材。：获取用户需求、第一时间推荐广告，如果晚了 用户可能不需要了。（2）数据处理的规模很大：用户、环境、广告三方建模。（4）主流程的一致性要求不高：推荐错了也没啥问题。
2023-04-08 14:21:32
79
原创 （二）@vue/composition-api 之 provide/inject
@vue/composition-api 之 provide/inject。
2022-09-18 12:13:52
324
原创 （四）vue/composition-api 之 computed/watch
vue/composition-api 之 computed/watch。
2022-09-18 00:51:05
336
原创 （一）概述
1. 品牌触达（Brand Awareness）：创造独特良好的品牌形象，提升长期内的转化和利润（明星代言广告牌 -- 广覆盖 大品牌-- 注重长期收益等等）一切付费（付费形式很多种 按时间、按点击次数等）的信息、产品或服务的传播渠道，都是广告。1. 品牌：根据用户熟悉的形象（明星、网红、自媒体、公众号）提高付费内容的关注程度（打广告、说广告词）（1）条幅（Banner）（2）开屏广告 （3）信息流广告 （4）搜索广告。（1） 条幅广告（Banner）（1）视频广告 （2）开屏广告。
2022-04-30 00:08:54
293
原创 （三）node 命令行 inquirer
Inquirer：问答式inquirer.js —— 一个用户与命令行交互的工具_xhsdnn的专栏-CSDN博客_inquirer#! /usr/bin/env nodeconst program = require('commander')const shell = require('shelljs')const path = require('path')const inquirer = require('inquirer')// 该命令的版本program.version
2022-02-06 16:23:33
844
原创 （二）node 命令行开发 commander
注册命令的动作#! /usr/bin/env nodeconst program = require('commander')// 该命令的版本program.version('1.0.0')// 该命令的不同动作(指令)program .command('run') // run 命令 .description('运行项目') // 描述 .action(() => { // 执行该命令的动作 console.log('run success') })
2022-02-06 16:04:06
936
原创 （一）node 开发命令行工具
什么是命令行工具？命令行工具（Cmmand Line Interface）简称cli，顾名思义就是在命令行终端中使用的工具。我们常用的 git 、npm、vim 等都是 cli 工具，比如我们可以通过 git clone 等命令简单把远程代码复制到本地。开发命令行工具常用的库commander // 参数解析chalk // 文字加颜色shelljs // 运行shell命令Inquirer // 交互信息收集开发步骤1. 首先npm初始化一个项目npm init -y.
2022-02-06 15:30:30
1703
原创 （五）微前端之框架
1. 官方学习文档乾坤是在 single-spa 的基础上进行的封装 上手简单 官网：介绍 - qiankun代码实战：快速上手 - qiankun2. 项目实战基座项目（主应用）：Vue微应用（子应用）：2个 -- Vue 、原生 html 页面由于 qiankun 是通过 fetch 去获取微应用的引入的静态资源的，所以必须要求这些静态资源支持跨域主应用：import Vue from 'vue'import App from './App.vue'import r
2022-02-05 20:38:19
425
原创 （四）沙箱机制
使用single-spa会出现父子应用样式相互影响的问题，如何进行样式隔离呢？1. 使用 BEM （Block Element Modifier）约定项目前缀2. 使用 css modules 打包时生成不冲突的选择器名3. css-in-js （不建议）4. shadow Dom 真正意义上的隔离沙箱机制1. 快照机制原理就是运行在某一环境A时，打一个快照，当从别的环境B切换回来的时候，我们通过这个快照就可以立即恢复之前环境A时的情况简单一句话：保存不同 切换应用的时.
2022-02-05 03:39:02
413
原创 （三）子应用含有路由
如果子应用中含有 vue 路由会怎么样呢，可以看一下子路由定义：import Vue from 'vue'import Router from 'vue-router'import Home from '@/Home/index.vue'import About from '@/About/index.vue'Vue.use(Router)export default new Router({ mode: 'history', routes: [{ path: '/h
2022-02-04 15:03:19
383
1
原创 （二）微前端实战
1. 项目搭建首先启动两个 vue-cli 应用：vue-cli-child、vue-cli-parent我们需要父应用加载子应用，子应用需要暴露 3个方法：bootstrap、mount、unmount使用 single-spa 子应用需要下载 npm 包 single-spa-vue，3个方法可以通过这个包引入然后使用single-spa 仅仅是一个子应用生命周期的调度者single-spa 为应用定义了 boostrap, load, mount, unmount 四个生命周期回
2022-02-04 14:12:14
599
原创 （一）微前端
背景一个项目，所有的页面都在一个工程里，如果改一个bug，或者增加一些功能，需要整体一个项目全部打包编译，需要的时间很长，如果可以把每一个页面（模块）拆出来，修 bug 只需要打包编译自己模块的就好了，这样就会节省很多时间微前端的思想：把每一个模块都拆分成不同的子应用，最后组装起来 到 主应用中每一个子应用可以技术栈不同，一个子应用用 vue，一个子应用用react，一个子应用用 vue2，一个子应用用 Vue3，都是可以的我们会将一个个子应用打包成一个个的 lib，当路径切换时加载不
2022-02-04 10:44:51
259
原创 vue 自定义指令练习
1. v-copy一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上const copy = { bind (el, binding) { // 一些 自定义指令里面钩子函数需要互相交流的值 挂载在 el 上 el.$value = binding.value el.handle = () => { // 创建textarea标签 const textarea = document.createElement('textar
2021-12-03 23:54:41
807
原创 （一）vue 自定义指令
自定义指令分为 全局自定义指令和 局部自定义指令（一）全局自定义指令使用 vue-cli 脚手架main.jsimport Vue from 'vue'import App from './App'import router from './router'// src下创建 一个 red 指令的文件import redDirective from './directive/red.ts'Vue.config.productionTip = false// 注册自定义re.
2021-12-02 23:47:14
738
原创 计算接口加载时长
// 维护已有的打点事件名称 防止命名重复const eventNameList = [ 'oh1Click']class Duration { constructor () { this.eventMap = {} } // 打点设置开始时间 setStartTime (eventName) { // 判断该事件名称是否注册 if (!eventNameList.includes(eventName)) { throw new Error.
2021-11-25 19:33:48
179
原创 【性能监控】静态资源大小
1. 静态资源大小获取静态资源大小主要类型有：script、link、img、css、xmlhttprequest、beacon、fetch、other等，向外发送请求的资源的大小window.performance.getEntriesByType('resource')但是由于资源请求也不是一次性加载完的，就像懒加载的图片，所以我们还需要监听资源的动态载入 （PerformanceObserver）大致代码如下：setTimeout(() => { var reso
2021-11-17 00:46:52
1133
原创 【性能监控】FID （ First Input Delay）
（一）含义Input Delay：输入延时，记录用户和页面进行交互操作，所花费的时间。例如，从用户点击一个按钮，到浏览器正确处理这个按钮的行为，并反馈给用户所花费的时间。 通常情况下，Input Delay 是因为浏览器主线程在忙于执行其他操作，无暇处理用户的交互操作。FID（ First Input Delay）即记录用户和页面进行首次交互操作所花费的时间有的浏览器不支持，反正我是没有调试出来 悲伤……try { new PerformanceObserver(entryList
2021-11-16 21:34:39
632
原创 【性能监控】TTI （Time to interactive）
TTI（Time To Interactive），即从页面加载开始到页面处于完全可交互状态所花费的时间。页面处于完全可交互状态时，满足以下 3 个条件：页面已经显示有用内容。 页面上的可见元素关联的事件响应函数已经完成注册。 事件响应函数可以在事件发生后的 50ms 内开始执行。TTI 值越小，代表用户可以更早地操作页面，用户体验就更好。目前在PerformanceObserver中还没有办法获得TTI的接口,通过这个tti-polyfill这个插件知道 tti源码待研究...
2021-11-16 21:16:34
2667
原创 【性能监控】计算 FMP（First Meaningful Paint）
FMP（First Meaningful Paint），即首次绘制有意义内容的时间FMP 衡量了用户看到网页的主要内容的时间，是用户体验角度的一种重要的衡量指标前端业界现在比较认可的一个计算 FMP 的方式就是「认定页面在加载和渲染过程中最大布局变动之后的那个绘制时间即为当前页面的 FMP 」...
2021-11-16 21:05:03
1788
原创 【性能监控】时间计算
setTimeout(() => { const { connectEnd, connectStart, responseStart, requestStart, responseEnd, domLoading, loadEventEnd, domContentLoadedEventEnd, domContentLoadedEventStart, domInteractive, fetchStart, .
2021-11-16 18:24:14
394
原创 【性能监控】FCP (首次内容绘制时间)
含义FCP (First Contentful Paint) 为首次有内容渲染的时间点，在性能统计指标中，从用户开始访问 Web 页面的时间点到 FCP 的时间点这段时间可以被视为无内容时间，一般 FCP >= FP。计算setTimeout(() => { var fcp = performance.getEntriesByType('paint').filter((item) => { return item.name === 'first-conte.
2021-11-14 01:41:15
1819
原创 【性能监控】计算 页面首次绘制时间（FP）（白屏时间）
含义FP (First Paint) 指标通常会反映页面的白屏时间，而白屏时间会反映当前 Web 页面的网络加载性能情况，当加载性能非常良好的情况下，白屏的时间就会越短，用户等待内容的时间就会越短，流失的概率就会降低访问页面的模式1. 多页面之前切换 / 通过服务端路由来切换的方式2. SPA 单页路由由于SPA一直都是 有内容的，所以统计 fp 的意义不大如何计算FPperformance.getEntriesByType('paint')name 为 '..
2021-11-14 01:33:30
1970
原创 （三）抽离koa中 json schema校验中间件
文件目录schema/index.jsconst Ajv = require("ajv")const fs = require('fs')const ajv = new Ajv()// 读取Schema jsonfunction readSchema (url) { return new Promise((resolve, reject) => { const filePath = `./schema/schemaFile/${ url.split('?')[0].
2021-11-13 00:51:07
707
原创 （二）json schema 语法
JSON Schema关键词$schema：该关键字声明该模式是根据标准的特定草案编写的，主要用于版本控制，可省略。 $id：该关键字定义模式的URI，一般指向一个自主域名。方便后续引用，可省略。 title 和 description：该JSON Schema的注释和描述信息，不会向验证的数据调节约束。 type：该关键字会定义JSON数据的第一个约束，比如是JSON对象还是数组。 properties:需要约束的属性，值的类型是type的值类型关键字类型（type） 进一步规范.
2021-11-12 21:36:39
728
原创 （一）json schema 学习环境搭建
背景：在工作中，有时会遇到用户刷接口或者因为某些字段没有取到等原因，导致调用失败，这些参数不正确的请求会对后端服务器造成压力。对此，前端可以在 bff 层进行接口传入参数校验，如果传入的参数格式、类型不正确，直接打回，不需要走到调用后端接口这一步。所以，我们需要有一个对bff的接口传参进行校验的方案学习环境搭建：使用的安装包:1. AJV : 一个 JSON schema 校验的安装包 官网：Ajv JSON schema validatornpm install ajv2. ..
2021-11-12 20:49:55
986
原创 【异常监控】拦截xhr进行http异常上报
tracker.js (主要核心代码)// 重写 xhr 拦截异常然后上报const trackerXHR = () => { // 拿到 XMLHttpRequest let XMLHttpRequest = window.XMLHttpRequest // 保存原有的open方法 let XMLOriginOpen = XMLHttpRequest.prototype.open // 重写 open 方法 目的是为了保存 ethods, url 这个参数的值 用于埋点
2021-11-12 03:55:21
1912
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人