- 博客(49)
- 收藏
- 关注
RSS订阅原创 ts快速上手笔记02
面向对象是程序中一个非常重要的思想，它被很多同学理解成了一个比较难，比较深奥的问题，其实不然。面向对象很简单，简而言之就是程序之中所有的操作都需要通过对象来完成。一切操作都要通过对象，也就是所谓的面向对象，那么对象到底是什么呢？这就要先说到程序是什么，计算机程序的本质就是对现实事物的抽象，抽象的反义词是具体，比如：照片是对一个具体的人的抽象，汽车模型是对具体汽车的抽象等等。程序也是对事物的抽象，在程序中我们可以表示一个人、一条狗、一把枪、一颗子弹等等所有的事物。一个事物到了程序中就变成了一个对象。
2024-03-05 09:15:44
935
原创 ts快速上手笔记01
经过一系列的配置，使得TS和webpack已经结合到了一起，除了webpack，开发中还经常需要结合babel来对代码进行转换以使其可以兼容到更多的浏览器，在上述步骤的基础上，通过以下步骤再将babel引入到项目中。如此一来，使用ts编译后的文件将会再次被babel处理，使得代码可以在大部分浏览器中直接使用，可以在配置选项的targets中指定要兼容的浏览器版本。默认情况下，编译后的js文件会和ts文件位于相同的目录，设置outDir后可以改变编译后文件的位置。
2024-03-05 09:15:01
1126
原创 删除数组对象中的某一项
需求：按某要求删除数组对象中的特定某几项代码实现：// 循环 如果小于5就删除const arr = [1,2,3,4,5,6,7,8]for(let i = 0, len = arr.length; i < len; i++) { if(arr[i] < 5) { arr.splice(i, 1) }}结果如下：[2, 4, 5, 6, 7, 8]分析原因：删除操作会使得对应索引值位上的元素清空，整个数组中的元素向前移动一位，补位的元素会填充到执行删除操作的索引值
2022-04-26 15:51:09
3265
原创 js数字转换通用封装方法
//数字转换 numberFormat (value) { if (typeof value == "number") { // 是数字类型 value = value.toString(); if (!value) return "0.00"; var intPart = value.split(".")[0]; //获取整数部分 var intPartFormat = intPart .toString() .replace(/(\d)(..
2022-04-18 17:22:30
220
原创 解决js小数加减法精确度问题
js浮点数计算时，出现多位小数的bug，下面是例子：0.1+0.2 // 0.300000000000000040.3-0.2 // 0.09999999999999998解决办法，封装两个通用方法，如下所示：//自定义加法运算function addNum (num1, num2) { var r1, r2, m, floatNum; try { r1 = num1.toString().split(".")[1].length; } catch (e) { r1
2022-04-18 17:11:07
2130
2
原创 js人民币数字转成汉字大写金额
function number_chinese (str) { var num = parseFloat(str); var strOutput = "", strUnit = '仟佰拾亿仟佰拾万仟佰拾元角分'; num += "00"; var intPos = num.indexOf('.'); if (intPos >= 0) { num = num.substring(0, intPos) + num.substr(intPos + 1, 2)
2022-03-24 17:42:56
165
原创 在线设计平台表单双向绑定bug
在线设计平台的表单组件，在用globals.forminfo.vueInfo.formdata双向绑定字段时，没有及时更新视图，原来，由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。如果要添加新的属性，解决办法为：方法一：<script>export default { data() { return { stud
2022-03-21 10:07:44
102
原创 js生成随机数
// 生成某长度随机数 randomString(e) { e = e || 32 var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678", a = t.length, n = "" for (let i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a)) return n },
2021-05-06 17:53:57
127
原创 js格式化时间
1.将js中的Date对象格式化为指定格式,添加一个原型方法。/** * 返回指定format的string * format eg:'yyyy-MM-dd hh:mm:ss' **/Date.prototype.format = function(format) { var o = { "M+": this.getMonth() + 1, "d+": this.getDate(), "h+": this.getHours(),
2021-04-25 10:34:39
114
原创 几个把后台返回的数字格式化成想要渲染的字符的例子
formatYwzt(row, column, cellValue) { let result = '' this.ywztList.forEach(el => { if (el.value == cellValue) { result = el.label } }) //0：在办，1：办结，-1 撤销 return result }<el-table-column...
2021-01-21 10:12:00
154
2
原创 this.$set(obj, key, value)使用
当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。<template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </
2021-01-21 09:58:07
1063
原创 JavaScript封装方法校验身份证号
//校验身份证号码 let idCardValidity = (rule, code, callback) => { let city = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江 ", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42:...
2021-01-19 14:43:03
120
原创 storybook基础组件构建工具集成vue组件库
一、storybook 环境搭建1. 依赖安装npm install @storybook/vue --save-dev// `安装相应loader`npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev2.入口配置在项目根目录新建 .storybook/config.js 文件// .storybook/config.js#import { c
2021-01-19 14:40:31
677
1
原创 几道常考的手写面试题
<!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>
2020-09-24 00:29:26
246
原创 arr.sort排序
1.默认情况下根据字符编码（ascm值）进行排序var arr = [1,3,6,2,10]arr.sort();//[1, 10, 2, 3, 6]2.sort排序允许接受一个参数（函数），这个函数接受2个形参a,b,并且通过冒泡的方式比较。返回值规则：当返回值为负数时，那么前面的数在前面，也就是不动当返回值为正数时，那么后面的数在前为0，不动升序 arr.sort(function(a,b){ if(a>b){ //返回正数 b就和a位置互换，小的在前面了
2020-09-24 00:27:25
1198
原创 几种数组去重方法
1、 ES6-set使用ES6中的set是最简单的去重方法。var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}]; function arr_unique1(arr){ return [...new Set(arr)]; //或者 //return Array.
2020-09-24 00:20:52
278
原创 JS中数据类型的判断（ typeof，instanceof，constructor，Object.prototype.toString.call()）
（1）typeoftypeof 对于原始类型来说，除了 null 都可以显示正确的类型。console.log(typeof 2); // numberconsole.log(typeof true); // booleanconsole.log(typeof 'str'); // stringconsole.log(typeof []); // object []数组的数据类型在 typeof
2020-09-20 14:21:52
237
原创 ES6部分总结
ES6部分总结1.ES6怎么来的ECMAScript 和 JavaScriptECMA 是标准，JS 是实现ECMAScript 简称 ECMA 或 ES历史版本1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现1999, ES3.0 被广泛支持2011, ES5.1 成为 ISO 国际标准2015, ES6.0 正式发布2.ES6兼容性ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, No
2020-08-27 01:21:44
121
原创 前端面试JS三部分（三）
前端面试JS三部分（三）1、Generator了解？ES6 提供的一种异步编程解决方案, Generator 函数是一个状态机，封装了多个内部状态。function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenerator();调用后返回指向内部状态的指针, 调用next()才会移向下一个状态, 参数:hw.next()// { val
2020-08-24 23:58:49
594
原创 bootstrap常用命令笔记
一、布局容器 1、container container类用于固定宽度并支持响应布局的容器 2、container-fluid container-fluid用于100%宽度的布局铺满整个窗口二、栅栏参数 col-xs- col-sm- col-md- col-lg- 超小屏幕 小屏幕 中等屏幕 大屏幕 手机 (<768px) 平板 (≥768px) ...
2020-08-24 13:44:22
900
原创 前端面试JS部分（二）jQuery
前端面试JS部分（二）jQuery1、你觉得jQuery或zepto源码有哪些写的好的地方？jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链 (function( window, undefined ) {
2020-08-24 13:41:52
249
原创 前端面试JS部分（一）
前端面试JS部分（一）1. 介绍js的基本数据类型。基本类型有时也被称为值类型或原始类型。其中包括6种数据类型，分别是： 字符串类型（String）、数字类型（Number）、布尔类型（Boolean）、对空类型（Null）、未定义类型（Undefined）、符号类型（Symbol）。2.介绍js有哪些内置对象？ Object 是 JavaScript 中所有对象的父对象 数据封装类对象：`Object、Array、Boolean、Number 和 String` 其他对象：`Funct
2020-08-24 03:16:55
527
原创 前端面试CSS部分（二）
前端面试CSS部分（二）元素竖向的百分比设定是相对于容器的高度吗？这是一个很让人困惑的CSS特征，我之前也谈到过它。我们大家都知道，当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如padding-top,padding-bottom,margin-top,margin-bottom等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。全屏滚动的原理是什么？用到了CSS的那些属性？原理:主要呈现方式有两种，一种是有点类似于轮播,整体
2020-08-23 22:48:54
217
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人