我想要一个白菜 - 个人主页动态

2019-09-16 20:50

简介  TypeScript是JavaScript类型的超集，它可以被编译成纯JavaScript  安装  npm install -g typescript npm install -g ts-node  Hello World 新建一个1.ts文件 #!/usr/bin/env ts-node console.log('hello world')然后命令行输入 npx ts-node 1.ts 就看到了激动人心的hello world 类型注解 先输入如下代码 #!/usr/bin/env ts-node function greeter(person: string) { return...

0 点赞评论收藏

2019-09-16 18:08

华南师范大学前端工程师

写一个简单的Babel插件

简介 Babel 编译的三个阶段Babel 的编译过程和大多数其他语言的编译器相似，可以分为三个阶段：  解析（Parsing）：将代码字符串解析成抽象语法树。 转换（Transformation）：对抽象语法树进行转换操作。 生成（Code Generation）: 根据变换后的抽象语法树再生成代码字符串。  开始 写一个把所有定义变量名为 a 的换成b的简单的插件我们可以从这里得到 example link var a = 1的抽象语法树 { "type": "Program", "start": 0, "end&quo...

0 点赞评论收藏

2019-11-17 15:48

已编辑

华南师范大学前端工程师

路由钩子

简介  在某些情况下，当路由跳转前或跳转后、进入、离开某一个路由前、后，需要做某些操作，就可以使用路由钩子来监听路由的变化  路由守卫--全局&组件独享 组件独享 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] })全局守卫 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { //...

0 点赞评论收藏

2019-09-18 21:59

已编辑

华南师范大学前端工程师

React Context

简介  Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。  老的Context 父组件定义getChildContext(){} 里面返回context对象，key-value对应父组件定义childContextTypes 定义context的key的类型子组件定义contextTypes 定义接收的context,使用this.context.key来获取context import PropTypes from 'prop-types'; class Button extends React.Component { render() { r...

0 点赞评论收藏

2019-09-12 19:50

华南师范大学前端工程师

Express上传图片

概述 后端上传图片一般把图片存入文件夹中，然后把图片的链接写入数据库，前端访问时后端返回数据库中图片的链接 开始操作 var multer = require('multer'); var upload = multer({dest: '../public/upload_tmp/'}); router.post('/upload', upload.any(), function (req, res) { // console.log(req); // 上传的文件信息 let name = (new Date()).getTime() var des_file = '../public/idCa...

0 点赞评论收藏

2019-09-12 19:44

华南师范大学前端工程师

Express对MySQL增删改查

简介 记录一下用Express操作MySQL，我用的是Express的脚手架。可以用以下命令生成,因为纯写api，所以没有模板。 cnpm i express-generator -g express myproject开始操作 先创建一个路由文件，存放于/routes/users.js //users.js var express = require('express'); var router = express.Router(); router.get('/',(req,res,next)=>{ res.send('hello world') }) //app.js var use...

0 点赞评论收藏

2019-09-11 20:47

华南师范大学前端工程师

ES6--Generator函数的语法

简介  Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。  function* helloWorldGene...

0 点赞评论收藏

2019-09-11 20:37

华南师范大学前端工程师

ES6学习笔记--Set与Map

Set  它类似于数组，但是成员的值都是唯一的，没有重复的值。  const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4也是一种去重的方式 Set 实例的属性和方法 Set 结构的实例有以下属性。  Set.prototype.constructor：构造函数，默认就是Set函数。 Set.prototype.size：返回Set实例的成员总数。  Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用...

0 点赞评论收藏

2019-09-11 19:53

华南师范大学前端工程师

ES6学习笔记--Symbol

概述  Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。Symbol的引入是为了保证属性名的独一无二。  Symbol.prototype.description 创建 Symbol 的时候，可以添加一个描述。但是，读取这个描述需要将 Symbol 显式转为字符串。 const sym = Symbol('foo'); sym.description // "foo"作为属性名的Symbol...

0 点赞评论收藏

2019-09-11 19:46

华南师范大学前端工程师

ES6学习笔记--Iterator

Iterator（遍历器）的概念  Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。Iterator 的作用有三个：一是为各种数据结构，提供一个统一的、简便的访问接口；二是使得数据结构的成员能够按某种次序排列；三是 ES6 创造了一种新的遍历命令for...of循环，Iterator 接口主要供for...of消费。  默认Interator接口  一种数据结构只要部署了 Iterator 接口，我们就称这种数据结构是“可遍历的”（iterable）。ES6 规定，默认的 I...

0 点赞评论收藏

2019-09-20 17:02

已编辑

华南师范大学前端工程师

React Hook

简介  Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。  使用 State Hook import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>你点击了 {count} 次</p> <button onClick={() => setCount(count + 1)}> Cl...

0 点赞评论收藏

2019-09-10 18:25

华南师范大学前端工程师

压缩图片

主要压缩图片的方法  function compress() { let fileObj = document.getElementById('file').files[0] //上传文件的对象 let reader = new FileReader() reader.readAsDataURL(fileObj) reader.onload = function (e) { let image = new Image() //新建一个img标签（还没嵌入DOM节点) image.src = e.target.result image.onload = function () { let can...

0 点赞评论收藏

2019-09-08 10:35

华南师范大学前端工程师

DOM与BOM

记录一些DOM与BOM的api，方便复习与查阅 DOM  DOM= Document Object Model，文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。  Document  每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。  属性  body 提供对 <body> 元素的直接访问。对于定义了框架集的文档，该属性引用最外层的 ...

0 点赞评论收藏

2019-09-06 20:27

已编辑

华南师范大学前端工程师

Vue生命周期

beforeCreate  beforeCreate() { console.log("beforeCreate"); console.log(this.$el); //undefined console.log(this.$data); //undefined },beforeCreate时没有挂载el，也没有data对象 created  created() { console.log("created"); console.log(this.$el); console.log(this.$data); },  created时没有挂载el，有dat...

0 点赞评论收藏

2019-08-28 15:06

华南师范大学前端工程师

发布订阅模式

概述 在前端里面感觉有很多类库或者模块都用到了这个思想，比如Vue的数据绑定、Vue里面的Bus总线通信、Node.js的Event类（Event类作为一个基类，很多类都继承了他）。 实现一个简单的发布订阅 我们新建一个index.js，先填入一些方法。首先我们要有两个类，一个是发布者类Pub，一个是订阅者类Sub。订阅者类里面应该保存有订阅者的信息，这里为了简便只保存一个name，当然少不了的是订阅别人的方法，订阅这个动作是订阅者发出的，所以它应该属于订阅者的类方法。发布者类里应该有一个数组来记录所有的订阅者，然后还要有一个发布方法。 //订阅者 function Sub(name){ th...

0 点赞评论收藏

创作者周榜

关注他的用户也关注了：