Ammy的成长

转载 echarts echarts-gl对应得版本

经常出现echarts echarts-gl对应得版本不一致导致报错，现有以下记录。“echarts”: “^4.9.0”, “echarts-gl”: “^1.1.2”,“echarts”: “^5.2.0”, “echarts-gl”: “^2.0.8”,

原创 手写源码---防抖动 & 节流

function debounce(fn, delay) { let timer = null; return (...args) => { clearTimeout(timer); timer = setTimeout(() => { console.log(this, 'debounce.this')

原创 手写源码---ajax

手写ajax function ajax(options) { let method = options.method || 'GET', params = options.params, // GET请求携带的参数 data = options.data, // POST请求传递的参数 url = options.url + (params ? '?' + Object.keys(pa

原创 模块加载器 CommonJs / AMD / UMD / ES6

CommonJsAMDRequireJs

原创 css----自定义属性

定义变量 - -:root { --theme-color: gray;}.button { background-color: var(--theme-color);}定义在父元素内，本元素和所有子节点都可以使用这个变量.container { position: relative; --clickX: 0; --clickY: 0;}.container...

原创 React16 ---生命周期

原创 React---- ref

方法一：React.createRef()用于HTML元素上 其current 属性 值为 DOM 元素自定义 class 组件 值为 组件的挂载实例class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createR...

原创 React ---懒加载

React.lazy() 定义一个动态加载的组件React.Suspense可以指定加载指示器// 该组件是动态加载的const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() { return ( // 显示 <Spinner> 组件直...

原创 Reac路由4.0----- react-router， react-router-dom

React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它没有提供React-router-dom提供了BrowserRouter, Route, Link等api,我们可以通过dom的事件控制路由。平常用 React-router-dom 居多安装$ npm install --save react-router$ npm in...

原创 React---通信Context

除了组件之间从上往下的props通信外还有Content通信方式React.createContextconst MyContext = React.createContext(defaultValue);Context.Provider每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。Provider 接收...

原创 错误边界组件ErrorBoundary

eact 15 中有一个支持有限的错误边界方法 unstable_handleError。此方法不再起作用，同时自 React 16 beta 发布起你需要在代码中将其修改为 componentDidCatch。无法捕获事件处理器内部的错误，其使用try / catch 语句class ErrorBoundary extends React.Component { constructor(...

原创 React---组件异步加载

Suspense组件，一部加载过程中显示的组件lazy 函数时异步加载组建的函数import React, { Suspense, lazy } from 'react';const About = lazy(() => import('./routes/About'));const App = () => ( <Suspense fallback={<d...

原创 React绑定事件，注意this指向

保证事件绑定的方法内的this是当前组件上下文方法一class LoggingButton extends React.Component { // 此语法确保 `handleClick` 内的 `this` 已被绑定。 // 注意: 这是 *实验性* 语法。 handleClick = () => { console.log('this is:', this); ...

原创 TypeScript---声明文件 及reference引用

.d.ts文件为声明文件使用三斜线指令仅可放在包含它的文件的最顶端，不含注释，否则仅当注释处理方法一：用路径声明依赖的/// <reference path="..." />方法二：声明对某个包的依赖。/// <reference types="..." />只可使用在d.ts文件中若要在.ts文件里声明一个对@types包的依赖，使用–types命令行选...

原创 for...in vs for...of

for…in(遍历数组对象的键名)let list = [4, 5, 6];for (let i in list) { console.log(i); // "0", "1", "2",}let obj ={a:1,b:2}for (let i in obj ) { console.log(i); // "a", "b"}for…of(遍历数组的键值)for ...

原创 TypeScript中外部枚举？

外部枚举用来描述已经存在的枚举类型的形状。declare enum Enum { A = 1, B, C = 2}外部枚举和非外部枚举之间有一个重要的区别，在正常的枚举里，没有初始化方法的成员被当成常数成员。 对于非常数的外部枚举而言，没有初始化方法时被当做需要经过计算的。报错为什么？...

原创 TypeScript---泛型 T

使用了 类型变量，它是一种特殊的变量，只用于表示类型而不是值。<T>在前面声明function identity<T>(arg: T): T { return arg;}//使用方法1,：用之前声明let output = identity<string>("myString"); // myString//使用方法2,：类型推论let o...

原创 TypeScript---函数Function

在函数和返回值类型之前使用( =>)符号（变量是一个函数时 变量定义时 定义的返回值用=>表示）// 完整 类型定义写法let myAdd: (x: number, y: number) => number = function(x: number, y: number): number { return x + y; };// 类型推断，可以省略后面的参数定义 ...

原创 TypeScript --- 类Class

类继承子类中super调用父类的属性方法，相当于父类的实例class Animal { name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} mov...

原创 TypeScript---接口(interface)

接口定义interface LabelledValue { label: string;}function printLabel(labelledObj: LabelledValue) { console.log(labelledObj.label);}let myObj = {size: 10, label: "Size 10 Object"};printLabel(my...

原创 TypeScript---类型

布尔值let isDone: boolean = false;数字let decLiteral: number = 6;字符串let name: string = `Gene`;数组let list: number[] = [1, 2, 3]let list: Array<number> = [1, 2, 3];元组（表示一个已知元素数量和类型的数组，各元素的...

原创 scss -指令@import@media@extend@extend-Only@at-root

@import通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件文件拓展名是 .css；文件名以 http:// 开头；文件名是 url()；@import 包含 media queries。分音 (Partials):如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 C...

原创 scss输出css的格式

:nested（嵌套 ）选择器根据html结构 缩进#main { color: #fff; background-color: #000; } #main p { width: 10em; }.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }:expande...

原创 scss-混合@mixin @include @function

@mixin定义@mixin large-text { font: { family: Arial; size: 20px; weight: bold; } color: #ff0000;}父选择器@mixin clearfix { display: inline-block; &:after { content: "."; ...

原创 scss- 条件语句 循环语句使用

@if @else if @else$type: monster;p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: ...

原创 scss - 基础用法1

比如 font-family如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS, font-size, font-weight 都以 font 作为属性的命名空间。

原创 better-scroll下拉刷新 上拉加载

安装npm install better-scroll --save初始化<div class="wrapper"> <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。--> <ul class="content"> <li>...</l...

原创 vue初学未知

1.Object.freeze()防止修改现有的属性，。 var obj = { foo: 'bar'}Object.freeze(obj)new Vue({ el: '#app', data () { return { obj } }}) <div id="app"> <p>...

原创 vue之require.context

require.context(dir, useChild， regExp) 参数说明： 1. 你要引入文件的目录 2. 是否要查找该目录下的子级目录 3. 匹配要引入的文件返回：1. context.require 返回一个require 函数：function webpackContext(req) {　　　　return __webpack_require__(webpa...

原创 表单样式

修改input，textarea的placeholder字体颜色大小textarea::-webkit-input-placeholdertextarea::-moz-placeholdertextarea:-moz-placeholdertextarea::-ms-input-placeholder font-size: $font-size-14 color: #ACACA...

原创 弹性盒使用问题 1-右侧自适应

&lt;div class="box1"&gt; &lt;div class="box2"&gt;&lt;/div&gt; &lt;div calss="box3"&gt; &lt;div calss="box4"&gt; 我是一个有最小宽度的盒子 &lt;/di

原创 当前vue路由组件重新加载

利用v-if控制router-view，在根组件APP.vue中实现一个刷新方法&lt;template&gt;&lt;router-view v-if="isRouterAlive"/&gt;&lt;/template&gt;&lt;script&gt;export default { data () { return { isRouterAlive: tr...

原创 修饰符

一、事件处理方法1.不传参（自动会有event事件参数。）div id="example-2"> -- `greet` 是在下面定义的方法名 --> on:click="greet">Greetbutton>div>var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' },

原创 数组、对象更新检测

一.数组更新检测1.变异方法（更改原数组），同JavaScript数组方法一致。 如： - push() - pop() - shift() - unshift() - splice() - sort() - reverse()2.非变异方法（不更改原数组），替换数组 如： -filter

原创 v-for列表渲染

1.数组渲染 (item, index) in Array 两个参数，<ul id="example-2"> <li v-for="(item, index) in items"> {{ index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: {

原创 v-if，v-show条件渲染

1.v-if 条件渲染分组 <template> 元素当做不可见的包裹元素,可以包裹多个元素，显示时将不包含 <template> 元素。<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p></template>

原创 vue动态绑定class

1.v-bind:class 一个对象，以动态地切换 class： <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 结果为：<div class="static active"></div>2.样式动态绑定对象<div v-bind