- 博客(101)
- 收藏
- 关注
RSS订阅
原创 重要文章分类目录
本篇汇总分类已写的文章。原生JavaScriptJavaScript设计模式文章汇总：javascript设计模式一： 单例模式javascript设计模式二：策略模式javascript设计模式三：代理模式javascript设计模式四：迭代器模式javascript设计模式五: 原型模式javascript设计模式六：发布-订阅模式(观察者模式)javascript设计模式七...
2019-03-11 09:43:18
644
原创 前端各知识点梳理(施工中...)
前端各知识点整理JS方面ES1. 讲下作用域的理解作用域是一套用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找的规则。作用域分类：全局作用域函数作用域概念：属于这个函数的全部变量都可以在整个函数的范围内使用及复用，包括在嵌套的函数作用域中也可以使用创建：函数作用域的创建就需要声明一个函数，而声明函数这个行为又有函数声明和函数表达式两种操作方式块作用域概念：{...}块内部创建：在es6版本后，可以通过let和const定义块作用域，典型应用是f
2020-05-14 08:50:34
1060
原创 React基础语法
React语法速查JSX介绍JSX语法中，可以在大括号内放置任何有效的JavaScript表达式。例如2+2、user.firstName或formatName(user)等均是有效的JavaScript表达式。JSX可以通过使用引号，来将属性指定为字符串字面量，也可以使用大括号来在属性值中插入一个JavaScript表达式。class JSXShow extends React.Comp...
2020-03-17 10:15:44
953
转载 js常见功能函数
JS 开发常用工具函数1、isStatic：检测数据是不是除了symbol外的原始数据function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || ...
2019-07-10 10:28:46
1068
转载 ES6语法使用精华
正文1 let 和 constlet 的作用域与 const 命令相同：只在声明所在的块级作用域内有效。且不存在变量提升 。1.1 letlet 所声明的变量，可以改变。let a = 123a = 456 // 正确，可以改变let b = [123]b = [456] // 正确，可以改变1.2 constconst 声明一个只读的常量。一旦声明，常量的值就不能改变。...
2019-07-04 09:06:35
620
原创 socktIo的客户端与nodejs服务器端代码示例
socketIo客户端代码，客户端需引入socket.io-client：import io from 'socket.io-client';//服务端js在 private_materials/node/test17/service.js// WebSocket协议-Socket.io 客户端API https://www.jianshu.com/p/d5616dc471b9 http...
2019-06-17 13:18:34
500
原创 前端学习与工作书籍推荐
推荐前端学习工作书籍：《JavaScript权威指南》：js大全，非常细致全面，学习js必读第一本。《JSON必知必会》：对于json讲的很明白。《JavaScript开发实战教程》：本书将javascript基础知识点讲的很易懂，适合初学者，建议可以在看完第1本后再看这个，加深js基础的理解。《JavaScript异步编程》：很好的帮助理解js异步编程《深入理解ja...
2019-06-11 13:47:19
1105
1
原创 javascript常用技巧
1.判断对象的数据类型使用 Object.prototype.toString()与闭包，通过传入不同的判断类型来返回不同的判断函数。传入的判断类型type的格式必须为首字母大写。不推荐将这个函数用来检测可能会产生包装类型的基本数据类型上,因为 call 会将第一个参数进行装箱操作const isType = function( type ){ return function( ta...
2019-06-10 09:35:08
343
原创 D3比例尺与坐标轴
比例尺能将“一个区间”的数据对应到“另一个区间”。例如[0, 1]对应到[0, 300]。当输入0.5时，输出150。这是一个定量比例尺，其定义域是连续的。而将[0, 1, 2]对应到["red", "green", "blue"]。当输入2时，输出blue。这就是一个序数比例尺，其定义域是不连续的。以上两个示例中的[0, 300]和["red", "green", "blue"]是定义域，...
2019-05-24 08:46:19
4056
原创 D3常用API说明，含代码示例
选择元素d3中选择元素的API有两个：select()方法和selectAll()方法。select：返回匹配选择器的第一个元素，用于选择单个元素时使用；selectAll：返回匹配选择器的所有元素，用于选择多个元素时使用；这两个选择元素的API方法的参数是选择器，即指定应当选择文档中的哪些元素。这个选择器参数可以是CSS选择器，也可以是已经被DOM API选择的元素(如documen...
2019-05-21 11:35:34
3859
原创 SVG基础知识速查笔记
什么是SVGsvg是指可缩放矢量图形，是用于描述二维矢量图形的一种图形格式。svg使用XML格式来定义图形，除ie8之前版本外，绝不部分浏览器均支持svg，可将svg文本直接嵌入HTML中显示。svg优点是文件小、缩放旋转均不会失真、线条颜色平滑无锯齿。svg矢量图是用数学方法描述的图，不适合表现自然度较高且复杂多变的图。svg图形元素使用svg中的图形元素前，首先要定义一组<sv...
2019-05-15 13:23:18
756
原创 Vuex 文档笔记
Vuex是专为vue应用程序开发的状态管理模式。Vuex可以帮助开发者管理应用程序的共享状态。每个Vuex应用的核心是store(仓库)。这个store是一个容器，包含着应用中大部分状态。Vuex的状态存储是响应式的。当vue组件从store中读取状态时，若store中的状态发生变化，那么相应的组件也会高效的更新。开发者不能直接更改store中的状态，只能通过显式的提交mutation来...
2019-05-13 16:56:33
351
原创 Vue 2.x 文档阅读笔记三 (可复用性)
混入 mixin**混入(mixin)**可用来分发组件中的复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被"混合"进行该组件本身的选项中。这个"混合"操作会遵循以下几条规则：data数据对象在内部会进行递归合并，并在发生冲突时以组件数据为优化。同名钩子函数将合并为一个数组，因此都将被调用。但是混入对象的钩子将在组件自身钩子之前调用。值为对象的选...
2019-05-13 15:13:11
184
原创 Vue 2.X 文档阅读笔记二 (深入组件)
组件注册组件名组件注册时需要起个名，不论是全局注册组件还是局部注册组件。全局注册组件命名格式有两种写法：字母全小写且必须包含一个连字符写法，示例：Vue.component( "my-component", { /* ... */ } )，引用这个组件元素时也必须使用相同格式，示例：<my-component></my-component>。大驼峰写法，示...
2019-05-10 08:20:42
238
原创 Vue 2.X 文档阅读笔记一 (基础)
1.Vue模板语法插值vue中插入文本时使用双大括号语法，此时当绑定的数据对象值变动时，插值处的内容会实时更新。如果想执行一次性插值，当数据再次改变但插值处内容不会更新，可以使用v-once指令。想要在模块上插入真正的html而非html代码，需要使用v-html指令。如果想要动态修改html特性，如动态修改id、disabled之类的特性，可以使用v-bind指令。示例：<span...
2019-05-08 09:23:36
498
原创 小程序X轴渐入动画组件
先定义小程序中要施加渐入动画的DOM元素，注意该元素的css样式里要添加下opaction属性，通常设为0，意为从全透明开始渐入。另外还需要根据实际场景设定该元素的left或right值，以供动画方法定义滑动距离。<view class="animation-class" animation="slideleft">向左滑入渐入动画DOM元素</view>定义小...
2019-05-07 15:07:51
623
原创 原生js+ajax分页组件
定义分页组件DOM<div id="pagination" class="pagination"></div>定义分页组件类及实例方法：// 分页组件类function Pagination(_ref) { this.id = _ref.id; //分页组件挂载的DOM节点 this.curPage = _ref.curPage ...
2019-05-06 13:26:25
590
原创 深入webpack4配置笔记(必备/可选配置 单页/多页配置)
必备配置自动生成html文件，使用html-webpack-plugin 插件重新打包时前删除dist目录，然后再执行打包，使用clean-webpack-plugin插件entry与output配置，占位符[name]、publicPath(比如配置js文件等资源的cdn地址，使得打包后的html中引入的js地址为cdn地址)三种提升开发效率的即时打包：watch(使用f...
2019-04-09 16:37:33
658
原创 环形饼图ECharts实现Demo
由于接下来的项目可能会大量用到图表显示与交互，所以抽空仔细看了下echarts文档。顺手根据可能有的项目需求写了个饼图demo。需求点如下：饼图样式为甜甜圈环形饼图饼图各扇区以自定义颜色区分对饼图扇区hover时扇区呈放大动画效果、显示文本标签与标签导线并自定义两者样式饼图中心点常显相关自定义数据图例显示数据名与数据值为完成以上功能点，需了解的配置注意点是：label属性配置...
2019-04-09 16:35:33
2236
原创 webpack4：css/sass编译优化分离，处理引用资源
在上篇中，解决了webpack4关于多页面及分离第三方库js和共用自定义库js的配置，本篇将以此为基础继续配置css引入、分离等功能。本篇实现功能：css转换，sass编译转换，css代码优化压缩合并和提取，css图片资源定位路径的转换，处理浏览器css兼容，css中对静态资源(如图片)的引用打包，引用优化(base64)。首先需要明确关于css打包的概念：**webpack构建工程中，htm...
2019-03-13 10:24:24
2269
原创 webpack4：多页面及分离第三方库和公用文件配置
本篇开始学习webpack打包的构建配置，所用版本为webpack 4.16.1和webpack-cli 3.2.3。由于主要开发电商项目，所以对webpack配置生成多页面html更感兴趣。配置生成html的插件采用html-webpack-plugin，主要作用是：根据模板生成页面/无模板生成页面、自动引入js等外部资源、设置title/meta等标签内容。还是从最简单的单入口配置开始，...
2019-03-12 10:43:55
4032
原创 nvm安装多版本nodejs
在熟悉了原生JavaScript和nodejs之后，要开始进入到前端项目构建工具的范畴了，这是后期便于使用vue等的必经之路，毕竟磨刀不误砍柴功嘛，熟悉了生产力工具的使用才能少了羁绊。本来我是从安装webpack4+开始来弄webpack构建的，但由于我电脑里的nodejs和npm版本较低，分别是8.11和5.6，导致npm安装webpack4+失败，报如下截图错误。但我又不想完全使用最新稳...
2019-03-11 08:55:24
3060
1
原创 nodejs进程对象process的nextTick方法应用场景
在nodejs中只支持单线程。在操作系统中，每个应用程序都是一个进程类的实例对象。在nodejs中，就是使用process对象来代表nodejs应用程序。process对象是一个全局对象，具有一些可被用来获取nodejs应用程序以及运行该应用程序的用户、运行环境的各种信息的属性、方法和事件。可以在nodejs的REPL环境中或任何模块中访问process对象。可以将process对象称为进程...
2019-03-05 13:07:02
1555
原创 nodejs中如何使用流数据读写文件
在nodejs中，可以使用fs模块的readFile方法、readFileSync方法、read方法和readSync方法读取一个文件的内容，还可以使用fs模块的writeFile方法、writeFileSync方法、write方法和writeSync方法向一个文件中写入内容。它们各自的区别如下：在使用readFile、readFileSync读文件或writeFile、writeFileS...
2019-03-04 17:10:07
8664
1
原创 Nodejs中对文件执行读写操作(多demo)
在nodejs中实现对文件及目录读写操作的功能是fs模块。另外与文件及目录操作相关的一个模块是path模块。fs模块可以实现所有有关文件及目录的创建、写入与删除操作。这些操作分为同步与异步两种方法。两者的区别在于：同步方法立即返回操作结果，但会阻塞后续代码执行；异步方法不会阻塞后续代码执行，只需等到该异步执行完成调用相应回调函数来返回结果。出于性能考虑多数情况下都是使用异步方法，少数场景会用到同...
2019-03-01 08:22:08
2862
原创 Nodejs中模块的创建与引用
nodejs中，模块的概念很重要。所有功能都是基于模块划分的。每个模块都是JavaScript脚本，核心模块中主要是由js写成，部分是由C/C++编写，内建模块多是由C/C++编写。这些模块的调用遵循CommonJS规范。使用require()加载模块文件，参数值是字符串，如非nodejs自有模块，需要指定模块文件的完整路径及文件名。可以使用相对路径./或绝对路径/。// count.js ...
2019-02-28 15:04:16
1941
原创 Nodejs创建http客户端及代理服务器
nodejs除了可以通过http模块创建服务器，还能创建客户端，类似于浏览器那样很轻松的去向别的服务器发送请求并获取响应数据。在http模块中，可以使用request方法实现向其他服务器请求数据：http.request( options, callback )。在request方法中可以使用两个参数，options参数值是一个对象或字符串，用于指定请求的目标URL地址，如果参数值是一个字符串...
2019-02-26 08:35:40
1953
原创 nodejs创建HTTP服务器与前端通信示例(多demo)
前面几篇都在复习nodejs创建HTTP服务器的若干知识点，本篇将使用原生AJAX和nodejs的HTTP服务器配合写几个DEMO，加深运用理解，也方便时间长回顾备查，客户端使用file访问协议，服务端代码写在app.js中，客户端代码写在index.html中，所有demo均亲测可用。表单submit提交数据//app.jsconst http = require( "http" );c...
2019-02-25 10:43:53
986
原创 《Node.js权威指南》：HTTP服务器发送响应流
Nodejs里http模块的createServer()方法的回调函数的第二个参数是一个http.ServerResponse对象，可以利用这个对象来发送服务器端的响应数据。利用http.ServerResponse对象的writeHead方法或setHeader()方法来发送响应头信息。其中writeHead方法可以使用三个参数：res.writeHead( statusCode, [rea...
2019-02-22 11:05:08
537
原创 《Node.js权威指南》：转换URL字符串与查询字符串
在HTTP服务中，服务器端可以从客户端请求所用的url中获取很多信息。nodejs中有url模块和queryString模块，分别用来获取完整url字符串中信息和查询字符串中信息。先上代码：const url = require( "url" );const queryString = require( "querystring" );let clientUrl = "http://ww...
2019-02-20 08:26:09
622
原创 《Node.js权威指南》：获取客户端请求信息
上一篇《《Node.js权威指南》：如何创建HTTP服务器》中概括的介绍了创建HTTP服务器的套路，包括创建http服务器对象，用服务器对象监听客户端连接事件、错误事件和服务器关闭事件等，整体示例如下：const http = require( "http" );const event = require( "events" );class myEmitter extends event....
2019-02-19 13:49:13
682
原创 《Node.js权威指南》：如何创建HTTP服务器
在nodejs中可以很方便的创建服务器。nodejs提供了http模块和https模块，分别用于创建http服务器与http客户端、https服务器和https客户端。创建HTTP服务器以http模块为例，有两种创建服务器的方法。调用http模块中的createServer()方法，在该方法中，可以使用一个可选参数，参数值是一个回调函数，用于指定当接收到客户端请求时所需执行的处理。在该回调...
2019-02-18 10:36:55
337
原创 《深入浅出Node.js》：Node异步编程解决方案 之 async函数
关于async函数，需要明确它是generator函数的语法糖，即将生成器函数的*换成async关键字，将yield关键字换成await关键字。使用async函数相比于生成器函数的改进主要在于前者具备内置执行器，即直接调用async函数就能执行完整个函数，就像普通函数调用那样，而无需像生成器函数通过调用返回的迭代器的next()方法来手动执行后续代码，非常方便。此外语义化更友好，并且async函数...
2019-02-16 19:22:00
724
原创 《深入浅出Node.js》：Node异步编程解决方案 之 生成器(Generator)函数
Generator函数也叫生成器函数，它是协程在ES6的实现，最大特点就是可以交出函数的执行权(即暂停执行)。整个 Generator 函数就可以封装一个异步任务，异步操作需要暂停的地方，用yield语句注明。当调用生成器函数时，会返回一个迭代器(内部指针)，这点是生成器函数区别于普通函数的一个地方，即执行生成器函数不会返回结果。调用返回的迭代器的next()方法，会移动内部指针(即执行异步的第...
2019-02-15 09:23:45
916
1
原创 《深入浅出Node.js》：Node异步编程解决方案 之 ES6 Promise
在上一篇讲了异步编程解决方案之一的事件发布-订阅模式，使用事件模式时，执行流程需要被预先设定。即便是分支，也需要预先设定，这是由发布-订阅模式的运行机制决定的。这个方法的灵活性比较受限，那是否有一种先执行异步调用，延迟传递处理的方式呢？在ES6发布之前，解决方案是Promise/Deferred模式，现在则推荐ES6官方提供的Promise。Promise/Deferred模式直接促使JQuer...
2019-02-14 09:31:29
279
原创 《深入浅出Node.js》：Node异步编程解决方案 之 事件发布-订阅模式
灵活掌握函数式编程，异步编程就有了得心应手的基础。之所以说是基础，是还需要对异步的编程思路有清晰的认识。为照顾开发者的阅读思维习惯，同步I/O曾盛行多年。但随着技术快速发展，性能瓶颈问题已无法回避。虽然性能提升可以用多线程方式解决，但多线程的引入对业务逻辑造成的麻烦也不小。Node利用异步非阻塞I/O并通过事件循环触发异步回调的机制，将异步提升到业务层面，已被证明是一种新的有效的性能提升思路。...
2019-02-11 13:52:17
575
原创 《深入浅出Node.js》：Node的异步I/O流程原理解析
异步I/O、事件驱动和单线程构成了Node的基调。与Node的事件驱动和异步I/O设计理念相接近的是Nginx，它采用纯C编写，性能非常优异。两者区别在于，Nginx具备面向客户端管理连接的强大能力，但它背后依然受限于各种同步方式的编程语言。而Node却是全方位的，既可以作为服务器去处理客户端带来的大量并发请求，也能作为客户端向网络中的各个应用进行并发请求。这就体现了Node名字的含义，是网络中灵...
2019-01-31 08:42:28
731
原创 《深入浅出Node.js》：node的模块规范与模块实现
Node前言介绍Node的目标是成为一个构建快速、可伸缩的网络应用平台，通过通信协议来组织许多Node，非常容易通过扩展来达成构建大型网络应用的目的。Node作为后端JavaScript的运行平台，保留了前端浏览器JavaScript中那些熟悉的接口，没有改写语言本身的任何特性，依旧基于作用域和原型链，区别在于它将前端中广泛运用的思想迁移到服务器端。Node支持异步I/O、事件与回调函数、单...
2019-01-30 08:25:01
821
原创 《你不知道的JavaScript》：弄清生成器与迭代器的区别
这篇将整理下生成器与迭代器的区别。这两个东西初学的时候我是混淆的，尤其《你不知道的Javascript》书中没有进行基础的介绍，我看了之后还特地翻了下其他资料才弄清，所以在本书看到生成器与迭代器时，要先把两者弄清，才能看的下去。迭代器迭代器的出现有其原因，在上篇文章(前文链接)中也讲到：因为ES6开始数据结构新增了Set和Map，再加上已有的Array和Object，此外用户还可以自行组合它们...
2019-01-29 15:06:51
1054
原创 《你不知道的JavaScript》：迭代器Iterator的背景梳理
本篇复习下上篇用到的Symbol.iterator，它是ES6内置的十一个Symbol值之一。ES6中规定对象的Symbol.iterator属性指向该对象的默认迭代器方法，当对象进行for...of..遍历迭代时，会调用对象的Symbol.iterator方法，返回该对象的默认迭代器。至于这个迭代器的形成原因，是因为到ES6，js已有Array、Object、Set和Map四种数据集合，用户还...
2019-01-29 15:05:37
482
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人