![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
拉钩教育
文章平均质量分 76
小球学前端
没有什么是不可能的,努力吧!
展开
-
【学习笔记】V8垃圾回收策略
V8内存分为新生代对象与老生代对象,各自有各自的回收策略原创 2023-12-13 09:50:51 · 464 阅读 · 0 评论 -
【学习笔记】JavaScript中的GC算法
javaScript的GC垃圾回收策略原创 2023-12-12 15:57:42 · 513 阅读 · 0 评论 -
大前端基础【4-6笔记】Vue3基础
Vue3基础,setUp语法糖,ref、reactive、readonly,shallowReadonly响应式数据设置,侦听器,计算属性详解原创 2022-10-08 14:48:10 · 355 阅读 · 0 评论 -
【零基础学习Webpack】source-map---常用打包模式
source-map配置在devtool选项中,与mode同级1、source-map打包后,会生成js文件对应的.map文件,并且在js文件末尾会添加# sourceMappingURL=index.bundle.js.map2、hidden-source-map打包后,会生成js文件对应的.map文件,但在js文件末不会添加与之对应的.map文件3、inline-source-map打包后,不会生成js文件对应的.map文件,会在js文件末尾追加映射信息:可以定位到錯誤的位置。//#原创 2021-10-26 10:11:21 · 548 阅读 · 0 评论 -
【零基础学习Webpack】webpack不同环境打包
Webpack区分环境打包1、通过环境变量区分webpack --env.productionwebpack.config.js中判断env打包命令:webpack --env=productionmodule.exports = (env, argv) => { if(env.production){ //生产环境的配置 }else{ //开发环境的配置 }}2、通过不同的配置文件区分cnpm install webpack-merge -D创原创 2021-10-22 16:45:13 · 1104 阅读 · 0 评论 -
【零基础学习Webpack】资源模块,webpack-dev-serve代理配置
1、webpack打包前清除上次打包文件安装: cnpm install clean-webpack-plugin -D配置文件中插件引入: const { CleanWebpackPlugin } = require('clean-webpack-plugin')插件配置:plugins: [ ..... // 打包之前,先删除历史文件 new CleanWebpackPlugin() .....]2、资源模块资源模块是一种模块类型,它允许使用资源文件,无需配置额外的loa原创 2021-10-22 11:26:25 · 238 阅读 · 0 评论 -
【零基础学习Webpack】webpack打包JS、图片
通过上一篇博文【零基础学习Webpack】webpack简介,打包css、html我们已经了解了webpack如何打包css以及html,接下来我们一起来了解webpack如何打包编译js1、Webpack编译JS默认情况下,webpack可以识别JS并进行打包,这里所说的打包JS,其目的如下:目的:将ES6+转成ES5,从而保证,JS在低版本浏览器的兼容性。安装:cnpm install babel-loader @babel/core @babel/preset-env -Dbabel-l原创 2021-10-21 17:55:42 · 220 阅读 · 0 评论 -
【零基础学习Webpack】webpack简介,打包css、html
Webpack1、功能将多个文件合并打包,减少http的请求次数,从而提高效率对代码进行编译,确保浏览器兼容性对代码进行压缩,减少文件体积,提高加载速度检测代码格式,确保代码质量提供热更新服务,提高开发效率针对不同环境,提供不同的打包策略2、发展历史2012年3月10号,Webpack诞生。2014年2月-Webpack1;2016年12月-Webpack2;2017年6月-Webpack3;2018年2月-Webpack4;2020年10月-Webpack53、核心概念入口:原创 2021-10-20 17:21:06 · 238 阅读 · 0 评论 -
大前端基础【5-1笔记】react路由、嵌套路由、重定向、路由守卫、懒加载,,,你要的这里都有
1、路由基本使用安裝模块cnpm install react-router-dom -S index.js中引入import { HashRouter } from 'react-router-dom'ReactDOM.render( <React.StrictMode> <HashRouter><App /></HashRouter> </React.StrictMode>, document.getElemen原创 2021-08-28 09:55:08 · 235 阅读 · 0 评论 -
大前端基础【5-1笔记】React框架基础
ReactReact是facebook退出的用于构建用户界面的前端JS框架,使用组件构建用户界面组件:就是一块区域,包含了html、css及Javascript组件开发的优势将一个庞大负责的应用程序拆分成多个独立单元组件之间互相独立,有利于应用程序的维护组件可以服用,一次编写多地复用1、基于Webpack搭建1、package.json{ "name": "code", "version": "1.0.0", "description": "", "main": "in原创 2021-08-03 11:40:49 · 235 阅读 · 0 评论 -
大前端基础【4-2笔记】Vue Router详解
Vue RouterVue Router是vue.js官方提供的一个插件,用来快速实现单页应用.1、单页应用SPA(Single Page Application)单页面应用程序,简称单页应用.指的是网站中"所有"功能都在单个页面中进行呈现.例如:后台管理系统\移动端\小程序等.优点前后端分离开发,提高了开发效率业务场景切换时,局部更新结构用户体验好,更加接近本地应用.缺点不利于SEO初次首屏加载速度比较慢页面复杂度比较高2、前端路由前端路由,值得是URL有内容间的映射关系原创 2021-06-23 11:13:00 · 168 阅读 · 1 评论 -
大前端基础【4-2笔记】Vue.js组件
Vue.js组件组件用于封装页面的部分功能,将功能的结构、样式、逻辑代码封装成整体.1、组件基础本质上,组件是可复用的Vue实例,所以它们可与new Vue接收相同的选项,例如data,methods以及生命周期钩子.仅有的例外是没有像el这样根实例特有的选项,1.1 命名规则kebab-case:‘my-components’PascalCase: ‘MyComponents’注意:无论采用哪种命名方式,在DOM中都只能有kebab-case可以使用.<div id="app"&原创 2021-06-21 16:48:08 · 142 阅读 · 0 评论 -
大前端基础【4-1笔记】Vue进阶语法
内容来源:拉勾教育"前端就业集训营"二期1、自定义指令1.1 全局指令指的是被任意vue实例和组件使用的指令,语法如下,例子是定义了一个focus的指令,注意,使用的时候需要添加v-:<div id="app"> <input type="text" v-focus></div> Vue.directive("focus", { inserted(el){ console.log(el); el.focus(); }}).原创 2021-05-20 10:27:50 · 106 阅读 · 0 评论 -
大前端基础【4-1笔记】事件和表单处理
事件与表单处理1、事件处理v-onv-on指令用于进行元素的事件绑定,例如:点击按钮会更新p标签内部的值,简写方式@click<div id="app"> <p>{{content}}</p> <button v-on:click="content='新内容'">123</button> <button @click="content='新内容'">123</button></div>v原创 2021-04-25 10:58:12 · 139 阅读 · 0 评论 -
大前端基础【4-1笔记】Vue基础指令
传统网页开发步骤请求数据------->根据数据生成网页结构------->监听用户操作,变化元素变化------->发送服务器请求------->更新结构(用户点击新增,删除等)传统网页开发缺点DOM操作频繁,代码繁杂。DOM操作与逻辑代码混合,可维护性差不同功能区域书写在一起,可维护性低模块之间的依赖关系复杂Vue.js简介解决上述问题,渐进式JavaScript框架,官方网站:https://cn.vuejs.org/1、Vue.js核心特性1、数据驱原创 2021-04-21 11:26:51 · 131 阅读 · 0 评论 -
大前端基础【3-2笔记】webpack优化
优化线上环境注重运行效率,开发环境注重开发效率。针对这个问题,webpack4推出了模式(mode)的用法。webpack建议我们为不同的工作环境创建不同的配置。1、不同环境下的配置1、配置文件根据环境不同导出不同的配置1、定义主要的config: const config = { mode: 'none', entry: './src/main.js', output: { filename: 'bundle.js', path: path.joi原创 2021-04-21 11:26:04 · 324 阅读 · 0 评论 -
大前端基础【3-2笔记】模块化
内容输出:拉勾教育大前端就业急训营2期一、模块化概述模块化是一种思想。模块化是主流的代码组织方式,通过把复杂代码按照功能的不同划分为不同的模块,单独进行维护的方式提高开发效率,降低维护成本。二、模块化演变过程Stage1-文件划分方式将每个功能及状态数据单独存放到不同的文件中,约定每个文件都是独立的模块,使用的时候就是将模块引入到页面中,一个script标签对应一个模块,然后再代码中直接调用全局成员(变量或函数)缺点:污染全局作用域命名冲突Stage2-命名空间方式每个模块只暴露.原创 2021-03-26 15:29:45 · 407 阅读 · 0 评论 -
大前端基础【3-1笔记】Node.js
内容输出:拉钩教育node.js官网链接:https://nodejs.org/zh-cn/node.js不是一门语言,也不是javaScript框架,是除了浏览器之外,可以运行javaScript代码的环境1、Node.js下运行JavaScript(1)脚本运行,node xx.js(2)交互模式,node + 回车打开交互模式,js代码运行代码,.exit退出交互模式2、全局对象Node.js下的全局对象是global在交互模式下,声明的变量和函数都属于global,例如var .原创 2021-03-25 09:16:54 · 205 阅读 · 0 评论 -
大前端基础【3-1笔记】Gulp自动化构建
Gulp1、Gulp与npm scripts两者都能实现自动化构建Gulp语法简单,语法就是JavaScript语法。npm script接近shell脚本Gulp生态完善,构建效率高2、Gulp基本使用官网:https://gulpjs.com/1.安裝npm install gulp-cli -gnpm install gulp -D2、创建gulpfile.js(项目根目录)// 创建gulp函数const task1 = (cb) => { console.l原创 2021-03-24 23:50:55 · 171 阅读 · 1 评论 -
大前端基础【2-6笔记】Ajax常用库及XML2.0新特性
内容输出:拉钩教育Ajax常用库jQuery中有一套专门针对Ajax的封装,功能十分完善。学习网站:https://www.w3school.com.cn/jquery/index.asp1、$.ajax( )参数是配置对象,对象属性如下:常用选项参数介绍:参数名说明url请求方法,默认为 getdataType服务端响应数据类型contentType请求体内容类型,默认 application/x-www-form-urlencodeddata.原创 2021-03-15 11:56:16 · 220 阅读 · 0 评论 -
大前端基础【2-6笔记】Ajax基础
免费数据接口:http://jsonplaceholder.typicode.com1、体验Ajax// jQuery中的Ajax方法 $.ajax({ url: 'http://jsonplaceholder.typicode.com/users', method: 'GET', dataType: 'json', //传参,最终请求地址为:http://jsonplaceholder.typicode.com/users?id=原创 2021-03-12 15:26:54 · 96 阅读 · 0 评论 -
大前端基础【2-5笔记】jQuery
内容输出:拉钩教育前端急训营jQuery对象1、jQuery对象(1)通过$()方法获取到的对象是JQ对象。(2)获取的是一组HTML元素,会进行批量操作。(3)是一个类数组对象,内部包含所有的获取的原生js对象,以及大量的jQuery的方法和属性。 let p = $("p"); console.log(p.size()) //获取长度 console.log(p.length) //获取长度2、jQuery对象与原生js对象(1)jQuery对象不能使用原生js对象.原创 2021-03-10 09:38:45 · 149 阅读 · 0 评论 -
大前端基础【2-5笔记】正则表达式
正则表达式:用于匹配某种规则的表达式,通常被用来检索,替换符合某个规则的文本,正则表达式也是对象,是一种索引类型给定的字符串是否符合正则表达式的过滤逻辑(匹配)可以通过正则表达式,从字符串中获取我们想要的特定部分(提取)强大的字符串替换能力(替换)1、创建2种方式进行创建 //正则字面量 var reg = '/abc/'; //通过构造函数创建 var reg2 = new RegExp("abc");2、字符串使用正则2.1 split var str = 'ab原创 2021-02-17 18:34:56 · 149 阅读 · 0 评论 -
大前端基础【2-5笔记】call、apply、bind方法详解
call、apply、bind函数内部在调用的时候,this有自己默认的指向准备工作,定义对象obj与函数fun var obj = { name:'12' }; function fun(a, b){ console.log(this); console.log(a+b); return a+b; }1、call1、功能:可以指定函数的this,可以执行函数并传参。2、参数:第一个参数:this指向的对象,第二个参数及以后是函数的实参。3、返原创 2021-02-17 10:37:59 · 149 阅读 · 0 评论 -
大前端基础【2-5笔记】面向对象编程
对象对象是抽象的概念,可以简单的理解为:数据集和功能集;定义:无序属性的集合,其属性可以包含基本值,对象或者函数。1、特性封装性、继承性、多态性2、设计思想抽象出Class(构造函数)根据Class构造函数创建instance(实例)指挥Instance得到结果3、创建方式1、new Object() 构造函数 var obj = new Object(); obj.name = 'zs'; console.log(obj);2、对象字面量 {}var obj2 =原创 2021-02-16 18:13:38 · 111 阅读 · 1 评论 -
大前端基础【2-3笔记】DOM
1、自定义属性操作获取自定义属性需要使用getAttribute()//元素<div id="person" age="10" sex="男">我是皮特</div>//JS<script> var person = document.getElementById("person"); // 固有属性可以直接打点调用 var id = person.id; //自定义属性需要使用getAttribute() var age = person.原创 2021-01-24 15:33:29 · 1605 阅读 · 5 评论 -
大前端基础~flex基础及布局
flex布局传统布局:兼容性号布局繁琐局限性,不能在移动端很好的布局flex布局:操作简单,布局极为简单PC端浏览器支持情况较差IE11或更低版本不支持如何选择:1、如果是PC端页面布局,选择传统布局2、移动端或者是不考虑兼容性问题的PC端网页布局,考虑使用flex布局1、flex布局原理1、flex是flexible Box的缩写,意为“弹性布局”,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。2、当我们为父盒子设置flex布局以后,子元素的fl原创 2021-01-08 10:26:50 · 293 阅读 · 0 评论 -
大前端基础~rem及媒体查询
rem布局em:相对单位,参考的是父级元素的字号大小的倍数,如果是2em表示是字号的2倍rem:相对单位,参考的是根元素html的字号大小的倍数,如果是2rem表示是html元素字号的2倍rem优势:参考元素是html,一个页面中只有一个html元素,可以实现整体控制。1、媒体查询(Media Query):使用@media查询,可以针对不同的媒体类型定义不同的样式@media可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面1.1原创 2021-01-08 10:25:06 · 460 阅读 · 0 评论 -
大前端基础~移动开发基础
移动开发基础注意移动端浏览器我们主要对webkit进行兼容我们现在开发的移动端主要针对手机端开发现在移动端碎片化比较严重,分辨率和屏幕尺寸大小不一学会用谷歌浏览器模拟手机界面以及调试1、视口视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口、理想视口移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽想要理想视口,我们需要给我们额移动页面添加<meta>标签标准的viewport参数设置视口宽度和设备保持一致视口默认缩放比例为0不原创 2021-01-08 10:22:10 · 161 阅读 · 0 评论 -
CSS核心样式【1-2笔记】H5+C3新特性
CSS核心样式1、font-weight作用:设置文字是否加粗显示。属性名:font-weight,属于 font 属性的一个单一属性。属性值有两种方式:单词类型、数字类型。单词类型:默认normal,bold(加粗)、bolder(更粗)、lighter(更细)数字类型:100-900 之间的整百数字。数字越大,文字显示越粗。其中 400 等价于 normal,700 等价于 bold。2、font-style作用:设置文字是否斜体显示。属性名:font-style,属于 font原创 2020-12-12 09:06:32 · 455 阅读 · 0 评论 -
大前端~Nuxt.js基础
NuxtJS基础一、介绍官网:https://nuxtjs.org/Nuxt.js是基于Vue.js生态的第三方开源服务器渲染框架,帮我们轻松的使用vue.js技术栈构建同构应用,主要关注的UI页面渲染二、基础路由地址:https://zh.nuxtjs.org/guide/routingNuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。假设 pages 的目录结构如下:pages/--| user/-----| index.vue-----|原创 2020-10-28 23:14:41 · 300 阅读 · 1 评论 -
大前端~服务器渲染
一、传统的服务端渲染最早期,Web 页面渲染都是在服务端完成的,即服务端运行过程中将所需的数据结合页面模板渲染为HTML,响应给客户端浏览器。所以浏览器呈现出来的是直接包含内容的页面。在今天看来,这种渲染模式是不合理或者说不先进的。因为在当下这种网页越来越复杂的情况下,这种模式存在很多明显的不足:应用的前后端部分完全耦合在一起,在前后端协同开发方面会有非常大的阻力;前端没有足够的发挥空间,无法充分利用现在前端生态下的一些更优秀的方案;由于内容都是在服务端动态生成的,所以服务端的压力较大;原创 2020-09-26 18:04:05 · 254 阅读 · 0 评论 -
大前端~vue组件间通信方式
组件间通信方式父组件给子组件传值子组件给父组件传值不相关组件传值1、父组件给子组件传值//父组件<template> <div id='app'> <child title="我是父组件传递的title"/> </div></template><script>import child from './child'export default { components: { c原创 2020-09-20 13:57:00 · 180 阅读 · 0 评论 -
大前端~令人头大的this问题总结
this问题举例总结1、首先this指向谁,跟如何定义没关系,而是指向他的调用者,例如下边的例子,this指向谁?答案是:不确定,因为不知道调用者是谁。function foo(){ console.log(this)}foo() //全局作用域(因为运行环境不一样,所以不可单纯理解为windows,而是指向全局对象)use strictfoo() // undefined 严格模式下,指向undefined2、对于下述代码,this的指向const obj1 = { fo原创 2020-09-12 12:08:05 · 179 阅读 · 0 评论 -
大前端【3-2】Vue响应式原理简述
数据响应式是指,当数据发生变化自动更新视图,不需要手动操作dom,第一步、入口,initState()vm状态的初始化,整个响应式是从init方法中开始的,在init方法中,调用initState方法初始化状态,在initState方法中调用initData(),将data属性注入到vue实例上,并且调用observe()将其转化为响应式对象,observe是响应式的入口第二步、observe(value)位于src/core/observer/index.js,首先判断value是否是对象,如果不原创 2020-09-09 23:39:04 · 371 阅读 · 0 评论 -
大前端【3-2】简述Vue首次渲染过程
第一步、Vue初始化,实例成员、静态成员首先进行vue的初始化,即初始化实例成员及静态成员.第二步、new Vue()初始化结束以后,调用vue的构造函数new Vue(),在构造函数中调用this._init()方法第三步、this.init()this.init()相当于整个项目的入口,在这个方法中,最终调用vm.$mount()第四步、vm.$mount()这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的,核心作原创 2020-09-09 23:38:10 · 692 阅读 · 0 评论 -
大前端【3-1-3笔记】Virtual DOM 的实现原理
Virtual DOM 的实现原理了解什么是虚拟DOM以及虚拟DOM的作用Snabbdom的基本使用Snabbdom的源码解析一、虚拟DOM1、什么是虚拟DOMVirtual DOM (虚拟DOM),是由普通的JS对象来描述DOM对象,因为不是真实的DOM对象,所以叫虚拟DOM2、为什么使用虚拟DOM手动操作 DOM 比较麻烦,还需要考虑浏览器兼容性问题,虽然有 jQuery 等库简化 DOM 操作,但是随着项目的复杂 DOM 操作复杂提升为了简化 DOM 的复杂操作于是出现了各种原创 2020-08-18 22:54:37 · 241 阅读 · 0 评论 -
大前端【3-1-2笔记】响应式原理
一、回顾1、数据响应式数据模型仅仅是普通的JavaScript对象,当我们修改数据时,视图会进行更新,避免了繁琐的DOM操作,提高开发效率2、双向绑定数据改变,视图改变;视图改变,数据改变;可以使用v-model在表单元素上创建双向数据绑定3、数据驱动数据驱动是vue最独特的特性之一,开发过程中只需要关注数据本身,不需要关心数据如何渲染到视图。二、响应式原理当我们吧一个普通的JS对象传入vue实例作为data选项,vue将遍历此对象所有的属性,并使用Object.defineProp原创 2020-08-18 22:53:06 · 262 阅读 · 0 评论 -
大前端【3-1-1笔记】手写Vue Router
1、Hash模式与History模式二者的存在表现形式和原理上的区别1、表现形式的区别Hash:https://api.aibianxian.net/igameh5/#/detail/213?token=123,链接中带有#号History: https://api.aibianxian.net/igameh5/detail/213/1232、原理区别Hash:基于锚点,以及onHashChange事件,通过锚点的值作为路由地址,当地址发生变化后,触发onHashChange事件,然后根据路径决原创 2020-08-02 16:01:05 · 285 阅读 · 0 评论 -
大前端【2-2练习】模块化开发
模块化开发作业1、Webpack 的构建流程主要有哪些环节?如果可以请尽可能详尽的描述 Webpack 打包的整个过程。项目中要有文件:webpack.config.js,它是运行在nodeJs中的一个文件,需要根据commonJs规范来编写代码,文件导出一个对象,我们根据导出的对象完成一系列配置。构建流程webpack启动的时候,会加载entry配置的入口文件,递归解析entry依赖的所有module,按照module.rules的规则进行匹配转化,对Module进行转换后,再解析出当前Modul原创 2020-07-29 13:30:48 · 426 阅读 · 0 评论