- 博客(58)
- 收藏
- 关注
RSS订阅
原创 写了多年的javascript在看 变量类型和类型检查突然明白了什么？
一个变量引发的提交数据bugA同学定义了一个提交对象 submitData ={name:‘xx’,sex:‘x’}, 同时这个对象要展示一个页面 给用户确认姓名：xx ，性别：x ，然后用户点击确认就提交服务端，同时限制了只能是两个属性，一切很美好，测试通过，这天A同学有事休息了。工作交接给B同学，恰好来了一个需求，需要在确认页面，添加一个展示字段，年龄，但是这个年龄不用提交，B同学一想，好简单，按照惯例，增加代码尽量不修改原来的逻辑，这个时候B同学定义了一个变量 showData = submi
2021-02-05 18:17:02
144
原创 如何在一个万年没有动过的函数添加新的逻辑--js函数扩展
背景对于开发而言，不管是前端还是后端，不可能永远是在新开项目上前行，与之相反更多的是在维护和迭代中 匍匐前进。那么在迭代和维护的路上，多少人来了又去，今天突然接到一个需求需要在一个庞大的项目页面加载完成事件window.onload 里面添加一个新的逻辑的代码，这个时候，通过搜索script标签一看几个百标签，几千行代码在页面运行，每个引入的js代码都有可能包含了onload的绑定事件，每段代码的逻辑错综复杂，已经找不到文档，找不到当年的人，这个时候如何加入一个新的逻辑而不影响其他的。并且保证可以正常运
2020-08-04 16:19:23
456
2
原创 弹性display: flex布局自看笔记
块级元素默认的display 属性都是block 状态，而当给块级元素display 属性加上flex值，flex 布局就被创建比如div 直接设置 display:flex，这时候当div被称为 flex 容器，里面的子项元素称之为 flex 子项
2020-07-03 17:44:34
1105
原创 css3从入门到熟练运用（一）：css 核心功能
css3从入门到熟练运用（一）,介绍css的基础和运用到的核心底层css盒子模型、浮动定位、绝对定位的初识
2020-05-31 20:47:53
653
原创 ESLint 的一些理解
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。
2023-02-02 16:19:38
559
原创 ts 移动端h5 拍照预览
通过typescript实现一个简单版本 移动端 拍照 和预览功能1. 需求列表点击拍照唤起手机后置摄像头拍照完成在页面预览照片2. 技术实现2.1 布局和唤起后置摄像头唤起摄像头采用 input 里面 type=‘file’ 类型，为了调用后置摄像头，需要一些组合属性：这段是整个拍照端核心<input type="file" class="take-picture" id="take-event" accept="image/*,camera" capture="camera"
2021-04-21 15:39:58
500
2
原创 JavaScript 之this的使用场景和理解
JavaScript 的 this 总是指向一个对象，而具体指向哪个对象是在 运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。而在 es6 中 箭头函数 中得到来改善，在定义的时候确定，多数情况是一个比较灵活，还是需要依据执行的环境推理判断从四个大的方向去推理this指向的具体对象作为对象的方法调用作为普通函数调用作为构造函数调用函数的 call 或 apply 方法调用1. 作为对象的方法调用当函数作为对象的方法被调用时，this 指向该对象let obj={ a:
2021-04-15 11:37:18
123
原创 有趣的setTimeout--节流和防抖的实现
1. setTimeoutsetTimeout() 是一个默认是全局方法，用来设置一个定时器，该方法在定时器到期后执行一个函数或指定的一段代码语法：let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...)参数说明：func|code想要执行的函数或代码字符串。 一般传入的都是函数。由于某些历史原因，支持传入代码字符串，但是不建议这样做。delay执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
2021-04-13 17:22:41
1131
1
原创 proxy 基础-实现响应性和双向数据绑定
proxy 基础用法Proxy 是一个包含另一个对象或函数并允许你对其进行拦截的对象。可以理解为‘代理’；使用proxy，就可以不再操作源数据而实现效果；语法：new Proxy(target,handle)target：监听的目标对象或者方法handle： 参数也是一个对象，用来定制拦截行为，即需要对源对象操作对操作一个完整基础写法：const target={name:'王麻子'}; const handle={ get:function(target,key,receiver){
2021-03-30 10:26:18
157
原创 ES6 扩展运算符 三点 ... rest 知识点记录和运用
1. 扩展运算符含义：（狭义）将一个数组转化为用逗号隔开的参数序列，用三个点（...）表示翻译成代码：// 直接输出数组console.log([1,2]); // [1,2]// 输出参数序列console.log(...[1,2]); // 1,2再看来一个例子 … 后面用字符串和对象看看效果// 字符串console.log(...'sfsaf'); // s f s a f// 对象console.log(...{a:'s'}); // Uncaught TypeE
2021-03-24 15:35:02
451
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ 升级 webpack 5.0 以后遇到
错误场景升级 webpack 以后 运行 npm run devError: Cannot find module 'webpack-cli/bin/config-yargs'查看 安装包版本"devDependencies": { "webpack": "^5.2.0", "webpack-cli": "^4.1.0", "webpack-dev-server": "^3.11.0"}如果是这样的版本，那么问题是这样 的If you upgrade webpack
2021-03-08 16:47:08
152
原创 npm 一些常用操作记录
初始化npm init可以自动生成package.json 文件如果存在 package.json 文件 则可以自动安装相关的包npm i -D下载安装到开发环境使用，会自动分配到package.json 的 devDependencies 字段里面如npm i -D webpack安装成功之后，package.json 的 devDependencies 字段自动记录"devDependencies": { "webpack": "^5.24.3" }npm i
2021-03-04 16:24:10
138
2
原创 Syntax Error: TypeError: this.getOptions is not a function
场景重现通过vue-cli搭建一个vue3.0项目，在使用less 的时候报错，依据官方的安装：npm install -D less-loader less安装的都是最新的 其中less-loader 是今天最新的 8.0.0 版本。这时候运行npm run serve提下如下错误通常提示Syntax Error: TypeError: this.getOptions is not a function提示语法错误都是 版本问题解决1，通过降级版本号是最快捷的方法卸载 les
2021-02-25 10:34:53
8639
5
原创 npm 包发布与升级--拥有自己的npm包
npm 对于大多数前端开发来说早已经不在陌生，是否也想过拥有一个自己的npm 包，提供给自己或者别人使用；npm 本质和理解NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准npm 包的发布和管理，可以简单理解为上传代码和下载并使用它们。这样可以快速的发布代码哈哈前期准备1、需要有一个账户，毕竟是要传到别人的服务器上，注册地址：https://www.npmjs.com/记住注册账户的名字和密码，npm
2021-02-10 15:09:41
624
原创 vue3.0+cli 4 .0^ 单页面配置系列（三）-- 路由 vue-router4 基础使用
前言vue 升级到3.0以后，vue-router 也发布了配套到升级 4.0+，使用路由的逻辑还是一样的只是一些方法改变了而已；在vue开发单页面中，就算没有路由也一样可以正常使用组件完成工作，但是通常还是加入路由进行管理；路由执行：组件（映射到）== > 路由配置 == > 渲染页面项目目录分配一般在使用路由的时会按照，路由执行功能，建立不同文件夹方便管理，在src目录下面；...省略+stc +routes index.js // 存放路由配置 +vi
2020-12-31 17:04:45
1138
原创 vue3.0+cli 4 .0^ 单页面配置系列（二）--vue.config.js 基础配置
vue.config.js 是一个可选的配置文件，在安装cli的时候并不会自动生产，需要使用的时候自己手动编写，名字不能错，放在更目录下面，它会被 @vue/cli-service 自动加载，执行；详细的介绍见官网，初略使用看下面由于使用的官网cli很多都帮我们处理好了。以后在写自定义脚手架打包自动加入公用样式css在环境变量一节介绍分离不同的配置文件，自动加入公用样式比如定义变量和公用样式放到一个less文件comm.less， 这个文件生产和开发环境都需要，就配置在base.config.js
2020-12-30 13:56:07
384
原创 vue3.0+cli 4 .0^ 单页面配置系列（一）--环境变量
依据vue-cli 搭建一个 vue3.0 的项目通过这个命令// vue create 项目名称 vue create muzi然后通过 npm 命令,把项目启动npm run serve 查看项目启动成功，不成功找找原因。npm run serve 是如何启动要完全解释这个问题，需要另外一片文章，这里主要围绕vue3.0环境变量。那么在vue这个项目中，发生了什么事情？打开 项目的 package.json：找到如下代码"scripts": { "serve": "vue
2020-12-18 18:12:05
264
转载 vue 过滤器实现和使用场景举例
在生活中把一些含有我们需要的东西但是比较粗旷通过一定的装置过滤出更接近需要的产品，这个装置大概就是过滤器。比如：过滤沙子的纱网，经过纱网过滤可以得出精细的沙子；程序编写通常也会有很多类似的骚操作，在vue中提供自定义过滤器，得到更需要的精准数据，来了解一下需求：展示一个产品的价格price。解析需求：产品的价格可能包含小数点，可能该产品还未定义用‘–’来表示开发需求前端从后端获取一个价格数据字段price，这个字段可能包含的结果是null，‘ ’，或者是undefined ，这个时
2020-11-09 16:41:24
1194
原创 Mac系统下初始化MySQL密码--自用
第一步：关闭mysqlsudo /usr/local/mysql/support-files/mysql.server stop第二步：进入终端设置cd /usr/local/mysql/bin/输入（sudo su）回车以获取管理员权限sudo su输入（./mysqld_safe --skip-grant-tables &）回车以禁止mysql验证功能，mysql会自动重启./mysqld_safe --skip-grant-tables &输入命令（./mysq
2020-08-11 10:48:32
145
原创 mac 下源码安装 mysql-8.0.20以及初始化MySQL密码
下载下载mysql-8.0.20-macos10.15-x86_64.tar.gz 可以从mysql官网下载https://dev.mysql.com/downloads/mysql/解压tar zxvf mysql-8.0.20-macos10.15-x86_64.tar.gz移动解压后的二进制包到安装目录sudo mv mysql-8.0.20-macos10.15-x86_64 /usr/local/mysql在 /usr/local/mysql 目录新建 data目录文件cd /
2020-08-11 10:24:22
612
原创 ord(readfn(1)) TypeError: ord() expected a character, but string of length 0 found --记录
背景从git clone 下来一个 Django 1.1项目，而本地安装是 Django 3.3 而且 使用了whoosh 出现如下问题： File "/usr/local/lib/python3.7/site-packages/whoosh/index.py", line 626, in check_size sz = stream.read_varint() File "/usr/local/lib/python3.7/site-packages/whoosh/filedb/struct
2020-08-10 10:58:38
7283
原创 ImportError: cannot import name ‘six‘ from ‘django.utils‘ -问题记录
背景在运行django3.0 的时候报错，代码中包含了django1.11的代码出现如下错误：ImportError: cannot import name 'six' from 'django.utils'原因django 3.x 系列删除了six. 版本升级问题解决安装 sixpip3 install six进入安装包目录cd /usr/local/lib/python3.7/site-packages将six.py拷贝进django/utils/目录下cp six.py
2020-08-07 17:27:11
6667
原创 django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 -问题记录
背景在使用django3.0 ＋pymysql 驱动的时候报错django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.13 or newer is required; you have 0.9.2原因django3.0 新版本不想在支持pymysql 驱动大力推行 mysqlclient 作为驱动。但是我在mysqlclient是总是失败，没办法还是安装pymysql ，但是有有问题，只能参照网上的方法修改源码，很纠结；解决方法
2020-08-07 17:09:22
231
原创 TypeError: __init__() missing 1 required positional argument: ‘on_delete‘ 没有留意的问题
背景Django3.0 中创建Model时报以下错误TypeError: init() missing 1 required positional argument: ‘on_delete’原因django 升级到2.0之后,表与表之间关联的时候,必须要写on_delete参数,否则会报异常解决办法找到有外键关联的地方 ForeignKey 加入on_delete：如原来的：models.ForeignKey(Contract)修改为models.ForeignKey(Contra
2020-08-07 16:41:58
356
原创 Specifying a namespace in include() without providing an app_name is not supported 记录
背景运行 Django3.0 的时候 报错，具体表现如下：Specifying a namespace in include() without providing an app_name is not supported. Set the app_name attribute in the included module,or pass a 2-tuple containing the list of patterns and app_name instead.原因依据包错文件 conf.
2020-08-07 16:30:04
551
原创 ImportError: cannot import name ‘render_to_response‘ 解决方法
背景在开发 Django 项目，的时候 原来的版本是1.xx版本，现在直接用 diango3.0 出现的问题：在直接运行爆出错误：ImportError: cannot import name 'render_to_response' from 'django.shortcuts'原因Django 3.0 已经将 render_to_response 移除了，但是项目中还在使用解决办法用render 代替 render_to_response用途：都是渲染模版用的不同点：render 方
2020-08-07 16:11:21
6290
原创 ‘staticfiles‘ is not a registered tag library --django3.0
背景在运行 升级 django1.11 到 django3.0 到时候遇到如下场景问题：django.template.exceptions.TemplateSyntaxError: 'staticfiles' is not a registered tag library. Must be one of:admin_listadmin_modifyadmin_urlsblog_tagscachecomment_tagshighlighthumanizei18nl10nlogmo
2020-08-07 15:46:48
648
原创 JavaScript 前端代码优化技巧 一
前言代码优化永远是开发的伴随者，不但影响者性能还影响着代码的可读性，毕竟事件长了。自己也不认识了。优化之后或许还可以一读。看书和网络中查找了一些感觉很有用，逐一记录合并重复的条件片段场景和后端开发人员调试某个业务的时候，通常一个字段包含了几个不同的值，比如 checkCode 为0 为1而 前端需要作出相关判断并调用相关方法：let getData = function (checkCode){ let msg= '正在开业。。'; if (checkCode === '0') {
2020-08-06 20:41:33
172
原创 git 常用命令操作记录
前言以github的git管理为例子的操作记录命令操作列表获取远程代码到本地git clone https://github.com/xxx/bloga.git查看本地分支git branch查看远程分支git branch -r查看远程 和本地分支git branch -a创建分支 xxgit branch xx删除分支git branch -d xx强制删除分支git branch -D xx切换分支 到xxgit checkout xx创建并切换到
2020-08-06 17:57:36
180
原创 nginx 基础配置 前端开发配置 代理配置--写个自己看
概念nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；在高连接并发的情况下，Nginx是Apache服务器不错的替代品。对于前后端分离来说更是比较优越到选择，不需要去知道服务器端放在哪里，也不用去关心还不用担心跨域舒服代理代理有点像中介，我想去买房，但是房源在哪里？找起来很费事其中还有各种手续要办。这个时候我去找中介，帮我去完成找房源办理各种手续，我只需要等待结果，这个就是代理到流程。在nginx 中代理流程大概也是这样，
2020-07-14 16:33:42
672
原创 浅谈JavaScript 跨域的几种实现方式
关于跨域用的最多的场景应该就是面试了？同意不何时需要跨域通常情况在项目开发中都是在同一个网站进行，大家都是自己人，相互信任，相互帮助，想要什么自己拿，但是社会是一个小群体和大群体组成，自己人和其他的群体的自己人组成的，用时候我们需要为其他人（其他网站其他源）提供帮助，同样有有时候也需要他人帮助（获取其他网站数据），于是就产生了外交（跨域），当然这种情况不像自己人了。想拿什么就拿什么；需要一些方法或者谈判技巧才能获取别人家的数据，协商一致跨域的四种方法JSONPJsonp(JSON with Pa
2020-07-13 17:46:23
201
原创 ajax核心技术 XMLHttpRequest 对象 性能安全 探讨和理解
内容提要XMLHttpRequest （XHR）对象是一个基于浏览器层面的API，可以通过JavaScript 实 现 数 据 传 输。 为后来的AJAX提供了革命性的技术支持；主要 用于与服务器交互XMLHttpRequest 文章中统一用简称（XHR）代替主要讨论XHR 怎么使用？通过js 怎么实现数据传输？既然是基于浏览器的API，浏览器为我们做了那些事情？传输过程的安全机制是怎么产生的？跨域（CORS）是怎么产生的？如何访问跨域？XHR 用法XHR 对象的使用和普通的对象一毛
2020-07-13 11:28:53
484
原创 v-model 表单输入绑定 自我学习教程
前言和概念在表单输入或者选择元素上例如input，select，textarea 添加上，看上去html 标签属性的东西 v-model，在vue中叫指令，就构成了 表单的双向数据绑定，即在输入的时候js同时也获取了到数据，改变js数据的时候input的内容也会随着改变。这个就是v-model 成为vue中比较核心的特点之一vue文档解释其实这是一个语法糖，相当于包装了一个写起来不太舒服语法，后面试着解释文章说明本章主要记录v-model 基础使用v-model 语法糖的解释v-model
2020-07-06 16:15:45
413
原创 一个被遗忘对象(object)的方法defineProperty
语法 Object.defineProperty(obj, prop, descriptor)obj要操作的对象名称 （必传）prop要定义或者要修改的属性（必传）descriptor要定义或修改的属性描述符 包含如下：
2020-07-01 15:10:23
278
原创 webpack 之vue 初级打包2 从零开始
接上一篇《webpack 之vue 初级打包1 》到目前位置vue第一个页面已经可以正常运行了，其中还有一些地方可以更加方便快捷。期待更加智能更加快速。依据webpack给出到原则一切皆模块，上文我们只是针对js做了打包，现在期望html也打包，图片、css 也做打包模块处理。优化内容动态添引入script 加载js，并且指定到头部或者底部优化缓存问题加入hash 值动态生成html入口文件，一个或者N个上文中在编译打包好js、vue之后，还需要手动在html里面加入js到引入地址：<
2020-06-30 11:07:00
230
原创 JavaScript 我理解的闭包：闭包之模块
了解模块对基本开发概念，加载器对原理，深刻理解闭包对作用模块模式的两个必要条件一、必须有一个外部封装的函数，该函数必须被调用一次（每次都可以创建一个新的模块）二、封闭函数至少返回一个函数。这样才能形成闭包，实现封装私有属性
2020-06-24 15:39:22
272
原创 JavaScript 我理解的闭包：概念和基础使用
能够有权限访问另一个函数作用域的变量的函数，就可以称之为闭包函数在当前词法环境之外执行创建闭包就是在一个函数中创建另一个函数
2020-06-23 00:02:25
158
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人