09 2020 档案
React.js |高阶组件的应用
摘要：什么是高阶组件 高阶组件（HOC）是 React 中用于复用组件逻辑的一种技巧，让它重复的逻辑在许多组件中得到共享。简单的说，高阶组件是一个以组件作为参数，并返回新组件的函数。 //其中WrapedComponent是包裹后的组件，wrapedComponent是高阶组件（函数），RawCompon
React.js |Refs转发
摘要：Refs获取DOM对象 ref以字符串形式出现，通过this.refs获取 class Counter extends React.Component{ state={count:0} add=()=>{this.refs.info.textContent=++this.state.count} /
React.js |错误边界
摘要：前言：做笔记，参考：react文档，文章涉及的示例：https://sanhuamao1.coding.net/public/note/myapp/git/files/13Error-Boundaries 错误边界 错误边界是一种 React 组件，可以捕获并打印发生在其子组件树任何位置的 Java
做一个简约的博客园皮肤
摘要：花了一天时间做了这个皮肤，单纯记录一下。用了各种布局（弹性浮动网格定位），当做是复习了！除了用头像之外好像没什么特别。注释有点乱啊感觉时间花费的最多的也就是配色了（-.-），皮肤嘛，最重要的就是看着开心。其中自动生成目录的功能是在网上找到。这里用到了自定义属性，方便一键更改主题~代码涉及到的css知
React.js |Context的作用与用法
摘要：参照react官方文档，文章用于笔记整理。 Context是什么？ 在react应用中，数据总是通过 props 自上而下进行传递。 这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题）。Context 可以共享对于一个组件树而言是“全局”的数据。这样就不必显式地通过组件树的逐层
React.js |核心概念
摘要：参照react官方文档与书籍程墨的《深入浅出React和Redux》，文章用于笔记整理。 初始化React项目 React技术依赖于一个很庞大的技术栈，比如，转译JavaScript代码需要使用Babel，模块打包工具又要使用Webpack……这些技术栈都需要各自的配置文件。现在通过create-r
《深入解析CSS》 |视觉效果
摘要：前言：所有内容与示例源码源于基思·J·格兰特的《深入解析css》，文章用于笔记整理。文章示例源码仓库；书籍源码仓库 引言：一个网站，从看起来还可以，到看起来非常棒，差别在于细节。要实现这些细节，CSS中那些需要艺术创意的部分就派上用场了。 一、渐变 也许你已经了解过纯色背景和一些背景图片的使用方法，
《深入解析CSS》 |模块化CSS
摘要：前言：所有内容与示例源码源于基思·J·格兰特的《深入解析css》，文章用于笔记整理。文章示例源码仓库；书籍源码仓库 引入 掌握浏览器如何渲染CSS很重要，了解如何在项目中编写和组织CSS也很重要。组织CSS代码使其更易于理解和维护。 模块化CSS（Modular CSS）是指把页面分割成不同的组成部
《深入解析css》 |精通布局
摘要：前言：所有内容与示例源码源于基思·J·格兰特的《深入解析css》，文章用于笔记整理。源码仓库 一、浮动布局 引入 浮动元素会被移出正常文档流，文档流会重新排列并包围浮动元素。这种布局在报纸和杂志中很常见。 容器折叠 浮动元素的高度不会加到父元素上。所以当子元素的高度比父元素大时，父元素不会撑开。解决
JS数组元素| 让父元素依次与子元素合并成一个新对象，并组成新数组
摘要：前言 原本是想根据后台返回数据渲染表格，但发现结构不允许。如下： var res={ "data": { "statistic": [ { "time_begin": "2020-09-04", "time_end": "2020-09-11", "department": "营销", "dinne
《深入解析css》 |CSS基础
摘要：**前言：**所有内容源于基思·J·格兰特的《深入解析css》 叠层 层叠指的就是这一系列规则。它决定了如何解决冲突。当声明冲突时，层叠会依据三种条件解决冲突： 样式表的来源：样式是从哪里来的，包括你的样式和浏览器默认样式等。 选择器优先级：哪些选择器比另一些选择器更重要。 源码顺序：样式在样式表里
vue全站式笔记
摘要：电商项目 流程： 登陆—产品首页—产品站—产品详情 购物车—订单确认—订单支付—订单列表 业务员开发流程： 需求整理—熟悉ui设计稿—接口规范对接—搭建前端架构—微信/支付—线上部署 核心技术： Node环境安装 //安装后查看版本 $ node -v Git安装和配置 进行开发环境配置，必要时配置
配置 |接口环境
摘要：前言 开发上线的不同阶段，需要不同的配置； 不同的跨域方式，配置不同； 打包的时候统一注入环境参数，统一管理环境，输出不同的版本包 在没有使用接口代理的情况下，可以为每种环境配置请求的baseURL： 配置 package.json "scripts": { "serve": "vue-cli-se
跨域 |前端跨域的三种方式
摘要：前言 跨域是浏览器为了安全而做出的限制策略。浏览器请求必须遵循同源策略：同域名、同端口、同协议。通常在本地开发的时候，域名、端口、协议难免会与服务端给定的不一样，所以前端跨域就显得非常重要。 CORS 服务端设置，前端直接调用。下面的信息表示只允许前端的该域名访问。 JSONP 可以自己封装，也可以
综合 |vue+axios 模拟后台返回数据的三种方式：本地创建json、easymock平台、mockjs
摘要：前提 创建一个vue项目 vue create mock 安装并引入axios npm install axios vue-axios --save-dev //main.js import axios from 'axios' import VueAxios from 'vue-axios' Vu
cookie、sessionStorage与localStorage是什么？
摘要：cookie cookie是什么？ HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在客户端的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。
从服务端获取数据的几种方式：xml、fetch、axios、ajax、jsonp
摘要：原始模型 最初加载页面的方式——你为网站发送一个请求到服务器， 只要没有出错你将会获取资源并显示网页到你的电脑上。但问题是每次请求都要加载整个页面 AJAX模型 Ajax的全称是Asynchronous JavaScript And XML，即异步JavaScript和XML 通过使用诸如 XMLH
Fetch |介绍及使用Fetch发送请求
摘要：Fetch API Fetch API提供了一个 JavaScript 接口，用于访问和操纵HTTP的请求和响应等。提供了一个全局 fetch() 方法来跨网络异步获取资源。 与AJAX的区别 Fetch 规范与 jQuery.ajax() 主要有三种方式的不同： 当接收到一个代表错误的 HTTP
xhr |XMLHttpRequest是什么？
摘要：XMLHttpRequest XMLHttpRequest（XHR）是一个用于与服务器交互的对象，在AJAX编程中被大量使用。 它有如下特点： 可在不刷新页面的情况下请求特定 URL获取数据 可以用于获取任何类型的数据 支持 HTTP 以外的协议（包括 file:// 和 FTP） 如果您的通信流程
axios |介绍及应用
摘要：什么是 axios？ Axios 是一个基于 HTTP 库的promise对象，可以用在浏览器和 node.js 中 Features 特性 Make XMLHttpRequests from the browser—从浏览器创建XMLHttpRequests Make http requests
vuecli基础应用
摘要：Vue CLI是什么？ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,致力于将 Vue 生态中的工具基础标准化： 通过 @vue/cli 实现的交互式的项目脚手架（项目模板）。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 提
vue |实现点击图片预览浏览器满屏大图
摘要：前提 安装插件 npm install vue-directive-image-previewer -D 引入插件 import VueDirectiveImagePreviewer from 'vue-directive-image-previewer' import 'vue-directive
vue |通过swiper实现动态数据的简单轮播
摘要：做个轮播碰到了不少坑，记录一下。 这里主要是在html的基础上用vue实现轮播功能 CDN 首先在lib文件夹上存放会用到的脚本，并在index文件中导入。由于图片数据是通过接口获得的，所以我这里使用了axios插件来帮助我获取数据 <head> //Vue相关脚本 <script src="./l
Git的基本知识及应用
摘要：安装 方法一：在windows点击安装 方法二：安装 GitHub Desktop 配置 # 查看配置 git config --list --show-origin # 配置用户信息 $ git config --global user.name "Jo
vue-router基本使用
摘要：Vue Router功能 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 安装 CD
Vuejs基础使用
摘要：快速入门 引入vue <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 写代码 <div id="app"> {{ message }} </div> 创建实例 var app = new Vue({ el: '
webpack配置开发环境和生产环境
摘要：前言 开发环境(development)和生产环境(production)的构建目标差异很大 在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost serve
webpack常见应用
摘要：source map错误提醒 JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。这可以帮助我们追踪到错误和警告在源代码中的原始位置。 配置webpack.config.js module.exports = { entry: './src/main.js',
webpack-用loader加载css样式、图片、字体、数据
摘要：起步 1、首先我们先创建一个项目，我将其命名为webpack-loader mkdir webpack-loader cd webpack-loader npm init npm install webpack webpack-cli --save-dev 由于webpack是本地安装的，所以此时相
webpack核心概念-模式/loader/插件及其他
摘要：模式 提供 mode 配置选项，告知 webpack 使用相应模式的内置优化 在配置中设置选项 module.exports = { mode: 'production' }; 从cli参数中传递 webpack --mode=production loader 一个Web工程通常会包含HTML、J
webpack核心概念-输出output
摘要：起步 在此之前我们先npm init初始化一个项目，本地安装webpack和webpack-cli，然后在根目录创建index.html、webpack.config.js和src文件夹，在文件夹内再创建一个main.js作为入口文件 准备工作完成后如图所示： main.js function Co
webpack核心概念-入口entry
摘要：前言 该笔记是基于居玉皓老师的《Webpack实战：入门、进阶与调优》与webpack官方文档的内容记录的 入口起点 资源处理流程 在一切流程的最开始，我们需要指定一个或多个入口（entry），也就是告诉Webpack具体从源码目录下的哪个文件开始打包。 如果把工程中各个模块的依赖关系当作一棵树，那
用webpack简单打包一个项目
摘要：了解概念 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bu
vue |table的data更新但页面没有及时渲染
摘要：前言 本来在网上找了一些解决方案，说给table加上key就可以，然后我试了一下发现显示的还是上次渲染的数据。然后循着这个路子摸出了另一个方法 捋思路 需求 在一个表格内镶嵌一个表格，镶嵌的表格会根据所展开的行信息去发送请求并将最新数据渲染在页面上 采取的是手风琴效果，即只显示一行的数据 问题 镶嵌
vue |表格数据进行格式化
摘要：需求 <el-table :data="tableData"> <el-table-column prop="number" label="份数" /> </el-table> 此时number字段内容只是一个阿拉伯数字，我想作一些转换： 1 >第一份 方法 Table-column提供了一个方法
Vuex的五个核心概念—state/getter/mutation/action/module
摘要：1. State Vuex 使用单一状态树——用一个对象包含全部的应用层级状态。至此它就是“唯一数据源 (SSOT)”。这也意味着，每个应用将仅仅包含一个 store 实例。 组件中获得 Vuex 状态 计算属性 import store from './store' const Counter =
综合 |webpack从零开始搭建vue项目并结合vuex
摘要：初始化并安装相关包 mkdir vuexpack cd vuexpack npm init npm install --save-dev webpack webpack-cli npm install --save-dev vue vuex npm install --save-dev vue-lo
vuex简单介绍与示例
摘要：Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 为什么使用vuex？ new Vue({ // state：驱动应用的数据源 data () { return {count
ES6 |Module 的加载实现
摘要：浏览器加载 传统方法 <!-- 页面内嵌的脚本 --> <script type="application/javascript"> // module code </script> <!-- 外部脚本 --> <script type="application/javascript" src="p
ES6 |Module语法
摘要：前言 背景：在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 引入：下
ES6 |修饰器Decorator
摘要：修饰器（Decorator）是一个函数，用来修改类的行为。修饰器对类的行为的改变，是代码编译时发生的，而不是在运行时。这意味着，修饰器能在编译阶段运行代码 类的修饰 //修饰器函数1：为类加上静态属性isTestable //修饰器函数的第一个参数，就是所要修饰的目标类 function testa
ES6 |Class
摘要：如果对构造函数、原型对象、实例对象还不清楚，建议先看这里的原型基础部分 Class基本概念 传统方法是通过构造函数生成新对象 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function ()
ES6 |Generator函数的异步应用
摘要：协程 多个线程互相协作，完成异步任务。yield命令表示执行到此处，执行权将交给其他协程，也就是说，yield命令是异步两个阶段的分界线。协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。 function *asyncJob() { // ...其他代码 var f = y
ES6 |Generator函数语法
摘要：Generator函数 Generator 函数是 ES6 提供的一种异步编程解决方案。Generator 函数在形式上具有两个特征： 一、function关键字与函数名之间有一个星号； 二、函数体内部使用yield语句，定义不同的内部状态 function* helloWorldGenerator
ES6 |iterator和for…of循环
摘要：引入 遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作 //1. 遍历器生成函数 function makeIterator(array){ var nextIndex=0; return { next:fun
ES6 |Reflect
摘要：设计目的 将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。然后就可以从Reflect对象上可以拿到语言内部的方法 修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj,
ES6 |Set和Map数据结构
摘要：Set和Map数据结构 Set数据结构 ES6 提供了新的数据结构——Set。 Set 本身是一个构造函数，用来生成 Set 数据结构 1. 特性 Set成员的值都是唯一的，没有重复 const set = new Set ([1, 2 , 3 , 4, 4]); [ ...set] //[1, 2
ES6 |Proxy
摘要：Proxy Proxy 用于修改某些操作的默认行为。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器” 生成实例
ES6 |Symbol
摘要：Symbol 背景：ES5的对象属性名都是字符串，这容易造成属性名的冲突。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值，它就是Symbol数据类型 特性 1. Symbol值通过Symbol函数生成,它是一种类似于字符串的数据类型 let s = Symbol(); 2. Symb
ES6 |字符串\正则\数值\数组\函数\对象的扩展
摘要：1.字符串的扩展 ES6 加强了对 Unicode 的支持，并且扩展了字符串对象 方法 codePointAt() String.fromCodePoint() at()：ES5对字符串对象提供charAt方法，返回字符串给定位置的字符，但不能识别码点大于0xFFFF的字符。这个可以 normali
ES6 |变量的结构赋值
摘要：ES6 许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring） 1.数组解构赋值 let [a, b, c] = [1, 2, 3]; let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 ba
ES6 |Let与Const
摘要：let和const命令 Let 声明的变量只在let命令所在的代码块内有效 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 for循环 for (let i = 0; i < 10; i++) {} c
ES6 |简介及Babel 转码器
摘要：ECMAScript 6简介 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 //查看已经实现的es6特性 $ node --v8-options | gre
js入门 |高级
摘要：原型基础 引入 原型对象的作用 数据共享，节省空间（需要共享的卸载原型对象中，不需要的写在构造函数中） 为了实现继承 简单了解原型对象 问题：用构造函数创建实例化对象时，如果实例化对象中有相同的属性或方法，实例化多个对象会占多个内存，浪费空间 解决：通过原型的方式，把共享的方法单独提出来写 //构造
js入门 |DOM
摘要：概念 文档：一个页面就是一个文档，文档中有根元素——html——根元素 元素（element）：页面中所有的标签都是元素，元素可以看成是对象。标签可以嵌套，标签中有标签，元素中有元素 节点（node）：页面中所有的内容都是节点，标签，属性，文本。即元素属于节点的一部分。 root:根 由文档及文档中
js入门 |BOM
摘要：window对象 浏览器的顶级对象：window 页面中的顶级对象：document 页面中的所有内容都是属于浏览器的，即页面的内容也都是window的 由于页面中所有内容都是window的，所以window可以省略 var num=10 console.log(num)==>实则：console.
js入门 |ECMAScript 标准
摘要：前言 JS分为三个部分 ECMAScript 标准 js的基本的语法 DOM Document Object Model 文档对象模型 BOM Browser Object Model 浏览器对象模型 JavaScript是什么 一门运行在客户端的脚本语言、一门解释性语言、一门动态类型的语言、一门基
