- 博客(50)
- 收藏
- 关注
RSS订阅原创 .vue文件渲染过程&jsx在vue项目中的应用
vue渲染过程<template> <div id="app"> <div id="cover"> <Header></Header> <Todo></Todo> <Footer></Footer&g...
2019-08-18 17:05:04
856
原创 vue-loader配置
vue-loader 配置项 对于.vue文件的配置项在build目录下 新建 vue-loader.config.jsvue-loader.config.js 配置项目使用函数 是为了 不同环境进行使用module.exports = (isDev) => { return { preserveWhitepace: true, extractCSS: true, cs...
2019-08-18 17:04:42
2736
原创 webpack vue框架代码&业务代码拆分
vue框架代码&业务代码拆分 需求分析打包类库文件，第三方包、vue框架代码打包，这类代码稳定性比较高的业务代码是经常更新迭代的为了让浏览器尽可能长的时间缓存我们的静态文件，如果把类库代码和业务代码打包在一起，那么类库代码会跟着业务代码的更新而更新，而不能长时间的是浏览器里缓存，希望利用缓存，减少浏览器流量，提高用户浏览器加载速度，所以单独拆分出来进行打包单独打包vue框架代...
2019-08-18 17:04:26
994
原创 vue项目 根目录下.babelrc postcss.config.js
npm i postcss-loader autoprefixer babel-loader babel-core.babelrc 作用&配置babel用的配置文件.babelrc 为了使用vue的render方法和vue支持jsx{ "presets": [ "env" ], "plugins": [ "transform-vue-jsx" ...
2019-08-18 17:04:02
4220
原创 webpack配置 css单独分离打包
Step1安装插件npm i extract-text-webpack-pluginwebpack.config.js 配置const ExtractPlugin = require('extract-text-webpack-plugin')Step2 配置 区分环境开发环境 development正式环境 production正式环境中 去掉style-loa...
2019-08-18 17:03:50
803
原创 webpack-dev-server 使用
Step1 安装npm i webpack-dev-servernpm i cross-envStep2 配置要判断下，这个webpack的配置是要同时跑在开发环境和生产环境的，所以需要一个变量区分下package.json加 devNODE_ENV=production 适用于 Mac平台上set NODE_ENV=production 适用于win平台下这个cross-e...
2019-08-18 17:03:19
348
原创 vue项目 安装eslint校验
eslint 代码风格校验Step 1 安装npm i eslint eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node -D这些包是eslint-config-standard这个包的官方文档推荐我们安装的根目录下创建.e...
2019-08-18 17:02:49
4638
原创 ES6项目构建
基础架构基础架构业务逻辑自动构建服务接口页面交互编译辅助数据接口自动刷新文件合并资源压缩任务自动化gulp什么是任务自动化什么是gulpgulp 的作用了解如何使用gulp完成任务自动化编译工具（babel、webpack）什么是babel、webpackbabel的核心用法了解webpack及webpack-stream的作用代码实现创建一个ES6前端工程完成...
2019-08-18 17:01:53
120
原创 HTTP协议 导论
HTTP code前端缓存客户端缓存，代理服务器缓存，还有缓存如何去验证它的可用性HTTP重要性前端所有的静态资源加载和数据加载都是要通过HTTP协议进行发送价值提升只要你是中高级的岗位，不可能不问你HTTP相关的内容，而且一般面试官要问你的时候，他不会说给你提醒，让你往深的去讲，他只会问你相关的一些知识，然后看你讲的什么。HTTP协议 简单例子输入URL 打开网页...
2019-08-18 17:01:21
138
原创 ES6作用域 let&const
块作用域(即大括号内的作用域)离开了大括号，可以理解为块作用域的生命周期结束es6强制开启严格模式（“use strict”）严格模式下，变量未声明则不能引用，否则报错function test(){ for(var i=1; i<3; i++ ){ console.log(i)//循环输出1，2 } console.log(i)//3}test()//1//2...
2019-08-18 17:00:33
224
原创 ES6语法——Iterator、for...of循环
Iterator、for…of循环什么是Iterator接口Iterator的基本用法for…of
2019-08-18 16:59:44
223
原创 ES6语法——Promise
PromisePromise是异步编程的解决方案什么是异步有一个函数A，A有一个步骤，A执行完再执行B在程序上怎么实现A执行完再执行B呢，这个步骤有两种方式，一种是回调方式，另一种事件触发的方式Promise是区别于以上两种方式的Promise的作用解决异步操作问题的Promise的基本用法{ //模拟es5中ajax请求 let ajax = function(...
2019-08-18 16:59:29
219
原创 ES6语法——函数扩展
函数扩展函数新增特性参数默认值rest参数扩展运算符箭头函数this绑定尾调用{ //函数参数默认值 //默认值后面，不能有，没有默认值的变量 //function(x,y=123,z) 这是错误的 //function(x,y=123,z=444) 这是可以的 function foo(x, y = 'y的默认值'){ console.log("默认值",x,y...
2019-08-18 16:59:16
152
原创 ES6语法——Proxy、Reflect
Proxy、ReflectProxy和Reflect的概念Proxy和Reflect的使用场景Proxy （代理即拦截）代理{//obj作为原始对象,原始对象存储真实数据//通过new Proxy() 新生成一个对象，这个对象映射obj，让它在中间做一些操作//最后用户访问的是monitor，不管用户是设置monitor还是读取monitor属性，最终通过Proxy传递给ob...
2019-08-18 16:59:02
212
原创 ES6语法——类
类类的概念基本语法类的继承静态方法静态属性gettersetter{ //基本定义和生成实例 class Parent{ constructor(){ } }}
2019-08-18 16:58:47
204
原创 ES6语法——数据结构
数据结构Set的用法是一种集合，（可以当作数组来使用）Set集合中的元素是不能重复的Set定义 第一种不加参数，第二种加参数Set集合中的元素不能重复，这个特性可以用于去重Set实例方法 add delete clear has 还有遍历的方法WeakSet的用法Map的用法Map可以和Object做对比Object中的key必须是字符串，但是也允许Symbol数据类型作...
2019-08-18 16:58:37
365
原创 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:1,k:2} let es5_method={ hello: fu...
2019-08-18 16:58:15
193
原创 ES6语法——Symbol
Symboles6新增的数据类型Symbol的概念这种数据类型提供一个独一无二的值Symbol的作用{ //Symbol 声明 //生成独一无二的值 let a1 = Symbol(); let a2 = Symbol(); console.log(a1===a2);//false //使用同一个key值（a3），所以可以相等 let a3 = Symbol.for('...
2019-08-18 16:57:57
195
原创 ES6语法——数组扩展
数组扩展数组新增特性Array.fromArray.ofcopyWithinfind / findIndexfillentries / keys / values 遍历相关includes{ //Array.of let arr = Array.of(1,2,4,5,6); console.log('arr=', arr)//[1,2,4,5,6] let empty...
2019-08-18 16:57:47
127
原创 ES6语法——数值扩展
数值扩展数值处理新增特性新增方法立方根方法指数方法方法调整把一些全局的处理数值相关的方法，移植到了Number对象上比如parseInt但方法的行为不变（原来怎么用还是怎么用）；原来直接调API就可以，不需要对象，现在是先Number对象再调用方法，但最后的结果是一样的{ //es6中二进制都是以 0B开头 //B大小写都可以 //es6中八进制都是以 0o开头...
2019-08-18 16:57:33
127
原创 ES6语法——字符串扩展
字符串新增特性Unicode表示法遍历接口模版字符串新增方法（10种）//npm install babel-polyfill --save-dev 安装这个包，去处理es7语法的兼容 Unicode表示法{ console.log('a', '\u0061')//a , a console.log('s', '\u20BB7');// 当大于0xFFFF时 // ...
2019-08-18 16:57:20
178
原创 ES6语法——解构赋值
解构赋值什么是解构赋值解构赋值在语法上就是个赋值解构：左边一种结构右边一种结构，左右一一对应进行赋值解构赋值的分类数组解构赋值 左右都是数组对象解构赋值 * 左右都是对象*字符串解构赋值 左右都是字符串，属于对象解构赋值类型布尔值解构赋值 左右都是布尔值函数参数解构赋值 数组解构赋值在函数参数上的应用数值解构赋值 左右都是数值，属于对象解构赋值类型主要的是数...
2019-08-18 16:56:52
209
原创 webpack 打包作用
webpack做了哪些事把这些不同的静态资源的类型把它打包成一个js，然后我们在html里面去引用这个js的时候，我们的html里面的js就可以正常的运行然后去执行我们的操作因为我们大家知道做前端项目的时候，大家应该有经验就是我们希望把很多零碎的js打包成一起，因为这样可以减少HTTP请求同样的我们希望使用模块依赖，因为我们会做很多可复用的代码，把它写到一个模块里面去，这样的话我们在下一次...
2019-08-18 16:55:35
956
原创 HTTP协议做了哪些功能
浏览器输入URL后HTTP请求返回的完整过程step1startTime （开始时间）redirectStart（开始跳转）Redirect （跳转）跳转结束step2fetchStart （fetch开始）App cache （应用缓存）step3domainLookupStart 域名解析开始DNS （DNS查找）domainLoo...
2019-08-04 17:30:16
1012
原创 网络协议分层 五层模型
网络协议分层经典五层模型（客户端）五层模型在服务端时，与客户端顺序相反Created with Raphaël 2.2.0应用层 （HTTP、FTP ...）传输层 （TCP、UDP）网络层数据链路层物理层低三层物理层主要的作用就是定义物理设备如何去传输数据简单来说物理层是什么呢？就是我们电脑的硬件，我们的网卡端口，网线以及我们网线连出去之后，要有一条光缆来为我们把数据传输到互...
2019-08-04 17:30:02
1921
原创 HTTP三次握手
三次握手时序图clientserverSYN = 1，Seq = XSYN = 1, ACK = X + 1, Seq = YACK = Y + 1，Seq = Zclientserver
2019-08-04 17:29:40
263
原创 gulp 构建 es6项目
.ejs 是 express 的模版引擎终端命令行express -e . express 表示脚手架引擎-e 表示执行express. 表示在当前目录执行tasks 目录下
2019-08-04 17:29:00
166
原创 ES5
原型 原型链作用域 闭包异步 单线程ES5知识点基础知识JS API开发环境运行环境原型 原型链作用域 闭包异步 单线程DOM操作Ajax事件绑定版本管理模块化打包工具页面渲染性能优化...
2019-08-04 17:28:51
327
原创 ES5 基础知识考点
变量类型引用类型数值类型String 字符串Number 数字Bolean 布尔值Function 函数Array 数组Object 对象Q1 JS中使用typeof能得到的哪些类型Q2 何时使用=== 何时使用 ==Q3 JS中有哪些内置函数Q4 JS变量按照存储方式区分为哪些类型，并描述其特点Q5 如何理解JSON...
2019-08-04 17:28:43
178
原创 ES5基础知识——数据类型
数据类型数据类型值类型引用类型NumberBooleanStringObjectFunctionArray值类型每个变量都能存储值，不会相互影响，这就是值类型的特点从内存中来说，把每个值都存储在每个变量名的位置var a = 100; // 先给 a 赋值 100var b = a; // 再把 a 赋值给 ba = 200; // a 重新赋值 200console.log(...
2019-08-04 17:28:33
365
原创 ES5原型原型链
原型 原型链如何准确判断一个变量是数组类型写一个原型链继承的例子描述new一个对象的过程zepto（或其他框架）源码中如何使用原型链知识点构造函数构造函数多以大写开头默认有一行 return thisnew 执行的时候 先把this变成一个空对象，然后return this最后赋值给 一个变量function Foo(name,age){ this.name = nam...
2019-08-04 17:28:20
587
原创 ES5作用域闭包
函数声明 函数表达式区别是函数声明 可以提升，函数表达式不能提升函数，函数表达式只是个变量提升而不是函数提升//var fn1 = undefined //这是var的变量声明的提升//var a = undefined // 这是var的变量声明的提升fn()//可执行function fn(){//函数声明}fn1()//undefinedvar fn1 = functi...
2019-08-04 17:28:11
233
原创 ES5异步和单线程
题目同步和异步的区别是什么？分别举一个同步和异步的例子一个关于setTimeout的笔试题前端使用异步的场景有哪些知识点什么是异步（对比同步）前端使用异步的场景异步和单线程（js是单线程语言）//异步示例console.log(100)setTimeout(function(){ console.log(200)},1000)//正常情况 先打印100，等一秒再打印...
2019-08-04 17:28:03
256
原创 ES5其他知识Date\Math\Array\Object
题目获取2017-06-10格式的日期获取随机数，要求是长度一致的字符串格式写一个能遍历对象和数组的通用forEach函数知识点日期Math数组API对象API日期Date.now()// 获取当前时间毫秒数var dt = new Date()dt.getTime()//获取毫秒数 （从1970年开始）dt.getFullYear()//年dt.getMont...
2019-08-04 17:27:55
237
原创 ES5 之 JS-Web-API
回顾JS基础知识变量类型和计算原型和原型链闭包和作用域异步和单线程其他（如日期、Math、各种常用API）JS-Web-APIJS基础知识： ECMA 262标准JS-Web-API：W3C标准W3C标准中关于JS的规定有DOM操作BOM操作事件绑定ajax请求 （包括http协议）存储window.alert (123)，浏览器需要做以下：定一个wind...
2019-08-04 17:27:47
235
原创 ES5之DOM操作和BOM操作
DOM操作（Document Object Model）题目DOM是哪种基本的数据结构DOM操作的常用API有哪些DOM节点的 attr 和 property 有何区别知识点DOM本质html是xml 特殊类型，xml 具有扩展性DOM节点操作DOM可以理解为浏览器把拿到的html代码，，结构化一个浏览器能识别并且js可以操作的一个模型而已获取DOM节点protot...
2019-08-04 17:27:40
360
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人