- 博客(86)
- 收藏
- 关注
RSS订阅
原创 前端沉淀-每周阅读文章
9.22第一周基于 webpack 的前后端分离开发环境实践spa模式开发从组件化，数据流，状态容器，再到网络请求，单页路由都给了完善的全家桶方案。但是有以下问题：前端开发本地开发环境下该如何突破域的限制和服务端接口进行通信？一条命令，能否同时完成webpack和node server的启动？开发环境下的前端资源路径应该如何配置？mock数据应该怎么做？打包构建后的文件能否直接预览效果？
2017-09-22 19:58:52
1055
原创 一个vue2.0+vuex+vue-router搭建的单页潮流购物网站
项目demo地址 github源码地址首页如果觉得不错，给github源码点个赞吧QAQ前言这篇文章是总结自己写项目时的思路，遇到的问题，和学到的东西，本文只截取一部分来讲，源码已奉上，觉得项目还行的点个赞吧，谢谢一、搭建环境安装vue-clinpm install -g vue-cli 创建webpack项目vue init webpack voguecd vogue安装依赖npm i
2017-02-12 11:12:11
7763
原创 session与登录机制
github 地址：戳这里session概念指一类用来在客户端与服务器之间保持状态的解决方案这种解决方案的存储结构特点由于 Session 是以文本文件形式存储在服务器端的，所以不怕客户端修改 Session 内容。（也可以用其他存储方式比如redis）Session对象是有生命周期的Session实例是轻量级的，所谓轻量级：是指他的创建和删除不需要消耗...
2018-05-22 12:15:32
9844
1
原创 div并排等高
利用margin-bottom和padding-bottom<!DOCTYPE html><html><head> <title>并排等高</title> <style> *{ margin: 0; padding: 0; } .container::after{
2017-12-24 12:54:59
565
原创 面经（百度，头条。。。）
杭州有赞一面（16分钟）实习经历，技术栈let，const盒子模型跨域，cors简单请求和非简单请求二面快排url的解析vue父子通信，双向绑定webpack考察，输出到同一个文件vue和jquery的比较……性能优化
2017-08-18 22:03:22
493
原创 难点掌握
关于异步为什么要有异步？js单线程性。由于部分操作的耗时性或者完成时的不确定性，我们不能阻塞地去等待这些操作的完成，所以就把这些操作单独拿出来，让他们在同步操作的最后执行，也就是所谓的异步操作。异步的流程怎么控制callback事件监听 事件可以解耦异步, 但是, 需要把所做的事情抽象出来成为一个事件才行, 而且事件还需要提前注册, 事件不可能没有注册的时候就收到事件通
2017-08-09 14:07:59
299
原创 面
readyState的五个状态0 初始化 1 载入 2 载入完成 3 交互 4 完成自定义事件var Event = { _listeners: {}, // 添加 addEvent: function(type, fn) { if (typeof this._listeners[type] === "undefined") {
2017-08-09 11:05:23
314
原创 js模拟实现重载
var obj = {};function addMethod(object, name, fn) { var old = object[name]; object[name] = function() { if(fn.length == arguments.length) { return fn.apply(this, arguments)
2017-06-30 15:31:49
1548
原创 关于readyState
DOM readyStateuninitialized 还未开始载入loading 载入中interactive 已加载complete 载入完成ajax readyState0 (Uninitialized): The object has been created but the open() method hasn’t been called. 1 (Loading): The
2017-06-27 10:45:38
626
原创 学习webpack
学习任务对webpack进行自定义的优化配置，比如为生产环境拆分vendor/css/js通过运行server来实现无刷新热重载（hot-reload）创建一个bundle文件通常在根目录下的index.html中可以直接引入依赖 <script src="app/index.js"></script> 缺点: 1. 如果依赖不存在，或者引入顺序错误，应用程序无法正常运行 2. 如果依
2017-06-21 15:26:51
330
原创 高性能js-笔记
1. 加载和执行当浏览器遇到script标签时，会停止处理页面，先执行js代码，然后再继续解析和渲染页面。使用src加载js的过程中，浏览器必须先花时间下载外链文件中的代码，然后解析并执行，在这过程中，页面渲染和用户交互是阻塞的。js下载和执行会阻塞其它资源的下载，比如图片逐步加载js文件，不会阻塞浏览器，秘诀在于，在页面加载完成之后才加载js代码，这意味着window的load事件出发后再
2017-06-15 17:28:32
354
原创 css百分比相对元素问题
相对于父元素宽度的：[max/min-]width、left、right、padding、margin 等； 相对于父元素高度的：[max/min-]height、top、bottom 等； 相对于继承字号的：font-size 等；相对于自身字号的：line-height 等； 相对于自身宽高的：border-radius、background-size、transform: transla
2017-05-23 15:20:53
725
原创 float的影响
注：float为非none 原文对自身的影响行内元素将变为块级元素，可设置宽高 题外话，input为内联块级标签，可设置宽高，并且一行排列父级元素设置了float，则会包裹子元素，自适应宽高对兄弟元素的影响浮动元素后面跟非浮动元素会覆盖非浮动元素，非浮动元素的文字或者其他行内元素会环绕浮动元素浮动元素前后的行内元素环绕浮动元素浮动元素临近元素也是浮动元素，且...
2017-05-01 16:10:03
1645
原创 http与https
HTTPS和HTTP协议相比提供了数据完整性：内容传输经过完整性校验数据隐私性：内容经过对称加密，每个连接生成一个唯一的加密密钥身份认证：第三方无法伪造服务端（客户端）身份因为：HTTPS虽然用到了公开密钥加密，但同时也结合了其他手段，如对称加密，来确保授权、加密传输的效率、安全性。加密通信一条完整的HTTPS请求应该是这样的：客户端 (浏览器) 发起 HTTP 请求，请求连接服务端，发送
2017-04-25 16:53:46
527
原创 web worker
Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。在浏览器后台运行JavaScript， 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。 学习自： 原文1 原文2//test.html<!DOCTYPE HTML><html> <he
2017-04-22 11:59:57
563
原创 node.js之学习
创建第一个应用var http = require('http')http.createServer(function(req,res) { //发送http头部 //状态码200 //内容类型：text/plain res.writeHead(200,{'Content-Type':'text/plain'}); //发送响应信息 res.end(
2017-04-21 22:08:34
254
原创 html，css题
localStorage 数据写入字段有三种方式：localStorage[“a”]=1;localStorage.b=1;localStorage.setItem(“c”,3);读取字段也有三种方式：var a= localStorage.a;var b= localStorage[“b”];var c= localStorage.getItem(“c”);字体单位px相对长度单位
2017-04-21 13:15:57
313
原创 关于事件的小题
因为js函数没有重载，于是：function main(a){ console.log(3+a);}function main(){ console.log(2);}main(1);//2然后联想到事件监听时也和上述一样，可是事实不是一样的：document.addEventListener('click',function() { console.log(123)
2017-04-20 16:25:15
355
原创 cors学习
原文跨域资源共享（cross-origin resource sharing注：CORS需要浏览 器和服务器同时支持。目前所有浏览器都支持，IE不能低于IE 浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。简单请求与非简单请求只要同时满足以下两大条件，就属于简单请求 1. 请求方法是以下三种方法之一： - HEAD - GET
2017-04-20 15:48:50
465
原创 css兼容
Trident内核：前缀为-msGecko内核：前缀为-mozPresto内核：前缀为-oWebkit内核：前缀为-webkit.box { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}IE5-8不支持
2017-04-10 16:46:48
293
原创 将字符串转换成数字
parseInt（） 字符串第一个字符是数字，直到碰到小数点或者其他字符var a = parseInt('10.36aa')//10var a=parseInt('.10.36aa')//NaNparseFloat() 如果第一个字符是小数点，则以0.开头直到遇到第二个小数点或者其他字符var a = parseFloat('.36.33aa')//0.36var a = parseF
2017-04-10 15:10:13
1642
原创 内存泄漏
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。闭包function assignHandler(){ var element = document.getElementById("someElement"); element.onclick = function(){ alert(element.id); };}应改为fu
2017-04-09 22:38:29
829
原创 闭包应用场景
闭包是指有权访问另一个函数作用域的变量的函数setTimeoutsetTimeout(func,time)这里的func不能带参数,解决这个问题需要用闭包function func(param) { return function() { alert(param); }}var f = func(1)setTimeout(f, 1000);代替全局变量//闭
2017-04-09 22:00:16
2948
原创 面试准备
htmldoctype作用位于文档最前面，用于告知浏览器用何种文档类型规范来解析这个文档混杂模式和严格模式严格模式的排版和js运作按照w3c浏览器标准来 运行 混杂模式则采用向后兼容的方式运行，模拟老式浏览器的行为防止站点无法工作意义doctype不存在或者格式不正确则以混杂模式呈现doctype文档类型该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
2017-04-09 13:30:15
1751
原创 git学习
简介Git是目前世界上最先进的 分布式版本控制系统CVS及SVN都是 集中式的版本控制系统 集中式版本控制系统：有一个中央服务器，先取再传 分布式版本控制系统：没有中央服务器，每个人的电脑上都有一个版本库，故不需要联网，多人写作，推送修改。具有强大的分支管理功能安装先下载，然后$ git config --global user.name "Your Name"$ git config
2017-04-08 14:00:36
288
原创 js和css载入
js异步加载动态创建dom<script>(function(d,s,id){ var js,fjs = d.getElementByTagName(s)[0]; if(d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.faceboo
2017-04-07 15:24:54
340
原创 剖析异步
先看一段代码function f2() { console.log(2)}function f1(callback){ callback() console.log(1)}f1(f2)//2 1 3function f2() { console.log(2)}function f1(callback){ setTimeout(callback,0
2017-04-07 11:15:31
260
原创 for...of和for...in
for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、后文的 Generator 对象，以及字符串。const arr = ['red', 'green', 'blue'];for(let v of arr) { console.log(v); // red green blue}for(le
2017-04-06 18:44:28
692
原创 箭头函数
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用Rest参数代替。（4）不可以使用yield命令，因此箭头函数不能用作Generator函数。function foo() { var id=3
2017-04-06 15:19:47
1213
原创 函数
变量默认值不能用let或const再次声明参数默认值是惰性求值的参数默认值可以与解构赋值的默认值，结合起来使用指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。(function (a = 0, b, c) {}).length // 0
2017-04-06 13:44:09
298
原创 Set和Map数据结构
Set成员的值都是唯一的var arr = [1,2,2,2,3,4,5,5,5]var arr2 = [...new Set(arr)]arr2//[1,2,3,4,5]用于去重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
2017-04-05 20:35:18
302
原创 Symbol数据类型
概述由于对象的属性只有字符串，而想要为一个对象添加方法时，出现重名就比较麻烦了，故用可symbol类型当属性名，这种属性名是独一无二的let s = Symbol();typeof s// "symbol"Symbol函数前不能使用new命令，否则会报错Symbol函数可以接受一个字符串作为参数，参数为对象要先调用toString（）方法Symbol值不能与其他类型的值进行运算，会报错。S
2017-04-05 19:43:38
1255
原创 Object.assign()
用法Object.assign(target,obj1[,obj2,,,,,objn])注意这里target也会跟着改变var obj={ a:'123', b:'456'}var o={ c:6}var newObj=Object.assign(o,obj)console.log(o)//{a:'123',b:'456',c:6}加入源对象的属性是一个对象的索引则
2017-04-05 13:06:16
620
原创 对象扩展
属性的简介写法var bar="bar"var obj={bar}console.log(obj)//'bar':'bar'ES6 允许字面量定义对象let a = 'b'let obj={ [a]:'v'}console.log(obj)//'b':'v'let a = 'b'let obj={ [a]:'v'}console.log(obj['b'])//
2017-04-05 12:50:15
253
原创 数组扩展
类似数组只要是部署了Iterator接口的数据结构，Array.from都能将其转为数组。let arr={ '0':'a', '1':'b', '2':'c', length:3}let b=[].slice.call(arr)console.log(b)//['a','b','c']//es6:Array.from(arr)-------------
2017-04-04 22:33:16
409
原创 es6数值扩展
es5开始严格模式下八进制不再允许用前缀0表示，es6明确表示要用0o前缀Number.isFinite(), Number.isNaN() 与全局方法不同的是，全局方法会先将变量转为数字，而Number对象上的方法只对数值有效es6逐步减少全局性方法，使得语言逐步模块化。Number.isInteger()用来判断一个数是不是整数，3.0和3的效果一样Number.EPSILON是一个极小
2017-04-04 19:46:35
308
原创 坑题
(function(){ 'use strict' var a=b=3//这儿由于严格模式，将会出错 })() console.log(a) console.log(b) //Uncaught ReferenceError: b is not defined,a不会打印关于严格模式：戳这里
2017-04-04 16:54:57
415
原创 框架对比
vue.js最低支持到ie9vue.js是一个渐进式框架，自底向上增量开发任意应用界面都可以抽象成组件树vue在背后做了很多工作，数据和dom是绑定的，一切都是响应的vue把一个普通 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object
2017-04-04 14:50:08
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人