├── .DS_Store ├── src ├── .DS_Store ├── this.md ├── CSS3--font-face使用.md ├── javascript数据结构3-栈.md ├── javascript数据结构5-链表2 存放点数据（x,y）.md ├── File Input多次添加文件，用来实现上传等操作.md ├── javascript面向对象和面向委托.md ├── 2017阿里实习校招-前端技术视频面试体会.md ├── HTTP协议实践篇--浏览器缓存总结、利用Fiddler和apache模拟.md ├── javascript数据结构4-队列2-基数排序.md ├── webpack基础实践2.md ├── webpack基础实践1.md ├── javascript数据结构8-图（Graph）.md ├── openlayers 3实践与原理探究4.3.md ├── 写给前端er的TCP-IP知识及《图解TCP-IP》读书笔记.md ├── openlayers 3实践与原理探究2.md ├── javascript数据结构6-字典-散列-集合.md ├── React Router的一个完整示例.md ├── 使用javascript原生实现一个模板引擎.md ├── openlayers 3实践与原理探究4.2.md ├── webpack项目实践.md ├── javascript数据结构1-数组.md ├── openlayers 3实践与原理探究4.1.md ├── rollup+es6最佳实践.md ├── javascript数据结构4-队列.md ├── 前端自动化测试工具--使用karma进行javascript单元测试.md ├── PHP爬虫最全总结2-phpQuery，PHPcrawer，snoopy框架中文介绍.md ├── javascript数据结构2-列表.md ├── 动手DIY一个underscorejs库及underscorejs源码分析3.md ├── 阿里巴巴校招2017前端笔试题目-原生js-html5-实现一个路由.md ├── 前端自动化测试工具PhantomJS+CasperJS结合使用教程.md ├── ECharts 3.0底层zrender 3.x源码分析3-Handler（C层）.md ├── HTTP协议实践篇--使用fiddle与后台php交互.md ├── openlayers 3实践与原理探究4.4.md ├── 使用React+Three.js封装一个三维地球.md ├── 一步一步DIY jQuery库3-引入sizzle引擎.md ├── openlayers 3实践与原理探究1.md ├── javascript数据结构7-二叉搜索树（BST）.md ├── domReady机制探究及DOMContentLoaded研究.md ├── EChart 2升级EChart 3注意事项.md ├── openlayers 3扩展，调用百度地图、高德地图、天地图服务.md └── 动手DIY一个underscorejs库及underscorejs源码分析2.md └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zrysmt/Blog/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zrysmt/Blog/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /src/this.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: this指针总结 3 | tags: 4 | - FE 5 | - javascript 6 | categories: 前端技术 7 | date: 2016-09-28 00:00:00 8 | --- 9 | 文章只是简单列举了方式和一些会改变this指针的情况 10 | 11 | # 1.探寻之，必昭然若揭 12 | 1. new绑定 this-->新创建的对象 13 | ``var bar = new foo()`` 14 | 2. call/bind 硬绑定 this-->指定的对象 15 | ``var bar = foo.call(obj2)`` 16 | 3. 隐式绑定 this-->上下文对象 17 | ``var bar = obj1.foo()`` 18 | 4. 默认绑定 this-->全局对象window 19 | 20 | 四种情况也是按照优先级排列的 21 | 22 | # 2.实践之，定了然于胸 23 | ## 2.1 回掉函数会改变this指针 24 | 绑定 25 | ```javascript 26 | dbTools.queryUsrDB2Datas(function(){ 27 | usrResDiv.fyDiv.apply(usrResDiv,arguments); 28 | }); 29 | ``` 30 | ## 2.2 setTimeout/setinterval函数会改变this指针(例子见第三部分) 31 | ## 2.3 绑定的例外 32 | - `foo.call(null)` 使用`null`或者`undefined`,忽略传入对象的`this`,实际运用的是默认绑定，这也是这样方法的弊端，this指向`window`。 33 | 修改`var DMZ = Object.create(null); foo.apply(DMZ,[2,3]);` 34 | 35 | - 间接引用 36 | 37 | ```javascript 38 | function foo(){ 39 | console.log(this.a); 40 | } 41 | var a = 2; 42 | var o = {a:3,foo:foo}; 43 | var p = {a:4}; 44 | 45 | o.foo();//3 46 | (p.foo = o.foo)(); //2 this-->window 47 | p.foo(); //4 48 | ``` 49 | `p.foo = o.foo`返回值是目标函数的引用，因此调用位置是foo(),而不是`p.foo()`,`o.foo()`; 50 | # 3.避免之，需谨小事微 51 | 除了第一部分的方法外，还有一些常用的方法。 52 | ## 3.1 ES5中我们经常会使用`self = this`，如： 53 | 54 | ```javascript 55 | function foo(){ 56 | var self = this; 57 | setTimeout(function(){ 58 | console.log(self.a); 59 | },100); 60 | } 61 | 62 | var obj = { 63 | a:2; 64 | } 65 | foo.call(obj);//2 66 | ``` 67 | ## 3.2 ES6中的箭头函数(this词法) 68 | 69 | ```javascript 70 | function foo(){ 71 | setTimeout => { 72 | console.log(this.a);//this继承来自foo() 73 | },100); 74 | } 75 | 76 | var obj = { 77 | a:2; 78 | } 79 | foo.call(obj);//2 80 | ``` -------------------------------------------------------------------------------- /src/CSS3--font-face使用.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: CSS3--font-face使用 3 | tags: 4 | - FE 5 | - CSS 6 | - CSS3 7 | categories: 前端技术 8 | date: 2016-09-27 19:27:49 9 | --- 10 | # 1.介绍 11 | - @font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，不用担心兼容性，@font-face在IE4中都支持。 12 | - 如果是用字体做logo，英文的话字体和图片占用大小差不多，但是中文的字体包一般比较大，最好还是使用图片的形式。 13 | 14 | # 2.快速实践 15 | - [下载字体](http://www.dafont.com/)需要格式为.tff格式的字体文件 16 | - 搜索Webfont Generator，或者直接使用[该网站](https://www.web-font-generator.com/)提供的服务。这很简单，进入网站后选择.tff字体文件上传，勾选同意的复选框，点击`Generate web font`，点击`Download Package`下载，解压缩文件。 17 | - 使用 18 | 新建index.css 19 | 20 | ```css 21 | @font-face { 22 | font-family: 'Happy-Camper-Regular'; 23 | src: url('../fonts2/Happy-Camper-Regular.eot'); 24 | src: url('../fonts2/Happy-Camper-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts2/Happy-Camper-Regular.woff') format('woff'), url('../fonts2/Happy-Camper-Regular.ttf') format('truetype'), url('../fonts2/Happy-Camper-Regular.svg#SingleMaltaRegular') format('svg'); 25 | font-weight: normal; 26 | font-style: normal; 27 | } 28 | 29 | h2.demo { 30 | font-size: 100px; 31 | font-family: 'Happy-Camper-Regular' 32 | } 33 | 34 | ``` 35 | ```html 36 | 37 | 38 | 39 | 40 | 字体 41 | 42 | 43 | 44 |

hello world!You are my Destiny

