JonyYu

# 深入浅出svelte.js     最近有一个官网页，打算用svelte体验一下，顺便学习了一下svelte(发音：[svelt])，整体来说，svelte是比较简洁的，上手很快。不过与其说是一个前端框架，不如说是一个“dom操作编译器”。svelte的开发代码，在编译阶段会被编译成一系列的dom操作的代码，运行时的代码很少。因此svelte.js的体积很小(只保留了脏值检测更新和封装dom操作API等core代码)。本文从一下几个方面聊一聊对于svelte的认识。 * svelte初体验 * svelte的语法 * Virtual Dom和Dom * 优缺点 * svelte源码阅读 --- ## 一、svelte初体验     我们直接来看官网的例子：      实现的功能也很简单，就是两个Input的值求和，然后展示出来。用svelte编写的代码为： ```js let a = 1; let b = 2; {a}...

聊聊Typescript中的设计模式——装饰器篇(decorators)

7

# 聊聊Typescript中的设计模式——装饰器篇(decorators) ------   随着Typescript的普及，在KOA2和nestjs等nodejs框架中经常看到类似于java spring中注解的写法。本文从装饰模式出发，聊聊Typescipt中的装饰器和注解。 > * 什么是装饰者模式 > * Typescript中的装饰器 > * Typescript中的注解 > * 总结 ------ ## 一、什么是装饰者模式   最近在看nestjs等支持Typescript的node框架，经常看到这样一种写法： import { Controller, Get } from '@nestjs/common'; @Controller('cats') export...

实现一个完美符合Promise/A+规范的Promise

21

简要介绍：Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise. ## 一、Promise的使用 在了解Promise规范之前，我们知道主流的高版本浏览器已经支持ECMA中的Promise. 创建一个promise实例： ``` var p=new Promise(function(resolve,reject){ setTimeout(function(){ resolve("success") },1000); console.log("创建一个新的promise"); }) p.then(function(x){ console.log(x) }) //输出： 创建一个新的promise success ``` 上述是一个promise的实例，输出内容为，“创建一个promise”，延迟1000ms后，输出"success"。 从上述的例子可以看出，promise方便处理异步操作。此外promise还可以链式的调用： ``` var p=new Promise(function(resolve,reject){resolve()}); p.then(...).then(...).then(...) ``` 此外Promise除了then方法外，还提供了Promise.resolve、Promise.all、Promise.race等等方法。...

前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

1

# 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式) ------ 之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 > * css3实现乞丐版的弹幕 > * css3弹幕性能优化 > * canvas实现弹幕 > * canva弹幕的扩展功能 ------ ## 1. css3实现乞丐版的弹幕 ### (1)如何通过css3实现弹幕 首先来看如何通过css的方法实现一个最简单的弹幕： 首先在html中定义一条弹幕的dom结构： 我是弹幕 弹幕的移动可以通过移动这个block来实现，以从右向左移动的弹幕为例，弹幕的初始位置在容器的最左侧且贴边隐藏（弹幕的最左边与容器的最右贴合）,可以通过绝对定位加transform来实现： .block{ position:absolute; } 初始位置：...

# Node server typescript改造指南 ------   最近将项目中的代理层的node server，从旧的js改造成了ts，总结该过程中遇到的一些小坑。 > * node中的esm > * babel-node和typescript ------ ## 一、node中的esm   node中默认是遵循commonjs模块规范的，经典的用法： ```js const b = require('./b.js') console.log(b) ```   随着node版本的升级，在最近的版本中早就支持esmodule, 早期的版本通过 ```js node --experimental-modules app.js...

循序渐进教你实现一个完整的node的EventEmitter模块

4

# 循序渐进教你实现一个完整的node的EventEmitter模块 ------ node的事件模块只包含了一个类：EventEmitter。这个类在node的内置模块和第三方模块中大量使用。EventEmitter本质上是一个观察者模式的实现，这种模式可以扩展node在多个进程或网络中运行。本文从node的EventEmitter的使用出发，循序渐进的实现一个完整的EventEmitter模块。 > * EventEmitter模块的基本用法和简单实现 > * node中常用的EventEmitter模块的API > * EventEmitter模块的异常处理 > * 完整的实现一个EventEmitter模块 ### 一、EventEmitter模块的基本用法和简单实现 #### (1) EventEmitter模块的基本用法 首先先了解一下EventEmitter模块的基本用法，EventEmitter本质上是一个观察者模式的实现，所谓观察者模式： ***它定义了对象间的一种一对多的关系，让多个观察者对象同时监听某一个主题对象，当一个对象发生改变时，所有依赖于它的对象都将得到通知。*** 因此最基本的EventEmitter功能，包含了一个观察者和一个被监听的对象，对应的实现就是EventEmitter中的on和emit： var events=require('events'); var eventEmitter=new events.EventEmitter(); eventEmitter.on('say',function(name){...

从Express到Nestjs，谈谈Nestjs的设计思想和使用方法

2

# 从Express到Nestjs，谈谈Nestjs的设计思想和使用方法 ------   最近已经使用过一段时间的nestjs,让人写着有一种java spring的感觉，nestjs可以使用express的所有中间件，此外完美的支持typescript,与数据库关系映射typeorm配合使用可以快速的编写一个接口网关。本文会介绍一下作为一款企业级的node框架的特点和优点。 > * 从依赖注入(DI)谈起 > * 装饰器和注解 > * nestjs的“洋葱模型” > * nestjs的特点总结 ------ ## 一、从依赖注入(DI)谈起 ### (1)、angular中的依赖注入   从angular1.x开始，实现了依赖注入或者说控制反转的模式，angular1.x中就有controller（控制器）、service（服务）,模块（module）。笔者在早年间写过一段时间的angular1.3,下面举例来说明： ```js var myapp=angular.module('myapp',['ui.router']); myapp.controller('test1',function($scope,$timeout){} myapp.controller('test2',function($scope,$state){} ```   上面这个就是angular1.3中的一个依赖注入的例子，首先定义了模块名为“myapp”的module,...