前端
文章平均质量分 74
TechFE
CSDN博客体验不好,我的博客更新在:https://zrysmt.github.io/
展开
-
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 评论 -
一步一步DIY zepto库,研究zepto源码4 -- ajax模块
上面的博文介绍的都是源码src下的基础模块zepto.js文件和事件模块event.js,下面接着看另外一个独立的模块–ajax模块ajax.js 代码挂在我的github上,对应文件夹v0.4.1。 https://github.com/zrysmt/DIY-zepto1.ajax的过程当global: true时。在Ajax请求生命周期内,以下这些事件将被触发。ajaxStart原创 2016-12-05 11:31:56 · 1488 阅读 · 0 评论 -
前端CSS&JS动画总结
使用CSS3,我们可以很方便快捷的改变元素的宽度、高度,方位,角度,透明度等基本信息,但是这些不能满足我们的需求,而且浏览器对于CSS3的兼容性不好,所以这时候就需要拓展更多的js动画。1.CSS3动画<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 动画</title> <s原创 2016-11-10 20:36:15 · 1801 阅读 · 0 评论 -
domReady机制探究及DOMContentLoaded研究
domReady机制是很多框架和库都具有的种子模块,使用了在DOM树解析完成后就立即响应,不用等待图片等资源下载完成(onload执行时候表示这些资源完全下载完成)的一种机制,那怎么实现呢。1)支持DOMContentLoaded事件的,就使用DOMContentLoaded事件; 2)不支持的,就用来自Diego Perini发现的著名Hack兼容。兼容原理大概就是,通过IE中的document原创 2016-11-10 20:16:20 · 1197 阅读 · 0 评论 -
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 阅读 · 0 评论 -
一步一步DIY jQuery库3-引入sizzle引擎
所有代码挂在我的github中在前两篇的基础上,正式引入sizzle引擎,我们不详细介绍该引擎,会使用即可。我们在前两篇的jQuery.fn.init的方法一步一步DIY一个自己jQuery库3-jquery+sizzle引擎原创 2016-10-05 20:13:09 · 843 阅读 · 0 评论 -
一步一步DIY jQuery库2-使用es6模块化
有关rollup的安装使用可以查看我的另外一篇博客:《rollup + es6最佳实践》,这里有提供了简明的搭建环境的说明,我们可以暂时忽略这篇博客,先参见第一部分1.环境搭建我们首先把《一步一步DIY一个自己jQuery库1》的文件打包好所有代码挂在我的github中1.搭建环境1.1 目录结构 - src + .babelrc + core.js + global.js原创 2016-10-05 20:11:44 · 4466 阅读 · 0 评论 -
一步一步DIY jQuery库1
前一段时间,看到一篇系列文章《从零开始,DIY一个jQuery 1-3》三篇文章从头讲解如何DIY一个JQuery,感觉挺有意思。 我在前端已经有了一年的经验,jquery几乎是每天都会使用到,但是现在还没时间去研究一下它的实现原理,即使这样我也想动手尝试下DIY一个JQuery库,我相信这可以加深我对jquery的理解,当然我也试着去学习jquery的原理,这很可能会写成一个系列的文章,这个原创 2016-10-02 21:49:11 · 1568 阅读 · 0 评论 -
React Router的一个完整示例
本博文提供一个单网页结构网页(SPA)使用React Router路由控制跳转的完整例子。关于配置可以查看我之前的一篇博客:[一步一步进入React的世界(React+Webpack+ES6组合配置)]原创 2016-11-04 16:46:35 · 33841 阅读 · 1 评论 -
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 阅读 · 0 评论 -
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实践与原理探究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 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码5-- callbacks
Callbacks API用来管理回调函数,也作为deferred延迟对象的基础部分,今天就一起来探寻它的源码(对应src下的callbacks.js)。 代码挂在我的github上,对应文件夹v0.5.1。 https://github.com/zrysmt/DIY-zepto注:要在github源代码中自己编译的话,要在基础包命令:npm run dist上要进行扩展了,输入命令:M原创 2016-12-05 11:33:01 · 1003 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码6 -- deferred模块
接下来我们来DIY另外一个重要的模块defrred延迟对象,这当然与源码有些许的不同,然而这并不重要。基础包上要进行扩展了,输入命令:MODULES="zepto event ajax deferred callbacks" npm run dist 代码挂在我的github上,对应文件夹v0.6.1。 https://github.com/zrysmt/DIY-zepto1.示例Dem原创 2016-12-05 11:34:07 · 1143 阅读 · 0 评论 -
阿里巴巴校招2017前端笔试题目 -- 原生js/html5 实现一个路由
阿里巴巴校招2017前端笔试题目: 1)路由有什么缺点? 2)原生js/html5 实现一个路由缺点: * 使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存 * 单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置路由的概念: * 路由是根据不同的 url 地址展示不同的内容或页面 * 前端路由就是把不同路由对应不同的内容或页面的任务交给前端原创 2017-04-28 10:36:32 · 1179 阅读 · 0 评论 -
Openlayers 3 使用React 组件化+wepack+ES6实践记录笔记
本博文不作深入研究内容,只用来记录使用React 组件化+wepack+ES6技术操作Openlayers 3 实践中遇到的问题,本博文作为开篇,所以只是简单的demo案例说明。后面还会有其他的一些博文分享我在项目中遇到的问题和总结的经验。大约一年前我写过一个系列的Openlayers 3的简单的源码结构的分析,代码以及说明在我的github中有,需要的同学出门右转。 Openlayers 3的原创 2017-03-10 20:38:08 · 8136 阅读 · 0 评论 -
OpenLayers 3实践与原理探究3-ol3一个完整的例子
接着我们看一个比较长的例子,例子实现的是可以绘制图形,可以根据自己的设置打印地图 我们先看显示效果是: 由于ol3的api现在更新变化挺大的,所以自己运行的例子的时候注意版本是3.17.1 例子中的解释比较详细,不具体进行展开介绍。本例子主要分为三部分,在js文件中已经隔开 - 第一部分是地图的初始化,包括添加图层,添加控件 - 第二部分加个标注点,点击显示位置的弹出框 - 第三部分原创 2016-09-28 12:21:05 · 6547 阅读 · 2 评论 -
一步一步进入React的世界(React+Webpack+ES6组合配置)
看了很多博客,大都是把配置文件一笔带过,或者干脆不给出配置文件,然而环境搭建对于新手来说是既困难又重要,显然网络上的博客不利于新手开始学习。 BZ打算从从头开始,一步一步配置webpack,能够使用ES6+React组合开发,废话少说让我们一起来开始Webpack+ES6+React之旅。 可以在我的github 中clone或者fork,本博文对应demo01 https://gi原创 2016-11-04 16:44:18 · 8444 阅读 · 1 评论 -
动手DIY一个underscorejs库及underscorejs源码分析1
Underscore 是一个 JavaScript 工具库,它提供一整套函数编程的实用功能。他弥补了 jQuery 没有实现的功能,同时又是Backbone 必不可少的部分。underscore.js源码加上注释也就1千多行,用underscore.js作为阅读源码的开始是一个不错的开始,当然阅读源码的同时,手也不能停下来。下面我会写几篇博客,一边分析源码,一边根据源码重新DIY一份(_unders原创 2016-10-26 16:06:56 · 1383 阅读 · 0 评论 -
动手DIY一个underscorejs库及underscorejs源码分析3
所有代码挂在我的github上,例子是demo6.html,DIY/4/_underscore.js.欢迎fork,star。 https://github.com/zrysmt/DIY-underscorejs这一部分来DIY两个经常被使用的函数(或者说分析其源码),分别是throttle(节流函数)和debounce(防反跳函数)。这两个函数特别适合一些场景:事件频繁被触发,会导致频繁执原创 2016-12-28 12:03:31 · 623 阅读 · 0 评论 -
动手DIY一个underscorejs库及underscorejs源码分析2
接着第一篇《动手DIY一个underscorejs库及underscorejs源码分析1》 所有代码挂在我的github上。1.兼容requirejs和seajs模块化requirejs 最后加上 if (typeof define == 'function' && define.amd) { //定义一个模块并且起个名字 define('_unde原创 2016-10-27 12:38:03 · 494 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码1--基础模块
我在之前写了《一步一步一步DIY zepto库,研究zepto源码1.md一步DIY jQuery库》系列文章,然后发现再往下进行研究jQuery库的时候,由于jQuery库做了很多兼容IE6-8的内容,使其看起来比较繁琐,这也造成了jQuery源码的不宜读性。所幸作为移动端的jQuery库替代品-Zepto,是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的ap原创 2016-11-21 16:34:21 · 1462 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码3 -- event模块
上面的博文介绍的都是源码src下的zepto.js文件,接着我们来看看zepto的事件模块,对应文件是event.js 代码挂在我的github上,对应文件夹v0.3.2(只实现on),v0.3.3(完整实现)。 https://github.com/zrysmt/DIY-zepto1.绑定事件实例Demo <div id="foo1">foo1</div> <div id原创 2016-11-30 10:08:51 · 953 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码2 -- selector选择符
我们接着上一篇博客继续完成zepto.init的其余内容。基于Zepto 1.2.0版本。 代码挂在我的github上,第一篇博客对应文件夹v0.2。 https://github.com/zrysmt/DIY-zepto整体的流程是: * 有传入context,回调自身:$(context).find(selector) * selector参数为空,直接调用$.zepto原创 2016-11-30 10:07:38 · 833 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码7 -- 动画模块(fx,fx_method)
代码挂在我的github上,对应文件夹v0.7.1。 https://github.com/zrysmt/DIY-zepto注:要在github源代码中自己编译的话,要在基础包命令:npm run dist上要进行扩展了,输入命令:MODULES="zepto event fx fx_methods" npm run dist# on Windows> SET MODULES=zepto原创 2016-12-05 11:34:59 · 1641 阅读 · 0 评论 -
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 阅读 · 0 评论 -
使用javascript原生实现一个模板引擎
模板引擎分为前端和后端的,前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的;后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎,感觉挺有趣的,今天就来实现下1.简单的例子逻辑var tplEngine = function(tpl, data) { var re = /<%([^原创 2016-10-02 21:50:53 · 4260 阅读 · 0 评论 -
时间控件插件[js/jquery]总结和简单实践-前端
1.控件收集比较常用的是功能丰富的My97DatePicker,缺点是界面效果一般。 jquery时间插件 目前插件有很多种类,有的支持两个日期栏,有的带农历,带节假日,带时间,带钟表显示,html5响应式时间轴页面。 比较小的一个日期选择器Pickday,不依赖任何javascript库,并且文件只有5K(目前加了一些扩展,达到11K左右),有人已经修改成中文版的Pikad原创 2016-09-27 19:26:54 · 767 阅读 · 0 评论 -
对象数组比较
数组对象(其实就是一个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 阅读 · 0 评论 -
富文本编辑器实践
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 阅读 · 0 评论 -
在线浏览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 阅读 · 0 评论 -
前端视频播放初探总结,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 阅读 · 0 评论 -
前端模块化
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 阅读 · 0 评论 -
利用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 阅读 · 0 评论 -
利用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 阅读 · 0 评论 -
利用dataTabels可视化后台数据库,可编辑
1.基本描述1.1 功能基本功能如下所示 修改模块,鼠标单击要修改的内容,输入文字即可; 或者选择修改的行(每行第一列 多选框),单击左上角的Edit,Delete按钮,利用弹出窗进行修改,或者删除。可以进行批量操作。1.2 运行源码放在github里面,配置好editor/php/config.php 中的数据库信息,在php环境中即可运行。 数据库信息:"user" => "",原创 2016-09-27 19:22:16 · 1417 阅读 · 0 评论 -
使用javascript原生实现一个模板引擎
模板引擎分为前端和后端的,前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的;后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎,感觉挺有趣的,今天就来实现下1.简单的例子逻辑var tplEngine = function(tpl, data) { var re = /<%([^原创 2016-09-27 19:20:15 · 635 阅读 · 0 评论 -
jqprint插件使用教程与源码实现分析
jqprint 是可以实现局部打印的一个轻量型的,并且基于jquery的js插件。 博客从jqprint的使用教程和源码解析两个方面介绍这个小插件。1.jqprint使用教程全解1.1 jqrint基本使用教程1.2 jqprint打印的div中有input或者textarea等1.3 jqprint如何引入外部css2.源码分析原创 2016-10-10 19:46:35 · 8457 阅读 · 0 评论 -
现代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 阅读 · 0 评论 -
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 评论