- 博客(149)
- 资源 (2)
- 收藏
- 关注
RSS订阅转载 【JS实战】删除数组第一个元素（返回新数组）
删除数组第一个元素function cutTop(arr) { let newArr = arr.slice(0) newArr.shift() return newArr}
2020-08-31 22:55:13
4207
原创 【CSS基础】linear-gradient() 函数
linear-gradient() 函数定义与用法linear-gradient() 函数用于创建一个线性渐变的 “图像”。为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。语法代码例子#grad { background-image: linear-gradient(red, yellow, blue);}代码效果更
2020-08-31 19:40:20
231
转载 【CSS基础】flex-shrink
flex-shrinkflex-shrink 属性指定了 flex 元素的收缩规则含义及用法：flex-shrink 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。注意：如果元素不是弹性盒对象的元素，则 flex-shrink 属性不起作用。flex-shrink用来干嘛呢？比如你设置了一个父元素400px，然后来了三个子元素，宽度分别200px。 那么加起来600px。超了怎么办？还有得救。
2020-08-31 19:32:59
3860
2
原创 【JS基础】你真的了解 window对象 吗？
window对象概述浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。a = 1;window.a // 1上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。属性 （举例一些常用 的/红色为重点）window.namewindow.name 属性是一个字符串，表示当前浏览器窗口的名字。窗口不一定需要名字（默认""），这个属性主要配合超链
2020-08-31 19:26:24
389
原创 【TS基础】类型“Window & typeof globalThis”上不存在属性“$loading”
类型“Window & typeof globalThis”上不存在属性“$loading”错误问题解决方法需要声明一下window目录文件代码演示declare interface Window { $loading: any}接口声明（interface I { x: number[]; }）
2020-08-31 14:30:57
35752
3
原创 【JS基础】document 常用属性与方法有哪些 ？
document 常用属性与方法有哪些 ？document 常见的属性body 提供对 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的cookie 设置或返回与当前文档有关的所有 cookiedomain 返回当前文档的域名lastModified 返回文档被最后修改的日期和时间referrer 返回载入当前文档的文档的 URLtitle 返回当前文档的标题URL 返回当前文档的 URLdocument常见的方法write()：动态向页面写入内容createElem
2020-08-30 13:56:13
276
原创 【前端面试】ES5 的继承和 ES6 的继承有什么区别 ？
ES5 的继承和 ES6 的继承有什么区别 ？ES5 的继承时通过 prototype 或构造函数机制来实现。ES5 的继承实质上是先创建子类的实例对象，然后再将父类的方法添加到 this 上（Parent.apply(this)）。ES6 的继承机制完全不同，实质上是先创建父类的实例对象 this（所以必须先调用父类的 super()方法），然后再用子类的构造函数修改this。具体的：ES6 通过 class 关键字定义类，里面有构造方法，类之间通过 extends 关键字实现继承。子类必须
2020-08-30 13:49:23
1148
2
转载 浅谈服务端渲染
最近在把一个c端的项目重构成首屏服务端渲染（SSR：server side render）项目用到的技术： React 、webpack、koa2、webpack对于重构成SSR，redux并不是必须的，所以没用redux本篇文章先讲述一些理论的东西，之后会写代码篇一、 什么是服务端渲染简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序如下图所示，左图页面没使用服务渲染，当请求user页面时，返回的body里为空，之后执行js
2020-08-30 13:16:53
325
转载 【JS实战】添加元素（开头添加）
添加元素方法一：concat + unshiftunshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度function topAdd(arr, item) { let newArr = arr.concat() newArr.unshift(item) return newArr}方法二：slice + unshiftfunction topAdd(arr, item) { let newArr = arr.slice(0) new
2020-08-30 11:15:49
985
转载 【JS实战】删除数组最后一个元素
删除数组最后一个元素方法一：sliceslice() 方法可从已有的数组中返回选定的元素function cut(value) { return value.slice(0,value.length-1)}方法二：slice + poppop() 方法用于删除并返回数组的最后一个元素function cut(value) { let newArr = value.slice(0) newArr.pop() return newArr}方法三：con
2020-08-30 10:30:38
17230
转载 【JS实战】数组求和
数组求和方法一：reducereduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值function sum(value) { return value.reduce((num1, num2) => { return num1 + num2 })}方法二：普通for循环function sum(value) { let total = 0; for(let i = 0; i < value.l
2020-08-29 23:04:53
249
原创 【小程序】WXS时间戳处理、WXS文件使用方式
WXS时间戳处理wxs 获取当前日期没法使用new Date,但可以用Date() 代替目录文件代码演示// 时间戳转化日期格式 yy-mm-dd hh:mm:ssfunction newFormatTime(timestamp) { var date = getDate(timestamp * 1000);//时间戳为10位需*1000 var Y = date.getFullYear() + '-'; var M = (date.getMonth() + 1 < 10
2020-08-27 19:48:01
1858
1
原创 【Umi】history (API)
history (API)可用于获取当前路由信息import { history } from 'umi';// history 栈的实体个数console.log(history.length);// 当前 history 跳转的action, 有push/replace/pop 三种类型console.log(history.action)// location 对象，包含 pathname/search/hashconsole.log(history.location.pathn
2020-08-27 12:43:39
7996
原创 【Umi】.umirc.ts 路由配置
.umirc.ts 路由配置import { defineConfig } from 'umi'; // 用于校验和提示用户配置类型 配置ts提示export default defineConfig({ nodeModulesTransform: { // 设置node_modules目录下依赖文件的编译方式 type: 'none', // 不全部编译，可通过 exclude 配置添加额外需要编译的 }, routes: [ // 配置路由 格式为路由信息的数组 {
2020-08-27 11:54:48
2708
转载 【JS实战】移除数组中的元素(返回新的数组)
移除数组中的元素(返回新的数组)方法一：for循环+pushfunction remove(arr, item) { let newArr = []; for(let i = 0; i < arr.length; i++) { if(arr[i] !== item) { newArr.push(arr[i]) } } return newArr}方法二：filter过滤function remove
2020-08-26 23:59:09
7633
转载 【JS实战】移除数组中的元素(返回原数组)
移除数组中的元素(返回原数组)方法一：普通for循环+splicefunction remove(arr, item) { for(let i = arr.length; i >= 0; i--) { if(item === arr[i]) { arr.splice(i,1) } } return arr}方法二：方法一的另外一种写法在这里要注意在删除掉一个元素时，要 i–，即删除这个元素后，其他元素位置往前移。function remove(
2020-08-26 19:19:45
2057
原创 【小程序】wx.request()封装网络请求
wx.request请求封装微信提供了api，开发者可以通过wx.request来获取服务器的数据和传递数据。虽然api提供了很大的方便，但是调用多个接口时，代码重复性太高，我们可以进一步封装。wx.request(Object object)发起 HTTPS 网络请求参数示例代码wx.request({ url: 'test.php', // 示例接口 data: { x: '', y: '' }, header: {
2020-08-26 18:39:47
897
原创 【小程序】wx.getSystemInfo() 、自定义状态栏
wx.getSystemInfo(Object object) / 自定义状态栏wx.getSystemInfo(Object object)获取系统信息参数Object object（红色框为常用）object.success 回调函数（列举常用的几个，具体看官方文档）Object res示例代码wx.getSystemInfo({ success({ console.log(res.windowWidth); console.log(res.w
2020-08-26 12:36:38
3334
1
转载 【JS实战】查找数组元素位置
方法一function seek(arr, item) { if(Array.prototype.indexof) { return arr.indexof(item) }else if(arr.indexof(item) > 0) { return arr.indexof(item) }else { return -1 }}方法二function seek(arr, item) { if(Array.prototype.indexOf) .
2020-08-26 12:29:21
212
转载 【JS实战】添加元素(末尾添加)
题目描述方法一：普通的for循环拷贝+pushfunction endAdd(arr, item) { let newArr = [] for(var i = 0; i < arr.length; i++) { newArr.push(arr[i]) } newArr.push(item) return newArr}方法二：使用concat将传入的数组或非数组值与原数组合并,组成一个新的数组并返回function endAdd(
2020-08-25 23:44:52
2364
原创 【小程序】wx.showLoading()、wx.getUserInfo()
wx.showLoading(Object object)显示 loading 提示框。需主动调用 wx.hideLoading才能关闭提示框参数Object object （红色框为常用）代码示例wx.showLoading({ title: '加载中', mask: true})setTimeout(function () { wx.hideLoading()}, 2000)效果注意wx.showLoading和wx.showToast同时只能显示
2020-08-25 19:03:11
2920
原创 【JS基础】GET路径参数转为对象格式
GET路径参数转为对象格式先看效果：代码演示：var newUrl = 'http://www.baidu.com/s?name=Milk&age=22&hobby=篮球'// 路径参数转为对象function urlObject(url) { const params = url.slice(url.indexOf('?')+1, url.length-1); // 切割？后以后的数据 // console.log(params); const new
2020-08-25 14:23:26
1108
1
原创 【JS基础】(.和[])--对象获取属性的方法区别与使用【补充知识点Object.keys()】
对象获取属性的方法(.和[]方式)js对象获取属性有两种方法1.通过.的方式// 通过.方式获取属性值，key是静态的var a = {name: 'Milk', age: 21};console.log(a.name);console.log(a.age);2.通过[]方式// 通过[]获取属性值，key是动态的，可以是字符串，或者数字的形式var b = {"mimi": 6, "lulu": 8};var c = {7: "qiqi", 9: "kiki"};console.
2020-08-25 14:16:00
238
原创 【JS基础】substr() 方法的理解和使用
JavaScript substr() 方法JavaScript substr() 方法 属于JavaScript String 对象定义和用法substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符语法stringObject.substr(start,length)返回值一个新的字符串，包含从 stringObject 的 start（包括 start 所指的字符） 处开始的 length 个字符。如果没有指定 length，那么返回的字符串包含从 start 到
2020-08-25 13:48:41
3110
原创 【JS基础】何为全局对象？
JavaScript 全局对象全局属性和函数可用于所有内建的 JavaScript 对象。顶层函数（全局函数）顶层属性（全局属性）全局对象描述全局对象是预定义的对象，作为 JavaScript 的全局函数和全局属性的占位符。通过使用全局对象，可以访问所有其他所有预定义的对象、函数和属性。全局对象不是任何对象的属性，所以它没有名称。在顶层 JavaScript 代码中，可以用关键字 this 引用全局对象。但通常不必用这种方式引用全局对象，因为全局对象是作用域链的头，这意味着所有非限定性的变量
2020-08-25 13:46:34
534
原创 【小程序】解析二维码decodeURIComponent()
解析二维码decodeURIComponent()二维码内容获取一个小城序，类似于街边自动贩卖机扫码出货的模式，因为我们需要用户扫码进入小程序，每一个货柜都有一个对应的二维码，当然每个二维码里的信息也不一样。用户扫码进入小程序之后，二维码的信息会以参数q带进去，而我们只能在onLoad事件中拿到这个参数，见下图获取到的信息是经过**encodeURIComponent()编码的，所以需要用decodeURIComponent()**解码补充知识点：JavaScript decodeURICom
2020-08-25 13:43:47
4532
原创 【小程序】分包加载--解决主包2M限制的问题
分包加载–解决主包2M限制的问题背景：2017.01.09 小程序上线时，微信限制了代码包不能超过1MB 大小，（现在是2M了）限制大小是出于对小程序启动速度的考虑，希望用户在使用任何一款小程序时，都能获得一种“秒开”体验。然而，2MB的大小也限制了小程序功能的扩展，小程序业务的发展可能需要更大的体积。那么，能否有一种方案，在增加小程序包大小的同时，也能保持不错的启动速度呢？为了解决这个矛盾点，微信推出了「分包加载」这个技术方案。分包加载的介绍大部分小程序都会由某几个功能组成，通常这几个功
2020-08-25 13:40:33
1654
原创 【小程序】没有数据时，友好提示
没有数据时，友好提示第一版本先看效果：代码目录：代码演示：index.html<view class="noMessages" wx:if="{{!messageList.length}}"> <image src="../../images/空.png" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image> <view class="noMessages-te
2020-08-25 13:37:10
1031
原创 【前端面试】39道Vue高频面试题，亲测有效！！！快来看看呀！！
Vue高频面试题1.说下你常用的Vue指令？v-bind：动态绑定数据v-on：绑定事件监听器v-for：循环指令，可以循环数组或对象v-model：实现双向绑定v-if：根据表达式的真假值，判断是否渲染元素，会销毁并重建v-show：显示隐藏元素，修改元素的display属性2.v-if和v-show的区别是什么？切换元素时，v-if会销毁并重建元素，v-show是修改display属性，来做到显示和隐藏。v-show项目用处：回到顶部组件的显示隐藏，v-if项目用处：登陆方式切换
2020-08-24 23:26:33
8639
1
原创 【小程序】自定义弹框组件的实现【绝对实用！！！】
自定义弹框组件的实现话不多说先看效果初始页面，未点击按钮时：当点击按钮时：弹框从上至下滑动下面，一个动画过程点击取消或确定，会向上滑动，直至消失，一个动画过程！！弹框组件组件目录文件代码如下index.wxml<view class="pop-box-main {{position}}-class" wx:if="{{position!='fade' || show}}" animation="{{animationData}}" bindanimationend="en
2020-08-24 18:54:39
859
原创 【TS基础】基础类型
基础类型布尔值let milk: boolean = false;数字let milk: number = 6;字符串let name: string = 'milk';name = 'lulu';let name: string = 'gg';let age: number = 23;let xixi: string = `Hello, nihao ${name}i am ${age + 2}`;数组TypeScript像JavaScript一样可以操作数组元素。 有两种
2020-08-24 18:37:51
253
转载 【小程序】自定义组件slot的使用
自定义组件slot的使用小程序自定义组件slot的使用在自定义的组件中使用插槽slot自定义组件<view class="content"> <view class="title-box">标题1</view> <slot class="contant-box" name="自定义名字"></slot></view>要使用该组件的页面<!--卡片--><cards> // 自定
2020-08-24 18:33:30
918
原创 【前端面试】何为事件监听？
事件监听addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为 element.addEventListener(event, function, useCapture);第一个参数是事件的类型(如 “click” 或 “mousedown”)第二个参数是事件触发后调用的函数第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的事件传递有两种方式，冒泡和捕获事件传递定义了元素事件触发的顺序，如果你将P元素插入到div元素中，用
2020-08-24 18:30:04
450
原创 【小程序】什么是事件？事件使用方式、事件分类、事件对象
什么是事件事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如 id, dataset, touches。事件的使用方式在组件中绑定一个事件处理函数。如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。<view id="tapTest" data-hi="Weixin" bindtap="tapName"> C
2020-08-24 12:27:33
797
原创 【Koa2】get、post 以及 静态资源中间件
get、postKoa 路由get 传值在koa2 中GET传值通过request接收，但是接收的方法有两种：query 和querystring。query：返回的是格式化好的参数对象。querystring：返回的是请求字符串。参看获取get请求参数的代码：/* app.js */const Koa = require('koa');const Router = require('koa-router');const app = new Koa();const router =
2020-08-23 23:00:18
404
原创 【Koa2】框架介绍、环境搭建
Koa2框架介绍koa是由Express原班人马打造的，致力于成为一个更小、更富有表现力、更健壮的Web 框架。使用koa 编写web 应用，可以免除重复繁琐的回调函数嵌套， 并极大地提升错误处理的效率。koa不在内核方法中绑定任何中间件， 它仅仅提供了一个轻量优雅的函数库，使得编写Web 应用变得得心应手。开发思路和express 差不多，最大的特点就是可以避免异步嵌套。框架介绍之洋葱模型具体详情请看下面博客：https://blog.csdn.net/weixin_
2020-08-23 22:19:09
857
原创 【编程案例练习】控制display显示隐藏二级菜单--超简单
初始效果代码示例 <ul> <li onclick="show('second-menu')">一级菜单</li> <ul id="second-menu"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <
2020-08-22 00:57:29
429
原创 【CSS基础】position：fixed，如何水平垂直居中？
宽高不确定的情况下.modal-content { position: fixed; left: 50%; height: 50%; transform: translate(-50%, -50%); z-index:9500;}
2020-08-22 00:34:58
2582
1
转载 入职新公司-如何更快的适应节奏（第二周要干活）
刚入职新公司的第一周应该是比较紧张的，因为第一周算是我们熟悉的时间，到第二周有可能就要开始做项目了，甚至有的节奏快的公司也就让你熟悉个两三天后就开始干活了。那么在这短短的几天的时间里，我们应该重点熟悉和了解什么呢，才能帮助我们更快的适应新的工作（能干活）？如果公司能给你指定一个师兄那就会好一点，有什么问题都可以直接问师兄，但是问的太频繁也不太好，尤其是不能问让自己显的不专业的问题（当然也不会问？）。思考总结了几条，希望对你有帮助。第一步肯定是配置环境了相信这一步是每个人到新公司第一天必做的事儿，这.
2020-08-21 09:19:07
1316
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人