2016年09月_TechFE

原创 WebRTC1-原理探究

1.抛砖引玉WebRTC (Web Real-Time Communications) 是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流或/和音频流或者其他任意数据的传输实时查看WebRTC在浏览器中的支持情况： http://caniuse.com/#search=webRTC FirFox 45+,Ch

2016-09-28 12:26:50 5682

原创 webpack项目实践

1.目录结构初步构想上面的例子只是介绍了webpack的基本用法，并没有按照一个实际的项目进行构建目录结构，对于一个多页面的项目我们定义的目录结构如下- web/ # web根目录 - src/ # 开发目录 - home/ # 主页目录 + css/ # css/s

2016-09-28 12:26:25 1592

原创 webpack基础实践2

本文在webpack基础实践1的基础上，主要阐述的是模块化和ES6与webpack的结合使用。1.模块化commonJS/CMD风格 module1.jsvar obj = { val:"hello from m1", sayHi:function(){ document.write('hi'); }, sum:function(a,b){

2016-09-28 12:26:01 499

原创 webpack基础实践1

这是个webpack的入门教程，看到网上blog大多是配置好了再解释，这样来的不太直观。本文从第一步开始慢慢做起，一步一步走下来，最后再总结，这样直观看到每个配置行代表什么含义。 webpack的作用是什么？现在说太多可能对于入门的同学来说也不好理解，索性这里就记住一句话，一张图得了一张图一句话 webpack是能把各种资源，例如JS(JSX),coffee,样式(CSS/SASS/

2016-09-28 12:25:14 494

原创 this指针总结

文章只是简单列举了方式和一些会改变this指针的情况 1.探寻之，必昭然若揭new绑定 this–>新创建的对象 var bar = new foo() call/bind 硬绑定 this–>指定的对象 var bar = foo.call(obj2) 隐式绑定 this–>上下文对象 var bar = obj1.foo()

2016-09-28 12:24:49 650

原创 OpenLayers 3实践与原理探究4.4-ol3源码分析-render

前面几节的内容介绍了Map,View,Source,Layer,这些其实我们都是要么在对象属性中设置，要么是通过方法设置，实质上是通过共享的全局变量设置地图包含的图层，地图的显示效果，但是如果真正上绘制在浏览器上，需要渲染在canvas(ol3常用的渲染方式).由于源码代码量比较大，这里只是从大部分介绍流程。网上有人(OpenLayers 3源码那些事)总结一张图的不错，这里拿来用一下 0.

2016-09-28 12:24:19 5046 1

原创 OpenLayers 3实践与原理探究4.3-ol3源码分析-Source,Layer

3.Sourceol/ol/Source文件夹下 3.1构造函数3.1.1 ol.source.Source ol.source的基础类ol/ol/Source/source.jsol.source.Source = function(options) {}3.1.2 ol.source.OSMol/ol/Source/osmsource.js openStreetMap：ol.source.OS

2016-09-28 12:23:24 1416

原创 OpenLayers 3实践与原理探究4.2-ol3源码分析-Map,View

1.Mapol/ol/map.js 1.1构造函数ol.Map = function(options) { ol.Object.call(this);//@extends {ol.Object} var optionsInternal = ol.Map.createOptionsInternal(options); }常量对象共享地图设置，并且将常量对象共享出去，作为公用变量goog.p

2016-09-28 12:22:24 1665

原创 OpenLayers 3实践与原理探究4.1-ol3源码分析-底层基础

因为下面的内容会分模块介绍源码，所以这里为了方便，首先介绍源码的目录结构在OpenLayers 3官网的下载页面下载我们在开发工程中需要的文件(如：v3.17.1.zip)，注意如果需要编译源代码，需要下载包含编译功能的文件包：https://github.com/openlayers/ol3/releases 下载指定release版本的源码，注意是Source code (zip)或者Sou

2016-09-28 12:21:42 3136 1

原创 OpenLayers 3实践与原理探究3-ol3一个完整的例子

接着我们看一个比较长的例子，例子实现的是可以绘制图形，可以根据自己的设置打印地图我们先看显示效果是：由于ol3的api现在更新变化挺大的，所以自己运行的例子的时候注意版本是3.17.1 例子中的解释比较详细，不具体进行展开介绍。本例子主要分为三部分，在js文件中已经隔开 - 第一部分是地图的初始化，包括添加图层，添加控件 - 第二部分加个标注点，点击显示位置的弹出框 - 第三部分

2016-09-28 12:21:05 6547 2

原创 OpenLayers 3实践与原理探究2-ol3基础入门案例

0.实例在OpenLayers3官网的下载页面下载我们在开发工程中需要的文件(如：v3.17.1-dist.zip)，实际工程中包含两个文件ol.js,ol.css 先看一个实例代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1-TileWMS</title> <link r

2016-09-27 19:34:00 1725

原创 OpenLayers 3实践与原理探究1-ol2 VS ol3

本文的重点在OpenLayers 3，对于OpenLayers 2简单比较说明。下文中OpenLayers 2简称OL2，OpenLayers 3简称OL31.OL 2 VS OL 3简单源码和实例1.1 OpenLayers 2OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。从OpenLayers2.2版本以后，

2016-09-27 19:33:11 2785

原创 javascript面向对象和面向委托

昨天看了一本书《你不知道的javascript(上)》关于这方面的内容，体会颇深，其中书中讲到的把javascript当作是面向委托的语言比面向对象的解释更加贴切，下面我就简单结合自己的理解，书写阐述一下，也可以作为一种笔记记录。 1. 提取精华——几个重要的方法1.1 原型链关联Bar.prototype = Foo.prototype;Bar.prototype = new Foo(

2016-09-27 19:31:29 1039

原创 javascript的setter getter方法总结

javascript的setter getter方法一共有五种实现方式 - 1.通过对象初始化器定义 - 2.使用 Object.create 方法 - 3.使用 Object.defineProperty 方法 - 4.使用 Object.defineProperties 方法 - 5.使用 Object.prototype.defineGetter 以及 Object.prototyp

2016-09-27 19:30:53 1083

原创 HTTP协议实践篇--浏览器缓存总结、利用Fiddler和apache模拟

1.浏览器缓存废话少说，我们先了解浏览器缓存的知识。其中优先级是：Cache-Control>Expires>协商缓存浏览器访问缓存的顺序是： 2.浏览器刷新的几种状态普通模式我们下面的叙述在没有特殊说明的情况下就是这个模式普通页面跳转（点击页面链接跳转，window.open，在地址栏敲回车，刷新页面）无缓存情况下，请求会返回所有资源结果设置Expires并且未过期时，浏

2016-09-27 19:30:29 1397

原创 HTTP协议实践篇--使用Fiddler与后台php交互

工具： - PHP、Apache服务器，端口号这里设置为8000,如果本机没有安装php环境，可以选择wamp或者xampp集成的php环境开发器 - fiddler是比较好用的抓包工具，它是免费的，具体使用我们不单独介绍。1.模拟form表单提交数据html表单写法<form action="http://127.0.0.1:8000/test.php" method="post" >

2016-09-27 19:29:46 1698

原创 File Input多次添加文件，动态删除文件，用来实现上传等操作

1.需求图示2.按图索骥添加实际上，添加附件就是<input type="file" id="myFile">的控件，var fileList = getElementById(myFile).files就可以得到选择的文件的FileList对象，这个对象是类数组的对象(含义有点像函数参数arguments)。记住这一点很重要。显示下面的显示文件名的面板根据上传的文件名name显示3.刨根

2016-09-27 19:29:05 8063 5

原创 EChart 2升级EChart 3注意事项

本文是根据自己的实践进行总结过来的，是不完全的所有升级注意事项。如果想直接看结果，请移步到第4部分内容1.背景EChart 3是在2015年12月发布的新版本,相比较EChart 2,主要的变化总结如下： - 1) 支持了直角坐标系（catesian，同 grid）、极坐标系（polar）、地理坐标系（geo） - 2) 移动端的优化,说明白就是将源码体积减小 - 3) 新增更多图表类型，

2016-09-27 19:28:35 5754 1

原创 CSS3--font-face使用

1.介绍@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，不用担心兼容性，@font-face在IE4中都支持。如果是用字体做logo，英文的话字体和图片占用大小差不多，但是中文的字体包一般比较大，最好还是使用图片的形式。2.快速实践下载字体需要格式为.tff格式的字体文件搜索Webfont Generator，或者直接使用该网站提供的服务。这很简

2016-09-27 19:27:49 542

原创现代web前端开发工具和流程

1.版本控制SVN GIT 推荐使用git，git安装和图形化界面tortoiseGit安装，git与github联系不在本文的讨论范围，请自行搜索。在github中新建一个项目在本地使用图形Git–>git clone 或者使用命令：git clone git://github.com/someone/some_project.git文件夹就是我们的项目文件夹。2.前端自动化–

2016-09-27 19:27:17 2031

原创时间控件插件[js/jquery]总结和简单实践-前端

1.控件收集比较常用的是功能丰富的My97DatePicker，缺点是界面效果一般。 jquery时间插件目前插件有很多种类，有的支持两个日期栏，有的带农历，带节假日,带时间,带钟表显示,html5响应式时间轴页面。比较小的一个日期选择器Pickday,不依赖任何javascript库，并且文件只有5K(目前加了一些扩展，达到11K左右)，有人已经修改成中文版的Pikad

2016-09-27 19:26:54 767

原创对象数组比较

数组对象(其实就是一个json对象)，比如var courseJson = [{chapter:'2',section:'3',name='part1'}, {chapter:'2',section:'1',name='part2'},{chapter:'1',section:'2',name='part3'}] 注意：直接写出来的是json字符串形式，JSON.parse(cours

2016-09-27 19:26:04 1015

原创富文本编辑器实践

1.选择国产编辑器百度ueditor 和 kindeditor 国外编辑器 bootstrap-wysiwyg 和 simditor百度ueditor功能丰富，文档易读，我们使用ueditor为例。2.实践ueditor分为两大类：UE和UM(UMeditor，简称UM，是 ueditor 的简版) 下载umeditor,解压后在文件夹中建立一个test.html文件： <!DOCTYP

2016-09-27 19:25:32 905

原创在线浏览online office/pdf探究

需求实现类似百度文库的功能。百度文库是有专门进行转化成html文件的服务器我们想要用最小的代价实现，有两条路可以走： 1. 前端js实现[目前来看比较困难]。 2. 使用js/jquery插件，pdf有插件pdfjs office系列暂时没发现 3. 使用服务，google服务，国内没办法使用 google docs viewer ，支持office/pdf 使用

2016-09-27 19:24:54 1365

原创前端视频播放初探总结，video标签-视频插件jwplayer

1.HTML5原生支持<video>简单使用： <video src="../TestRes/test.mp4" autoplay controls></video>html5的video标签只支持mp4、webm、ogg三种格式,<video>原生支持的格式 https://developer.mozilla.org/zh-TW/docs/Web/HTML/Supported

2016-09-27 19:24:27 14577

原创前端模块化

1.模块化编程1.1 ES5时代1.1.1 原生代码实现模块化1) 对象写法var module1 = new Object({　　　　_count : 0,　　　　m1 : function (){　　　　　　//...　　　　},　　　　m2 : function (){　　　　　　//...　　　　}　　});2) 立刻执行函数(Immediately-Invoked Func

2016-09-27 19:24:01 555

原创利用php和ajax实现局部更新数据

基本思路就是ajax请求数据，获取成功后用jQuery更新DOM即可下面是个很简单的实例1.基本功能鼠标悬停在1，2,3,4的时候，下面的框中的数据会跟随改变如在2的时候显示 2.代码html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>利用ajax实现局部更新</title>

2016-09-27 19:23:31 771

原创利用File Input控件修改name属性

接着：【FE】File Input多次添加文件，动态删除文件，用来实现上传等操作一文1.想方设法我们首先查阅资料后发现 fileList的name属性是只读的MDN 修改只读属性： Object.defineProperty(fileLists[0], 'name', { writable: true });这样就可以修改fileLists的name属

2016-09-27 19:22:49 3004

原创利用dataTabels可视化后台数据库,可编辑

1.基本描述1.1 功能基本功能如下所示修改模块，鼠标单击要修改的内容，输入文字即可；或者选择修改的行（每行第一列多选框），单击左上角的Edit，Delete按钮，利用弹出窗进行修改，或者删除。可以进行批量操作。1.2 运行源码放在github里面，配置好editor/php/config.php 中的数据库信息，在php环境中即可运行。数据库信息："user" => "",

2016-09-27 19:22:16 1417

原创使用javascript原生实现一个模板引擎

模板引擎分为前端和后端的，前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的；后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎，感觉挺有趣的，今天就来实现下1.简单的例子逻辑var tplEngine = function(tpl, data) { var re = /<%([^

2016-09-27 19:20:15 635

前端-后端学习之路