45 | 46 | 47 | ``` 48 | 49 | # 3.字体icon 50 | 使用某些字体，如：`WebSymbols-Regular`[百度云下载地址](http://pan.baidu.com/s/1jIO0Y2q)，`Guifx`字体，包括现在开源的比较流行的`Font Awesome`,使用方法同上。在html文件中如下示例： 51 | 52 | ```html 53 | A 54 | B 55 | C 56 | D 57 | F 58 | ``` 59 | 每一行显示的是其对应的图标 60 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/font-icon.png) 61 | 参考文献： 62 | - [下载字体的地方](http://www.dafont.com/) 63 | - [CSS3 @font-face](http://www.w3cplus.com/content/css3-font-face) 64 | - [@font-face制作Web Icon](http://www.w3cplus.com/css3/web-icon-with-font-face) 65 | -------------------------------------------------------------------------------- /src/javascript数据结构3-栈.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构3-栈 3 | tags: 4 | - javascript 5 | - 数据结构 6 | categories: 数据结构 7 | date: 2016-10-09 00:00:00 8 | --- 9 | 10 | 后进先出（LIFO,last-in-first-out）的数据结构 11 | 类比：堆叠盘子，只能从上面拿走盘子 12 | 13 | ```html5 14 | 15 | 16 | 17 | 栈 18 | 19 | 20 | 55 | 56 | 57 | ``` 58 | 例子： 59 | 十进制转化为二进制，使用栈实现： 60 | 61 | ```javascript 62 | /*数制间的相互转换*/ 63 | function mulBase(num,base){ 64 | var s=new Stack(); 65 | do{ 66 | s.push(num% base); 67 | num=Math.floor(num /=base); 68 | }while(num > 0); 69 | var cov=""; 70 | console.log(s.length()); 71 | while(s.length() >0){ 72 | cov += s.pop(); 73 | 74 | } 75 | return cov; 76 | } 77 | var num=32; 78 | var newNum=mulBase(32,2); //十进制转换为二进制 79 | console.log(newNum); 80 | document.write(newNum); 81 | ``` -------------------------------------------------------------------------------- /src/javascript数据结构5-链表2 存放点数据（x,y）.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构5-链表2 存放点数据（x,y） 3 | tags: 4 | - javascript 5 | - 数据结构 6 | categories: 数据结构 7 | date: 2016-10-09 00:00:00 8 | --- 9 | 10 | ```html5 11 | 12 | 13 | 14 | 15 | Document 16 | 17 | 18 | 87 | 88 | 89 | ``` -------------------------------------------------------------------------------- /src/File Input多次添加文件，用来实现上传等操作.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: File Input多次添加文件，动态删除文件，用来实现上传等操作 3 | tags: FE 4 | categories: 前端技术 5 | date: 2016-09-27 00:00:00 6 | --- 7 | ### 1.需求图示 8 | ![实现](https://raw.githubusercontent.com/zrysmt/mdPics/master/file%20input.png) 9 | 10 | ### 2.按图索骥 11 | - 添加 实际上，添加附件就是``的控件，`var fileList = getElementById(myFile).files`就可以得到选择的文件的FileList对象，这个对象是类数组的对象(含义有点像函数参数arguments)。记住这一点很重要。 12 | 13 | - 显示 下面的显示文件名的面板根据上传的文件名`name`显示 14 | 15 | ### 3.刨根问底 16 | - FileList类数组对象 17 | `console.log(fileList)`打印出来的结果显示： 18 | ``` bash 19 | FileList 20 | 0:File 21 | lastModified:1446204650848 22 | lastModifiedDate:Fri Oct 30 2015 19:30:50 GMT+0800 (中国标准时间) 23 | name:"CCGIS.png" 24 | size:809542 25 | type:"image/png" 26 | webkitRelativePath:"" 27 | __proto__:File 28 | length:1 29 | __proto__:FileList 30 | ``` 31 | 思考：我们只需要能动态修改fileList即可，第一想法是将它转化为数组进行操作。 32 | `` files = Array.prototype.slice.call(files); `` 33 | 34 | ### 4.付诸行动 35 | 动手编程吧： 36 | html很简单，省略 37 | 逻辑代码 38 | ``` javascript 39 | var fileInput = document.getElementById('myFile'); 40 | var files = fileInput.files; //filelist 41 | 42 | $('#myFile').on('change', function(event) { 43 | 44 | files = fileInput.files; //应该重新获取 45 | console.log(files); 46 | 47 | files = Array.prototype.slice.call(files); //全部转化为数组 48 | fileLists = fileLists.concat(files); 49 | //显示文件名面板 50 | if (files.length !== 0) { 51 | var html = ''; 52 | for (var i = 0; i < files.length; i++) { 53 | html += "

" + files[i].name + "  

