- 博客(21)
- 收藏
- 关注
RSS订阅原创 javascript中的垃圾回收机制
javascript中的垃圾回收历史有两种，一种是最常用的标记清除，一种是不常用的引用计数清除法。标记清除标记清除是现代浏览器最常用的垃圾回收方式，原理是：当上下文有变量进入的时候就为它添加一个标记，这样整个程序执行时每一个创建的变量都会被添加标记。当变量离开上下文时也会被加上离开上下文的标记。然后当垃圾回收进程执行时，会把当前上下文的所有变量跟被引用的变量去除标记，这样剩下的有标记就都是不被引用也不被使用的变量了，这样就可以做内存清理了，销毁带标记的值并回收内存。引用计数清除这种计数方式在早期浏
2020-09-29 07:59:58
257
4
原创 进程与线程
并行处理计算机中的并行处理就是可以同一时刻处理多个任务，比如我们要计算1-2，2-3，3+5这三个表达式并输出。建立任务时可以拆为4个任务，第一个1-2，第二个2-3，第三个3+5，第四个，输出上述结果。在单线程中，我们需要一步一步执行上述结果，总共要执行4步。再多线程中，我们可以使用三个线程将前面三步同时执行，然后再执行最后一步，这样的话我们只需要两步就可以完成。这里我们就能看出来，并行处理能大大提升我们的执行效率。多线程可以提升效率，但是线程不能单独存在，它依赖于进程，由进程进行启动与管理。进程
2020-09-03 09:28:35
165
原创 符号类型(symbol)
Symbol是ES6新增的一种数据类型，用以标识独一无二的类型，所有的Symbol实例都是独一无二的Symbol的使用方式Symbol跟其他类不同，生成实例不需要使用 new 关键字，使用 new 关键字会报错，可以接受一个字符串作为Symbol的入参，也可以不传参直接生成，如下let sm = new Symbol() // TypeError: Symbol is not a constructorlet sm1 = Symbol()console.log(sm1) // Symbo.
2020-09-02 22:22:23
2481
原创 字符串模板标记函数
字符串模板ES6新增的字符串定义方式，可以通过 `` 配合${} 来进行变量的嵌入，如下示例let name = '张三'let age = 24// 常规定义字符串的方式let str = '我的名字叫' + name + ', 我今年' + age + '岁了'// 字符串模板定义let str1 = `我的名字叫${ name },我今年${ age }岁了`console.log(str === str1) // true模板标记函数模板标记函数的定义跟普通函数一致
2020-09-02 22:21:40
848
原创 script不为人知的标签属性
普通引用js加载与执行都会阻塞页面渲染与执行，等到js加载并执行完成后才会继续页面的渲染asyncjs加载不会阻塞页面渲染，js加载后就会立即执行，执行时会阻塞页面渲染，有多个async的文件时，跟引入的顺序无关，谁先加载完就执行谁deferjs加载不会阻塞页面渲染，js加载后不会立即执行，等页面渲染完成后才执行，在 DOMContentLoaded 事件之前执行，有多个 defer 文件时，规范应该是按引入的顺序执行，但实际情况下并不一定按原有顺序执行，所以多个 defer 引入需注意
2020-09-02 22:20:50
519
原创 react hooks下封装通用redux
redux我们常用来做全局状态管理，一般我们都会按功能模块来新建相关的action，reducer然后再使用combineReducers来将其组合导出，这样的话就实现了模块的划分，让我们更方便项目的管理。但是在某些情况下，我们想要一个通用的redux管理，比如一些特别小，但是又必须要用到的场景，比如我们现在新建了一个chat模块用来管理聊天相关的redux，新建了一个menu模块来管理我们的菜单模块，新建了一个number模块用来管理我们的数据状态，但是这时候我想要对顶部导航栏的显示与隐藏添加一个redu
2020-07-14 19:24:07
487
原创 react hooks 下使用redux
reduxredux是近年来javascript中火热的状态管理容器，提供可预测的全局状态管理。在大型的应用中我们常采用redux来进行状态管理，redux的基本使用方式如下使用redux，我们先要进行action的编写，action一般由type与其他相关数据构成，下面就是简单的两个actionconst INCREMENT = 'INCREMENT'const DECREMENT = 'DECREMENT'// 数字增加action{ type: INCREMENT, payload:
2020-07-14 18:00:13
6111
1
原创 从零搭建一个react-hooks项目（二）
上一篇搭建了基本的webpack项目，可以支持react，less的基本使用，但是没有考虑到项目中的实际情况，例如生产环境的代码混淆，代码压缩，开发环境的热启动等。下面我们就针对开发与生产环境的不同需求，对webpack进行下一步的配置生产环境的配置与开发环境的配置有很多的不同点，所以我们需要分别建对应的配置文件，在根目录下分别创建 webpack.prod.js（生产配置） 与webpack.dev.js（开发配置）然后在package.json中的scripts里新建两个命令，分别是 “buil.
2020-07-06 14:32:05
810
原创 从零搭建一个react-hooks项目（三）
从零搭建一个react-hooks项目（三）上一篇我们配置了项目相关，包括代码压缩混淆，开发生产配置抽离，图片与文字的引入使用等接下来我们就配置一下react-router，react-redux与typescript配置之前我们先补充一下webpack的部分配置，用于方便我们的开发在webpack.common.js中配置webpack的查找规则，也就是resolve，如下...module.exports = { entry: { ... }, module: {
2020-07-06 14:31:02
883
原创 从零搭建一个react-hooks项目（一）
从零搭建一个react-hooks项目（一）最近有打算仿vue-admin项目构造一个react的项目，不引用官方脚手架，从webpack开始配置一套基于react,redux,typescript的项目，并实时记录一下项目中的一些配置情况首先搭建一个基本的webpack环境webpack项目搭建前置基础，电脑有安装node环境，可以使用npm工具新建文件夹，命名项目名称（react-admin）,进入文件夹，使用命令 npm init ，然后一路确定生成package.json文件web
2020-06-16 17:48:55
3343
原创 javascript实现栈
栈栈是我们经常听到的数据结构，拥有后入先出的特性，可以理解为存放箱子的过程，存的时候后来的都放到先来的上面，取得时候也是从上面往下取，因为上面都是后来的箱子，所以会被先取出来JavaScript并没有栈这个数据类型，所以需要我们手动来实现，因为要涉及到一堆数据的存储，并且有先后顺序，还能实现存入与取出，最理想的实现数据类型自然就是我们的数组了，下面我们来实现一下栈首先定义一个栈类，应该拥有...
2019-12-25 23:20:57
163
原创 字符串模板的实现
字符串模板的实现字符串模板是针对大批量、多频率操作dom的解决方案，比如我们要根据数据动态创建一个多嵌套的元素并将其插入到页面中，如果我们采用常规创建dom元素的方式进行插，代码量会极其庞大，下面就是常规方式实现的功能// 源数据let data = { data: { li: [ { span: '我是span', strong:...
2019-11-01 16:14:54
1282
原创 事件绑定的两种优化方式
事件绑定的两种优化方式事件绑定在我们的项目中是经常存在的，但因为各浏览器对事件绑定的支持度不同，使我们不得不写一个兼容函数来实现事件绑定，常规的写法如下function on(dom, type, fn){ if(document.addEventListener) { // IE9以上及主流浏览器 dom.addEventListener(type, fn, false) ...
2019-11-01 16:14:01
214
原创 Storage工具类的封装
Storage工具类的封装日常开发中我们都会涉及到前端数据的存储，对一些需要长期保存在客户端的数据，我们通常会采用浏览器提供的localStorage对象，简称Storage对象。由于所有的页面处于同一个浏览器环境下，所以各个开发工程师所存储的Storage数据可能会出现同名情况，这样就会相互覆盖相互影响，所以为了解决这一问题，我们需要每个开发者都对自己的存储数据进行前缀命名好避免数据的污染...
2019-11-01 16:13:16
1048
原创 jQuery选择器的简单实现
jQuery选择器的简单实现jQuery是前几年前端开发中的老大哥了，而我们最喜欢的也是他提供的选择器跟链式调用的方法了，最近在看了原型与原型链之后也是有点简单的想法，想尝试着实现以下jquery的选择器首先需要构建一个函数A可以接受一个id名，返回一个新的对象，而且对象具有jquery提供的一系列方法，所以我们可以构造一个拥有这些方法的B对象并返回 function A(select...
2019-11-01 10:46:46
543
原创 采用迭代器形式封装轮播图对象
采用迭代器形式封装轮播图对象轮播图是我们开发中经常需要实现的一个小功能，但是应用于不同的场景需要对应不同的效果，有的需要淡入淡出，有的需要左侧划入，有的则需要上一张下一张的按钮如果针对每个效果都要重新实现的话就会做太多的无用功，所以我们可以看看轮播图的共同点，然后封装一个迭代函数来帮助我们处理轮播图轮播图都会接收一个数组作为图片的来源，轮播中我们可能会遇到上一张下一张的显示，所以我们对上一...
2019-11-01 10:45:22
127
原创 JavaScript中的设计模式——工厂模式
JavaScript中的设计模式——工厂模式在我们的项目开发中会定义很多的类，当协作开发时，每个人都有可能定义很多的类，若是不对每个人或者每一种类进行管理的话，开发中对类的使用将会极其困难，而工厂模式就是对类进行管理的一种模式工厂模式一般有以下几种，分别对应不同的使用场景简易工厂模式简易工厂模式：不去关心子类的创建过程，只是提供一个函数向外提供他们想要的子类即可该模式就是单纯的对同...
2019-10-16 15:08:51
130
原创 js中的继承（二）
js中的继承（二）原型式继承原型式继承：原型式继承可以根据现有对象创建一个新的对象，并且不用显式的创建一个新的自定义类型对象（道格拉斯说的）。这也就是原型式继承的作用，创建一个继承某对象属性并可进行拓展的的新对象。原型式继承采用的其实还是类式继承的原理，只不过不会显式的构建一个对象子类，而是用一个空的构造函数类来做过渡类，然后把被继承的对象设置为过渡类的原型对象，然后返回一个过渡类的实例，...
2019-10-15 22:51:49
102
原创 js中的继承与实现
js中的继承（一）之前也写过一篇关于js继承的一篇文章，不过是在刚开始了解继承的时候写的一篇，看了很多别人的博客，似懂非懂的情况下写了那篇，最近再看js设计模式的时候再次看到了它，也想比较详细的再写一篇因为js中没有类，所以一般会以函数内部使用this赋值属性与方法的形式使函数具有类的功能，作为与普通函数的区分，我们会将这一类函数的首字母大写来表明这是一个类继承就是让继承类具有被继承类的属...
2019-10-14 23:44:16
117
原创 js中new的原理与实现
new的原理与实现在javascript中我们经常看到在实例化某个类的时候都会在构造函数前面加一个new调用函数来获取我们的实例，但却没有想过new这个操作符在这里面做了什么，是如何生成的实例，所以这段时间我也大概了解了下new的工作原理，并随手写一下自己的感悟原理构造函数实例都具有该构造函数内的共用属性与方法，同时也会拥有构造函数原型对象上的方法，所以构造函数生成实例其实会经历三个步...
2019-10-14 21:37:32
303
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人