意林的小站

Be a cool girl ~


  • 首页

  • 分类

  • 归档

  • 标签

  • 项目

  • 关于

Vue.js源码学习 —— 起步

发表于 2020-01-05 | 分类于 Web , Vue

看 Vue.js 源码的重要性不必多说了,无论是出于对技术的好奇,还是想要更好的使用 Vue.js,还是要应付面试,都需要我们沉浸下来好好琢磨一下它的源码。Vue.js 的代码经过了全世界这么多的程序员的审视,代码的设计性、规范性、严谨性等等,一定有很多值得我们学习借鉴的地方,自己在看的时候还是要多用心思考。

我目前找到两份总结的比较系统全面文档,一份是Vue.js技术解密,划分了每一章,可以一目了然我们当下分析的目标是什么。还有一份是Vue技术内幕,真的是带着读着从头开始几乎逐行代码解读。感谢大神们对社区的贡献!但是我们仍有必要整理一份自己分析的笔记,在梳理的过程中,这些知识会逐渐内化成自己掌握的。我们不是在看小说,完全靠读别人的文章会大大减少去思考的机会,最终时间花了,却收效甚微。对我来说,写Demo,然后调试验证,会理解的深一些。后面的系列文章中我也会尽量给出例子,希望你能跟着看下去,并拿例子到浏览器中打断点调试一遍。

这篇文章会先说一下开始看代码前的准备工作,介绍一下 Vue.js 项目的整体结构,然后再讲一下后面会怎样着手看代码。

阅读全文 »

JavaScript中的class

发表于 2019-09-12 | 分类于 Web , JavaScript

这篇文章讲一下ES6新增的特性:class。上一篇文章已经详细的讲了JavaScript中的原型机制,实现继承的两种主要方式,有了这些基础,这篇文章不用啰嗦很长了。我们先通过调试一个例子,看class背后是如何运作的,然后用构造函数模拟实现一下class。最后再盘点一下class与构造函数的区别,避免日后在开发中踩坑。

阅读全文 »

JavaScript中的原型与继承

发表于 2019-09-10 | 分类于 Web , JavaScript

JavaScript是基于原型的语言,对象和它的原型对象之间只是建立了关联,这与基于类的语言完全不同。在基于类的语言中,会把一个对象(“类”)的属性和方法复制到另一个对象(“实例”)中,因为在编译期间要确定这个实例所占内存大小。但是JavaScript又提出了构造函数、new运算符,想往基于类的语言特征上靠,这反而让刚从别的语言过来的开发者感到迷糊。例如,本来想按照类的特征去设计代码,发现没办法设置私有属性。更加让人迷惑的是,铺天盖地的资料跟你讲的是原型范围内的东西,用的术语确是类中的,加大了理解难度。ES6中增加了class,规范了对类的使用。class中的各种特性依然是基于原型的,并没有真的把基于类的语言中的那一套搬过来。

Douglas Crockford 在《JavaScript语言精粹》这本书中讲的特别好,一语中的:

JavaScript是一门弱类型语言,从不需要类型转换。对象继承关系变得无关紧要。对于一个对象来说重要的是它能做什么,而不是它从哪里来。

把重点转移到一个对象能做什么,如何复用其他对象的功能上,一切问题思考起来都变得简单很多。JavaScript中对象和函数的灵活性,使得有很多方式可以达到代码重用的目的。

阅读全文 »

JavaScript中的模块

发表于 2019-08-25 | 分类于 Web , JavaScript

本文将主要介绍一下CommonJS、AMD、CMD,以及ES6 Module,每个部分的讲解足够开始上手使用相应的模块化工具,所以本文会略长,可以直接定位到需要的小节看~

模块系统的演进

本部分内容摘自:https://zhaoda.net/webpack-handbook/module-system.html

模块系统主要解决模块的定义、依赖和导出,先来看看已经存在的模块系统。

script标签

1
2
3
4
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="libraryA.js"></script>
<script src="module3.js"></script>

这是最原始的 JavaScript 文件加载方式,如果把每一个文件看做是一个模块,那么他们的接口通常是暴露在全局作用域下,也就是定义在 window 对象中,不同模块的接口调用都是一个作用域中,一些复杂的框架,会使用命名空间的概念来组织这些模块的接口,典型的例子如 YUI 库。

这种原始的加载方式暴露了一些显而易见的弊端:

  • 全局作用域下容易造成变量冲突
  • 文件只能按照 <script> 的书写顺序进行加载
  • 开发人员必须主观解决模块和代码库的依赖关系
  • 在大型项目中各种资源难以管理,长期积累的问题导致代码库混乱不堪
阅读全文 »

JavaScript中的数据类型

