javascript
文章平均质量分 76
TechFE
CSDN博客体验不好,我的博客更新在:https://zrysmt.github.io/
展开
-
【javascript】for-in问题总结
for-in问题总结,具体可以参见代码,列出几种情况。<!DOCTYPE html><html><head> <<meta charset="utf-8"> <title>for in有问题</title></head><body> <script type="text/javascript"> document.write("<br/>=========一般用f原创 2015-12-03 21:03:06 · 696 阅读 · 0 评论 -
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 · 651 阅读 · 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 · 1805 阅读 · 0 评论 -
一步一步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 · 1489 阅读 · 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 · 1007 阅读 · 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 · 1147 阅读 · 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 · 1643 阅读 · 0 评论 -
一步一步DIY zepto库,研究zepto源码8 -- touch模块
移动事件提供了touchstart、touchmove、touchend,却没有提供对tap的支持。许多主流框架都是自定义实现了tap事件,消除300ms的延迟,当然包括Zepto.js.一步一步DIY zepto库,研究zepto源码8 -- touch模块原创 2016-12-05 11:36:19 · 1811 阅读 · 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 · 497 阅读 · 0 评论 -
动手DIY一个underscorejs库及underscorejs源码分析1
Underscore 是一个 JavaScript 工具库,它提供一整套函数编程的实用功能。他弥补了 jQuery 没有实现的功能,同时又是Backbone 必不可少的部分。underscore.js源码加上注释也就1千多行,用underscore.js作为阅读源码的开始是一个不错的开始,当然阅读源码的同时,手也不能停下来。下面我会写几篇博客,一边分析源码,一边根据源码重新DIY一份(_unders原创 2016-10-26 16:06:56 · 1384 阅读 · 0 评论 -
javascript面向对象和面向委托
昨天看了一本书《你不知道的javascript(上)》关于这方面的内容,体会颇深,其中书中讲到的把javascript当作是面向委托的语言比面向对象的解释更加贴切,下面我就简单结合自己的理解,书写阐述一下,也可以作为一种笔记记录。 1. 提取精华——几个重要的方法1.1 原型链关联Bar.prototype = Foo.prototype;Bar.prototype = new Foo(原创 2016-09-27 19:31:29 · 1039 阅读 · 0 评论 -
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 · 1084 阅读 · 0 评论 -
【javascript】javascript闭包经典代码
比较闭包和DOM直接方法<!-- dom污染法: --><!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><body><a href='#'> 第一个链接 </a> </br><a href='#'> 第二个链接 </a> </br转载 2015-12-05 12:43:19 · 435 阅读 · 0 评论 -
使用javascript原生实现一个模板引擎
模板引擎分为前端和后端的,前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的;后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎,感觉挺有趣的,今天就来实现下1.简单的例子逻辑var tplEngine = function(tpl, data) { var re = /<%([^原创 2016-09-27 19:20:15 · 637 阅读 · 0 评论 -
利用dataTabels可视化后台数据库,可编辑
1.基本描述1.1 功能基本功能如下所示 修改模块,鼠标单击要修改的内容,输入文字即可; 或者选择修改的行(每行第一列 多选框),单击左上角的Edit,Delete按钮,利用弹出窗进行修改,或者删除。可以进行批量操作。1.2 运行源码放在github里面,配置好editor/php/config.php 中的数据库信息,在php环境中即可运行。 数据库信息:"user" => "",原创 2016-09-27 19:22:16 · 1419 阅读 · 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 · 3008 阅读 · 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 评论 -
前端模块化
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 · 558 阅读 · 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 · 14583 阅读 · 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 · 1019 阅读 · 0 评论 -
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 · 5758 阅读 · 1 评论