- 博客(22)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 深入了解浏览器如何渲染页面的原理
这一课时我将结合代码实例为你讲解浏览器渲染页面时的流程和步骤。先来看一个例子，假如我们在浏览器中输入了一个网址，得到了下面的 html 文件，渲染引擎是怎样通过解析代码生成页面的呢？<html> <head> </head> <body> lagou </body></html>从 HTML 到 DOM字节流解码对于上面的代码，我们看到的是它的字符形式。而浏览器通过 HTTP 协议接收到的文档内
2020-07-24 14:50:11
378
原创 使用uniapp进行微信用户信息获取
小程序登录、用户信息相关接口调整说明：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801考虑到近期开发者对小程序登录、用户信息相关接口调整的相关反馈，为优化开发者调整接口的体验，回收wx.getUserInfo接口可获取用户授权的个人信息能力的截止时间由2021年4月13日调整至2021年4月28日24时。所以无法使用wx.getUserInfo来做微信授权了，而新增加了getUse
2021-10-14 16:53:24
1580
原创 个人webpack配置尝试
初始化npm init -ynpm install webpack webpack-cli -D配置入口和出口npm install webpack-dev-server -D自动载入js文件npm install html-webpack-plugin -D使用hash解决缓存问题清除dist目录npm install clean-webpack-plugin -Dcss读取loadernpm install style-loader css-loader less less-loa
2020-11-18 16:04:40
201
原创 eslint私人规范
eslint私人规范rules:{ "no-duplicate-case": 2,//switch中的case标签不能重复 "no-eq-null": 2,//禁止对null使用==或!=运算符 "no-func-assign": 2,//禁止重复的函数声明 "no-mixed-spaces-and-tabs": [2, false],//禁止混用tab和空格 "no-nested-ternary": 0,//禁止使用嵌套的三目运算 "no-redeclar
2020-10-22 09:53:58
180
原创 利用GIT+ESLINT规范代码提交
利用GIT+ESLINT规范代码提交eslintmodule.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/essential', '@vue/standard' ], parserOptions: { parser: 'babel-eslint' }, rules: { //每行之前两个空格 "indent":["error",2,{
2020-10-21 09:58:44
2103
原创 vue 的钩子函数
vue 的生命周期beforeCreate 实例初始化后 进行数据观测及事件的配置created 表示实例已经创建完成和被调用 响应式属性和方法已经配置完成（可以拿到data内的数据）一般在这个函数内进行数据资源的请求–ajax请求beforeMount 挂载前，确定是否设置el选项（vm.$mount），是否有template选项，若有则渲染template，若没有则渲染外部htmlmounted 挂载后，可以获取到DOM元素beforeUpdate 更新前updated 更新后，依
2020-09-22 19:22:07
511
原创 Webpack配置代理跨域
webpack配置跨域服务只要协议、域名、端口号任意一个不相同就无法获取数据。先简单写一个后端服务server.jslet express = require('express');let app = express();app.get('/user',function(req,res){ res.json({name:'jan'})})app.listen(8000,function(){ console.log('port start')})这个时候只要访问http:
2020-09-20 18:51:31
868
原创 Vue常用指令和实例方法（一）
vue实例方法vue中挂载在数组和对象中的数据不是响应式的例如：let vm = new VUE({ data:{ obj:{name:1}, arr:[1,2,3] }})vm.arr[1]=2vm.arr.length =2vm.obj.age = 123这时页面里的{{arr}} {{obj}}在刷新页面时无法更改这是因为js自身的限制如果我们需要去修改数据时应该怎么办let vm = new VUE({ data:{
2020-09-16 12:35:26
705
原创 Webpack之babel处理es6
Webpack处理es6webpack能自动处理import和export，所以很多人认为webpack能自动处理es6，其实不然。只是因为模块打包需要，所以处理import和export，除此之外他并不能转换其他的es6特性。为了能够解析es6，需要为我们的js文件配置一个额外的编译型loader，最常用的就是babel-loader具体做法如下：先安装一下相应的loader：yarn add babel-loader @babel/core @babel/preset-env --dev
2020-09-14 19:11:00
184
原创 Webpack常用资源加载器
资源加载器开源社区提供了非常多的资源加载器，下面我们介绍一些常用的资源加载器文件资源加载器大多数loader都是类似css加载器一样，通过将代码引入到js文件中进行加载，但是有些文件例如图片或者字体是无法通过js的方式去表示的，对于这类的文件需要文件资源加载器，就是fileLoader。根据loader的思想，在用到的地方通过引入的方法导入文件，然后让文件进行加载。import createHeading from './heading.js'import './main.css'impor
2020-09-14 17:37:31
344
原创 快速上手webpack
快速上手webpack从案例上手webpack首先目录结构如下//heading.jsexport default()=>{ const element = document.createElement('h2') element.textContent = 'Hello world' element.addEventListener('click',()=>{ alert('Hello webpack') }) return
2020-09-13 19:35:30
161
原创 柯里化读这一篇就够了
柯里化//普通的纯函数//这里写一个用于判断用户是否成年的普通纯函数function checkAge(min,age){ return age >= min}console.log(checkAge(18,20))console.log(checkAge(18,24))console.log(checkAge(22,24))//这里会发现 18作为一个基准值，经常被调用，那么怎么去减少这个值的调用呢//这里我们可以使用 闭包 和高阶函数内记得技巧--将函数作为返回值fu
2020-07-31 09:35:29
204
1
原创 3分钟Axios入门
Axiosaxios的基本使用axios({ url:"....." method:'get'/* 也可以'post'*/}).then(res=>{ console.log('res')});//axios发送get方式请求axios({ url:"....."; params:{ id:1 /* 进行参数传递，寻找指定数据*/ }}).then(res=>{ console.log('res')});axios send
2020-07-30 16:51:31
209
原创 浅谈纯函数和纯函数的优缺点
纯函数概念纯函数：相同的输入永远只会得到相同的输出，且没有任何可观测的副作用，相当于数学表达式中的y=f(X)loadsh是一个纯函数的功能库，提供了对数组、数字、对象、字符串、函数等操作的一些方法//下面我们从 slice 和 splice 中认识一下到底什么时纯函数const myArray = [1,2,3,4,5,6,7,8,9]console.log(myArray.slice(0,3))//[1,2,3]console.log(myArray.slice(0,3))//[1,
2020-07-30 09:57:50
870
原创 初识高阶函数
函数是一等公民函数可以存储在变量中函数作为参数函数作为返回值在JavaScript中函数就是一个普通的对象（可以通过 new Function()）,我们可以把函数存储到变量或者数组中，他还可以作为另一个函数的返回值。高阶函数（Higher-order function）//高阶函数-函数作为参数//当我们需要对每一个不同的值进行不同的值进行操作时，可以传入一个函数作为参数进行数据处理//这里我们通过模拟forEach来了解函数作为参数function forEach(array,f
2020-07-29 09:36:43
167
原创 从 for..of 到 iterable 迭代接口
for…of循环 在了解for…of循环之前，我们先来回顾一下es6之前的遍历方式。 for循环多用来遍历普通的数组。 for...in多用来遍历键值对。 再有呢是一些对象的遍历方法，例如数组对象的forEach方法。 这些各种各样的遍历方法，都有他们的局限性，es6借鉴
2020-07-28 10:12:28
264
原创 浅谈es6中的Set和Map
Set Set是es6引入的新的数据类型，可以认为是一个集合，他的特点是当中不能存储相同的值。 Set数据结构多用于数组去重处理。const mySet = new Set()//可以通过add的方法添加内容，因为add会返回数据本身，所以可以链式调用mySet.add(1).add(2).add(3)console.log(mySet)//Set { 1, 2, 3 }//也可以通过直接传入值来
2020-07-27 18:09:32
270
原创 js中对于类的基本认识
Class在es6之前，是通过定义函数和函数的原型对象去实现类型//before es6function Person(name){ this.name = name}Person.prototype.say = function(){ console.log(`hi ${this.name}`)}//es6 定义一个Person类型class Person{ constructor(name){ //构造函数 this.name = name
2020-07-26 22:36:01
161
原创 Reflect
Reflect是es6提供的全新的内置对象，属于一个静态类，只能调用方法，不能new出来，Reflect内置了13个方法，Reflect成员方法就是Proxy处理对象的默认实现const obj = { foo:'123', bar:'456'}//在这里，我们new了一个Proxy，在里面并没有任何get方法，那么我们是如何去监听到数据改变呢const proxy1 = new Proxy(obj,{})//其实这两个是完全一样的const proxy2 = new P
2020-07-26 18:11:30
120
原创 浅谈对象和对象扩展方法
对象是我们在es中最常用的数据结构，es6中升级了对象自变量中的语法。 传统的对象自变量要求我们必须在花括号里面使用属性名和属性值，在es6之后，如果属性名和属性值一致的话，可以省略属性值。 传统为对象添加动态属性的话，需要在申明变量之后，通过索引的方式动态添加属性。 在es6之后，用户可以将计算属性写在[ ]内部来赋值动态属性。const bar = '345'const obj={ foo:123, bar, method(){ console.log('method')
2020-07-25 22:34:42
225
原创 模板字符串和标签函数
初识模板字符串 在es5中定义字符串要通过’ '或者" "来表示字符串，而在es6之后新增了模板字符串的方式来表示字符串,通过反引号来标识。const es5 = 'i am string' const es6 = `i also string` 传统的方式里面如果要换行，需要通过\n来表示，而模板字符串可以支持换行。同时还支持通过插值表达式的方式去定义变量。const name = 'tom'const = `hey,${name}` // hey,tom带标签的模板字符串
2020-07-25 16:30:53
943
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人