js
文章平均质量分 64
此专栏为js相关代码
耶瞳
这个作者很懒,什么都没留下…
展开
-
zrender TypeError: “x“ is not a constructor
然后经过大佬指点,这种开发环境没问题但生产环境报错的东西,一般是因为打包的时候被tree-shaking掉了。对了,这个项目已经上线了,也开源了,地址:http://stars.eyescode.top。debug+翻看源码后发现丢失调的是registerPainter方法。原创 2023-02-26 14:33:32 · 469 阅读 · 0 评论 -
网站特效代码(背景彩带以及点击烟花特效)
这两个特效代码都是我找了很久才找到的,但是我没有本地保存代码的习惯,而项目里也暂时不用,所以为了避免遗失,我还是贴到这里吧。原创 2022-09-05 11:20:19 · 1706 阅读 · 0 评论 -
md-editor-v3拓展工具栏失效的问题
组件只给了一个html结构,但没有提供css,这个需要自己去写,看到这里我就已经放弃了,这玩意儿浪费了我太多时间,还要我自己去写css,而且搞到现在,js功能都还有bug,但我已经懒得去看了,改用v-md-editor去了,v-md-editor内置emoji。因为最近在写一个项目,需要用到emoji表情,所以想着用md-editor-v3去拓展一下,官方其实也给了文档,但是恕我直言,官方文档没有一个完整的示例,全是片段,也没搜到关于拓展emoji的文章,导致我花了大量的时间解决bug。...原创 2022-07-29 16:59:01 · 1379 阅读 · 2 评论 -
node-sass安装报错解决方案
首先,如果是在搭项目,那千万不要用node-sass,直接安装scss就可以了:npm i scss --save-dev但如果是想运行别人的老项目,那就先打开package.json,找到项目依赖的node-sass的版本,然后看下面的node与node-sass版本对照表:NodeJSMinimum node-sass versionNode ModuleNode 144.14+83Node 134.13+79Node 124.12+72Nod原创 2021-12-21 16:46:42 · 900 阅读 · 0 评论 -
安装node-sass报错解决方案
在项目根目录创建.npmrc文件,复制下面代码到该文件。phantomjs_cdnurl=http://cnpmjs.org/downloadssass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry=https://registry.npm.taobao.org然后就可以成功安装了原创 2021-11-24 14:11:19 · 463 阅读 · 1 评论 -
node学习笔记——HTTP与URL模块
HTTP模块// 表示引入http模块var http = require('http');/* request 获取url传过来的信息 response 给浏览器响应信息*/http.createServer(function (request, response) { // 设置响应头 response.writeHead(200, { 'Content-Type': 'text/plain' }); // 表示给原创 2021-11-21 10:15:01 · 1042 阅读 · 0 评论 -
JSONP解决前端跨域问题
一:跨域问题广义的跨域:指一个域下的文档或脚本试图去请求另一个域下的资源。1.) 资源跳转: a链接、重定向、表单提交2.) 资源嵌入: <link>、<script>、<img>、 <frame>等dom标签, 还有样式中background:url()、 @font-face()等文件外链3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等但我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请原创 2021-10-24 18:51:55 · 4318 阅读 · 0 评论 -
手撕JavaScript call apply bind 函数
call ,apply ,bind ,是 js中非常重要的三个函数原型上的方法,其作用都是改变this的指向:call函数call函数语法:Fun.call(Obj[, para...]);即第一个参数是this的指向,之后的参数都会作为实参传给新函数。示例代码如下:function Fn(para1, para2) { console.log(this.clothes); this.clothes = "nihao"; console.log(this.clot原创 2021-10-21 13:24:59 · 280 阅读 · 0 评论 -
使用Webpack5打包各类资源
一:webpack五个核心概念Entry: 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。Output: 输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。Loader: Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)Plugins: 插件(Plugins)可以用于执行范围更广的任务。插件的范围包原创 2021-10-14 20:00:02 · 1391 阅读 · 1 评论 -
由forEach中return无法终止函数执行引出的探究
我在写脚本的时候遇到了bug,如下:无论是什么情况,函数都返回-1,我打印循环中的各个值才惊讶地发现,即使执行了return i,函数也没有停止,而是执行到最后return了-1,于是我写下了如下测试代码:这一波直接实锤了。。。。。。。然后去跟大佬分享这个发现:虽然大佬对我很无语,但这并没有让我的激动减退,然后我开始查forEach这个方法的详细情况:这才了解forEach的实现情况,于是可以用以下方法跳出循环:...原创 2021-10-07 17:42:12 · 424 阅读 · 0 评论 -
SyntaxError: Unexpected end of JSON input
天天写bug,没办法。。。。。。报错如下:根据提示可知错在JSON.parse,所以应该是这个函数处理数据时,数据格式不对导致报错,然后我就在JSON.parse执行之前打印了需要处理的值,发现果然不是json格式,但需要处理的值是通过JSON.stringify处理对象后返回的啊,怎么会错呢?然后我发现需要处理的值是在图片链接.png后面断开的,然后我请求接口,拿到原来的图片链接,发现图片链接被后端加了签名后在.png后多了很多字符串,经过测试才发现JSON.stringify处理问号时会出错。因为那个原创 2021-10-06 21:09:53 · 894 阅读 · 0 评论 -
[system]SyntaxError: Unexpected token u in JSON at position 0
又是被bug气死的一天,报错如下:注释了所有代码,挨个代码调试,终于找到了出错位置:查阅资料才发现JSON.parse()只能处理json格式,如果没有传入item,就是相当于在处理null值,因此可以在处理前先做判断:这样就没有问题了。...原创 2021-10-01 19:59:21 · 2289 阅读 · 0 评论 -
使用uview配置自定义导航栏(踩坑记录)
今天用uview做了一个自定义导航栏,发现无论怎样都不能跳转,也无法点击,我翻遍文档都没找到原因,最终在一个示例中发现,不只是要在自己的组件或页面配置list,也要在pages.json里配置一次,pages.json的list里必须要有pagePath和text。...原创 2021-08-16 16:23:27 · 5291 阅读 · 3 评论 -
Vue插槽的使用
在Vue中封装的一个组件如果内容是固定的话往往用处不大,比如需要10个搜索框,每个搜索框结构相似但又有不同, 如果每个搜索框都单独去封装一个组件往往又不合适,因此封装组件时需要抽取共性,保留不同。 最好的封装方法就是将共性抽取到组件中,将不同暴露为插槽,一旦预留了插槽,就可以让使用者根据自己需求决定插槽内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...原创 2021-05-30 10:41:59 · 153 阅读 · 0 评论 -
5.Vue的组件化(上)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-21 15:58:09 · 163 阅读 · 3 评论 -
Vue的 v-on 指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-14 14:59:38 · 168 阅读 · 1 评论 -
2.Vue的基本指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-09 15:47:00 · 148 阅读 · 1 评论 -
4.Vue的计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-14 12:51:45 · 127 阅读 · 2 评论 -
7.Vue的生命周期
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-26 00:09:10 · 309 阅读 · 2 评论 -
报错VM1548 WAService.js:2 TypeError: Cannot read property ‘commit‘ of undefined
今日份血泪教训,找了三个小时的bug。在js文件中引入vuex时使用了vuex的模块写法,如下图所示此时可以成功获取mapMutations('xWeather', ['setNavUserAddress', 'setNavUserWeather'])对象的两个函数,但是调用时报错VM1548 WAService.js:2 TypeError: Cannot read property 'commit' of undefined,我点开报错资源页时发现,在调用vuex时会使用this获取commit函数原创 2021-08-18 00:56:14 · 4065 阅读 · 0 评论 -
Vue的 v-if 与 v-show 指令
相关说明全在代码注释里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-05-20 14:16:27 · 172 阅读 · 1 评论 -
Vue指令中 v-bind 的5种用法
这里介绍了Vue语法中 v-bind 指令的5种用法。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-05-14 00:54:23 · 1929 阅读 · 2 评论 -
5.Vue的组件化(下)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-22 18:26:06 · 119 阅读 · 2 评论 -
Vue的 v-for 指令
相关说明全在代码注释里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <原创 2021-05-20 15:53:24 · 151 阅读 · 1 评论 -
3.Vue列表展示
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-05-09 15:53:57 · 292 阅读 · 1 评论 -
Vue的 v-model 指令
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-05-20 23:31:50 · 153 阅读 · 1 评论 -
1.Vue的基本使用
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../0.原创 2021-05-09 15:02:37 · 123 阅读 · 1 评论 -
uniCloud初体验
list.vue代码:<template> <view> <!-- 列表展示与删除 --> <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" collection="test"> <view v-if="error">{{error.message}}</view> <view v-else> <原创 2021-10-01 11:54:32 · 1236 阅读 · 0 评论 -
axios + json-server用法演示
json-server可以在前端模拟服务器返回json格式数据,使用时需要全局安装json-server包npm i -g json-server使用时需要开启服务,需要在终端找到自己的json文件并且监视: json-server --watch db.json然后就可以开始写代码了:基础使用:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l原创 2021-08-17 16:59:31 · 389 阅读 · 0 评论 -
Promise的一些使用
1). 封装AJAX GET请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-08-17 15:25:46 · 98 阅读 · 0 评论 -
js字符串常用属性与方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do原创 2021-06-13 15:30:19 · 211 阅读 · 0 评论 -
js拖放事件详解及实战
传统的拖放式根据鼠标按下松开事件完成的 HTML5对于拖放只需要在元素上面设置draggable="true"属性,移动端不支持 <div draggable="true"></div> 拖放事件: dragstart 当一个元素开始被拖拽的时候触发 drag 这个事件在拖拽源触发 dragend 拖拽源在拖拽操作结束将得到dragend事件对象,不管操作成功与否 dragenter...原创 2021-06-12 11:37:01 · 1712 阅读 · 1 评论 -
地理位置服务——百度地图API
先去百度地图开放平台获取密钥:原创 2021-06-11 21:13:59 · 765 阅读 · 0 评论 -
地理位置服务——navigator.geolocation
使用navigator.geolocation对象来获取位置信息,geolocation对象包含一系列相关位置操作方法 需要选择IE9及以上的浏览器 一般流程: 1.用户从浏览器打开位置感应应用程序 2.程序执行,geolocation对象获取位置信息,此时浏览器要求用户授权同意才可以获得信息 3.浏览器内部通过数据源获取信息 4.浏览器将获取的信息发送给受信任的外部定位服务,返回位置信息到geolocation应用程序...原创 2021-06-11 20:44:59 · 8580 阅读 · 2 评论 -
File Reader文件操作
文件File对象 该对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用File或Blob对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个<input/>元素上选择文件后返回的FileList对象,也可以是来自拖拽操作生成的DataTransfer对象, 还可以是来自一个HTMLCanvasElement上执行 mozGetAsFile()方法后返回的结果; Blob对象表示一个不可变、原始数据的类文件对...原创 2021-06-11 18:23:56 · 609 阅读 · 0 评论 -
Web Stotage——本地储存详解及案例
本地存储:客户端数据的存储 本地储存应用有用户临时登录信息,用户页面配置,当前临时信息等等 一些东西用户希望能存起来,以便下次访问继续使用,但服务器没必要浪费空间去存那些数据,就可以使用本地储存 本地存储的实现方式: cookie:一般最多储存4kB数据,每个HTTP请求都会被传送回服务器,使用上安全策略浏览器行为跟踪,这方法兼容性好 Web Stotage:大约5MB,类似于key-value的储存方式 Web SQL Dat...原创 2021-06-11 11:38:05 · 600 阅读 · 1 评论 -
ES6模块化编程
ES6依赖模块需要编译打包处理语法: 导出模块: export 引入模块: import实现(浏览器端): 使用Babel将ES6编译为ES5代码 使用Browserify编译打包js先预览一下文件目录:因为在实现时需要使用npm下载一些包,所以先初始化环境:npm init --yes手动创建src文件放自己写的代码,module文件夹下的三个文件对应ES6三种暴露方式,main为根模块,也是打包入口。module1.js:// 暴露模块 分别暴露原创 2021-05-29 21:23:59 · 281 阅读 · 0 评论 -
JS模块化之AMD规范
AMD概述AMD说明: AMD:Asynchronous Module Definition(异步模块定义) 专门用于浏览器端,模块的加载是异步的基本语法: 定义暴露模块: 1. 没有依赖的模块: define(function(){ return 模块 }) 2. 定义有依赖的模块: define(['module1','module2'],f原创 2021-05-29 17:26:11 · 1531 阅读 · 4 评论 -
CommonJS基于浏览器端运用
我之前还有一篇CommonJS基于node环境运用,大家有兴趣可以去看看,放链接:CommonJS基于服务端(node运用)先放文件目录:dist文件夹放打包生成的代码,src文件夹放自己写的代码先初始化环境,方便下包:npm init之所以不用 npm init --yes是因为我根目录叫browserify,后续下browserify包时不允许同名,当然也可以npm init --yes后再package.json手动更改name值。src文件目录:module1.js:// 暴露一个原创 2021-05-29 12:00:59 · 757 阅读 · 0 评论 -
CommonJS基于服务器端(node)运用
node是完全遵循CommonJS规范的CommonJS说明: 每个文件都可以当作一个模块 在服务端:模块的加载是运行时同步加载的 在浏览器端:模块需要提前编译打包处理基本语法: 暴露模块: module.exports = value exports.xxx = value 引入模块:require(xxx) (其中第三方模块时xxx为模块名,自定义模块时为模块文件路径)实现: 服务器端实现:Node.js 浏览原创 2021-05-28 20:29:52 · 411 阅读 · 5 评论