发表于 2019-08-19 | 分类于 Web , JavaScript

本文将主要总结一下JavaScript中获取数据类型的方式,以及数据类型之间的转换规则。

JS中的数据类型

原始值类型:String、Number、BigInt、Boolean、Null、Undefined、Symbol
引用类型:Object

typeof

类型 结果
String ‘string’
Number ‘number’
BigInt ‘bigint’
Boolean ‘boolean’
Null ‘object’
Undefined ‘undefined’
Symbol ‘symbol’
Object ‘object’
Function对象 ‘function’
阅读全文 »

JavaScript中的HTTP请求

发表于 2019-08-15 | 分类于 Web , JavaScript

还记得上大学那会做课程设计,我当时做了一个花卉网站,用java开发的,页面全是用JSP写的,还有那段时间特别流行的用PHP写Web页面。这些页面都是需要跟服务器端的代码部署再同一容器下的,页面中的动态内容都是在服务器端生成的,到了客户端只是展示而已。用这种方式开发网站并没有明确的前后端分工。

2005年AJAX概念的提出改变了这一切,它让客户端可以自行请求API接口,与服务器端交互,并且在不刷新页面的情况下更改网页中的局部内容,AJAX得以实现的核心就是XMLHttpRequest,现在各大浏览器厂商都支持了这一技术。

在MDN上,对Ajax的描述如下:

AJAX是异步的JavaScript和XML(Asynchronous JavaScript And XML)。简单点说,就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON,XML,HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性,也就是说它可以在不重新刷新页面的情况下与服务器通信,交换数据,或更新页面。

你可以使用AJAX最主要的两个特性做下列事:

  • 在不重新加载页面的情况下发送请求给服务器。
  • 接受并使用从服务器发来的数据。

2015年ES6的规范中又提出了Fetch API,结合Promise,可以更加方便地进行HTTP请求了。

本文主要学习总结一下XMLHttpRequest和Fetch的使用,开始吧~

阅读全文 »

JavaScript中的异步编程

发表于 2019-08-10 | 分类于 Web , JavaScript

说一说同步和异步吧,我们的代码通常是顺序执行的,当前的代码块执行完,才会直接执行下一个代码块。如果一个函数正在执行,后面的代码只能等待它执行完才开始执行,这就是同步的。所以如果这个函数要花很长时间才能执行完,就发生阻塞,程序像陷入一种卡死的状态。如果这个函数把耗时时间长的任务丢出去,立马就返回,后面的代码可以接着运行,那这个函数就是异步的。

那这个被丢出去的任务总有执行完的时候,等它执行结束后可能要做一些操作,比如展示数据到界面上。这时JavaScript要怎样来执行异步任务结束后要做的事呢?随着JavaScript的不断发展,目前有这些方式:

  • 回调函数
  • 发布/订阅
  • Promise
  • Generator
  • async/await
阅读全文 »

JavaScript中的提升

发表于 2019-08-02 | 分类于 Web , JavaScript

JavaScript是允许在书写代码时先使用变量,之后再声明该变量,对于函数也是,你可以先使用函数,之后再声明该函数。

变量提升

JS引擎会在解释JavaScript代码之前进行编译,编译的时候就会去声明变量,并确定变量所属的作用域。也就是在执行JavaScript代码之前会将所有变量声明放在作用域的最顶部,但是赋值或其他运行逻辑保持不变(如果变了那还得了…)。MDN中介绍说,变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中,在物理层面不会进行移动。

阅读全文 »

JavaScript中的this

发表于 2019-07-28 | 分类于 Web , JavaScript

JavaScript中的函数,除了在声明时定义的形式参数,还会有两个附件参数:this和arguments。用过面向对象编程的语言对this应该不会陌生,但是JavaScript里this到底指向什么,取决于函数调用的模式。在JavaScript中一共有4中调用模式:方法调用模式、函数调用模式、构造器调用模式、apply(或call)调用模式。在这些模式中this指向各不相同。此外,ES6新增的特性:箭头函数表达式,与普通函数对this的指向处理也不同。

阅读全文 »

JavaScript中的闭包

发表于 2019-07-22 | 分类于 Web , JavaScript

闭包(Closure)有着非常强大的作用,尤其是在像Swift、JavaScript这种可以直接把函数当成值来使用的编程语言中,闭包几乎无处不在。在《JavaScript语言精粹》一书中,作者将闭包列为了JavaScript的优美特性之一,可见理解闭包很重要。在MDN上对闭包的描述如下:

函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。

阅读全文 »
1234…8
意林

意林

78 日志
15 分类
91 标签
GitHub 微博 豆瓣
© 2020 意林
由 Hexo 强力驱动
主题 - NexT.Mist