littlebirdflying-CSDN博客

原创 JavaScript 正则表达式

JavaScript 正则表达式练习辅助jsbinhttps://regexper.com/ 图文并茂什么是正则表达式Regular Expression 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串说简单了是按照某种规则去匹配符合条件的字符串RegExp对象JavaScript通过内置对象RegExp支持正则表达式有两种方法实例化RegExp对象字面量构造函数...

2018-09-27 15:21:26 207

原创从浏览器地址栏输入url到显示页面的步骤

输入URL到HTTP请求返回的过程Redirect跳转url 回车 Redirect，当存在 301 请求返回过，浏览器记录过，这类请求开始就要 Redirect。App cahce应用缓存没缓存，发送请求有缓存，浏览器会根据资源是否设置过 Cache-Control判断是否过期，过期，发送请求与服务端进行验证。没过期，读取缓存检验过期通常有两个HTTP头进行控制Ex...

2018-09-23 16:31:55 976

原创 http之CSP

CSP 的概念Content-Security-Policy 内容安全策略让网站变得更加安全详细资料mdn csp作用限制资源获取报告资源获取越权限制方式default-src限制全局制定资源类型资源类型connect-srcimg-srcfont-srcmedia-srcframe-srcscript-srcmanifest-srcstyle-src一些案...

2018-09-22 10:35:19 1839

原创 http之Redirect

Redirect 的概念通过 url 访问某个路径请求资源时，发现资源不在 url 所指定的位置，这时服务器要告诉浏览器，新的资源地址，浏览器再重新请求新的 url，从而拿到资源。若服务器指定了某个资源的地址，现在需要更换地址，不应该立刻废弃掉 url，如果废弃掉可能直接返回 404，这时应该告诉客户端新的资源地址。Redirect 的使用启动服务器 node server.js，loca...

2018-09-22 10:26:54 8163

原创 http数据协商

数据协商的概念客户端发送请求给服务端，客户端会声明请求希望拿到的数据的格式和限制，服务端会根据请求头信息，来决定返回的数据。分类请求 Accept返回 ContentAcceptAccept 声明想要数据的类型Accept-Encoding 数据以哪种编码方式传输，限制服务端如何进行数据压缩。Accept-Language 展示语言User-Agent 浏览器相关信息，移动端、客...

2018-09-22 10:16:30 419

长连接的概念HTTP 的请求是在 TCP 连接的基础上发送的，而 TCP链接分为长连接和短连接。长连接：HTTP 发送请求时，要先创建一个 TCP 连接，并在 TCP 连接上把 HTTP 请求的内容发送并且接收完返回，这是一次请求完成，浏览器与服务器进行协商是否关闭 TCP 链接，若不关闭 TCP 连接会有一定的消耗，好处是如果还有请求可以直接在这个 TCP 连接上发送，不需要经过创建时三次...

2018-09-22 10:15:20 3534

原创 cookie和session

Cookie什么是 Cookie在服务端返回数据时，通过设置 Set-Cookie 头到浏览器中，并保存到浏览器的内容，这个内容就是 Cookie。浏览器保存 Cookie 之后，在下次同域的请求当中，就会带上这个 Cookie，实现用户访问网站的会话当中的数据是一致的。可以设置多个 Cookie，以键值对的方式保存在浏览器。通过 Set-Cookie设置下次请求会自动带上键值对，可以...

2018-09-22 10:13:34 354

原创缓存头Cache-Control的含义和使用

Cache-Control 的含义可缓存性public，http 请求返回的过程当中，在 cache-control 中设置这个值，代表 http 请求返回的内容所经过的任何路径当中（包括中间一些http代理服务器以及发出请求的客户端浏览器），都可以对返回内容进行缓存操作。private，代表只有发起请求的浏览器才可以进行缓存no-cache，可以在本地进行缓存，但每次发请求时，都要向服务...

2018-09-22 10:12:16 8228

原创 CORS跨域限制以及预请求验证

CORS 的使用创建两个服务器，进入对应目录，命令行 node server.js，node server2.js，启动服务器。server.js 会读取 test.html，在8888端口显示，test.html发送跨域请求8887服务器，server2.js通过设置'Access-Control-Allow-Origin': 'http://127.0.0.1:8888'允许跨域。浏览器...

2018-09-22 10:10:54 1439

原创 HTTP协议基础及发展历史

5层网络模型介绍低三层物理层主要作用是定义物理设备如何传输数据数据链路层在通信的实体间建立数据链路连接网络层为数据在结点之间传输创建逻辑链路传输层向用户提供可靠的端到端（End一to一End）服务传输层向高层屏蔽了下层数据通信的细节应用层为应用软件提供了很多服务构建于TCP协议之上屏蔽网络传输相关细节HTTP协议的发展历史HTTP/0.9只有一个命令GET没有HE...

2018-09-22 09:12:56 547

原创 es6-symbol的用法