"; 54 | } 55 | $('.upfile-list-mes').append(html); 56 | } 57 | }); 58 | 59 | /*点击叉号可以删除要上传的文件*/ 60 | $('.upfile-list-mes').on('click', '.icon-remove', function(event) { 61 | var ind = $(this).parent().index(); 62 | $(this).parent().css('display', 'none'); 63 | fileLists.splice(ind, 1);//修改fileLists 64 | console.log(fileLists); 65 | }); 66 | ``` 67 | 68 | -------------------------------------------------------------------------------- /src/javascript面向对象和面向委托.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript面向对象和面向委托 3 | tags: 4 | - FE 5 | - javascript 6 | - 设计模式 7 | categories: 前端技术 8 | date: 2016-09-27 00:00:00 9 | --- 10 | 11 | 昨天看了一本书《你不知道的javascript(上)》关于这方面的内容，体会颇深，其中书中讲到的把javascript当作是面向委托的语言比面向对象的解释更加贴切，下面我就简单结合自己的理解，书写阐述一下，也可以作为一种笔记记录。 12 | ### 1. 提取精华——几个重要的方法 13 | #### 1.1 原型链关联 14 | - Bar.prototype = Foo.prototype; 15 | - Bar.prototype = new Foo(); 16 | - Bar.prototype = Object.create(Foo.prototype); 17 | 第一种方式，没有创建Bar.prototype的新对象Bar.prototype直接引用了Foo.prototype，修改Bar.prototype会影响Foo.prototype 18 | 第二种方式，创建了一个关联Bar.prototype的新对象，new其实是调用Foo的“构造函数”，有些东西会影响到Bar()的后代。 19 | 第三种方式，Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。 20 | 语法：``Object.create(proto, [ propertiesObject ])`` 21 | 参数:proto 一个对象，作为新创建对象的原型。 22 | propertiesObject 可选。该参数对象是一组属性与值，该对象的属性名称将是新创建的对象的属性名称，值是属性描述符（这些属性描述符的结构与Object.defineProperties()的第二个参数一样） 23 | > [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create) 24 | 25 | ES5之前Object.create Poyfill代码： 26 | ```javascript 27 | if(!Object.create){ 28 | Object.create = function(o){ 29 | function F(){}; 30 | F.prototype = o; 31 | return new F(); //new的作用参见上述 第二种方式 32 | } 33 | } 34 | ``` 35 | ES5:``Object.setPrototypeOf(Bar.prototype,Foo.prototype)``更加标准可靠 36 | #### 1.2 ES6 class 37 | 内部也是通过原型链实现的，只是一种语法糖。 38 | 39 | ### 2.针尖麦芒——面向对象(OO) VS 面向委托(对象关联 OLOO) 40 | - OO：类的继承是复制行为，简单说关系是父子关系 41 | OLOO： 只是对象的关联(基于原型/原型链)，简单说关系是兄弟关系，互相关联。 42 | 43 | - 代码 44 | OO风格： 45 | ```javascript 46 | function Foo(who){ 47 | this.name = who; 48 | } 49 | Foo.prototype.identity = function(){ 50 | return "I am "+this.name; 51 | }; 52 | 53 | function Bar(who){ 54 | Foo.call(this,who); 55 | } 56 | Bar.prototype = Object.create(Foo.prototype); 57 | 58 | Bar.prototype.speak = function(){ 59 | alert("hello,"+this.identity()+" ."); 60 | }; 61 | 62 | var b1 = new Bar('b1'); 63 | var b2 = new Bar('b2'); 64 | b1.speak(); 65 | b2.speak(); 66 | ``` 67 | 68 | OLOO风格： 69 | ```javascript 70 | Foo = { 71 | init: function(who) { 72 | this.name = who; 73 | }, 74 | identity: function() { 75 | return "I am " + this.name; 76 | } 77 | }; 78 | 79 | Bar = Object.create(Foo); 80 | Bar.speak = function() { 81 | alert("hello," + this.identity() + " ."); 82 | }; 83 | 84 | var b1 = Object.create(Bar); 85 | b1.init('b1'); 86 | var b2 = Object.create(Bar); 87 | b2.init('b2'); 88 | b1.speak(); 89 | b2.speak(); 90 | ``` 91 | 92 | ### 3.问题探究 93 | **内省：**我们想看Foo和Bar之间的关系 94 | OO:对比的是Bar.prototype与Foo的关系，并不是Bar和Foo的关系 95 | ```javascript 96 | console.log(Bar.prototype instanceof Foo); //true 97 | console.log(Object.getPrototypeOf(Bar.prototype) === Foo.prototype);//true 98 | console.log(Foo.prototype.isPrototypeOf(Bar.prototype));//true 99 | ``` 100 | 101 | OLOO:是Bar和Foo的关系 102 | ```javascript 103 | console.log(Object.getPrototypeOf(Bar) === Foo); 104 | console.log(Foo.isPrototypeOf(Bar)); 105 | ``` -------------------------------------------------------------------------------- /src/2017阿里实习校招-前端技术视频面试体会.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2017阿里实习校招-前端技术视频面试体会 3 | tags: 4 | - FE 5 | - 面试 6 | categories: 前端技术 7 | date: 2017-05-22 16:14:00 8 | --- 9 | 快要秋招找工作了，预约的暑期实习面试，也是为了秋招攒点经验。约的时间是15:15 - 16:00，焦急又必须有耐心的等待后，终于在下午四点左右接通了视频，紧张ing。 10 | 11 | 首先面试官介绍了自己的花名，心里紧张没记下来，现在想想挺后悔的。但是谁让我紧张了呢？ 12 | 然后是我的自我介绍，简单的介绍了一下我的基本情况，把技能和项目都介绍了介绍。 13 | 面试官态度挺好的，平易近人的感觉，慢慢的也就不紧张了，后面面试官一路45度仰天扣鼻子，也是让我乐了，心态更加轻松随意了。 14 | 15 | 面试的前端工程师，当然最重要的技术问题。上来就是让我共享屏幕，然后打开IDE写个排序，尼玛宝宝好怕，虽然简单，但是全部写下来运行太痛苦了。 16 | 17 | # 1.数组排序 18 | - 原生实现 sort函数，倒是很快就写出来了，然后随时就让我用不是原生的方法实现 19 | ```javascript 20 | var arr = [1,6,8,34,20,10]; 21 | function main(arr,sortType){ 22 | return arr.sort(function(num1,num2){ 23 | if(sortType == "desc"){ 24 | return num1 < num2; 25 | }else{ 26 | return num1 > num2; 27 | } 28 | }) 29 | } 30 | ``` 31 | - 快排 我记得模棱两可，没写出来啊，心痛啊。现在把正确的贴在这里。 32 | ```javascript 33 | function quickSort(arr) { 34 | if(arr.length<=1) { 35 | return arr; 36 | } 37 | 38 | let leftArr = []; 39 | let rightArr = []; 40 | let q = arr[0]; 41 | for(let i = 1,l=arr.length; iq) { 43 | rightArr.push(arr[i]); 44 | }else{ 45 | leftArr.push(arr[i]); 46 | } 47 | } 48 | 49 | return [].concat(quickSort(leftArr),[q],quickSort(rightArr)); 50 | } 51 | ``` 52 | - 还好冒泡还记得，又用冒泡写的，马马虎虎能运行了。 53 | ```javascript 54 | function bubbleSort(arr) { 55 | for(let i = 0,l=arr.length;iarr[j]) { 58 | let tem = arr[i]; 59 | arr[i] = arr[j]; 60 | arr[j] = tem; 61 | } 62 | } 63 | } 64 | return arr; 65 | } 66 | ``` 67 | 68 | # 2.ES6 69 | 提了下ES6，问了ES6的**let，const与var**的区别，特意说下let和const有块级作用域。var没有。然后又问了我都有什么作用域，我说ES5没有块级作用域，有全局作用域和函数作用域。然后面试官补充了一个对象作用域，这个我知道只是好像没经过总结过啊。 70 | 71 | 问我在项目中使用的ES6都有哪些？我说**Promoise**挺优雅的，然后让我写写，然后我就写了个XmlHttpServer，啊悲了个催了的，我的编辑器没有智能提示（论一个智能提醒的IDE有多重要），然后我手写的ajax请求，忘记了很多细节，怎么写啊，写了部分，面试官看不下去了吧（心伤），说他明白我的意思，你不用全部写下来，把过程大概写好就行了。然后我就写了怎么调用，我是理解了Promise，不知道这个问题面试官给打多少分，所以说坑都是自己挖的。 72 | 73 | 其实介绍了几次我使用了React+react router，估计阿里内部使用的是Weex，Kissy这样的自己的框架，面试官估计没有太接触React，所以一直没问我这方面的问题。 74 | 75 | # 3.项目 76 | 一直不提我使用React写的项目，提起来我之前做的一个项目，那个项目我也没啥说的吧，我只能说我比较早做的，使用的都是老技术。运用的是Bootstrap，查询渲染数据，巴拉巴拉，感觉我说完的意思是我的这个项目不咋样，自己不相信自己了啊，怀疑了人生。 77 | 78 | 然后问我做了其他的有什么最深的体会。 79 | 所以我立刻就说了使用 React的项目（终于可以介绍了），然后我就说主要分了两个模块，一个是基础的显示模块，一个是地图模块，使用Openlayers api的组件化，还和github上的有个OpenLayer封装的做了个对比，我说有一个开源的使用React封装的Openlayers不方便，而且源码不全，我就自己封装了，面试官再次表现出了不太了解React，所以就没有继续追问下去。 80 | 81 | # 4.对可视化的理解 82 | 估计看了我的博客，我的博客最近写的是WebGL，就问了我对WebGL的理解。 83 | 理解，这怎么说啊，好难过，我也不知道怎么描述啊。而且我也只是刚看了一个星期的书，还有一个周的Threejs罢了，我就说性能好，但是WebGL书写比较麻烦，所以大家都用Three.js,我也看了部分的Three.js。然后又顺嘴提了下我后面的研究方向， 目前还没有太深的理解（是不是这句话不应该说啊，应该忽悠忽悠的啊），然后就又随口说了下cesium.js,与我们的专业还有点关系--webgis，然后我们会在此基础上扩展。 84 | 85 | 总之问我理解，我又给出的印象是我的理解不深，痛心了。 86 | 然后给了个更大的题目，对可视化的理解，这题目呢，怎么说啊。我只能说大数据可视化和canvas，然后举了举例子，ECharts，datav，mapv等，然后说我对这方面挺有兴趣的，忘了面试官说什么了，好像的意思也只是你对这感兴趣，有个方向，没有深耕下去。 87 | 88 | # 5.总结 89 | 这可以说是我第一次真正意义上的面试，第一次视频面试，还是阿里的。总之感觉是这次我没戏了，哪怕是个实习面试。看来是要多刷刷面试经验的。 90 | 91 | 离远方还是有很多路要走啊，还有两三个月时间，继续加油吧，一定要告诫自己不要气馁，坚持就是胜利。 92 | 93 | 简单体会，写至此处，感怀万千。，坚持就是胜利。 简单体会，写至此处，感怀万千。 94 | -------------------------------------------------------------------------------- /src/HTTP协议实践篇--浏览器缓存总结、利用Fiddler和apache模拟.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: HTTP协议实践篇--浏览器缓存总结、利用Fiddler和apache模拟 3 | tags: 4 | - HTTP协议 5 | - HTTP协议实践 6 | - 浏览器缓存 7 | date: 2016-09-27 00:00:00 8 | categories: HTTP/TCP/IP 9 | --- 10 | # 1.浏览器缓存 11 | 废话少说，我们先了解浏览器缓存的知识。 12 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-1.png) 13 | 其中优先级是：Cache-Control>Expires>协商缓存 14 | 浏览器访问缓存的顺序是： 15 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-2.png) 16 | # 2.浏览器刷新的几种状态 17 | - **普通模式** 我们下面的叙述在没有特殊说明的情况下就是这个模式 18 | - **普通页面跳转**（点击页面链接跳转，window.open，在地址栏敲回车，刷新页面） 19 | + 无缓存情况下，请求会返回所有资源结果 20 | + 设置Expires并且未过期时，浏览器将不会发出http请求 21 | + 如果Expires过期，则会发送相应请求，并附带上Last-Modifed等信息，供服务器校验 22 | - **页面刷新(F5)** 23 | 这种情况一下，一般会看到很多304的请求，就是说即便资源设置了Expires且未过期，浏览器也会发送相应请求，**命中协商缓存**。 24 | - **强制刷新(Ctrl+F5)** 25 | 效果和无缓存时候一致，返回200的结果 26 | 27 | # 3.强缓存 28 | 返回的http状态为**200**，在chrome的开发者工具的network里面size会显示为from cache 29 | ## 3.1 Cache-Control 30 | 请求指令 31 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-3.png) 32 | 响应指令 33 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-4.png) 34 | 这里需要注意`no-cache`对客户端和服务器含义是不同的，见下图 35 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-5.png) 36 | 37 | ## 3.2 Expires 38 | 资源失效的日期 39 | ``` 40 | Expires: Wed, 21 Sep 2016 12:06:44 GMT 41 | ``` 42 | 43 | --- 44 | **实践：** 45 | ## 实践3-1 html文件中 46 | 在html文件中 47 | 48 | ```html 49 | 50 | 51 | ``` 52 | 这些方法不常用，而且测试不能通过 53 | ## 实践3-2 PHP中设置 54 | 55 | 可以使用php设置，当然也可以在apche服务器中进行设置 56 | ```php 57 | header("Cache-Control: public"); 58 | header("Pragma: cache"); 59 | $offset = 30*60*60*24; // cache 1 month 60 | $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT"; 61 | header($ExpStr); 62 | ``` 63 | chrome network工具栏显示 64 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-6.png) 65 | **打开浏览器新窗口的方式测试，而不是F5刷新** 66 | chrome network工具栏显示 67 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-7.png) 68 | 69 | ## 实践3-3 不需要PHP 70 | 可以像[浅谈浏览器http的缓存机制](http://www.cnblogs.com/vajoy/p/5341664.html)文中所使用的方法 71 | 72 | - 在fildder右下角黑色区域--命令行，输入如：bpu localhost:8000 阻断来自localhost:8000的本地http请求 73 | - 点击被拦截的请求，可以在右栏直接修改报文内容（上半区域是请求报文，下半区域是响应报文），点击黄色的“Break on Response”按钮可以执行下一步（把请求发给服务器），点击绿色的按钮“Run to Completion”可以直接完成整个请求过程 74 | 75 | --- 76 | 77 | # 4.协商缓存 78 | 当浏览器对某个资源的请求没有命中强缓存，就会发一个请求到服务器，验证协商缓存是否命中，如果协商缓存命中，请求响应返回的http状态为**304**并且会显示一个Not Modified的字符串 79 | ## 4.1 Last-Modified，If-Modified-Since 80 | 这对名词通常是成对出现的 81 | `last-modified`：服务端设置的文档的最后的更新日期 82 | `if-modified-since`用于指定这个时间以后的服务器资源，GMT格式 83 | 84 | ## 4.2 ETag、If-None-Match/if-match 85 | 这对名词通常也是成对出现的 86 | `ETag`用于服务器向客户端传送的代表实体内容特征的标记信息 87 | `If-None-Match/if-match`服务器给客户机传送网页的时候，可以传递代表实体内容特征的头字段（ETag），这种头字段被叫做实体标签。当客户机再次向服务端发请求的时候，会使用if-match携带实体标签信息 88 | 89 | --- 90 | 91 | **实践：** 92 | **php** 93 | ```php 94 | header("Last-Modified:".gmdate("D, d M Y H:i:s") . " GMT" ); 95 | ``` 96 | **使用fiddler请求** 97 | ``` 98 | 如： 99 | If-Modified-Since: Wed, 04 Oct 2016 13:32:30 GMT 100 | Last-Modified: Wed, 05 Oct 2016 13:32:30 GMT 101 | ``` 102 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/2/http2-8.png) 103 | 测试了几遍，并没有返回 304，原因不明 104 | 105 | --- 106 | 107 | **参考阅读:** 108 | - [php header()函数设置页面Cache缓存](http://www.111cn.net/phper/php/48528.htm) 109 | - [在php编程中使用header()函数发送文件头，设置浏览器缓存，加快站点的访问速度](http://www.lampweb.org/seo/4/11.html) 110 | - [浅谈浏览器http的缓存机制](http://www.cnblogs.com/vajoy/p/5341664.html) 111 | - [HTML meta标签总结与属性的使用介绍](http://www.imooc.com/article/4475) -------------------------------------------------------------------------------- /src/javascript数据结构4-队列2-基数排序.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构4-队列2-基数排序 3 | tags: 4 | - javascript 5 | - 数据结构 6 | categories: 数据结构 7 | date: 2016-10-09 00:00:00 8 | --- 9 | 10 | 第一次按个位上的数字进行排序，第二次按十位上的数字进行排序 11 | 12 | 排序：91, 46, 85, 15, 92, 35, 31, 22 13 | **经过基数排序第一次扫描**之后，数字被分配到如下盒子中： 14 | 15 | ``` 16 | Bin 0: 17 | Bin 1: 91, 31 18 | Bin 2: 92, 22 19 | Bin 3: 20 | Bin 4: 21 | Bin 5: 85, 15, 35 22 | Bin 6: 46 23 | Bin 7: 24 | Bin 8: 25 | Bin 9: 26 | ``` 27 | 28 | 根据盒子的顺序，对数字进行第一次排序的结果如下： 29 | 91, 31, 92, 22, 85, 15, 35, 46 30 | 然后根据**十位上的数值再将上次排序**的结果分配到不同的盒子中： 31 | 32 | ``` 33 | Bin 0: 34 | Bin 1: 15 35 | Bin 2: 22 36 | Bin 3: 31, 35 37 | Bin 4: 46 38 | Bin 5: 39 | Bin 6: 40 | Bin 7: 41 | Bin 8: 85 42 | Bin 9: 91, 92 43 | ``` 44 | Javascript实现代码： 45 | 46 | ```html5 47 | 48 | 49 | 50 | 51 | Queue Sample 52 | 53 | 54 | 55 | 151 | 152 | 153 | 154 | ``` 155 | 156 | 157 | -------------------------------------------------------------------------------- /src/webpack基础实践2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: webpack基础实践2 3 | tags: 4 | - FE 5 | - javascript 6 | - webpack 7 | categories: 前端技术 8 | date: 2016-09-28 00:00:00 9 | --- 10 | 本文在webpack基础实践1的基础上，主要阐述的是模块化和ES6与webpack的结合使用。 11 | # 1.模块化 12 | **commonJS/CMD风格** 13 | module1.js 14 | 15 | ```javascript 16 | var obj = { 17 | val:"hello from m1", 18 | sayHi:function(){ 19 | document.write('hi'); 20 | }, 21 | sum:function(a,b){ 22 | return a+b; 23 | } 24 | }; 25 | module.exports = obj; 26 | ``` 27 | **AMD风格** 28 | module2.js 29 | 30 | ```javascript 31 | define(['./module1.js'],function(m1){ 32 | return "1+2="+m1.sum(1,2); 33 | }); 34 | ``` 35 | 入口文件entry.js 36 | 37 | ```javascript 38 | var m1 = require("./module1.js"); 39 | document.write("
"); 40 | document.write(m1.val); 41 | document.write("
"); 42 | var m2 = require("./module2.js"); 43 | document.write(m2); 44 | ``` 45 | 结果显示为 46 | ``` 47 | hello from m1 48 | 1+2=3 49 | ``` 50 | 当然实际项目中不建议两种风格的模块都使用，选择其中一种模块风格即可。 51 | # 2.ES6 52 | webpack是支持babel转化器的，所以可以将ES6代码转为ES5供现在的浏览器使用 53 | - 1) 安装babel依赖库 54 | 55 | ```bash 56 | npm install babel-loader --save-dev 57 | npm install babel-core --save-dev 58 | npm install babel-preset-es2015 --save-dev 59 | ``` 60 | - 2) 新建一个`.babelrc`文件，内容是： 61 | 62 | ```javascript 63 | { 64 | "presets": [ 65 | "es2015" 66 | ] 67 | } 68 | ``` 69 | - 3) 配置`webpack.config.js`文件 70 | ```javascript 71 | module: {loaders: [ 72 | { test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',} 73 | ] 74 | ``` 75 | - 4) 入口文件`entry.js`中就可以使用了 76 | 77 | ```javascript 78 | /*es6*/ 79 | require("./es6test2.js"); 80 | ``` 81 | `es6test2.js` 82 | 83 | ```javascript 84 | import Point from './es6test1'; 85 | 86 | let p = new Point(1,2); 87 | document.write(p.toString()); 88 | ``` 89 | `es6test1.js` 90 | 91 | ```javascript 92 | //定义类 93 | class Point { 94 | constructor(x, y) { 95 | this.x = x; 96 | this.y = y; 97 | } 98 | 99 | toString() { 100 | return '(' + this.x + ', ' + this.y + ')'; 101 | } 102 | } 103 | export default Point; 104 | ``` 105 | 编译完成即可 106 | # 3.总结 107 | 108 | ## 3.1 配置文件`webpack.config.js` 109 | 110 | ```javascript 111 | module.exports = { 112 | entry: "./src/home/js/entry.js", //入口文件 113 | output: { 114 | path: __dirname, 115 | filename: "bundle.js" 116 | }, 117 | module: { 118 | loaders: [ 119 | { test: /\.css$/, loader: "style!css" }, //css加载器 120 | { test: /\.scss$/, loader: "style!css!sass" }, //sass加载器 121 | { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, //图片加载器 122 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', } 123 | ] 124 | } 125 | }; 126 | ``` 127 | ## 3.2 加载的依赖库`package.json` 128 | 129 | ```javascript 130 | { 131 | "name": "webpackdemo", 132 | "version": "1.0.0", 133 | "description": "webpack demo", 134 | "main": "index.js", 135 | "scripts": { 136 | "test": "echo \"Error: no test specified\" && exit 1" 137 | }, 138 | "author": "", 139 | "license": "ISC", 140 | "devDependencies": { 141 | "babel-core": "^6.14.0", 142 | "babel-loader": "^6.2.5", 143 | "babel-preset-es2015": "^6.14.0", 144 | "css-loader": "^0.24.0", 145 | "file-loader": "^0.9.0", 146 | "node-sass": "^3.8.0", 147 | "sass-loader": "^4.0.0", 148 | "style-loader": "^0.13.1", 149 | "url-loader": "^0.5.7", 150 | "webpack": "^1.13.2" 151 | } 152 | } 153 | ``` 154 | ## 3.3 入口文件`entry.js` 155 | ```javascript 156 | require("./style.css"); 157 | require("./index.scss"); 158 | 159 | document.write(require("./content.js")); 160 | document.write("
"); 161 | 162 | var img = document.createElement("img"); 163 | img.src = require("./img/webpack.png"); 164 | document.body.appendChild(img); 165 | document.write("
"); 166 | 167 | /*模块化*/ 168 | var m1 = require("./module1.js"); 169 | document.write("
"); 170 | document.write(m1.val); 171 | document.write("
"); 172 | var m2 = require("./module2.js"); 173 | document.write(m2); 174 | document.write("
"); 175 | 176 | /*es6*/ 177 | require("./es6test2.js"); 178 | ``` 179 | -------------------------------------------------------------------------------- /src/webpack基础实践1.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: webpack基础实践1 3 | tags: 4 | - FE 5 | - javascript 6 | - webpack 7 | categories: 前端技术 8 | date: 2016-09-28 00:00:00 9 | --- 10 | 11 | 这是个webpack的入门教程，看到网上blog大多是配置好了再解释，这样来的不太直观。本文从第一步开始慢慢做起，一步一步走下来，最后再总结，这样直观看到每个配置行代表什么含义。 12 | webpack的作用是什么？现在说太多可能对于入门的同学来说也不好理解，索性这里就记住一句话，一张图得了 13 | **一张图** 14 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/webpack.png) 15 | **一句话** 16 | webpack是能把各种资源，例如JS(JSX),coffee,样式(CSS/SASS/LESS),图片作为模块来进行打包和处理。 17 | # 1.安装 18 | ## 1.1 安装全局webpack 19 | 前提是在本地先安装了`node.js`. 20 | 21 | ```bash 22 | $ npm install webpack -g 23 | ``` 24 | ## 1.2 将依赖写入package.json 25 | 新建的话： 26 | 27 | ```bash 28 | npm init 29 | ``` 30 | 一路回车就可以，其实这些都是项目的描述信息和git地址等信息，这些信息我们可以后面再文件中直接修改 31 | 如果是clone的项目，已经有package.json文件了，就运行命令(忽略步骤`1.3`,`2.3`引入css加载器部分) 32 | ```bash 33 | npm install 34 | ``` 35 | ## 1.3 安装局部webpack 36 | ```bash 37 | npm install webpack --save-dev 38 | ``` 39 | # 2.开始使用 40 | ## 2.1 起步 41 | `entry.js`作为我们的入口文件，其中会包含其他模块(js)或者是CSS 42 | 43 | ```javascript 44 | document.write("入口entry.js"); 45 | ``` 46 | index.html 47 | 48 | ```html 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | ``` 58 | 运行webpack命令 59 | ```bash 60 | $ webpack ./entry.js bundle.js 61 | ``` 62 | 然后index.html就可以work了 63 | ``` 64 | 入口entry.js 65 | ``` 66 | ## 2.2 引入其他模块 67 | `content.js` 68 | ```javascript 69 | module.exports = "模块content.js"; 70 | ``` 71 | `entry.js` 72 | ```javascript 73 | document.write(require("./content.js")); 74 | ``` 75 | 编译命令同上 76 | 运行index.html结果 77 | ``` 78 | 模块content.js 79 | ``` 80 | ## 2.3 引入CSS 81 | 引入css加载器 82 | 83 | ```bash 84 | npm install css-loader --save-dev 85 | npm install style-loader --save-dev 86 | ``` 87 | style.css 88 | 89 | ```css 90 | body { 91 | background: yellow; 92 | } 93 | ``` 94 | entry.js 95 | 96 | ```javascript 97 | require("!style!css!./style.css"); 98 | document.write(require("./content.js")); 99 | ``` 100 | 最后编译，就是这么简单随意完成了，如果我们想这样`require("./style.css");`引入css，岂不是更加完美 101 | 使用编译命令 102 | 103 | ```bash 104 | webpack ./entry.js bundle.js --module-bind 'css=style!css' 105 | ``` 106 | ## 2.4 引入SASS文件 107 | 引入sass加载器 108 | 109 | ```bash 110 | npm install node-sass --save-dev 111 | npm install sass-loader --save-dev 112 | ``` 113 | index.scss 114 | ```css 115 | body{ 116 | color:white; 117 | } 118 | ``` 119 | 同css一样 120 | entry.js 121 | 122 | ```javascript 123 | require("!style!css!sass!./index.scss"); 124 | ``` 125 | 当然我们还不是很满意。简单点，编译命令的方式简单点。所以我们来到了配置文件 126 | # 3.配置文件 127 | 新建文件`webpack.config.js` 128 | 129 | ```javascript 130 | module.exports = { 131 | entry: "./entry.js", 132 | output: { 133 | path: __dirname, 134 | filename: "bundle.js" 135 | }, 136 | module: { 137 | loaders: [ 138 | { test: /\.css$/, loader: "style!css" },//css加载器 139 | { test: /\.scss$/, loader: "style!css!sass" }//sass加载器 140 | ] 141 | } 142 | }; 143 | ``` 144 | 编译命令就剩下这样的 145 | ```bash 146 | webpack 147 | ``` 148 | # 5.图片的打包 149 | 图片是用url-loader加载的。css中的url属性，其实就是一种封装过的require操作。 150 | ```bash 151 | npm install url-loader --save-dev 152 | npm install file-loader --save-dev 153 | ``` 154 | webpack.config.js 155 | 156 | ```javascript 157 | {test: /\.(jpg|png)$/, loader: "url?limit=8192"} 158 | ``` 159 | 在js中 entry.js 160 | 161 | ```javascript 162 | var img = document.createElement("img"); 163 | img.src = require("./img/webpack.png"); 164 | document.body.appendChild(img); 165 | ``` 166 | 或者直接在css中写 167 | ```css 168 | div.img{ 169 | width: 300px; 170 | height: 300px; 171 | background: url("./img/font-icon.png");//小于8kb的图片会打包处理成Base64的图片 172 | } 173 | ``` 174 | # 6.常用webpack编译命令 175 | ```bash 176 | webpack //基本命令 177 | webpack --progress --colors //显示打包过程 178 | webpack -w //实时进行打包更新，文件改变时候，自动打包 179 | webpack -p // 对打包后的文件进行压缩，提供production 180 | webpack -d // 提供source map，方便调试。 181 | ``` 182 | 183 | 关于对图片打包 AMD/CommonJS/ES6的使用在下一篇博客中`webpack基础实践2` 184 | 参考文章 185 | - [webpack官网-getting-start](http://webpack.github.io/docs/tutorials/getting-started/) 186 | - [webpack前端模块加载工具](http://www.cnblogs.com/YikaJ/p/4586703.html) -------------------------------------------------------------------------------- /src/javascript数据结构8-图（Graph）.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构8-图（Graph） 3 | tags: 4 | - javascript 5 | - 数据结构 6 | categories: 数据结构 7 | date: 2016-10-09 00:00:00 8 | --- 9 | 10 | 11 | **图（graph）** 12 | 图由边的集合及顶点的集合组成 13 | **有向图：** 14 | ![有向图](http://img.blog.csdn.net/20151208125116430) 15 | **无向图：** 16 | ![这里写图片描述](http://img.blog.csdn.net/20151208125202948) 17 | **代码：** 18 | 19 | ```html5 20 | 21 | 22 | 23 | 24 | Graph 25 | 26 | 27 | 136 | 137 | 138 | ``` 139 | **运行结果：** 140 | 141 | > 142 | 0-->1 2 143 | 1-->0 3 144 | 2-->0 4 145 | 3-->1 146 | 4-->2 147 | ======深度度优先搜索===== 148 | 访问的节点:0 149 | 访问的节点:1 150 | 访问的节点:3 151 | 访问的节点:2 152 | 访问的节点:4 153 | ======广度优先搜索===== 154 | 访问的节点:0 155 | 访问的节点:1 156 | 访问的节点:2 157 | 访问的节点:3 158 | 访问的节点:4 159 | 160 | 深度搜索的含义： 161 | ![深度搜索](http://img.blog.csdn.net/20151208125306927) 162 | 广度搜索的含义： 163 | ![广度搜索](http://img.blog.csdn.net/20151208125325697) -------------------------------------------------------------------------------- /src/openlayers 3实践与原理探究4.3.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer 3 | tags: 4 | - OpenLayers 3 5 | - 地图 6 | - js库 7 | - WebGIS 8 | categories: WebGIS 9 | date: 2016-09-28 00:00:00 10 | --- 11 | 12 | # 3.Source 13 | `ol/ol/Source`文件夹下 14 | 15 | ## 3.1构造函数 16 | ### 3.1.1 `ol.source.Source` ol.source的基础类 17 | `ol/ol/Source/source.js` 18 | 19 | ```javascript 20 | ol.source.Source = function(options) {} 21 | ``` 22 | ### 3.1.2 `ol.source.OSM` 23 | `ol/ol/Source/osmsource.js` 24 | `openStreetMap`： 25 | 26 | ```javascript 27 | ol.source.OSM = function(opt_options) {} 28 | ``` 29 | 具体不进行展开描述。 30 | 运用实例： 31 | 32 | ```javascript 33 | var osmSource = new ol.source.OSM(); 34 | ``` 35 | ### 3.1.3 `ol.source.TileWMS` 36 | 先看个例子： 37 | 38 | ```javascript 39 | var map = new ol.Map({ 40 | target: 'map', //document.getElementById("map") 41 | layers: [ 42 | new ol.layer.Tile({ 43 | title: "Global Imagery", 44 | source: new ol.source.TileWMS({ 45 | url: 'http://demo.boundlessgeo.com/geoserver/wms', 46 | params: { 47 | 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' 48 | } 49 | }) 50 | }) 51 | ], 52 | 53 | }); 54 | ``` 55 | 我们可以一路找下源头： 56 | `tilewmssource.js`-->`tileimagessource.js`-->`uritilesource.js`-->`tilespurce.js`-->`source.js` 57 | 我们可以发现实例中的`source.url`是在`uritilesource.js` 58 | 处理的 59 | 我们先考虑单url的情况(当然存在url数组的情况) 60 | 61 | ```javascript 62 | if (options.url) { 63 | this.setUrl(options.url); 64 | } 65 | //... ... 66 | ol.source.UrlTile.prototype.setUrl = function(url) { 67 | var urls = this.urls = ol.TileUrlFunction.expandUrl(url); 68 | this.setTileUrlFunction(this.fixedTileUrlFunction ? 69 | this.fixedTileUrlFunction.bind(this) : 70 | ol.TileUrlFunction.createFromTemplates(urls, this.tileGrid), url); 71 | }; 72 | ``` 73 | 处理函数为`fixedTileUrlFunction`,在`tilewmssource.js` 74 | `fixedTileUrlFunction`-->`getRequestUrl_`-->`ol.uri.appendParams(url, params)`请求地图 75 | params包含请求地图的宽、高、分辨率、地图范围 76 | # 4.Layer 77 | `ol/ol/Layer`文件夹下 78 | 79 | ## 4.1构造函数 80 | ### 4.1.1 `ol/ol/Layer/layer.js` 81 | 82 | ```javascript 83 | ol.layer.Layer = function(options) {} 84 | ``` 85 | ```javascript 86 | ol.inherits(ol.layer.Layer, ol.layer.Base); 87 | ``` 88 | `ol.layer.Base`定义layer的基本属性和基本属性的setter，getter方法 89 | 90 | 实际在api接口上使用的是具体的图层 91 | ### 4.1.2 矢量地图`ol/ol/Layer/vectorlayer.js` 92 | ```javascript 93 | ol.layer.Vector = function(opt_options) { 94 | var baseOptions = ol.object.assign({}, options); 95 | ol.layer.Layer.call(this, /** @type {olx.layer.LayerOptions} */ (baseOptions)); 96 | } 97 | ``` 98 | 实际调用的方法，仍然在`ol/ol/Layer/layer.js`中 99 | ### 4.1.3 瓦块地图`ol/ol/Layer/titlelayer.js` 100 | ```javascript 101 | ol.layer.Tile = function(opt_options) { 102 | var baseOptions = ol.object.assign({}, options); 103 | ol.layer.Layer.call(this, /** @type {olx.layer.LayerOptions} */ (baseOptions)); 104 | } 105 | ``` 106 | 还有`heatmaplayer.js`,`imagelayer.js`,`vectortilelayer.js`对应热力图，图片地图，矢量瓦块地图 107 | 总结： 108 | `ol/ol/Layer/layer.js`是通用的方法部分 109 | 各个具体的地图*.js是各个地图的专有方法。 110 | 运用实例： 111 | 112 | ```javascript 113 | var map = new ol.Map({ 114 | target: 'map', //document.getElementById("map") 115 | layers: [ 116 | new ol.layer.Tile({ 117 | title: "Global Imagery", 118 | source: new ol.source.TileWMS({ 119 | url: 'http://demo.boundlessgeo.com/geoserver/wms', 120 | params: { 121 | 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR' 122 | } 123 | }) 124 | }) 125 | ], 126 | 127 | }); 128 | ``` 129 | `source`在layer.js中处理 130 | 131 | ```javascript 132 | var source = options.source ? options.source : null; 133 | this.setSource(source); 134 | 135 | ol.layer.Layer.prototype.setSource = function(source) { 136 | this.set(ol.layer.LayerProperty.SOURCE, source);//添加到常量上，其实也是将source对象共享出去了 137 | }; 138 | ``` 139 | ## 4.2方法 事件 140 | ### 4.2.1 `ol/ol/Layer/layer.js` 141 | 主要是一下方法 142 | ```javascript 143 | ol.layer.Layer.visibleAtResolution 144 | getLayersArray 145 | getLayerStatesArray 146 | getSource 147 | getSourceState 148 | handleSourceChange_ 149 | handleSourcePropertyChange_ 150 | setMap 151 | setSource 152 | ``` -------------------------------------------------------------------------------- /src/写给前端er的TCP-IP知识及《图解TCP-IP》读书笔记.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 写给前端er的TCP/IP知识及《图解TCP/IP》读书笔记 3 | tags: 4 | - TCP/IP 5 | - 图解TCP/IP 6 | categories: HTTP/TCP/IP 7 | date: 2016-11-08 00:00:00 8 | --- 9 | # 1.分层 10 | OSI参考模型分为7层，TCP/IP分为四层。 11 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/1.jpg) 12 | 13 | # 2.物理设备介绍 14 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/2.jpg) 15 | 16 | # 3.传输过程 17 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/3.jpg) 18 | 19 | # 4.分层介绍 20 | 21 | ## 4.1 数据链路层 22 | 23 | 几个关键的相关技术 24 | - MAC地址：用于识别数据链路层中互连的节点，在使用网卡（NIC）的情况下，MAC地址会烧入在ROM中 25 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/4.png) 26 | - 以太网（Ethernet） 27 | 以太网帧式，前端是前导码部分，后面是帧的本体 28 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/5.jpg) 29 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/6.jpg) 30 | 帧尾叫做FCS，用来检测帧信息是否完整 31 | 32 | ## 4.2 网路层 33 | 34 | ### 4.2.1 IP协议--无连接型 35 | 36 | - **数据链路层和IP层的区别：** 37 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/7.jpg) 38 | #### 1. **IP地址的分类** 39 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/8.jpg) 40 | A类：0.0.0.0 ~ 127.0.0.0 【127为回环测试地址，如127.0.0.0为本机地址】 41 | B类：128.0.0.1 ~ 191.255.0.0 42 | C类：192.0.0.0 ~ 233.255.255.0 43 | D类：224.0.0.0 ~ 239.255.255.0 【用于多播】 44 | #### 2. **单播、广播、多播** 45 | 单播：一对一 46 | 广播：会被路由器屏蔽 47 | 【例如：192.168.0.0/24广播地址为192.168.0.255/24】 48 | 多播：能通过路由器，D类IP地址，从224.0.0.0 ~ 239.255.255.255 49 | 其中224.0.0.0到224.0.0.255不需要路由控制，在同一个链路中能实现多播。 50 | #### 3. **解决IP地址有限：** 51 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/9.jpg) 52 | 标识方法： 53 | **方法1：** 54 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/10.jpg) 55 | **方法2：** 56 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/11.jpg) 57 | #### 4. **IP分片：** 58 | 数据链路不同，最大的传输单元（MTU）不同，所以需要对IP分片进行处理。分片只能在目标主机中进行重组。 59 | - **ICMP通知MTU大小** 60 | 路径MTU发现机制（UDP情况下） 61 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/12.png) 62 | 路径MTU发现机制（TCP情况下）不同于上 63 | #### 5. **IPv6** 64 | IP地址长度为128位，以每18比特为一组进行标记，如果出现连续的0，用“::”代替 65 | - **IPv6地址结构：** 66 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/13.png) 67 | 全局单播地址是世界上唯一的地址 68 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/14.png) 69 | #### 6. **IPv4首部** 70 | IP首部+IP载荷（数据）组成： 71 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/16.png) 72 | #### 7. **IPv6首部** 73 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/17.png) 74 | 75 | ### 4.2.2 IP协议相关技术 76 | 77 | #### 1. DNS 78 | 管理主机名和IP地址之间对应关系的系统，叫做DNS系统。 79 | - **DNS查询：** 80 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/18.png) 81 | 第三步 会将IP地址信息暂时保存到缓存中，减少每次查询时的性能消耗。 82 | DNS的主要记录包括很多类型的数据，比如类型A值主机名的IP地址，PTR指IP地址的反向解析，即IP地址检索的主机名。 83 | #### 2. ARP 84 | IP地址到Mac地址解析 85 | #### 3.ICMP 86 | 主要功能是确认IP包是否成功送达目的地址，通知在发送过程当中IP包被废弃的原因，改善网络的设置等。 87 | #### 4.DHCP 88 | 动态设置ip地址 89 | 90 | ## 4.3 TCP/UDP 91 | 92 | - TCP首部格式 93 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/19.jpg) 94 | - 三次握手 95 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/20.jpg) 96 | - 识别多个请求 97 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/21.jpg) 98 | - 套接口 99 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/22.jpg) 100 | 101 | ## 4.4 应用层 102 | 应用层有SSH，FTP，HTTP，TLS/SSL等 103 | - ftp使用两条TCP连接 104 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/23.jpg) 105 | - javascript，CGI 106 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/HTTP%E5%8D%8F%E8%AE%AE/tcp-ip/24.jpg) 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /src/openlayers 3实践与原理探究2.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: OpenLayers 3实践与原理探究2-ol3基础入门案例 3 | tags: 4 | - OpenLayers 3 5 | - 地图 6 | - js库 7 | - WebGIS 8 | categories: WebGIS 9 | date: 2016-09-28 00:00:00 10 | --- 11 | 【注】所有代码挂在我的[github](https://github.com/zrysmt/openlayers-3)上 12 | 13 | # 0.实例 14 | 在OpenLayers3官网的[下载页面](http://openlayers.org/download/)下载我们在开发工程中需要的文件(如：v3.17.1-dist.zip)，实际工程中包含两个文件`ol.js`,`ol.css` 15 | 先看一个实例代码如下： 16 | 17 | ```html 18 | 19 | 20 | 21 | 22 | 23 | 1-TileWMS 24 | 25 | 26 | 27 | 28 |
29 |
30 | 31 | 56 | 57 | 58 | 59 | ``` 60 | 效果图： 61 | ![ol3讲解实例效果图](https://raw.githubusercontent.com/zrysmt/mdPics/master/ol/ol3%E8%AE%B2%E8%A7%A3%E7%A4%BA%E4%BE%8B1.jpg) 62 | 63 | 通过api的overview我们可以看到ol3的核心部件 64 | ![ol3-api-overview](https://raw.githubusercontent.com/zrysmt/mdPics/master/ol/ol3-api-overview.png) 65 | # 1.基本概念 66 | ![ol3基本概念的关系](https://raw.githubusercontent.com/zrysmt/mdPics/master/ol/ol3%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5%E5%85%B3%E7%B3%BB.png) 67 | ## 1.1 Map 68 | Map(ol.Map)是OL3的核心部件，它被呈现在target容器上(div)。也可以使用setTarget方法。 69 | 位置：`ol/ol/map.js` 70 | 71 | ```javascript 72 | var map = new ol.Map({target: 'map'}); 73 | ``` 74 | ## 1.2 View 75 | `ol.View`负责地图的中心点，放大，投影之类的设置。 76 | 一个ol.View实例包含投影projection，该投影决定中心center 的坐标系以及分辨率的单位，如果没有指定（如下面的代码段），默认的投影是球墨卡托（EPSG：3857），以米为地图单位。 77 | 78 | 放大zoom 选项是一种方便的方式来指定地图的分辨率，可用的缩放级别由maxZoom （默认值为28）、zoomFactor （默认值为2）、maxResolution （默认由投影在256×256像素瓦片的有效成都来计算） 决定。起始于缩放级别0，以每像素maxResolution 的单位为分辨率，后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的，直到缩放级别达到maxZoom 。 79 | ```javascript 80 | var map = new ol.Map({ 81 | target: 'map', 82 | view: new ol.View({ 83 | projection: 'EPSG:4326', //WGS 84 84 | center: [0, 0], 85 | zoom: 2, 86 | maxResolution: 0.703125 87 | }), 88 | 89 | }); 90 | ``` 91 | ## 1.3 Source 92 | OpenLayers 3使用ol.source.Source子类获取远程数据图层，包含免费的和商业的地图瓦片服务，如OpenStreetMap、Bing、OGC资源（WMS或WMTS）、矢量数据（GeoJSON格式、KML格式…）等。 93 | 94 | ```javascript 95 | var osmSource = new ol.source.OSM(); 96 | ``` 97 | ## 1.4 Layer 98 | 一个图层是资源中数据的可视化显示，OpenLayers 3包含三种基本图层类型：`ol.layer.Tile（瓦片）`、`ol.layer.Image（图片样式的图层`）和 `ol.layer.Vector（矢量图层）`。 99 | 100 | - `ol.layer.Tile` 用于显示瓦片资源，这些瓦片提供了预渲染，并且由特定分别率的缩放级别组织的瓦片图片网格组成。 101 | - `ol.layer.Image`用于显示支持渲染服务的图片，这些图片可用于任意范围和分辨率。 102 | - `ol.layer.Vector`用于显示在客户端渲染的矢量数据。 103 | 104 | ```javascript 105 | var osmLayer = new ol.layer.Tile({source: osmSource}); map.addLayer(osmLayer); 106 | ``` 107 | ## 1.5 控件与交互 108 | ### 1.5.1 控件 109 | 110 | ```javascript 111 | var map = new ol.Map({ 112 | controls: ol.control.defaults().extend([ 113 | new ol.control.FullScreen(), //全屏控件 114 | new ol.control.ScaleLine(), //比例尺 115 | new ol.control.OverviewMap(), //鹰眼控件 116 | new ol.control.Zoom(), 117 | ]), 118 | layers: [bglayer, vector], //添加两个图层 119 | target: 'map', //div#id='map' 120 | }); 121 | ``` 122 | ### 1.5.2 交互 123 | 124 | ```javascript 125 | var select = new ol.interaction.Select({ 126 | wrapX: false 127 | }); 128 | 129 | var modify = new ol.interaction.Modify({ 130 | features: select.getFeatures() 131 | }); 132 | var map = new ol.Map({ 133 | layers: [bglayer, vector], //添加两个图层 134 | target: 'map', //div#id='map' 135 | interaction:ol.interaction.defaults().extend([select, modify]) 136 | }); 137 | ``` 138 | 或者用方法的方式添加： 139 | 140 | ```javascript 141 | draw = new ol.interaction.Draw({ 142 | source: source, 143 | type: /** @type {ol.geom.GeometryType} */ (shapeName), 144 | geometryFunction: geometryFunction, 145 | maxPoints: maxPoints 146 | }); 147 | map.addInteraction(draw); //增加的交互 148 | ``` 149 | -------------------------------------------------------------------------------- /src/javascript数据结构6-字典-散列-集合.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: javascript数据结构6-字典 散列 集合 3 | tags: 4 | - javascript 5 | - 数据结构 6 | categories: 数据结构 7 | date: 2016-10-09 00:00:00 8 | --- 9 | 10 | ## 6.1 字典 11 | 字典是一种以键- 值对形式存储数据的数据结构，就像电话号码簿里的名字和电话号码一 12 | 13 | ```html5 14 | 15 | 16 | 17 | 18 | 字典sample 19 | 20 | 21 | 89 | 90 | 91 | ``` 92 | 93 | ## 6.2 散列（HashTable） 94 | 95 | 它通过把关键码值映射到表中一个位置来访问记录，以加快查找的速度 96 | 使用：MD5 和 SHA-1 可以说是目前应用最广泛的Hash算法 97 | java中已经实现 98 | ![这里写图片描述](http://img.blog.csdn.net/20151110094955099) 99 | 100 | ```html5 101 | 102 | 103 | 104 | 105 | HashTable散列表 106 | 107 | 108 | 160 | 161 | 162 | ``` 163 | ![这里写图片描述](http://img.blog.csdn.net/20151110095013990) 164 | 这就是碰撞，为避免碰撞，使用betterHash 165 | 修改： 166 | ```javascript 167 | function put(data) { 168 | // var pos = this.simpleHash(data); 169 | var pos = this.betterHash(data); 170 | this.table[pos] = data; 171 | } 172 | ``` 173 | 174 | -------------------------------------------------------------------------------- /src/React Router的一个完整示例.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: React Router的一个完整示例 3 | tags: 4 | - React 5 | - React Router 6 | categories: 前端技术 7 | date: 2016-11-04 00:00:00 8 | --- 9 | 本博文提供一个单网页结构网页（SPA）使用React Router路由控制跳转的完整例子。 10 | > 可以在我的[github](https://github.com/zrysmt/react-demo/tree/master/demo03) 中clone或者fork 11 | https://github.com/zrysmt/react-demo/tree/master/demo03 12 | 13 | 关于配置可以查看我之前的一篇博客：[一步一步进入React的世界（React+Webpack+ES6组合配置）](https://zrysmt.github.io/2016/10/31/%E4%B8%80%E6%AD%A5%E4%B8%80%E6%AD%A5%E8%BF%9B%E5%85%A5React%E7%9A%84%E4%B8%96%E7%95%8C%EF%BC%88React+Webpack+ES6%E7%BB%84%E5%90%88%EF%BC%89/)。 14 | # 1.整个目录结构 15 | ![](https://raw.githubusercontent.com/zrysmt/mdPics/master/react/1.png) 16 | - build是编译后的文件夹 17 | - src 放入源码 18 | + components组件 19 | + global 通用组件和SCSS 20 | + ... 分模块 21 | + app.js入口 22 | - index.html 23 | 24 | # 2.源码 25 | 关于源码可以在开头给出的github中找到详细的完整例子，这里就介绍重要的几个文件源码 26 | 记住要安装react-router 27 | 28 | ```bash 29 | npm i react-router -S 30 | ``` 31 | ## 2.1 index.html 32 | 33 | ```html 34 | 35 | 36 | 37 | 38 | 39 | Our Home,Our Heart 40 | 41 | 42 | 43 | 44 |
45 |
46 | 47 | 48 | 49 | ``` 50 | ## 2.2 入口文件app.js 51 | 关于react router的基础知识我们可以参考阮一峰老师的博客作为入门指导。 52 | 53 | ```javascript 54 | import React from 'react'; 55 | import ReactDOM from 'react-dom'; 56 | import {Router,Route,IndexRoute,hashHistory} from 'react-router'; 57 | 58 | import './components/global/global.scss'; 59 | 60 | import Nav from './components/global/menu'; 61 | import Home from './components/home/home'; 62 | import Story from './components/story/story'; 63 | 64 | 65 | class App extends React.Component{ 66 | render(){ 67 | return( 68 |
69 |
72 | ) 73 | } 74 | } 75 | 76 | ReactDOM.render(( 77 | 78 | 79 | 80 | 81 | 82 | 83 | ),document.body 84 | ); 85 | ``` 86 | **简单解释下:** 87 | 组件App除了包含Nav组件，还应该包括主体内容 88 | 当使用index.html访问的时候，是在项目根目录下，这样会先加载APP组件，APP组件包含`{this.props.children}`，便会加载``里面定义的组件Home。用户访问'/'相当于： 89 | 90 | ``` 91 | 92 |