-
Notifications
You must be signed in to change notification settings - Fork 0
/
content.json
1 lines (1 loc) · 31.5 KB
/
content.json
1
{"meta":{"title":"Yoler的小站","subtitle":"你说向前看 毕竟将来重要","description":null,"author":"Yoler|雷永亮","url":"http://yoursite.com"},"pages":[{"title":"gallery","date":"2017-06-06T08:19:05.000Z","updated":"2017-06-06T09:30:22.000Z","comments":true,"path":"gallery/index.html","permalink":"http://yoursite.com/gallery/index.html","excerpt":"","text":""},{"title":"关于我","date":"2017-06-06T08:19:05.000Z","updated":"2017-06-06T09:59:00.000Z","comments":true,"path":"about/index.html","permalink":"http://yoursite.com/about/index.html","excerpt":"","text":"WHAT I AMI AM YOLER一个毕业于建筑高校从事前端开发的摄影爱好者"},{"title":"links","date":"2017-06-06T08:19:05.000Z","updated":"2017-06-06T09:27:42.000Z","comments":true,"path":"links/index.html","permalink":"http://yoursite.com/links/index.html","excerpt":"","text":"小鱼儿: http://ysir.me"}],"posts":[{"title":"对象浅拷贝和深拷贝总结","slug":"对象深拷贝总结","date":"2017-06-23T03:09:20.000Z","updated":"2017-06-23T05:24:12.000Z","comments":true,"path":"2017/06/23/对象深拷贝总结/","link":"","permalink":"http://yoursite.com/2017/06/23/对象深拷贝总结/","excerpt":"","text":"javaScript的变量类型1. 基本类型:5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。这些类型的值本身就存储在栈内存中(string类型的实际值还是存储在堆内存中的,但是js把string当做基本类型来处理 ),不存在引用值的情况。 2. 引用类型:存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型(如对象,数组等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。 浅拷贝和深拷贝浅拷贝:浅拷贝是复制引用,复制后的引用都是指向同一个对象的实例,彼此之间的操作会互相影响 深拷贝:深拷贝不是简单的复制引用,而是在堆中重新分配内存,并且把源对象实例的所有属性都进行新建复制,以保证深拷贝的对象的引用图不包含任何原有对象或对象图上的任何对象,复制后的对象与原来的对象是完全隔离的 深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象的。简单来说,浅拷贝只复制一层对象的属性,而深拷贝则递归复制了所有层级。 JavaScript存储对象都是存地址的,所以浅拷贝会导致两个对象指向同一块内存地址。改变了其中一方的内容,都是在原来的内存上做修改会导致拷贝对象和源对象都发生改变,而深拷贝是开辟一块新的内存地址,将原对象的各个属性逐个复制进去。对拷贝对象和源对象各自的操作互不影响。 浅拷贝的实现 function shallowClone(copyObj) { var obj = {}; for ( var i in copyObj) { obj[i] = copyObj[i]; } return obj; } var x = { a: 1, b: { f: { g: 1 } }, c: [ 1, 2, 3 ] }; var y = shallowClone(x); console.log(y.b.f === x.b.f); // true 深拷贝的实现1. Array的slice和concat方法Array的slice和concat方法不修改原数组,只会返回一个浅拷贝了原数组中的元素的一个新数组。之所以把它放在深拷贝里,是因为它看起来像是深拷贝。而实际上它是浅拷贝。原数组的元素会按照下述规则拷贝:如果该元素是个对象引用 (不是实际的对象),slice 会拷贝这个对象引用到新的数组里。两个对象引用都引用了同一个对象。如果被引用的对象发生改变,则新的和原来的数组中的这个元素也会发生改变。对于字符串、数字及布尔值来说(不是 String、Number 或者 Boolean 对象),slice 会拷贝这些值到新的数组里。在别的数组里修改这些字符串或数字或是布尔值,将不会影响另一个数组。如果向两个数组任一中添加了新元素,则另一个不会受到影响。例子如下: var array = [1,2,3]; var array_shallow = array; var array_concat = array.concat(); var array_slice = array.slice(0); console.log(array === array_shallow); //true console.log(array === array_slice); //false,“看起来”像深拷贝 console.log(array === array_concat); //false,“看起来”像深拷贝 可以看出,concat和slice返回的不同的数组实例,这与直接的引用复制是不同的。而从另一个例子可以看出Array的concat和slice并不是真正的深拷贝,数组中的对象元素(Object,Array等)只是复制了引用。如下: var array = [1, [1,2,3], {name:\"array\"}]; var array_concat = array.concat(); var array_slice = array.slice(0); array_concat[1][0] = 5; //改变array_concat中数组元素的值 console.log(array[1]); //[5,2,3] console.log(array_slice[1]); //[5,2,3] array_slice[2].name = \"array_slice\"; //改变array_slice中对象元素的值 console.log(array[2].name); //array_slice console.log(array_concat[2].name); //array_slice 2. JSON对象的parse和stringifyJSON对象是ES5中引入的新的类型(支持的浏览器为IE8+),JSON对象parse方法可以将JSON字符串反序列化成JS对象,stringify方法可以将JS对象序列化成JSON字符串,借助这两个方法,也可以实现对象的深拷贝。 //例1 var source = { name:\"source\", child:{ name:\"child\" } } var target = JSON.parse(JSON.stringify(source)); target.name = \"target\"; //改变target的name属性 console.log(source.name); //source console.log(target.name); //target target.child.name = \"target child\"; //改变target的child console.log(source.child.name); //child console.log(target.child.name); //target child //例2 var source = { name:function(){console.log(1);}, child:{ name:\"child\" } } var target = JSON.parse(JSON.stringify(source)); console.log(target.name); //undefined //例3 var source = { name:function(){console.log(1);}, child:new RegExp(\"e\") } var target = JSON.parse(JSON.stringify(source)); console.log(target.name); //undefined console.log(target.child); //Object {} 这种方法使用较为简单,可以满足基本的深拷贝需求,而且能够处理JSON格式能表示的所有数据类型,但是对于正则表达式类型、函数类型等无法进行深拷贝(而且会直接丢失相应的值)。还有一点不好的地方是它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。同时如果对象中存在循环引用的情况也无法正确处理。 3.jQuery.extend()方法实现jQuery.extend(true, { a : { a : \"a\" } }, { a : { b : \"b\" } } ); jQuery.extend( { a : { a : \"a\" } }, { a : { b : \"b\" } } ); jQuery.extend第一个参数可以是布尔值,用来设置是否深度拷贝的源码及分析如下: jQuery.extend = jQuery.fn.extend = function() { //给jQuery对象和jQuery原型对象都添加了extend扩展方法 var options, name, src, copy, copyIsArray, clone, target = arguments[0] || {}, i = 1, length = arguments.length, deep = false; //以上其中的变量:options是一个缓存变量,用来缓存arguments[i],name是用来接收将要被扩展对象的key,src改变之前target对象上每个key对应的value。 //copy传入对象上每个key对应的value,copyIsArray判定copy是否为一个数组,clone深拷贝中用来临时存对象或数组的src。 // 处理深拷贝的情况 if (typeof target === \"boolean\") { deep = target; target = arguments[1] || {}; //跳过布尔值和目标 i++; } // 控制当target不是object或者function的情况 if (typeof target !== \"object\" && !jQuery.isFunction(target)) { target = {}; } // 当参数列表长度等于i的时候,扩展jQuery对象自身。 if (length === i) { target = this; --i; } for (; i < length; i++) { if ((options = arguments[i]) != null) { // 扩展基础对象 for (name in options) { src = target[name]; copy = options[name]; // 防止永无止境的循环,这里举个例子,如var i = {};i.a = i;$.extend(true,{},i);如果没有这个判断变成死循环了 if (target === copy) { continue; } if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { if (copyIsArray) { copyIsArray = false; clone = src && jQuery.isArray(src) ? src: []; // 如果src存在且是数组的话就让clone副本等于src否则等于空数组。 } else { clone = src && jQuery.isPlainObject(src) ? src: {}; // 如果src存在且是对象的话就让clone副本等于src否则等于空数组。 } // 递归拷贝 target[name] = jQuery.extend(deep, clone, copy); } else if (copy !== undefined) { target[name] = copy; // 若原对象存在name属性,则直接覆盖掉;若不存在,则创建新的属性。 } } } } // 返回修改的对象 return target; }; jQuery的extend方法使用基本的递归思路实现了浅拷贝和深拷贝,但是这个方法也无法处理源对象内部循环引用,例如: var a = {\"name\":\"aaa\"}; var b = {\"name\":\"bbb\"}; a.child = b; b.parent = a; $.extend(true,{},a);//直接报了栈溢出。Uncaught RangeError: Maximum call stack size exceeded 4.自己动手实现一个拷贝方法var $ = (function(){ var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' '); function type() { return Object.prototype.toString.call(this).slice(8, -1); } for (var i = types.length; i--;) { $['is' + types[i]] = (function (self) { return function (elem) { return type.call(elem) === self; }; })(types[i]); } return $; })();//类型判断 function copy(obj,deep){ if(obj === null || typeof obj !== \"object\"){ return obj; } var name, target = $.isArray(obj) ? [] : {}, value; for(name in obj){ value = obj[name]; if(value === obj) { continue; } if(deep && ($.isArray(value) || $.isObject(value))){ target[name] = copy(value,deep); }else{ target[name] = value; } } return target; } 5.对于任何对象,它可能的类型有Boolean, Number, Date, String, RegExp, Array 以及 Object(所有自定义的对象全都继承于Object)实现深拷贝Object.prototype.clone = function () { var Constructor = this.constructor; var obj = new Constructor(); for (var attr in this) { if (this.hasOwnProperty(attr)) { if (typeof(this[attr]) !== \"function\") { if (this[attr] === null) { obj[attr] = null; } else { obj[attr] = this[attr].clone(); } } } } return obj; }; 定义在Object.prototype上的clone()函数是整个方法的核心,对于任意一个非js预定义的对象,都会调用这个函数。而对于所有js预定义的对象,如Number,Array等,我们就要实现一个辅助clone()函数来实现完整的克隆过程: /* Method of Array */ Array.prototype.clone = function () { var thisArr = this.valueOf(); var newArr = []; for (var i=0; i<thisArr.length; i++) { newArr.push(thisArr[i].clone()); } return newArr; }; /* Method of Boolean, Number, String*/ Boolean.prototype.clone = function() { return this.valueOf(); }; Number.prototype.clone = function() { return this.valueOf(); }; String.prototype.clone = function() { return this.valueOf(); }; /* Method of Date*/ Date.prototype.clone = function() { return new Date(this.valueOf()); }; /* Method of RegExp*/ RegExp.prototype.clone = function() { var pattern = this.valueOf(); var flags = ''; flags += pattern.global ? 'g' : ''; flags += pattern.ignoreCase ? 'i' : ''; flags += pattern.multiline ? 'm' : ''; return new RegExp(pattern.source, flags); };","categories":[{"name":"技术","slug":"技术","permalink":"http://yoursite.com/categories/技术/"}],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"数组去重总结","slug":"数组去重总结","date":"2017-06-15T07:28:57.000Z","updated":"2017-06-23T03:08:01.000Z","comments":true,"path":"2017/06/15/数组去重总结/","link":"","permalink":"http://yoursite.com/2017/06/15/数组去重总结/","excerpt":"","text":"方法一使用filter高阶函数 let arr = [12,12,14,15,12,13,1,3,14,1,5,1,6] let brr = arr.filter((item, index, arr) => { if (arr.indexOf(item) == index) { return true } }) console.log(brr) //[ 12, 14, 15, 13, 1, 3, 5, 6 ] 方法二使用对象的键唯一原理 let dic = {} let newarr = [] arr.forEach((item, index) => { if (!dic[item]) { dic[item] = 1 newarr.push(item) } }) console.log(brr) //[ 12, 14, 15, 13, 1, 3, 5, 6 ] 方法三使用es6 Set对象 let arr = [12,12,14,15,12,13,1,3,14,1,5,1,6] let sarr = new Set(arr) console.log(sarr) //Set { 12, 14, 15, 13, 1, 3, 5, 6 }","categories":[{"name":"技术","slug":"技术","permalink":"http://yoursite.com/categories/技术/"}],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"摄影笔记","slug":"摄影笔记","date":"2017-06-11T06:36:12.000Z","updated":"2017-06-15T06:25:03.557Z","comments":true,"path":"2017/06/11/摄影笔记/","link":"","permalink":"http://yoursite.com/2017/06/11/摄影笔记/","excerpt":"","text":"生活不止眼前的苟且 还有诗和远方 向往 做一个纯粹的人 喜欢什么就去做 并把它做好 关于摄影安塞尔 亚当斯(Ansel Adams)说过:“我们不止是用相机拍照,我们带到摄影中去的是所有我们读过的书,看过的电影,听过的音乐,爱过的人。” 关于生活处在一个快节奏的城市,每天奔走在来来往往熙熙攘攘的人群中,都在努力地追求我们各自想要的,却忘记了生活。有时候也应当做一次猫先生,感受生活,享受阳光。 偶尔也做一下二哈,自娱自乐,岂不开心 假装很忧伤 通过镜头去看平时看不到的细节,记录感动与心动的瞬间,留下一张会讲故事的照片,这可能就是摄影的意义吧","categories":[{"name":"生活","slug":"生活","permalink":"http://yoursite.com/categories/生活/"}],"tags":[{"name":"摄影","slug":"摄影","permalink":"http://yoursite.com/tags/摄影/"}]},{"title":"文件下载","slug":"File-DownLoad","date":"2017-05-22T01:52:34.000Z","updated":"2017-06-09T09:51:17.000Z","comments":true,"path":"2017/05/22/File-DownLoad/","link":"","permalink":"http://yoursite.com/2017/05/22/File-DownLoad/","excerpt":"","text":"<button onclick=\"download('11.txt', 'fsdfdsfsdfsdfsdfsdfsf')\">下载</button> function download(filename, content) { var aLink = document.createElement('a') var blob = new Blob([content]) var event = new MouseEvent('click', { 'view': window, 'bubbles': true, //是否冒泡 'cancelable': true //事件是否可以取消 }); aLink.download = filename aLink.href = URL.createObjectURL(blob) aLink.dispatchEvent(event) }","categories":[],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"vue-webpack配置文件","slug":"vue-webpack配置文件","date":"2017-03-20T01:24:49.000Z","updated":"2017-06-09T09:58:28.000Z","comments":true,"path":"2017/03/20/vue-webpack配置文件/","link":"","permalink":"http://yoursite.com/2017/03/20/vue-webpack配置文件/","excerpt":"","text":"今天来总结一下自己搭建vue开发环境的一些心得,其实最重要的就是webpack的配置,下面直接贴出配置代码: var path = require(\"path\"); module.exports = { entry: { app: path.resolve(__dirname, \"./main.js\") // entry:顾名思义入口文件,app/main.js,输入名字为 app.js }, output: { path: path.resolve(__dirname, \"./build\"),//输出路径 publicPath: 'build/', //调试或者 CDN 之类的域名,稍候会用到 filename: \"[name].js\" //配置生成的文件名 }, resolve: { // require时省略的扩展名,如:require('module') 不需要module.js extensions: ['', '.js', '.vue'], }, module: { loaders: [ { test: /\\.vue$/, loader: 'vue' }, { test: /\\.css?$/, loader: 'file' }, { test: /\\.js$/, loader: 'babel', exclude: /node_modules/ }, { test: /\\.(png|js?eg|gif|svg|woff2?|eot|ttf)(\\?.*)?$/, loader: 'url', } ]//模块加载器,默认null }, babel: { presets: ['es2015'], plugins: ['transform-runtime'] }, plugins: [] //插件,默认null }; 以及package.json文件: { \"name\": \"h5app\", \"version\": \"1.0.0\", \"description\": \"\", \"main\": \"index.js\", \"scripts\": { \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\" }, \"author\": \"yoler\", \"license\": \"ISC\", \"devDependencies\": { \"babel-core\": \"^6.22.1\", \"babel-loader\": \"^6.2.10\", \"babel-plugin-istanbul\": \"^3.1.2\", \"babel-plugin-transform-runtime\": \"^6.22.0\", \"babel-preset-es2015\": \"^6.22.0\", \"babel-preset-stage-2\": \"^6.22.0\", \"babel-register\": \"^6.22.0\", \"css-loader\": \"^0.26.4\", \"element-ui\": \"^1.2.4\", \"file-loader\": \"^0.10.1\", \"url-loader\": \"^0.5.8\", \"vue\": \"^2.2.2\", \"vue-loader\": \"^11.1.4\", \"vue-resource\": \"^1.2.1\", \"vue-router\": \"^2.3.0\", \"vue-style-loader\": \"^2.0.0\", \"vue-template-compiler\": \"^2.2.2\", \"vuex\": \"^2.2.1\" } }","categories":[],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"模拟滚动条","slug":"模拟滚动条","date":"2017-02-28T09:49:19.000Z","updated":"2017-06-09T10:00:34.000Z","comments":true,"path":"2017/02/28/模拟滚动条/","link":"","permalink":"http://yoursite.com/2017/02/28/模拟滚动条/","excerpt":"","text":"最近由于需求原因,用vue做开发,自己动手模拟原生滚动条,做过之后觉得也没有那么难点击观看Demo 下面直接贴出部分核心代码 initscrollbar () { if (this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight <= 0) { this.rate = this.$refs.scroll_box.offsetHeight / this.$refs.page_content.offsetHeight this.scroll_bar_height = this.rate * this.$refs.scroll_box.offsetHeight - 4 + 'px' this.scroll_bar_top = -this.speed * this.rate + 2 + 'px' if (this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight >= this.speed) { this.speed = this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight this.page_content_top = this.speed + 'px' this.scroll_bar_top = -this.speed * this.rate + 2 + 'px' } } else { this.speed = 0 this.page_content_top = this.speed + 'px' this.scroll_bar_height = 0 } } 这一段代码是初始化滚动条的高度和位置,当窗口大小发生改变的时候通过容器高度和内容高度来计算出新的比率rate,再通过这个rate初始化滚动条的高度 this.scroll_bar_height = this.rate * this.$refs.scroll_box.offsetHeight - 4 + 'px' scroll_bar_down (event) { this.disy = event.clientY document.addEventListener('mousemove', this.scroll_bar_move) document.addEventListener('mouseup', this.scroll_bar_up) this.curspeed = this.speed * this.rate this.mousestate = 1 }, scroll_bar_move (event) { document.body.style.cursor = 'default' let y = this.disy - event.clientY this.speed = (this.curspeed + y) / this.rate if (this.speed >= 0) { this.speed = 0 } if (this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight >= this.speed) { this.speed = this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight } this.page_content_top = this.speed + 'px' this.scroll_bar_top = -this.speed * this.rate + 2 + 'px' }, scroll_bar_up () { document.removeEventListener('mousemove', this.scroll_bar_move) this.mousestate = 0 } 这一段代码是滚动条响应鼠标拖拽事件,当鼠标按下的时候记录此时的Y坐标,然后移动鼠标,计算移动距离。注意: 滚动条移动的距离和鼠标移动的距离相等,而内容移动的距离要除以对应的比率,也就是rate scroll (event) { if (this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight <= 0) { if (event.wheelDelta === 120) { this.speed += 50 if (this.speed >= 0) { this.speed = 0 } this.page_content_top = this.speed + 'px' this.scroll_bar_top = -this.speed * this.rate + 2 + 'px' } else if (event.wheelDelta === -120) { this.speed -= 50 if (this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight >= this.speed) { this.speed = this.$refs.scroll_box.offsetHeight - this.$refs.page_content.offsetHeight } this.page_content_top = this.speed + 'px' this.scroll_bar_top = -this.speed * this.rate + 2 + 'px' } } } 这段代码是滚动条响应鼠标滚动事件,当鼠标滚轮滚动一下,对应滚动条的移动距离,可自行设定。 下面贴出Html代码,仅供参考 <div class=\"scroll_box\" ref=\"scroll_box\"> <div class=\"page_content\" :style=\"{top: page_content_top}\" ref=\"page_content\"> <div class=\"page_item\" v-for=\"(value, index) in pages\"> <div class=\"page_wrap\" @click=\"page_seledt(index)\" :class=\"{border: value.state}\"> <div class=\"page_thumbnail\"></div> <div class=\"page_name\"> <span>{{index}}</span> <input type=\"text\" v-model=\"value.name\"> </div> <div class=\"page_tool\" v-show=\"value.state\"> <div class=\"page_del\"></div> <div class=\"page_liked\"></div> </div> </div> </div> </div> <div class=\"warp_scroll_bar\" v-show=\"scroll_bar_state\" ref=\"scroll_bar\"> <div class=\"scroll_bar\" :style=\"{top: scroll_bar_top,height: scroll_bar_height}\" :class=\"{ready: mousestate}\"></div> </div> </div> 如果大家有什么意见或建议,请在下方评论区留言","categories":[],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"如何提升阅读效率","slug":"如何提升阅读效率","date":"2017-02-22T02:57:03.000Z","updated":"2017-02-22T03:18:12.000Z","comments":true,"path":"2017/02/22/如何提升阅读效率/","link":"","permalink":"http://yoursite.com/2017/02/22/如何提升阅读效率/","excerpt":"","text":"提升阅读效率是一个系统工程,不可一蹴而就,要想做到,你至少要在四个方面下功夫: 1.体力:体力是精力的保证,高强度的阅读需要强大的精力来支撑;2.意愿:为什么读?什么是自己能保持高强度阅读的精神支撑?3.知识:有很多比较难的书,要求阅读者必须要有一定的知识基础或者对应学科的知识基础,举个例子,如果你从来没有学过物理和高等数学或者相关基础特别差,却一下子想要高强度高质量地吸收理论力学,泛函分析相关的知识,可能吗?别说书里面的内容了,目录你都看不懂。4.逻辑:其实,很多书里面的论证和说明,都是统一的论证模式,比如因果链,比如演绎归纳结合,比如反证,如果你能快速地找出隐含的论证模式,很多时候是可以跳过大段文本直接看结论的。但是:提升阅读的逻辑敏锐度,是在以上123点都做到的前提之下的——阅读时候的逻辑分析能力,是一个因为长期阅读自然而然培养出来的能力,或者说结果。 有的人提到的什么目录法,笔记法,乃至其他的画图法,联想法,默读法,各种花样层出的方法,都不过是术而已,真要达到高效阅读,必须要重道,道之后,才是术。所有好的学习与阅读方法,最主要的部分不是提升你的学习效率,而是改变你的心智,让你因为这个方法,爱上学习和阅读,在此基础上,再是效率的提升。方法是次要的——方法(术)和成功没绝对的相关关系,精力,兴趣,基础(道)才有。","categories":[],"tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"写在年末","slug":"写在年末","date":"2017-01-20T09:08:16.000Z","updated":"2017-01-20T10:19:19.377Z","comments":true,"path":"2017/01/20/写在年末/","link":"","permalink":"http://yoursite.com/2017/01/20/写在年末/","excerpt":"","text":"时光飞逝 当我提笔时已是快要离开的时候了离下班还有12分钟 看了一眼窗外黄昏的夕阳在天边留下一片红晕的晚霞远处的高楼大厦泛着金黄的光惬意 安详 我很感谢我能来到亿图一家不是很大的公司我清楚的记得当我刚去的时候连一个表单页面都写的很艰难不知道什么是API什么是AJAX……所以我就默默的努力其他人六点多就走了我熬到七点老板说走吧明天再来做 在这里我感到很自由没有迟到没有强制加班更多的是自我约束还有好多好多随便吃的零食还有一群可爱友好的小伙伴 有时候遇到难题也会困扰好久思考着 思考着 天就黑了又一天就结束了google还显示着翻阅的资料github又多了一个版本记录 这一年我有成长但是不够努力 还有好多坏习惯没改正其中拖延症是最严重的 呵呵上学时将自己的签名写为雷厉风行 永不言弃 亮丽一生 现在真是惭愧啊","categories":[],"tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]},{"title":"flex布局总结","slug":"flex布局总结","date":"2017-01-17T06:47:19.000Z","updated":"2017-06-09T09:57:56.000Z","comments":true,"path":"2017/01/17/flex布局总结/","link":"","permalink":"http://yoursite.com/2017/01/17/flex布局总结/","excerpt":"","text":"Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。 .box{ display: flex; } 行内元素也可以使用Flex布局。 .box{ display: inline-flex; } 注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。 采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。 容器有如下6个属性:1.flex-direction:属性决定主轴的方向(即项目的排列方向)。 .box { flex-direction: row | row-reverse | column | column-reverse; } 有如下四个值: row(默认值):主轴为水平方向,起点在左端。 row-reverse:主轴为水平方向,起点在右端。 column:主轴为垂直方向,起点在上沿。 column-reverse:主轴为垂直方向,起点在下沿。 2.flex-wrap: 默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。 .box{ flex-wrap: nowrap | wrap | wrap-reverse; } 它可能取三个值: nowrap(默认):不换行。 wrap:换行,第一行在上方。 wrap-reverse:换行,第一行在下方。 3.flex-flow: 该属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。 .box { flex-flow: <flex-direction> || <flex-wrap>; } 4.justify-content: 该属性定义了项目在主轴上的对齐方式。 .box { justify-content: flex-start | flex-end | center | space-between | space-around; } 它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右: flex-start(默认值):左对齐 flex-end:右对齐 center: 居中 space-between:两端对齐,项目之间的间隔都相等。 space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。 5.align-items: 该属性定义项目在交叉轴上如何对齐。 .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下: flex-start:交叉轴的起点对齐。 flex-end:交叉轴的终点对齐。 center:交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 6.align-content: 该属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。 .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; } 该属性可能取6个值: flex-start:与交叉轴的起点对齐。 flex-end:与交叉轴的终点对齐。 center:与交叉轴的中点对齐。 space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。 space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。 stretch(默认值):轴线占满整个交叉轴。 项目的属性,以下6个属性设置在项目上:1.order: 定义项目的排列顺序。数值越小,排列越靠前,默认为0。 .item { order: <integer>; } 2.flex-grow: 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。 .item { flex-grow: <number>; /* default 0 */ } 3.flex-shrink: 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。 .item { flex-shrink: <number>; /* default 1 */ } 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。 4.flex-basis: 定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。 .item { flex-basis: <length> | auto; /* default auto */ } 5.flex: 该属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。 .item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] } 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。 6.align-self: 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。 .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 该属性可能取6个值,除了auto,其他都与align-items属性完全一致。","categories":[],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"使用Node批量重命名文件","slug":"文件批量重命名","date":"2017-01-17T06:47:19.000Z","updated":"2017-06-13T02:33:25.000Z","comments":true,"path":"2017/01/17/文件批量重命名/","link":"","permalink":"http://yoursite.com/2017/01/17/文件批量重命名/","excerpt":"","text":"'use strict' let fs = require('fs') let path = require('path') let pathname = path.resolve('./') + '/test' fs.readdir(pathname, (err, files) => { files.forEach((filename, index) => { let oldpath = pathname + '/' + filename let newpath = pathname + '/' + index + '.txt' fs.rename(oldpath, newpath, (err) => { if (!err) { console.log('success') } }) }) })","categories":[],"tags":[{"name":"前端","slug":"前端","permalink":"http://yoursite.com/tags/前端/"}]},{"title":"初笔","slug":"初笔","date":"2017-01-16T05:42:38.000Z","updated":"2017-01-16T10:23:28.000Z","comments":true,"path":"2017/01/16/初笔/","link":"","permalink":"http://yoursite.com/2017/01/16/初笔/","excerpt":"","text":"以前 总想有一个属于自己的网站用自己的名字来命名 写一些个人简介写一写生活杂谈 终于今天搭建了自己的专属博客以后生活的点点滴滴都将呈现在这里 或许写着 写着我就会变成一个作家这也是不错的 以前从没有写过学习笔记不爱写也没有地方写csdn的博客太丑作为一个前端开发工程师对美观的要求是极致的这个主题还暂算满意 成长的过程中需要不断的积累人说好记性 不如烂笔头此刻我是绚烂的","categories":[],"tags":[{"name":"随笔","slug":"随笔","permalink":"http://yoursite.com/tags/随笔/"}]}]}