Symbol数据类型Synmbol 数据类型提供一个独一无二的值。Symbol的声明{ // 声明 let a1=Symbol(); // 这里没有 new let a2=Symbol(); console.log(a1===a2); // false let a3=Symbol.for('a3'); // 返回由给定的 key 找到的 symbol，否则就是返回新创建的...

2018-09-18 11:13:10 1074

原创 es6-对象扩展

函数新增特性简洁表示法属性表达式扩展运算符Object新增方法简介表示法属性简写{ // 简洁表示法 let o=1; let k=2; let es5={ o:o, k:k }; let es6={ o, // 属性简写 k }; console.log(es5,es6); // {o: 1, k: 2} {o:...

2018-09-18 09:50:16 132

原创 es6-函数扩展

函数新增特性参数默认值rest参数扩展运算符箭头函数this绑定尾调用参数默认值注意：默认值后面必须都是带默认值的变量{ function test(x, y = 'world'){ // 默认值后面必须都是带默认值的变量 console.log('默认值',x,y); } test('hello'); // hello world test('hel...

2018-09-18 09:13:36 131

原创 es6-数组扩展

数组新增特性Array.fromArray.ofcopyWithinfind\findIndexfillentries\keys\valuesincludesArray.from集合转数组{ let p=document.querySelectorAll('p'); let pArr=Array.from(p); // 集合转数组 pArr.forE...

2018-09-16 15:43:58 142

原创 es6-数值扩展

数值处理新增特性新增方法，如数学处理方法调整，全局方法移植到 Number 对象上多进制表示方法{ // es6 2进制 0B 开头 console.log('B',0B111110111); // 503 console.log('B',0b111110111); // 相同，0B 和 0b 都可以 // es6 8进制 0o 开头 console.lo...

2018-09-16 11:39:50 116

原创 es6-字符串扩展

字符串新增特性Unicode表示法遍历接口模板字符串新增方法babel-polifill 兼容 es7unicode表示法{ console.log('a',`\u0061`); // a a console.log('s',`\u20BB7`); // s ₻7，当成了两个字符 console.log('s',`\u{20BB7}`); // s ��...

2018-09-16 10:46:54 444

原创 es6-解构赋值

什么是解构赋值左右一一对应进行赋值。解构赋值的分类数组解构赋值，左右都是数组对象解构赋值，左右都是对象字符串解构赋值，左边是数组，右边是字符串布尔值解构赋值，对象解构赋值的一种函数参数解构赋值，数组解构赋值在函数参数的应用数值解构赋值，对象解构赋值的一种数组解构赋值基本使用方法{ let a,b,rest; [a,b]=[1,2];...

2018-09-15 17:25:14 126

原创 es6-let与const

作用域的概念es5 两个作用域：全局作用域、函数作用域es6 增加了块作用域letlet var 作用域不同，let 只在块级作用域有效使用 es6 强制开启严格模式，未声明会报错；es5 中使用 “use strict”let 不能重复定义变量function test(){ for(let i=1;i<3;i++){ // 块级作用域 co...

2018-09-15 16:27:36 116

原创 gulp构建es6项目

项目构建介绍ES6 项目构建基础架构任务自动化（gulp）编译工具（babel、webpack）代码实现基础架构编译 es5 es3（适用于ie8）任务自动化（gulp）什么是任务自动化减少人工操作，自动监听操作与响应。什么是gulp自动化构建工具。gulp的作用完工自动化，背后用 nodejs 做开发，提供了很多插件,完成不同任务。...

2018-09-15 13:28:20 514

原创 Vuex之热更新

vuex 热更新// store.jsimport Vuex from 'vuex'import defaultState from './state/state'import mutations from './mutations/mutations'import getters from './getters/getters'import actions from './a...

2018-09-13 09:16:51 586

原创 Vuex之模块

module 中的 state// store.jsexport default () => { return new Vuex.Store({ modules: { a: { // a 模块 state: { text: 1 } }, b: { // b 模块 st...

2018-09-13 09:10:46 205

原创 Vuex之mutation和action

mutation同步操作基本使用创建文件创建 client/store/mutations/创建 client/store/state/mutations.js声明 mutations// mutaions.jsexport default { updateCount (state, num) { state.count = num }...

2018-09-11 12:40:08 207

原创 Vuex之state和getters

store 常规使用方式直接在 new Vuex.store 选项中去写，不太好，常规方式是创建文件创建 client/store/state/创建 client/store/state/state.js创建 client/store/mutations/创建 client/store/state/mutations.js分模块写// state.js ...

2018-09-11 11:17:20 903

原创 Vuex之集成

安装 vuexnpm i vuex -S创建文件夹创建 client/ store/创建 client/store/store.js 应用入口声明 store// store.jsimport Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex)const store = new Vuex.Store(...

2018-09-11 09:36:28 172

原创 Vue-router之导航守卫

导航守卫全局导航守卫全局钩子// client/index.jsrouter.beforeEach((to, from, next) => { // 跳转前 console.log('before each invoked') next() // next 必须执行，才能跳转})router.beforeResolve((to, from, next) =...

2018-09-11 08:44:00 298

原创 Vue-router之路由参数传递

params// client/config/routes.jsexport default [ { path: '/app/:id', }]// client/app.vue<template> <div id="app"> <router-link to="/app/123">app</router-l...

2018-09-10 09:57:38 292

原创 Vue-router之配置

modehash / histoty配置路由 history 模式作为有服务端渲染的应用，不希望有 #，上述是 hash 模式，# 更多是用来做定位的，同时它不会被搜索引擎解析，导致网站 SEO 效果不好。在 router options 中使用 mode: ‘history’export default () =&gt; { return new Router({ ...

2018-09-09 21:00:10 6658

原创 Vue-router之集成

在项目中使用 vue-router项目中新建文件笔记所在项目新建 client/config/新建 client/router.js新建 client/routes.js安装 vue-routernpm i vue-router -S设置路由映射关系routes.jsimport Todo from '../views/toto/todo.v...

2018-09-09 10:53:18 362

原创 Vue核心知识-Vue的组件之render函数

render function类型：(createElement: () => VNode) => VNode详细：字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提...

2018-09-08 18:58:26 4062

原创 Vue核心知识-Vue的组件之高级属性

插槽slot 是 vue 的内置组件。简单使用定义一个布局组件，里面放什么会在调用组件时决定，我们不会在布局组件里进行内容设置。在组件标签内部写的内容，可以通过 slot 在组件内部模板中进行使用。import Vue from 'vue'const component = { template: ` <div :style="style"> ...

2018-09-08 17:24:00 1273

原创 Vue核心知识-Vue的组件之自定义双向绑定

实现类似 v-model 的功能实现数据双向绑定在组件内，添加 props；组件修改数据时 emit 事件，并把改的新值传出去；从而实现数据的双向绑定。import Vue from 'vue'const component = { props: ['value'], template: ` <div> <input type="t...

2018-09-07 23:04:10 328

原创 Vue核心知识-Vue的组件之组件的继承

用法Vue.extend( options )参数：{Object} options 用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数Vue实例使用 extend，属性的合并下例中，通过 propsData 对 props 进行设置。设置 dat...

2018-09-07 19:29:00 11710

原创 Vue核心知识-Vue的组件之组件的定义

最简单的声明组件import Vue from 'vue'new Vue({ el: '#root', template: '<div>123</div>'})全局注册组件官方推荐，定义组件名，大写开头以及驼峰式命名，在模板中使用时，使用小写连接符的方式。const component = { template: '<di...

2018-09-07 14:19:22 641

原创 Vue核心知识-Vue的原生指令

v-text标签中显示的内容。与双大括号写法类似，区别是没有双大括号灵活，如<div v-text="'Text:' + text"></div>，双大括号<div>Text: {{text}}</div>import Vue from 'vue'new Vue({ el: '#root', template: ` ...

2018-09-07 09:30:15 332

原创 Vue核心知识-computed和watch的使用场景和方法

computed不使用 computed通过简单的字符串拼接import Vue from 'vue'new Vue({ el: '#root', template: ` <div> <span>Name: {{firstName + ' ' + lastName}}</span> </div&g...

2018-09-06 21:39:18 1909

原创 Vue核心知识-Vue的数据绑定

模板绑定{{}} 中可以进行简单的一元、二元运算，但不能写语句import Vue from 'vue'new Vue({ el: '#root', template: ` <div>V {{isActive ? 'active' V: 'not active'}} {{arr.join(' ')}} </div&g...

2018-09-06 16:00:32 135

原创 Vue核心知识-Vue的生命周期方法

有哪些生命周期方法把所有生命周期打印一遍import Vue from 'vue'const app = new Vue({ // el: '#root', template: '<div>{{text}}</div>', data: { text: 0 }, beforeCreate () { console.log(t...

2018-09-06 14:38:44 478 4

原创 Vue核心知识-Vue实例

VUE事例的创建和作用创建new Vue 的方式new Vue({ el: '#root', template: '<div>this is content</div>'})通过 $mountimport Vue from 'vue'const app = new Vue({ // el: '#root', te...

2018-09-06 09:26:39 497

原创 vue.js基础知识整理

1. Vue 实例1.1 创建一个Vue实例一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。demo1.2 数据与方法数据的响应式渲染当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。(...

2018-06-29 20:35:53 1561

原创 less在webstorm中的配置

css预处理技术已经发展的比较成熟了，通过css预处理技术可以很好的提升css的编程性，提高css代码的开发效率和可维护性，目前比较热门的相关技术有Sass、Less CSS、Stylus、Compass等Less是一种动态样式语言，属于css预处理语言的一种。它使用类似CSS的语法为CSS的赋予了动态的特性，如变量、继承、运算、函数等，更方便css的编写和维护实现css模块化。less 可以...

2018-06-22 09:25:48 8942

空空如也

空空如也