前端
文章平均质量分 80
Sandy_Star
day day up
展开
-
函数值传递问题
函数值传递在《JavaScript高级程序设计》第三版中有这么一句话 :ECMAScript中所有函数的参数都是按值传递的。在js中,函数传递参数都是按值传递的当在传递参数时,形参是一个局部变量,和实参互不影响。当参数是一个引用数据类型时,形参复制的是实参的一份引用,所以当其改变时会影响外部实参,但并不意味着,是按引用传递的。(1)例子1当传入的参数是值类型的时候var a = 3;function fn(b){ console.log(b); //3 b=2;原创 2022-05-27 22:06:34 · 507 阅读 · 0 评论 -
Vue、原生JS、jQuery在开发上有什么感受
面试的时候有被问答框架这方面的问题。问使用Vue开发和使用原生JS或jQuery开发有什么区别?或者说体验感是怎样的?首先来谈谈这三个是个啥?JavaScript:是运行在浏览器的脚本语言,主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解析执行的。jQuery:是JavaScript中的一个函数库,其实就是对原生js做了一层封装,使获取dom的操作更加简单方便,但是数据和视图层没有分开,本质上还是 要操作DOM实现逻辑。vue:是一套构建用户界面的渐进式.原创 2022-04-25 11:03:41 · 435 阅读 · 0 评论 -
08canvas画图
08 Fun with HTML5 Canvas打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 8 篇。完整代码已经放到github上了,欢迎访问!实现效果使用canvas实现一个可以在浏览器中画画的效果。画笔粗细渐变,颜色渐变原创 2022-03-27 11:47:23 · 829 阅读 · 0 评论 -
07 Js操作数组2
07 Array Cardio Day2操作数组打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 7 篇。完整代码已经放到github上了,欢迎访问!操作功能对于people数组:判断是否有超过19岁的?判断是否有所有人都超原创 2022-03-09 21:23:53 · 177 阅读 · 0 评论 -
06Js实现实时搜索框
06 Type Ahead 实时搜索框打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 6 篇。完整代码已经放到github上了,欢迎访问!实现效果在搜索框中输入一些字母,匹配到城市(city)和州(state),并展示含有这些字原创 2022-03-09 21:23:25 · 834 阅读 · 0 评论 -
05JS实现弹性相册
05 Flex Panel Gallery打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 5 篇。完整代码已经放到github上了,欢迎访问!实现效果要实现一个这样的弹性相册。当鼠标点击相片时,相片变宽并且压缩其他图片,有文字浮原创 2022-03-09 21:22:05 · 420 阅读 · 0 评论 -
04JS操作数组1
day04 Array Cardio day1 数组操作打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 4 篇。完整代码已经放到github上了,欢迎访问!实现效果这个小例子没有什么效果,主要是熟悉Array的几个基本方法。文档原创 2022-03-09 21:21:27 · 185 阅读 · 0 评论 -
03 CSS Variable
03 JS_CSS Variable 打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 3 篇。完整代码已经放到github上了,欢迎访问!实现效果要实现拖动进度条改变相应的边框和模糊程度,以及可以选择相应的颜色。同时标题中的JS原创 2022-03-09 21:20:29 · 184 阅读 · 0 评论 -
02 JS实现时钟效果
02 JavaScript Clock 打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 2 篇。完整代码已经放到github上了,欢迎访问!实现效果实现一个像日常时钟一样的旋转效果,获取当前的时间,显示当前的效果。实现要点原创 2022-03-09 21:19:52 · 1018 阅读 · 0 评论 -
01 JavaScript_Drum Kit
01 JavaScript Drum Kit 打卡指南作者:@sandystar简介:JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西,不借助框架和库,也不使用编译器和引用。现在你看到的是这系列指南的第 1 篇。完整代码已经放到github上了,欢迎访问!实现效果模拟打击鼓的页面,在键盘上按下ASDFGHJKL这几个键时,页面上对应的字原创 2022-03-09 21:18:57 · 481 阅读 · 0 评论 -
vue+node.js+mysql项目搭建初体验(接口)
用vue搭建前端页面、用node开发后端接口、数据库用mysql。这里只是简单的讲解搭建的逻辑是怎么样的,具体的一些应用还待挖掘。学了node一直没有真正搞懂它是个什么玩意,总是说node就可以全栈了,简单一点理解就是前端开发者可以使用nodejs开发后端接口,然后自己实现全栈??应该是这样的吧目录结构end为后端接口文件夹(node)front为前端的文件夹(vue)一、mysql数据库数据库这里使用的是mysql。最好下一个Navicat,可视化比较好。先创建一个数据库,然.原创 2021-11-05 09:14:11 · 7519 阅读 · 6 评论 -
JS基础_DOM
DOM(文档对象类型)JavaScript 能够改变页面中的所有 HTML 元素、HTML属性、CSS样式、对页面的所有事件作出反应。查找HTML元素以下是通过document对象调用,来获取元素节点通过id查找:var x = document.getElementById("thisid");//获取元素内部的HTML内容alert(thisid.innerHTML);通过标签名查找:getElementByTagName():可以通过标签名获取一组元素节点对象,这个原创 2021-08-29 10:14:40 · 110 阅读 · 0 评论 -
JS基础_BOM
BOM(浏览器对象模型)window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象。navigator:代表当前浏览器的信息,通过对象可以来识别不同的浏览器。location:代表当前浏览器的地址栏信息,通过location可以获取地址栏信息,或者操作浏览器跳转页面。history:代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录。由于隐私原因,该对象不能获取具体的历史记录,只能操作浏览器向前后向后翻页,而且只能在当次访问时有效。screen:代表用户的屏幕信息,通过原创 2021-08-29 10:14:17 · 74 阅读 · 0 评论 -
eslint代码检查工具
what?什么是eslint?Eslint是一个 ECMAScript/JavaScript代码检查工具,使用node.js编写。可以使用eslint默认规则,也可以创建自己的检测规则。why?为什么要进行代码质量检查?避免低级bug:一些常见的代码问题,如果在编译或运行前不能及时发现,代码中的语法问题会直接导致编译或运行失败,影响开发效率和代码质量。统一代码习惯:每个人都有一些代码规范或习惯,为了便于后期的维护和阅读。保证线上代码的质量:在版本管理中,我们需要在提交或发布之前自动执行一些代码检原创 2021-08-29 10:12:19 · 3785 阅读 · 0 评论 -
webpack使用
一、js文件的打包1、现在的js文件中使用了模块化的方式进行开发,他们不可以直接使用因为如果直接在index.html中引入这两个js文件,浏览器并不识别其中的模块化代码另外,在真实项目中有很多这样的js文件,这样一个个引用的话在后期不方便对他们进行管理2、使用webpack工具,对多个js文件进行打包webpack就是一个大包工具,他支持我们代码中写模块化,可以对模块化的代码进行处理另外,如果在处理完所有模块之间的关系后,将多个js打包到一个js文件中,引入时就变得很方便了在控制台输原创 2021-08-21 16:03:38 · 664 阅读 · 1 评论 -
webpack简介
webpack简介1.1webpack是什么webpack是一种前端资源构建工具,一个静态模块打包器(module bundler)。在webpack看来,前端所有资源文件(js/json/css/img/less/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。1.2 webpack五个核心概念1.2.1 Enter入口(Enter)指示webpack以哪个文件为入口起点开始打包,分析构建内部依赖图1.2.2 Output输出(原创 2021-08-21 16:02:52 · 77 阅读 · 0 评论 -
jQuery了解与使用
为什么要学习jQuery在使用js开发的过程中,有很多的缺点:查找元素的方法单一,麻烦遍历数组麻烦,通常要嵌套一大堆的for循环有兼容性问题想要实现简单的动画效果,麻烦代码冗余什么是jQueryjQuery就是一个js库,使用jQuery会比使用JavaScript更简单。官网: http://jquery.com/jQuery的版本大版本分类:1.x版本:能兼容IE678浏览器,相对于其他版本文件比较大,最终版本1.12.42.x版本:不能兼容IE678浏览器,最终版本原创 2021-08-21 16:01:29 · 291 阅读 · 0 评论 -
MongoDB and Node.js
文章目录0.MongoDB数据库的基本概念1.关系型数据库和非关系型数据库MongoDB简说2.安装3.启动和关闭数据库启动:停止:4.连接和退出数据库连接:退出:5.基本命令1.查看显示所有数据库2.查看当前操作的数据库3.切换到指定的数据库(如果没有会新建)4.插入数据6.在Node中如何操作MongoDB数据1.使用官方的mongodb包来操作2.使用第三方mongoose来操作MongoDB数据库安装:使用:3.官方指南(1)设计Schema 发布model(2)增加数据(3)查询(4)删除数据(5原创 2021-07-20 09:35:41 · 137 阅读 · 0 评论 -
01_node.js初识
一、为什么要学习node?为了帮助打开服务端只有了解服务端才能更好的配合服务端开发人员进行协同开发二、node.js是什么node不是一门语言、不是库、不是框架。是js运行时的环境。node可以解析和执行js代码(以前只有浏览器可以解析执行js代码)。node使用事件驱动和非阻塞IO模型(异步)使其轻量高效。node有一个包生态系统npm,绝大多数js相关的包都存放在了npm上,这样做的目的是为了让开发人员更方便的去下载使用。Node.js中的JavaScript没有BOM、DOM原创 2021-07-15 15:54:27 · 71 阅读 · 0 评论 -
three.js 着色器(08)
一、什么是着色器(shader)从3D图形学历史的角度来讲,他的确曾经扮演过和它名字一样的角色,即二进制码。在进一步理解,如果将three.js比作粗语言的话,那么着色器就是汇编语言,显然c语言的实现最终都是由汇编语言完成的。所以着色器有比three,js更强大的功能,虽然three.js的功能已经很强大了。二、着色器的分类无论是在OpenGL、openes,还是dx中,着色器都分为 顶点着色器、 片元着色器顶点着色器 :就是对顶点进行操作。例如改变顶点的位置和顶点的大小。片元着色原创 2021-03-09 15:50:07 · 324 阅读 · 1 评论 -
three.js 光的介绍(05)
前言:光的介绍文章目录一、光源1.1 光源基类1.1.1 光源的种类1.2 环境光1.2.1 环境光对物体的影响1.3 点光源1.4 聚光灯1.5 方向光(平行光)1.6 多种光源的存在1.6.1 环境光和方向光1.7 材质与光源的关系1.7.1 不带任何光源的物体1.7.2 兰伯特材质和光源1.7.3 一个栗子----关于红绿光一、光源3d渲染效果的真实性,使用光源是必不可少的技巧。1.1 光源基类在Three.js中,光源用Light表示,它是所有光源的基类。构造函数:THREE.Li.原创 2021-02-19 10:19:33 · 619 阅读 · 0 评论 -
three.js 相机的详细介绍(04)
前言:相机的工作原理一、认识相机在Three.js中相机的表示是THREE.Camera,它是相机的抽象类,它的子类有两种相机,分别是正投影相机和透视投影相机。1.1 正投影相机正投影相机也叫正交投影相机特点:远近高低比例都相同相机的位置:将相机的中心点定义为相机的位置。构造函数:OrthographicCamera(left,right,top,bottom,near,far)left:左平面距离相机中心点的垂直距离。right:右平面距离相机中心点的垂直距离。top:顶平面.原创 2021-02-10 12:51:15 · 1023 阅读 · 0 评论 -
three.js 运动吧物体(03)
文章目录一、物体运动的两种方法1.1 改变相机的位置1.2 改变物体的位置二、渲染循环---运动的关键三、评估性能---Stats3.1 性能监视器Stats3.2 性能监视器Stats的使用四、一个栗子一、物体运动的两种方法1.1 改变相机的位置让相机在坐标系里面移动,物体不动。1.2 改变物体的位置物体在坐标系里面移动,摄像机不动。二、渲染循环—运动的关键物体运动的关键就是要渲染物体运动的每一个过程,让它显示给观众。渲染的时候,调用的是渲染器的render()函数renderer.ren原创 2021-02-09 21:07:12 · 1302 阅读 · 1 评论 -
three.js 点、线、坐标轴(02)
文章目录一、3D世界的组成二、在Threejs中定义一个点2.1定义一个点2.2 一个栗子----画一条直线三、几何体THREE.Geometry()四、线条的材质THREE.LineBasicMaterial4.1插值五、关于坐标系5.1 世界坐标和本地坐标5.2 AxesHelper三维坐标系一、3D世界的组成在计算机中,3d是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面,无数三角形面就能够组成各种形状的物体。网格模型:也叫mesh模型,给物体贴上皮肤也叫纹理,那原创 2021-02-08 11:19:07 · 3095 阅读 · 0 评论 -
Three.js 场景、相机、渲染(01)
前言:本篇主要是three.js的一个介绍,了解WebGL与three.js的关系。以及three.js的四个重要的组建。文章目录一、什么是WebGL?1.1浏览器为什么能绘制3D?1.2webgl能做什么1.3 WebGL与three.js的关系1.4 导入three.js(1)直接npm(2)单页面中引入二、四大组建2.1 场景2.2 相机2.2.1 透视相机2.2.2 正投影相机2.3 渲染器2.3.1 渲染2.3.2 实时渲染和离线渲染2.4 几何体三、一个栗子一、什么是WebGL?Web.原创 2021-02-06 17:50:12 · 3745 阅读 · 8 评论 -
es6 模块化(es6学习笔记07)
一、模块化模块化:是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。1.1 模块化的好处防止命名冲突代码复用高维护性1.2 ES6模块化语法功能模块主要由两个命令构成:export和importexport:用于规定模块的对外接口import:用于输入其他模块提供的功能1.2.1 export 使用://1.分别暴露export let book = '西游记';export function like(){ console.log("我喜欢看西游原创 2021-02-03 17:37:20 · 399 阅读 · 0 评论 -
es6 数值扩展、对象方法扩展(es6学习笔记06)
一、es6的数值扩展Number.EPSILON:是JavaScript表示的最小精度。(当两数之差小于它时,课认为这两个数相等)function equal(a,b){ if(Math.abs(a-b) < Number.EPSILON){ return true; }else{ return false; } } console原创 2021-02-03 17:36:26 · 242 阅读 · 0 评论 -
es6 set(集合)、Map、class(类)(es6学习笔记05)
一、集合介绍与API1.1 SetSet(集合)是es6提供的新的数据结构。类似于数组,但成员的值都是唯一的,集合实现了Iterator接口,所以可以使用扩展运算符和for...of...进行遍历。结合的属性和方法:size:返回集合的元素个数add:增加一个新元素,返回当前集合delete:删除元素,返回Boolean值has:检测集合中是否包含某个元素,返回Boolean值clear:清空集合里所有的元素//声明一个集合 let h = new Set();原创 2021-02-02 17:35:34 · 431 阅读 · 2 评论 -
es6 生成器和Promise(es6学习笔记04)
前言:本篇主要记下生成器和Promise一、生成器生成器其实就是一个特殊的函数。生成器函数:是es6提供的一种**异步编程**解决方案,语法行为与传统函数完全不同。异步编程:简单来说就是纯回调函数,例如node、fs、ajax、MongoDB等1.1生成器的声明在函数名前面加*//声明特殊function * hong(){ console.log("你好,红红"); //并不会直接输出}//执行特殊let iterator = hong();terator.next(.原创 2021-02-01 19:55:35 · 303 阅读 · 0 评论 -
d3.js data-join(03)
前言:本篇主要是d3.js里面的datajoin一、什么是Data-join?本质上是将数据与图元进行绑定例如:每个国家的人数绑定到矩形的长度疫情感染的人数比例绑定到圆的半径为什么要使用data-join?使用data-join可以省去大量根据数据设置图元属性的代码量对于动态变化的数据提供统一的接口以数据为中心的可视化操作根据数据的每个属性自动调整绑定图元的属性不再需要手动添加、修改、删除图元会根据Data-join的绑定自动推断如果图元的数目不等于数据的条目.原创 2021-01-25 20:50:32 · 1218 阅读 · 0 评论 -
d3.js 操控SVG、坐标轴(02)
前言:本篇主要内容是svg的操控。使用D3获取、修改、删除节点(图元),比例尺,使用d3绘制简单柱状图,引入坐标轴。一、使用D3查询SVG1.1 d3.select()d3.select('#red'),即查询Id为‘red’的元素。de.select('.red'),只会返回找到的第一个元素。因此对于class、标签名称的查询建议使用d3.selectAll对于特定某个元素的查询建议使用d3.select1.2 d3.selectAll()d3.selectAll('.gr.原创 2021-01-24 22:54:05 · 1851 阅读 · 6 评论 -
d3.js的初步了解(01)
前言:d3.js的学习正式开启,对它的了解很少。不管怎样,还是坚持学下来吧!这篇博客主要是D3.jd的一个介绍和创建。会用到有关网页开发的内容。一、d3.js的简单介绍d3.js是一个数据可视化的库,技术基础是SVG。(本质上还是js的一个使用)。二、导入d3.js1、直接通过互联网链接导入<script src="http://d3js.org/d3.v5.min.js"></script>2、通过本地服务器链接(推荐)本地路径这里只是个示例,具体路径害得根据跟.原创 2021-01-24 22:47:31 · 580 阅读 · 0 评论 -
es6箭头函数、参数、扩展运算符(es6学习笔记02)
前言:本篇主要学习es6的箭头函数、函数参数默认值设置、rest参数、扩展运算符。一、箭头函数及其声明特点1.1声明一个函数//老方法去声明函数let fn =function(){ }//用箭头函数去声明函数let fn(a,b) => { //变量可以放在小括号里面 return a+b;}//调用函数let result = fn(1,2);console.log(result);1.2箭头函数的特点(1)this是静态的,this始终指.原创 2021-01-22 20:37:51 · 314 阅读 · 1 评论 -
es6变量及模板字符串(es6学习笔记01)
前言:终于开启了学习es6的旅途,是牛是马来看看吧!一、es6相关介绍1、什么是ECMAScript?ECMAScript是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。2、为什么要学习ES6?ES6的版本变动内容多,具有里程碑意义ES6加入许多新的语法特性,变成实现更简单、高效ES6是前端发展趋势,就业必备技能二、let变量声明以及声明特性1、变量的声明可以单独声明可以多个变量一起声明可以边声明边赋值,赋值可以是字符串、数字、数组等//声明变量let .原创 2021-01-20 11:47:16 · 672 阅读 · 0 评论 -
vue中把变量从.js文件中引入
前言:在vue开发中,我们通常把数据定义在data()里面。但是当此页的数据很多的时候,就会去定义很多个变量名,这样不仅不太美观,而且不利于模块化的开发。所以可以尝试着将这些变量放到一个.js文件里面,然后再在.vue文件里去使用就好啦!一、目录结构如下在assets下新建一个js文件夹,在components下新建一个index.vue文件二、操作如下在index.vue中写入<template> <div class="index"> &l.原创 2020-11-29 16:52:23 · 9758 阅读 · 0 评论 -
Vuex的mutations和vuex-devtools
vuex-devtools这是一个浏览器关于vuex的一个插件,安装和使用这里就先不说了,有兴趣的可以上网找找安装的教程。一、mutations是用来干嘛的?mutations相当于可以在里面定义方法,通过里面的方法来达到修改state里的状态值。注:Mutation中的方法必须是同步方法即Vuex的store状态的更新的唯一方式:提交mutationsmutations主要包括两部分:字符串的事件类型(type)一个回调函数(handler),该回调函数的第一个参数就是state。(不管原创 2020-10-22 12:06:04 · 485 阅读 · 0 评论 -
Vuex-actions的使用
一、Action的基本定义我们知道,不能在mutations中进行异步操作。但是某些情况我们希望在vuex中进行一些异步操作,比如网络请求,必然是异步的,那这个时候就需要用actions了。action类似于mutation,但是是用来代替mutation进行异步操作的。二、action的使用可以传递参数也可以不传递参数actions:{ //context:上下文,可以看成是store(默认参数) aUpdateInfo(context,payload){原创 2020-10-16 16:24:56 · 6680 阅读 · 0 评论 -
html自适应
前言:做项目的时候发现自适应是个很重要的事情!!!所以了解了很多怎么去做自适应。找到了一种比较好的方法。下面是基于vue框架的自适应在App.vue中写入<style scoped>html,body{ font-size: calc(100vw/80);}<style>接着在其他的页面以rem作为单位即可。注:1、上面的calc只是做项目时试的合适尺寸,不合适可以再改2、在页面中应用时,最外面的盒子最好不要使用%作为单位,否则页面会随着屏幕缩放,最.原创 2020-10-13 21:31:03 · 857 阅读 · 0 评论 -
vuex--Getters的使用
vuex里的getters(好像最新版本的vuecli没有给出vuex里的getters)这里的getters相当于vue里的computed计算属性就是如果在state里定义的属性需要变化时,就在getters里去做变化。state:{ }getters:{ power(state){ return state.counter*state.counter }, more20student(state){ return state.原创 2020-10-12 11:23:59 · 363 阅读 · 0 评论 -
vue实现滚榜效果
前言:基于vue做一个类似于比赛滚榜的榜单要实现这个效果需要用到vue里面的一个组件–vue-seamless-scroll使用这个插件相对而言实现起来比较容易。想要了解更多可点击https://github.com/chenxuan0000/vue-seamless-scroll安装和导入vue-seamless-scrollNPM安装:npm install vue-seamless-scroll --saveCDN安装:https://cdn.jsdelivr.net/npm.原创 2020-10-12 10:04:04 · 3064 阅读 · 0 评论