JaveScript
文章平均质量分 71
JaveScript系列
Vam的金豆之路
开源 JavaScript 库 Strve.js 作者
展开
-
每个前端开发者都可以开发一个属于自己的库或框架「Strve.js生态初步建成」
前言从3个月之前,就想自己开发一个库,从而提高一下自己的能力。庆幸的是在年前就开发出来了,并且生态也初步建成。这里提到的生态包括:Create Strve App、Strve Router以及其他辅助Strve.js开发的工具。说实话,这段时间是挺难熬的,这也算是今年给自己一个礼物吧!我开发Strve.js的初衷是之前接触过JSX语法,一直觉的JSX语法非常酷,可以在JS中写HTML标签,于是就想开发一款类似JSX语法的库。刚开始也开发了一段时间,搭配Babel可以简单实现JSX语法。但是到后来觉得并原创 2021-12-22 23:49:54 · 1713 阅读 · 17 评论 -
Strve.js,一个可以将字符串转换为视图的JS库
前言好久没有写原创了,今天就发一篇关于自己研发的JS库——Strve.js的文章。终于体验了一把自己写JS库或框架,自己写文档,自己写工具的乐趣。如果想了解一下Strve.js,可以根据文档上手一下。官方文档:https://www.maomin.club/site/strvejs/NPM:https://www.npmjs.com/package/strvejsGithub:https://github.com/maomincoding/strveStrve.js一个可.原创 2021-11-29 00:05:59 · 1196 阅读 · 3 评论 -
canvas 立体图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } </style></head><body>原创 2021-11-22 14:47:00 · 788 阅读 · 0 评论 -
【JS专栏】JS对象的浅拷贝与深拷贝
浅拷贝自己创建一个新的对象,来接受你要重新复制或引用的对象值。如果对象属性是基本的数据类型,复制的就是基本类型的值给新对象;但如果属性是引用数据类型,复制的就是内存中的地址,如果其中一个对象改变了这个内存中的地址,肯定会影响到另一个对象。1. object.assignobject.assign 是 ES6 中 object 的一个方法,该方法可以用于JS 对象的合并等多个用途,其中一个用途就是可以进行浅拷贝。该方法的第一个参数是拷贝的目标对象,后面的参数是拷贝的来源对象(也可以是多个来源)。原创 2021-11-04 20:51:52 · 15770 阅读 · 1 评论 -
如何写成Strview.js之源码剖析
前言前段时间我自己开发了一款Strview.js,它是一个可以将字符串转换为视图的JS库。什么意思呢?就像下面这段代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="原创 2021-09-05 17:44:28 · 241 阅读 · 0 评论 -
基于Strview.js项目脚手架StrviewApp是怎么搭建起来的?
前言前几天,因为借着看源码的热乎劲,搞了一个玩具Js库Strview.js。为什么会搞这么一个玩具库呢?其实也不全是因为晚上闲的没事,主要还是想通过实操来锻炼自己的开发能力。之前,我也写过一篇文章,那篇文章只是大体介绍了一下,没有深究。之前大家可能觉得它跟Vue.js差不多,是的,正是借鉴Vue.js的思想,但是有些地方还是不一样(个人觉得)。所以,今天,这篇文章介绍基于Strview.js搭建的项目脚手架工具StrviewApp。如果你觉得对自己有用,可以继续看下去。如果觉得这篇肯定是篇垃圾文章,你也可原创 2021-08-31 09:20:44 · 241 阅读 · 0 评论 -
写了一个Strview.js
前言最近,这几周更新文章的频率明显比之前有所降低。不是懒,主要是最近想沉淀沉淀。休息的这几天我也有所收获,抽着晚上的空打算自己写一个玩具JS库玩玩。不像很多大型框架那样,在开发之前都有严思缜密的计划。然而,我就只想动手尝试尝试。所以,我写了一个叫Strview.js这样一个玩具JS库。如果您想看看呢?可以继续读下去。如果觉得没啥意思的话,那可以当做一篇烂文章,直接跳过也可以啊!介绍Strview.js是一个可以将字符串转换为视图的JS库。这里的字符串一般指的是模板字符串。当然你也可以使用普通字...原创 2021-08-12 00:01:36 · 279 阅读 · 0 评论 -
strview.js
strview.jsA JS library that can convert strings into view.How to use?You can use strviewCLI, a scaffolding tool, which will enable you to better understand and use strview.js.https://github.com/maomincoding/strviewCLI.gitWhich dist file to use?str原创 2021-08-06 17:44:50 · 235 阅读 · 2 评论 -
今天,学会这10个JS代码段就够了!
用 apply 将数组各项添加到另一个数组const array = ['a', 'b'];const elements = [0, 1, 2];array.push.apply(array, elements);console.info(array); // ["a", "b", 0, 1, 2]函数只执行一次function once (fn){ let called = false return function () { if (!called) { cal原创 2021-06-30 00:16:00 · 415 阅读 · 0 评论 -
前端开发中这些小技巧,你知道几个?
浏览器地址栏运行JavaScript代码javascript:alert('hello!');Firefox不支持;其他浏览器必须手动输入才可执行;浏览器地址栏运行HTML代码data:text/html,<h1>Hello, world!</h1>在非IE浏览器可以运行浏览器变成文本编辑器地址栏输入:data:text/html, <html contenteditable>控制台输入:document.body.contentEd原创 2021-06-05 16:00:24 · 542 阅读 · 1 评论 -
使用html2canvas,由html转换canvas时,出现图片丢失问题解决方案
在img标签上加上crossorigin="anonymous";如果是图片地址是跨域网址,请将图片转换为base64格式;源码如下:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>html2canvas exam.原创 2021-04-14 09:21:33 · 6790 阅读 · 1 评论 -
面试官:JS的数据类型你了解多少?(一万字总结)
前言作为JavaScript的入门知识点,Js数据类型在整个JavaScript的学习过程中其实尤为重要。最常见的是边界数据类型条件判断问题。我们将通过这几个方面来了解数据类型:概念检测方法转换方法概念undefined、Null、Boolean、String、Number、Symbol、BigInt为基础类型;Object为引用类型,其中包括Array、RegExp、Date、Math、Function这几种常见的类型。数据类型大致分为两类来进行存储。基础类型存储在栈内存,被引用原创 2021-02-24 23:22:25 · 303 阅读 · 0 评论 -
天哪!几行js代码就可以实现拳皇小游戏
前言今天,我们用原生JS实现一个拳皇人物位置控制的小效果。话不多说,我们赶紧来看下如何实现吧!效果(非静止八神)分别按W、S、A、D键实现不同的效果。源码html与css很简单,主要是js中有几点需要需要注意的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>游戏动作控制(设计模式)</title> <style>原创 2021-02-22 00:00:11 · 3048 阅读 · 0 评论 -
在前端学习道路上,容易混淆的几个知识点!
async与deferasync: 可选属性。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效(写在html文件中的js代码,添加此属性无效,仍按代码加载顺序执行)。defer: 可选属性。标识脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。script标签属性async与defer之间的区别:蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。伪元素与伪类伪元素: 是一个附加至选择原创 2021-02-19 23:09:35 · 347 阅读 · 3 评论 -
日常js工具函数整理
防抖方法/** * 防抖 * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */let timeout;export default function Debounce(func, wait = 3000, immediate = true) { // 清除定时器 if (timeout !== null)原创 2021-01-18 11:03:40 · 604 阅读 · 0 评论 -
你是否有一个梦想?用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器
前言沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧!项目展示(这只是一张图片哦~)这张图就是我们的成品,还等什么?赶紧来实战吧!实战我会把完整源码放在github上,欢迎来star,地址在文末。首先,我们会使用最原生的JavaScript来实现,老大哥肯定要打头阵啊!一、JavaScripti原创 2020-12-21 01:18:35 · 465 阅读 · 0 评论 -
这些JS工具函数够你用到2020年底了
前言活不多说,自己平时搜集的干货函数奉上。干货函数找出数字在数组中下一个相邻的元素let i = "";let rr = [];const name = (n, arr1)=>{ let num = Number(n); for (let i = 0; i < arr1.length; i++) { const element = arr1[i]; if (element != num) { rr.push(n原创 2020-12-08 00:09:45 · 645 阅读 · 3 评论 -
手把手教你做一个华为鸿蒙系统Demo级项目(JS角度)
系统定位HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。对消费者而言,HarmonyOS能够将生活场景中的各类终端进行能力整合,可以实现不同的终端设备之间的快速连接、能力互助、资源共享,匹配合适的设备、提供流畅的全场景体验。对应用开发者而言,HarmonyOS采用了多种分布式技术,使得应用程序的开发实现与不同终端原创 2020-11-21 23:51:31 · 5702 阅读 · 3 评论 -
你所知道的JS变量作用域
变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内声明的变量或者是函数的命名参数;块级变量是在块中声明的变量,只在块中有效。变量的作用域跟声明方式有密切的关系。使用var声明的变量的作用域有全局作用域原创 2020-11-19 00:22:26 · 1496 阅读 · 2 评论 -
js深拷贝浅拷贝
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body><sc原创 2020-09-13 14:35:01 · 314 阅读 · 0 评论 -
js获取到时间戳(兼容性强)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><script> functi原创 2020-09-13 14:32:36 · 475 阅读 · 0 评论 -
你要的Js工具函数【第二期】
防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="su原创 2020-08-04 22:18:25 · 391 阅读 · 0 评论 -
js如何将带有分割符的字符串转化成一个n维数组
var str = "A-2-12"; var str1 = str.split('-'); console.log(str1); var arr = str1.reverse().reduce((pre,cur,i) => { if(i==0) { pre.push(cur) return pre } return [cur,pre]},[])console.log(arr)原创 2020-08-04 22:01:58 · 552 阅读 · 0 评论 -
js找出数字在数组中下一个相邻的元素
let arr = ["2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24", "27", "30", "33", "36", "42", "48", "54", "60"] var rr = []; function name(n) { let num = Number(n); for (let i = 0; i < arr.length; i++) { ...原创 2020-08-04 21:59:01 · 2650 阅读 · 0 评论 -
js—reduce方法练习之无限引用对象的值
var obj = { a:{ b:{ c:"maomin" } } } const safeGet = (o, path) => { try { return path.split('.').reduce((o, k) => o[k], o) } catch (e) { return undefined } } console.log(safeGet(ob.原创 2020-08-04 21:53:37 · 441 阅读 · 0 评论 -
js原始值与对象的相等比较
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原始值与对象的相等比较</title></head><body><script> let原创 2020-08-04 21:48:57 · 441 阅读 · 0 评论 -
前端移动端端测试——显示控制台
<script src="https://cdn.jsdelivr.net/npm/eruda"></script><script>eruda.init();console.log('控制台打印信息');</script>原创 2020-07-21 16:42:41 · 1041 阅读 · 0 评论 -
2020年前端面试题集锦(奥利给!!!)
基础知识点与高频考题JavaScript基础console.log(1 < 2 < 3);console.log(3 > 2 > 1);// 写出代码执行结果,并解释为什么// 答案与解析true false对于运算符>、<,一般的计算从左向右第一个题:1 < 2 等于 true, 然后true < 3,true == 1 ,因此结果是true第二个题:3 > 2 等于 true, 然后true > 1, true == 1 ,原创 2020-06-19 17:44:33 · 2230 阅读 · 0 评论 -
JS怎么判断鼠标进入离开的方向?
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<...原创 2020-05-23 23:58:18 · 2437 阅读 · 0 评论 -
送你一个封装的移动端横屏展示的JS库
前言我们经常在移动端横屏展示一些东西,所以今天我们来介绍下怎么在移动端实现横屏展示。效果实现源码:// screenOrientation.jsexport default function (option) { var _this = this; _this.option = { 'mode': 'portrait', //portrait(竖屏)、landscape(横屏) 'id': 'wrap', //最外层容器ID 'init': false, 'callbac原创 2020-05-19 16:06:41 · 2465 阅读 · 0 评论 -
你要的几个JS实用工具函数(持续更新)
你要的几个JS实用工具函数(持续更新)1、封装fetch源码:/** * 封装fetch函数,用Promise做回调 * @type {{get: (function(*=)), post: (function(*=, *=))}} */const fetchUtil = { get: (url) => { return new Promise((resolve, reject) => { fetch(url, {原创 2020-05-15 14:10:23 · 3583 阅读 · 3 评论 -
JS中new操作符做了什么?
1.new操作符做了什么new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。new 关键字会进行如下的操作:创建一个空的简单JavaScript对象(即{});链接该对象(即设置该对象的构造函数)到另一个对象 ;将步骤1新创建的对象作为this的上下文 ;如果该函数没有返回对象,则返回this。2.简单实现function create(Con, …args...原创 2020-05-01 15:08:06 · 14986 阅读 · 1 评论 -
JS数组去重你知道有几种方法?
1.参考答案一:利用ES6新增数据类型 SetSet类似于数组,但是成员的值都是唯一的,没有重复的值。function uniq(arry) {return […new Set(arry)];}2.参考答案二:利用 indexOffunction uniq(arry) {var result = [];for (var i = 0; i < arry.length; i++)...原创 2020-05-01 14:57:36 · 2563 阅读 · 0 评论 -
如何将两个数组对象的相同属性进行操作(更简洁)
我们以前可以使用双循环,来判断条件,达到目的,这里我们使用更简洁的方法:合并数组,然后通过obj[v.name]=obj[v.name]===undefined)判断其条件,将两个数组对象的相同属性将对应的type变为1。var arr1=[ {name:'a'}, {name:'b'}, {name:'c'}]var arr2=[ {name:'a',ty...原创 2020-02-20 21:44:19 · 5121 阅读 · 0 评论 -
【CSDN学院出品】 你不可不知的JS面试题(第三期)
1、什么是闭包?如图所示,闭包就是一个定义在函数内部的函数,其作用是将函数内部和函数外部连接起来。大家知道,作用域的问题,就是在函数内部定义的变量称为局部变量,外部取不到值。下面我们通过代码来更加详细地看一下: function A() { let x = 1; return function B() { console.log(x)...原创 2020-02-16 16:11:17 · 6875 阅读 · 3 评论 -
【CSDN学院出品】 你不可不知的JS面试题(第二期)
1、原创 2020-02-14 18:45:07 · 8439 阅读 · 4 评论 -
【CSDN学院出品】 你不可不知的JS面试题(分期更新……)
1、JS中有哪些内置类型?7种。分别是boolean、number、string、object、undefined、null、symbol。2、NaN是独立的一种类型吗?不是。NaN是number类型。3、如何判断是哪个类型?Object.prototype.toString.call(),返回为[object Type]。现在我们来验证一下。Object.prototype.toS...原创 2020-02-12 17:48:45 · 11335 阅读 · 25 评论 -
如何用原生js写一个懒加载页面带渐变效果
懒加载经常是我们性能优化经常使用的方案,那么我们今天就实现一波。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...原创 2020-02-10 17:03:17 · 976 阅读 · 6 评论 -
2020年2月2日值得用js写一个回文算法
//忽略标点符号、大小写和空格,正着读和反着读一模一样。 function made(str) { var str1 = str.toLowerCase(); //先将字符串全部转换为小写 var reg = /[\W\_]/g; // 删除所有非字母数字字符和下划线 var str2 = str1.replace(reg, "");...原创 2020-02-02 19:49:15 · 2356 阅读 · 1 评论 -
WEB前端2020年更新实用代码段(持续更新)
1、使用解构获取json数据let jsonData = {id: 1,status: "OK",data: [a, b]};let { id, status, data: number } = jsonData;console.log(id, status, number ); // 1,“OK”,[a, b]2、使用扩展字符串合并数组let a1 = [1,2];let ...原创 2020-01-26 21:51:01 · 8454 阅读 · 2 评论