- 博客(41)
- 资源 (12)
- 收藏
- 关注
RSS订阅转载 ECMAScript 2017（ES8）Features
ECMAScript 2017（ES8）FeaturesECMAScript 2017 或 ES8 与 2017 年六月底由 TC39 正式发布，可以在这里浏览完整的版本；而 ES8 中代表性的特征包括了字符串填充、对象值遍历、对象的属性描述符获取、 函数参数列表与调用中的尾部逗号、异步函数、共享内存与原子操作等。字符串填充ES8 中添加了内置的字符串填充函数，分别为 padStart 与 padEnd，该函数能够通过填充字符串的首部或者尾部来保证字符串达到固定的长度；开发者可以指定填充的字符串或者使
2021-11-22 09:16:10
112
转载 一些你可能不知道但非常有用的 HTML 标签
一些你可能不知道但非常有用的 HTML 标签1. Details + Summarydetail 与 summary 标签组合使用，就能实现折叠面板（Collapse）的效果：<details> <summary>Details????</summary> Something small enough to escape casual notice.</details>2.Fieldset + Legend 元素用于对表单中的控制
2021-11-22 09:06:11
182
转载 vue 实现主题换肤(element-ui)
vue 实现主题换肤(element-ui)一. 插件安装npm i webpack-theme-color-replacer -D二. 项目使用vue.config.jsconst webpack = require('webpack')const ThemeColorReplacer = require('webpack-theme-color-replacer')const forElementUI = require('webpack-theme-color-replacer/for
2020-12-12 09:56:14
1543
1
原创 vuex使用与解析
Vuex是什么？官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex就是用来进行组件之间进行数据交换的第三方 “仓库”，组件可以把想要共享的数据存放在这里面，别的组件想要的之后直接调取即可。Vuex原理个人理解它就是通过 全局混入 一个对象，在该对象的 beforeCreate 声明周期函数中，对每一个组件添加了一个属性 $store，值就是使用Vuex时所创建的
2020-12-03 16:26:57
91
原创 vue组件及插槽的使用
父子组件父子组件是组件之间的一种关系，这个关系并不是绝对的，而是相对的。通常，如果在A组件中 使用 了B组件，那么就称A组件为B组件的子组件，相应地，B组件就称为A组件的子组件。<!-- A组件 --><template> <div> <!-- 3、使用 --> <B></B> </div></template><script>/* 在工程化项目中，组件想
2020-11-30 11:03:23
314
原创 组件定义和使用
组件组件可以扩展 HTML 元素，封装可重用的代码。vue中的组件分为全局组件和局部组件全局组件全局组件：Vue.component(组件名（不能是已经存在的html标签），{配置项})在配置项中，除了没有 el项 和要有 template项 外，其他的跟vm一样 // 全局组件 Vue.component('my-h1', { data() { // 组件中的data必须是一个函数(函数返回一个对象)：是为了保证数据的独立 return {
2020-11-26 09:11:07
270
原创 VueDOM更新笔记
DOM更新vue的DOM更新是一个异步操作：可以提高编译效率，避免性能浪费。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <ul&
2020-11-24 16:38:36
149
原创 vue过滤器使用方法
vue过滤器使用方法过滤器分全局过滤器和局部过滤器。和自定义指令一样，过滤器对应的函数中的this是window（无论是全局的还是局部的），而不是当前vue的实例。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app">
2020-11-24 14:02:43
654
原创 vue计算属性使用方法
vue计算属性使用方法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="app"> <h1>{{name}}</h1> <input type="text" v-model="name"&
2020-11-24 14:02:16
1054
原创 Vue设计模式（发布订阅，观察者）
观察者模式与发布订阅模式对比有人说观察者模式是发布订阅的升级版，也有人说发布订阅是进阶版的观察者模式，但是无论是观察者模式还是发布订阅模式，它们都是定义了对象之间的一种一对多的依赖关系。观察者模式当目标对象的状态发生改变时，所有它里面的被观察的对象，都会得到通知，并执行相应的操作。 // 目标对象类 function Sub() { this.subs = []; // 观察者列表 } Sub.prototype = { con
2020-11-23 15:39:36
1291
原创 Vue自定义指令使用场景(权限校验)
利用自定义指令实现权限校验// directive.js// 控制元素显示不显示Vue.directive('premission1', function(el, obj){ // 控制 display的值即可 el.style.display = obj.value > 3? 'none': 'block'; });// 控制元素加载不加载，需要用到钩子函数 insteredVue.directive('premission2',{ inserted(el, obj) {
2020-11-20 15:52:23
204
原创 Vue自定义指令怎么用
自定义指令vue中凡是 v- 开头的行内属性，都被认为是指令，不同的指令可以完成或实现不同的功效。vue自带的指令有时候无法满足实际需求，这时就需要我们自己“创建”指令，也就是自定义指令。自定义指令分为全局自定义指令和局部自定义指令。全局自定义指令全局自定义指令：Vue.directive(指令名, function(el,obj){…})适用范围：整个项目中都可以使用// 例如Vue.directive('color', function(el, obj){ // 用了几次v-
2020-11-20 15:00:52
342
原创 vue中常用的指令有什么
vue中常用的指令/* v-model='xx'：一般是用在表单元素上，input框内容发生改变，所有用到这个变量的地方都会自动更新 v-text='xx'：相当于 innerText，不能识别结构 v-html='xx'：相当于 innerHTML，能识别结构 v-cloak：专门用来提供解决小胡子的显示问题，需要搭配css使用 当vue编译完成之后，会把这个属性删掉，这是css样式就不起作用了 v-once：有这个指令的
2020-11-20 15:00:15
661
原创 webpack的proxy代理配置
webpack的proxy代理配置在实际项目中不可避免会遇到跨越问题，webpack中的proxy就是解决前端跨域的方法之一。跨越问题：协议、域名、端口 三者只要有一个与服务端的不一致，就会报跨域错误// webpack.config.jsdevServer: { hot:true, // 它是热更新：只更新改变的组件或者模块，不会整体刷新页面 open: true, // 是否自动打开浏览器 proxy: { // 配置代理（只在本地开发有效，上线无效） "
2020-11-18 11:23:32
13974
原创 @babel_plugin-transform-runtime重复引入问题
@babel_plugin-transform-runtime重复引入问题在webpack中，将高级API转换依赖于babel插件 @babel/plugin-transform-runtime；但是在配置好之后发现打包后的文件还是有重复引入问题，也是这个插件没有起到减少代码冗余的问题// 原来的配置{ test: /\.js$/, use: { loader: 'babel-loader', presets:[ ['@babel/preset-env',{
2020-11-17 11:37:05
1146
原创 webpack关联babel手记
webpack学习之webpack关联babelbabel 是为了把高级JS语法转为低版本语法，它跟 webpack 是两个互不相关的工具，要想将它们关联起来，需要借助到：1、 @babel/core：babel的核心模块2、 babel-loader ：把 babel 和 webpack 进行关联的桥梁3、@babel/preset-env：预设// 安装完之后去 rules 中进行配置{ test: /\.js$/, // babel是处理js的 use: { load
2020-11-17 11:08:11
150
原创 webpack处理字体图标手记
webpack学习之webpack处理字体图标在讲webpack处理字体图标之前先讲一下css文件的压缩默认打包的css文件是不压缩的，即便是生产环境也只是压缩js和html压缩css文件使用插件： optimize-css-assets-webpack-plugin如果只是单独使用了这个插件，那么js反而又不压缩了，所以还需要用到压缩js的插件：terser-webpack-plugin// 安装之后再 webpack.config.js中引入// 压缩csslet OptimizeC
2020-11-16 15:58:31
128
原创 webpack解析样式文件记录
webpack解析样式文件记录之前提到的插件是为了实现某些功能的，而加载器则是用来解析各种文件的。通常加载器都是配置在rules下的1、解析css文件webpack只识别js文件，所以遇到css文件时，需要借助一些加载器。解析加载css文件需要两个loader：style-loader、css-loader module: { rules: [ // 存放各种loader：使用loader的顺序是：从下往上 { test: /\.css$/, // 匹
2020-11-16 11:17:41
105
原创 webpack解析样式手记
webpack学习之webpack解析样式之前提到的插件是为了实现某些功能的，而加载器则是用来解析各种文件的。通常加载器都是配置在rules下的1、解析css文件webpack只识别js文件，所以遇到css文件时，需要借助一些加载器。解析加载css文件需要两个loader：style-loader、css-loader module: { rules: [ // 存放各种loader：使用loader的顺序是：从下往上 { test: /\.css$/,
2020-11-16 11:06:28
69
原创 webpack的多入口多出口配置手记
webpack的多入口多出口配置// webpack.prod.js文件配置let path = require('path');let HtmlWebpackPlugin = require('html-webpack-plugin');let {CleanWebpackPlugin} = require('clean-webpack-plugin');module.exports = { mode: 'production', // 打包环境（生产环境） // 多入口时，ent
2020-11-14 14:35:30
272
原创 webpack学习之webpack基本配置
webpack 打包工具 grunt gulp;代码转换less/sass --> csses6/es7/es8 --> es5ts --> js压缩文件压缩JS、CSS图片转为base64代码分割：提取公用代码模块合并：把多个模块合并自动刷新（热更新）：代码改变，自动刷新页面模块化开发单例模式（高级单例模式：闭包返回一个对象）commonJS 规范（node）：每一个文件都是一个单独的模块（浏览器不支持）导出：module.exports引
2020-11-13 15:29:29
93
原创 js学习之webpack的优化
webpack的各种优化1.删除无用的csspurgecss-webpack-plugin：删除无用的css插件glob：功能是查找匹配的文件先下载这两个包，再去webpack.config.js文件中进行配置2.图片压缩image-webpack-loader安装这个加载器的时候会遇到各种坑，如果丢包就用cnpm多下载几次安装成功之后运行 npm run dev会报一个错Automatic publicPath is not supported in this browser解决办法
2020-11-12 14:59:03
142
原创 前端工程化学习之webpack
webpack知识前端工程化：模块化，组件化，规范化，自动化（自动化构建，自动化部署，自动化测试）使用webpack作为前端构建工具：代码优化：ts编译成js；less/sass编译成css等文件优化：压缩js、css、html代码，压缩合并图片等代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载模块合并：在采用模块化的项目中会有很多个模块和文件，需要构建功能把所有模块合并成一个文件自动刷新：监听本地源代码的变化，自动重新构建代码，刷新浏览器代码检验：在代码被提交到
2020-11-11 10:38:31
177
原创 JavaScript高级手记 （ajax的基础知识）
ajax的基础知识创建ajax实例的步骤// 1、创建AJAX实例 let xhr = new XMLHttpRequest(); // 2、打开URL（发送请求前的一些处理） xhr.open('get', 'http://www.baidu.com', true); // 3、箭筒AJAX状态信息 xhr.onreadystatechange = function(){ // xhr.readyState AJAX的状态 0~4 // xhr.status
2020-11-06 16:37:33
76
原创 JavaScript高级手记（原生拖拽效果）
JavaScript高级手记（原生拖拽效果）HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-11-06 11:38:23
77
原创 JavaScript高级手记（事件对象和默认行为）
JavaScript高级手记（事件对象和默认行为）/* * 事件对象：存储当前事件操作及触发的相关信息的（浏览器本身记录的，记录的是当前这次操作的信息，和在哪个函数中无关） 给当前元素的某个事件行为绑定方法，当事件行为触发，不仅会把绑定的方法执行，而且还会给方法默认传递一个实参，这个实参就是事件对象 * 鼠标事件对象 MouseEvent + clientX/clientY 鼠标触发点距离当前窗口的x/y轴坐标（只对当前屏，卷去的部分不计算在内） + pageX/
2020-11-05 14:42:23
76
原创 JavaScript高级（事件和事件绑定）
JavaScript高级（手机之事件和事件绑定）// 事件和事件绑定/* * 什么是事件？ 事件是浏览器赋予元素的默认行为，也可以理解为事件时元素天生自带的，不论是否给其绑定方法，当某些行为触发的时候，相关的事件都会被执行触发 * 浏览器赋予元素的事件行为 - 鼠标事件 + click 点击/单击事件（PC） + dbclick 双击事件 + contextmenu 鼠标右键点击事件 + mousedown 鼠标按下
2020-11-05 11:40:12
90
原创 JavaScript高级手记（浏览器底层渲染机制和性能优化）
JavaScript高级手记（浏览器底层渲染机制和性能优化）/* * 客户端从服务器获取到需要渲染的页面的源代码后 【开辟一个GUI渲染线程，自上而下解析代码，最后绘制出对应的页面】 * 自上而下解析代码是同步的，但是某些操作是异步的 请求加载属于资源的获取 渲染解析属于代码执行 * 1、关于CSS资源的加载 * + 遇到的是<style> 内嵌样式 * => 同步：交给GUI渲染线程去解析 * +
2020-11-03 16:50:35
110
原创 JavaScript高级手记（发布订阅设计模式）
JavaScript高级手记（发布订阅设计模式）基于单例设计模式构建发布订阅（对象）/* * 设计模式：是一种思想，用来有效管理代码的思想 + 单例设计模式：对象 + 工厂设计模式：面向对象创建实例 + Promise设计模式：异步管理 + 发布订阅设计模式 + ... 发布订阅： 来源于 DOM2级事件池 DOM2级事件池机制：可以同时给同一事件类型行为绑定多个方法，当事件触发，绑定的方法依次被执行*//* fun
2020-11-02 13:56:02
55
原创 JavaScript高级手记（简单实现Promis）
JavaScript高级手记（简单实现Promis）// 实现Promisefunction _Promise(fn){ // 要求接收的fn必须是一个函数，否则报错 if(typeof fn !== 'function') { throw new TypeError('_Promise resolver undefined is not a function') } // 每个实例应该有这两个属性：state，result this.state = 'pending'; /
2020-10-30 17:38:07
108
原创 JavaScript高级手记 （ Promise详解
JavaScript高级手记 （ Promise详解/* * 创建Promise实例的时候得传一个函数 executor,并且这个函数接收两个参数 + resolve函数：将实例的状态从 pending 修改为 fulfilled/resolved，同时将实例的值改为执行这个函数时传递的实参 + reject函数：将实例的状态从 pending 修改为 rejected，同时将实例的值改为执行这个函数时传递的实参 每一个Promise实例都有两个重要的属性：
2020-10-29 16:53:14
86
原创 JavaScript高级手记（同步,异步)
JavaScript高级手记（同步,异步)1、JS中的同步异步编程 * JS中的同步异步编程 * 【进程、线程】 + 进程：代表的是一个程序（浏览器新开一个页面就是一个进程） + 线程：用来处理进程中的具体事物的，如果一个程序中需要同时做好多事情，就需要开辟好多线程 + 一个线程同时只能做一件事 * 浏览器是多线程的 + GUI渲染线程 + HTTP网络线程 + JS代码渲染线程 + ... * JS是
2020-10-28 17:03:09
110
原创 JavaScript高级手记（对象/数组的深浅拷贝）
JavaScript高级手记（对象/数组的深浅拷贝）// 对象（数组）的深克隆和浅克隆 var obj = { a: 100, b: [10,20,30], c: { x:10 }, d: /^\d+s/, e: null, f: undefined, g: function(){}, h: new Date(), i: Symbol('A'),};let arr = [10, [100,200], {x: 10, y: 20}]; // 浅克隆：
2020-10-27 16:35:07
68
原创 JavaScript高级手记（四种数据类型检测方法）
JavaScript高级手记（四种数据类型检测方法） * 数据类型检测 + typeof 检测数据类型的运算符 + 返回结果是一个字符串，字符串中包含了对应的数据类型 + "number/string/boolean/symbol/bigint/object/function" + 多个typeof检测，结果都是字符串 typeof typeof xxx => 'string' 【有BUG】 + type
2020-10-27 16:32:33
188
2
原创 微信小程序UI框架记录
1.微信小程序UI框架记录uview关于uView的取名来由，首字母u来自于uni-app首字母，uni-app是基于Vue.js，Vue和View(延伸为UI、视图之意)同音，同时view组件uni-app中 最基础，最重要的组件，故取名uView，表达源于uni-app和Vue之意.兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨众多的常用页面和布局，让您
2020-10-27 12:07:39
356
原创 JavaScript高级手记（原型重定向，new的实现）
JavaScript高级手记（原型重定向，new的实现）1、原型重定向/* * 原型重定向： 为什么要重定向： 为了方便批量给原型上扩充属性和方法 带来的问题： 1、新定向的原型对象上，没有 constructor 属性，结构不完整 2、浏览器默认生成的原型对象会因为缺少被引用而被销毁释放掉，可能导致在重定向之前给原型上添加的属性和方法丢失 !注意：内置类的原型不允许重定向*/function Fn(){ thi
2020-10-26 15:45:40
86
原创 JavaScript高级手记(函数的三种角色，this的五种情况)
JavaScript高级手记(函数的三种角色，this的五种情况)函数的三种角色/* * 函数的三种角色 + 普通函数：闭包作用域 + 构造函数：可以通过 new 执行创建其实例 + 普通对象：有键值对（也有原型链__proto__,指向Function.prototype这个匿名空函数） 这三种角色之间没有必然联系 所有的函数都是内置类Function的实例，所以一般函数的原型的constructor都是Function，即 fun.prototype.c
2020-10-23 16:24:56
85
原创 JavaScript高级手记（面向对象、原型、原型链）
JavaScript高级手记（面向对象、原型、原型链）----------面向对象编程-------------- * OOP (Object Oriented Programming): 面向对象编程 + java + javascript + c# + python + ... * POP (Procedure Oriented Programming): 面向过程编程 + c + ... ========
2020-10-21 16:47:45
69
原创 JavaScript高级手记(闭包高级应用)
学习JavaScript高级第八天(闭包高级应用)1、闭包应用值惰性函数和柯理化函数 JS高阶编程函数：惰性函数 + 懒 + 能只执行一次的绝不会执第二次// 这样写，每调用一次都要处理兼容的问题：这完全没有必要，第一次执行知道了兼容情况，后期再调用（浏览器也没余刷新、也没有换浏览器）兼容检验是没有必要的 function getCss(ele, attr){ if(window.getComputedStyle) { return window.getComp
2020-10-20 16:28:41
184
原创 JavaScript高级手记（数据类型转换、变量提升）
学习JavaScript 高级第三天（数据类型转换、变量提升）-------数据类型转换的4大核心标准-------- * 把其他数据类型转为 Number 类型 1、需要特定转化为 Number 的 + Number(val) + parseInt/parseFloat(val) 2、隐式转换（浏览器内部默认要先转为 Number 再进行计算的） + isNaN(val) + 数学运算（特殊情况：+在出现字符串的情
2020-10-20 09:32:36
90
大学小作业专用的答题html
2020-12-10
微信小程序版本高仿滴滴打车.rar
2020-04-01
php开发的web网站.rar
2019-12-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人