- 博客(52)
- 收藏
- 关注
RSS订阅原创 Rollup和 parcel入门
Rollup概述Rollup也是一款ES Module（ JavaScript 模块 ）的打包器，它可以将项目中散落的模块打包成整块的代码。从而使这些划分好的模块可以更好的运行在浏览器环境和 nodeJs 环境。Rollup 与 webpack 类似，但相比于webpack ，Rollup 小巧的多，因为在配合插件的使用下，webpack 几乎可以完成开发中 前端工程化的绝大部分工作。而Rollup 就只是一款ESM的打包器。 提供一个充分利用ESM各项特性的高效打包器 。Rollup快速上手安
2021-08-16 21:39:38
398
1
原创 webpack4入门
webpack作为目前最主流的前端模块打包器，提供了一整套前端项目的模块化方案，而不仅仅局限于只对JS 的模块化.目前的webpack 非常受欢迎，基本上覆盖了绝大多数现代化的web应用项目的开发过程.模块打包工具的由来ES Module存在环境兼容问题模块文件过多，网络请求频繁所有的前端资源都需要模块化新特性代码编译模块化Javascript打包支持不同类型资源的模块模块打包工具概要模块打包工具（零散的文件打包到一起）模块加载器 ( 打包过程中通过 loader 对一些文件进行
2021-08-16 16:02:21
486
原创 模块化开发
模块化演变过程最早时期，JS的模块化就是基于文件划分的方式进行 ，完全依靠于约定，项目体量过大后就无法保证了。命名空间方式 ：约定每一个模块暴露一个全局对象，相当于给对象内部的成员提供了命名空间（没有私有空间，模块成员在外部依然可以被访问到，模块依赖关系没有被解决）立即执行函数：将模块中的成员放在函数提供的私有作用域中，想要暴露出来的成员可以挂载到window对象上面。其他的私有成员通过闭包的方式去访问。//这个立即执行函数的参数可以作为依赖声明去使用，这样模块之间的依赖关系就变得更加
2021-08-16 15:20:54
545
原创 封装工作流
接下来考虑一些gulpfile的复用问题，因为如果涉及到开发多个同类型的项目，那么我们这个自动化构建工作流应该是一样的。就面临着复用gulpfile的问题。提取一个可复用的自动化构建工作流Gulp是一个自动化构建工作流的一个平台；gulpfile帮我们提供构建任务。Gulpfile + Gulp = 构建工作流Gulpfile + Gulp CLI = zce-pages具体做法就是创建一个模块，然后把这个模块发布到npm仓库上面，最后在项目中使用这个模块就可以了。提取gulpfile
2021-08-01 01:49:53
254
原创 Gulp入门
Gulp作为当下最流行的前端构建系统，其核心特点就是高效，易用。因为使用Gulp非常简单：现在项目中安装Gulp的开发依赖，然后在根目录添加Gulpfile.js文件用于编写构建任务；然后在命令行终端使用Gulp模块的 cli 去运行这些任务Gulp的基本使用1.初始化package.jsonyarn init2.安装Gulp模块 作为开发依赖 ， 安装gulp的时候会同时安装gulp-cli的模块（也就是说在node_modules下面的bin目录中会有一个gulp.cmd命令后续可以
2021-07-25 22:56:53
207
原创 自动化构建
自动化构建开发行业中的自动化构建 就是把我们开发中写的源代码自动转换成可以在生产环境中运行的代码。一般我们会把这个过程称为自动化构建工作流，作用是让我们脱离运行环境兼容带来的种种问题，在开发阶段使用一些提高效率的语法规格和标准。ECMAScript新语法提高编码效率和代码质量Sass增强css的可编程性模板引擎抽象页面中重复的html通过自动化构建可以将上述不被浏览器支持的特性转换成能够直接运行的代码。浏览器使用sass基本使用安装sass模块yarn add sass --dev
2021-07-11 19:16:02
277
原创 脚手架工具
脚手架概要脚手架的本质作用：创建项目基础结构、给开发者提供项目规范和约定规范和约定：相同的组织结构相同的开发范式相同的模块依赖相同的工具配置相同的基础代码可以通过脚手架快速的搭建特定类型的项目骨架，然后基于这个骨架进行后续开发。像android studio，eclipse这种大型ide，它们创建项目的过程实际上就是一个脚手架的工作流程。前端脚手架：在前端项目创建过程中，由于前端技术选型多样化，也没有一个统一的标准，所以前端方向的脚手架不会集成在某一个ide中，而是一般以一个独立的工
2021-07-05 23:54:27
833
原创 工程化概述
工程化的定义和主要解决的问题前端工程化指遵循一定的规范，通过工具提升效率，降低成本的一种手段。前端日常开发遇到的问题想要使用ES6+新特性，但是兼容性有问题想要使用Less/Sass/PostCss增强css编程性，但是运行环境不能直接支持想要使用模块化的方式提高项目的可维护性，但是运行环境不能直接支持部署上线前需要手动压缩代码及资源文件、部署过程需要手动上传代码到服务器多人协作开发，无法硬性同一大家代码风格，从仓库pull回来的代码质量无法保证部分开发功能开发时需要等待后端服务接口提前完
2021-07-05 20:17:08
1287
原创 JavaScript 性能提升注意点
慎用全局变量我们在日常声明变量时要尽量的使用块级域变量声明关键字来声明变量，尽可能少的使用全局作用域，全局变量定义在全局执行上下文里，且它还是所有作用域的最顶端。如果我们定义变量为全局变量， JavaScript 在查找时都要从块级往上扫一遍直到最顶端才可以找到该变量，所以这样查找的时间消耗就变大了。全局变量在程序执行完毕前会始终存在于上下文执行栈中，直到程序退出。这就还会导致全局变量永远不会被当作垃圾被回收掉，会始终占据内存空间。如果某个局部作用域出现了同名变量则会遮蔽或污染全局因
2021-07-03 11:51:43
188
原创 JavaScript堆栈执行的一些总结
V8引擎执行流程V8引擎是一个JavaScript引擎实现，最初由一些语言方面专家设计，后被谷歌收购，随后谷歌对其进行了开源。V8使用C++开发，在运行JavaScript之前，相比其它的JavaScript的引擎转换成字节码或解释执行，V8将其编译成原生机器码（IA-32, x86-64, ARM, or MIPS CPUs），并且使用了如内联缓存（inline caching）等方法来提高性能。有了这些功能，JavaScript程序在V8引擎下的运行速度媲美二进制程序。V8支持众多操作系统，如
2021-06-30 22:08:09
325
3
原创 如何监控 JavaScript Web 应用内存及内存问题初解
Performance工具介绍GC的目的是为零实现内存空间的良性循环通过使用Performance 可以对当前程序运行时内存变化进行监控，这样就可以在程序出现问题时想办法定位到当前出现问题的代码块。Performance使用步骤：打开浏览器输入目标网址；打开开发人员选项，选择性能；开启录制功能，访问具体页面；执行用户行为，一段时间后停止录制；分析页面中的记录的内存信息。内存问题的体现页面出现延迟加载或经常性暂停--------频繁的GC回收（有一些代码瞬间让内存爆掉了就触发频繁的G
2021-06-28 00:28:33
1610
1
原创 JavaScript性能优化---------垃圾回收
JavaScript性能优化---------垃圾回收我们都知道，随着软件行业的不断发展，性能优化是一个不可避免的话题，那么什么的行为才能算得上是性能优化呢，本质上来说任何一种可以提高运行效率，减少运行开销的行为都可以看作是优化操作。这就意味着软件开发中必然存在着很多值得优化的地方。在前端开发的过程中，性能优化也更是无处不在，例如请求资源时用到的网络，以及数据的传输方式，开发框架等，都可以去进行优化。接下来学习JavaScript本身的优化，具体来说就是从认识内存空间的使用，到垃圾回收方式的介绍，从而
2021-06-27 09:10:45
224
1
原创 TypeSCript 类型系统
原始类型目前JavaScript 中6中原始数据类型：string，number，boolean，null，undefined，symbol。1.string，number，boolean 这三种类型在非严格模式下或者tsconfig.json配置文件"strictNullChecks"等于true,的时候允许为空（可以存放null或者undefined）//字符串类型const a : string = "string" //number类型的变量可以用来存放数字，NaN，inf...
2021-06-22 21:42:27
229
2
原创 JavaScript 的超集 TypeScript
TypeScript概述TypeScript是一门基于JavaScript基础之上的语言。 很多时候也说TypeScript是JavaScript的超集（扩展集）。它是一门完整的编程语言。所谓超集，就是在JavaScript的基础之上多了一些扩展特性，多出来的就是一套更强大的类型系统，以及对ECMAScript的新特性的支持。它最终会被编译为原始的JavaScript。也就是说，使用TypeScript后，就可以使用TypeScript的新特性，以及它更强大的类型系统。完成开发后，再将.
2021-06-22 20:32:12
369
1
原创 JavaScript 类型系统
TypeScript 是一门基于JavaScript之上的一门语言，它重点解决了JavaScript语言类型系统的不足。使用TypeScript可以大大提高代码的可靠程度。接下来学习一下
2021-06-20 00:00:39
257
2
原创 ECMAScript新特性（二）
14. ES2015 PromiseES2015 新出的一种更优的异步编程解决方案，解决了传统异步编程中回调函数嵌套过深的问题。具体可看我的这篇文章：JavaScript 异步编程-------Promise，或你对 Promise 内部实现原理感兴趣，也可以查看这篇文章：JavaScript --手写Promise。15. ES2015 Class在此之前，ECMAScript 通常使用 函数function 以及 原型对象property 来实现类。如今我们能够使用 ES2015 .
2021-06-18 00:56:27
159
2
原创 ECMAScript新特性（一）
1. ECMAScript 与 JavaScript 的关系？ES 通常可以看作是 JavaScript 的标准化语言规范。但实际上JavaScrpit 是ECMAScript的扩展语言。在ECMAScript中只是提供了最基本的语法，通俗点说就是约束了我们的代码该如何编写，例如：如何定义变量和函数，怎么样去实现分支循环语句。它只是停留在语言层面，并不能直接用来完成应用中的实际功能开发。JS 实现了 ES 的语言标准。JS 还在此基础上新增了一些拓展，使得我们可以在浏览器可以操作 DOM/BOM
2021-06-10 09:36:55
313
原创 JavaScript --手写Promise源码
写源码过程中烧脑的问题1：链式调用的时候，如果promise对象then方法的回调函数的返回值的是then方法返回的promise对象，那么这个promise对象的状态将永远为pedding，永远不会被改变！ 所以需要判断then方法的回调函数返回值不能为then方法返回的promise对象。需要判断的这个操作。...
2021-06-09 10:00:50
130
1
原创 JavaScript-----------------Generator 异步方案
前面说过，相比普通的回调函数，promise 可以通过链式调用解决回调嵌套过深的问题。使用promise去处理异步任务的串联执行，它的表现就是 一个then去处理一个异步调用。 最终整体形成一个任务链条，从而实现所有任务的串联执行。但它任然会有大量的回调函数，虽然它们相互之间没有嵌套，但它还是没有达到传统同步代码的可读性。GeneratorES6提供的生成器函数已经学过了，现在看它一个例子：function * foo(){ try{ console.log...
2021-06-04 23:40:55
200
原创 JavaScript 异步编程-------Promise
异步模式对于单线程的 JavaScript 非常重要，同时也是 JavaScript 的核心特点。而回调函数则是 JavaScript 中所有异步编程方式的根基 。如果我们直接使用传统回调方式去处理复杂的异步逻辑，那么我们就一定避免不了大量的回调函数嵌套问题（回调地狱）。1. Promise 是什么？都有哪几种状态？commonJs 社区最早提出和实现，在ECMAScript 2015 被标准化，成为语言规范。并且原生提供了Promise对象。Promise 实际上就是一个对象，用于表示
2021-06-02 23:43:08
245
3
原创 JavaScript 异步编程-----概念
单线程；原因 设计初衷 运行载浏览器的脚本语言，目的实现页面的动态交互，核心就是dom操作，就必须单线程，否则出现复杂的线程同步负责执行代码的xian'c
2021-05-31 22:06:37
93
原创 javascript函数式编程--------总结
总结到这里函数式编程我们就讲完了，下面我们来总结一下，整个函数式编程我们分为四个部分。认识函数式编程也就是函数式编程的概念。函数式编程是一种编程范式，或者说编程思想，他和面向对象编程是同一级别的，我们想要掌握一门编程思想是需要花费很长时间的，我们可以把我们掌握的直接在工作中运用，不需要把所有东西都用函数式来写，因为这看起来太困难了。函数式编程的核心思想是，把运算过程进行抽象成函数，在编程的过程中是面向函数进行编程的。现在我们要学习函数式编程是因为像vue或者react，他们内部都已经使用
2021-05-30 18:45:45
90
原创 javascript函数式编程-------函子（Functor）
我们知道，函数式编程是建立在数学思想上的，比如说我们的纯函数其实就是数学中的函数，那我们要学习的函子也是建立在数学的基础上。那我们在学习函数式编程的过程中还是没有学习如何去控制副作用，因为副作用可以让我们函数变得不纯，虽然副作用不好，但是我们又没有办法完全避免，所以我们应该尽可能的把副作用控制在可控的范围内。我们可以通过函子来控制副作用，当然除了这个之外我们还可以通过函子去控制异常，来进行异步操作等等。Functor（函子）在了解函子之前我们先来说一下容器，容器包含值和值的变形关系，变形关系
2021-05-29 23:28:57
423
原创 javascript函数式编程-------函数组合
函数组合函数组合的概念: 如果一个函数要经过多个函数处理才能得到最终的值，这个时候我们可以把中间这些过程函数合并成一个新的函数。函数就像是数据的管道，函数组合就是把这些管道连接起来，让数据穿过多个管道形成最终结果函数组合默认是从右到左执行进行函数组合时尽量使用只要一个参数的纯函数基本的函数组合我们在使用纯函数和柯里化时很容易写出洋葱代码，h(g(f(x)))，也就是一层包一层的代码，比如我们要获取数组的最后一个元素，然后在转换成大写字母。先调用数组对象的reverse方法反转
2021-05-29 11:35:31
280
原创 javascript函数式编程-------柯里化
接下来看函数式编程中另一个重要概念-----柯里化柯里化承接上文，副作用让checkAge函数变成不纯的函数，接下来我们把不纯的函数改造成纯函数。很简单，把mini变量 放到函数内部，变成局部变量那他就变成一个纯的函数了function checkAge (age) { //纯的，存在硬编码 let mini = 18; return age >= mini;}；checkAge(20); // truemini = 28;checkAge(20); //
2021-05-23 18:19:43
165
原创 javascript函数式编程-------纯函数
前面回顾了函数是一等公民，高阶函数，闭包这些函数相关概念，可以认为它们都是函数式编程的基础。接下来学习函数式编程第一个重要概念，也是函数式编程的核心---纯函数纯函数函数式编程中的函数，指的就是纯函数，纯函数的概念就是对于一个函数来说，使用相同的输入始终会得到相同的输出，而且没有可观察到的副作用。关于副作用我们后面在解释。这里我们只讨论相同的输入始终会得到相同的输出。纯函数其实就是数学中函数的概念，他是用来描述输入和输出的映射关系。比如 y=f(x);我们这里通过数组的两个方法sl.
2021-05-23 15:44:39
200
原创 javascript函数式编程-------概念基础部分（闭包）
闭包函数和其周围的状态的引用捆绑在一起就形成了闭包，简单理解就是 ，一个作用域可以访问另外一个函数内部的局部变量。可以在另一个作用域中（比如全局）调用这个函数内部的函数并访问到该函数作用域中的成员。演示语法首先我们定义一个makeFn的函数，在这个函数中定义一个变量msg，当这个函数调用之后，msg就会被释放掉。function makeFn () { let msg = 'Hello'; console.log(msg);};maknFn();如果我们在m
2021-05-23 01:03:41
115
原创 javascript函数式编程-------概念基础部分
为什么现在还要学函数式编程函数式编程不是用函数来编程，也不是传统的面向过程编程，主旨在于将复杂的函数复合成简单的函数，运算过程尽量写成一系列嵌套的函数调用。要注意区分用函数编程和函数式编程是不同的。函数式编程的思想是对运算过程进行抽象，也就是把运算过程抽象成函数，然后在任何地方都可以去重用这些函数。函数式编程随着react的流行越来越受到关注vue3也开始拥抱函数式编程（vue3对vue2做了很大的重构，而且越来越偏向函数式）函数式编程可以抛弃this打包过程中可以更好的利用tr
2021-05-22 21:43:42
109
原创 nuxtJs留着备用后面学习
客户端渲染和服务器端渲染的最重要的区别就是究竟是谁来完成html文件的完整拼接，如果是在服务器端完成的，然后返回给客户端，就是服务器端渲染，而如果是前端做了更多的工作完成了html的拼接，则就是客户端渲染。...
2021-04-18 22:31:39
60
原创 TypeScript------＞类的类型
类的类型§给类加上 TypeScript 的类型很简单，与接口类似：class Animal { name: string; constructor(name: string) { this.name = name; } sayHi(): string { return `My name is ${this.name}`; }}let a: Animal = new Animal('Jack');console.log(a.sayHi()); // My
2021-03-31 18:49:01
101
原创 TypeScript------＞类型保护
TypeScript能够在特定的区块中保证变量属于某种确定的类型。可以在此区块中放心的引用此类型的属性，或调用此类型的方法。 下面的例子中，因为我们不知道程序运行的时候到底会传入什么样的参数，所以必须在每一处加上类型断言，这显然不是一个理想的方案，代码可读性差，而类型保护就是用来解决这个问题的，它可以提前对类型进行怕判断enum Type {Strong,Week}class Java{ helloJava(){ console.log("hello Java...
2021-03-31 18:48:08
126
原创 TypeScript------＞类型兼容
当一个类型Y可以被赋值给另一个类型X时，我们就可以说类型X兼容类型Y ---------X兼容Y：X（目标类型）= Y（源类型）ts允许我们把一些类型不同的变量相互赋值（虽然再某种程度上讲产生了不可靠行为，但增加了语言的灵活性） 配置项"strictNullChecks":false, null就是字符串的子类型let s:string = "123";s = null类型兼容性的例子广泛存在与接口，函数，类中1.接口兼容性， 体现了ts的类型检查...
2021-03-31 16:26:29
139
1
原创 TypeScript------＞类型断言
类型断言只会影响 TypeScript 编译时的类型，类型断言语句在编译结果中会被删除：所以类型断言不是类型转换，它不会真的影响到变量的类型。类型断言的用途 将一个联合类型断言为其中一个类型 将一个父类断言为更加具体的子类 将任何一个类型断言为any 将any断言为一个具体的类型§类型断言的限制联合类型可以被断言为其中一个类型 父类可以被断言为子类 任何类型都可以被断言为 any any 可以被断言为任何类型 要使得A能够被断言为B，只...
2021-03-30 17:24:25
138
原创 TypeScript------＞类型推断
1.初始化一个变量let a //any类型let b = 1 //number类型let c = [1] //number[] 类型 设置函数默认参数的时候 x被推断为number类型，函数d的返回值类型被推断为number类型let d = (x=1)=> x+12.最佳通用类型推断 ---- 当需要从多个类型中推断出一个类型的时候，ts就会尽可能的推断出一个兼容当前所有类型的通用类型 number和null不兼容，所以c就会...
2021-03-30 16:29:45
153
原创 TypeScript------＞泛型
泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。很多时候我们希望一个函数或者一个类可以支持多种数据类型，有很大的灵活性any类型丢失了一些信息，就是类型之间的约束关系，它忽略了函数的输入参数的类型和函数返回值的类型必须是一致的泛型函数function log<T>(value:T):T{ console.log(value); return value;}// 调用时直接指明T的类型log&
2021-03-26 19:45:23
116
原创 TypeScript------＞类与接口的关系
一个接口可以约束类成员有哪些属性，以及他们的类型1. 类实现接口时，必须实现接口中声明的所有属性，类定义自己的属性就没问题2.接口只能约束类的公有成员,3.接口不能约束类的构造函数interface Human{ name:string; eat():void;}class Wjp implements Human{ constructor(){ this.name = "lalala" } //private name:st.
2021-03-26 16:18:59
115
原创 TypeScript------＞函数的类型
1：函数的声明 （ * 注意，输入多余的或者少于要求的参数，是不被允许的）function sum(x: number, y: number): number { return x + y;} 与接口中的可选属性类似，我们用?表示可选的参数 *注意可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了：function buildName(firstName: string, lastName?: string) { if (lastN...
2021-03-21 19:39:21
230
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人