- 博客(61)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Backbone系列：todo的demo
概述todo的思想是：Model作为每个todo项的模型，而且每个todo项与一个TodoView关联（只渲染li的视图）。最后在AppView上监听整个todo的变更，触发对应的事件step1首先我们从只有简单的添加功能的todo做起var Todo = Backbone.Model.extend({ // 这里不定义也可以，不过以后和Collection的create方法配合
2015-11-08 16:29:33
801
原创 Backbone系列：Collection的学习
本章通过Collection与View的配合，渲染出多个view在线demo：Collection的学习构建一个Model类首先我们需要构建一个Model类，可以有对应的默认属性var Book = Backbone.Model.extend({ defaluts: { name: '名字', rank: '排名',
2015-11-07 10:05:51
874
原创 Backbone系列：Model的学习
Model的学习本章通过完成单向数据绑定的demo，以此学习Backbone的Model模块在线demo：单向数据绑定设置属性值我们可以在构建Model类的时候，定义其属性值。var Echo = Backbone.Model.extend({ defaults: { word: '请输入' }, initialize: func
2015-10-31 12:03:51
802
1
原创 Backbone系列：Router的学习
Router的学习本章通过定义简单的路由规则，学习Router在线demo：router学习Backbone的路由会监听URL的"#"后面的部分var App = Backbone.Router.extend({ // 定义路由、动作的键值对，注意路由前面没有"/" // *表示通配，会匹配多个url组件 routes: { '*acti
2015-10-31 11:19:14
1494
原创 Backbone系列：View的学习
View的学习本章会通过一个简单的搜索框的demo，学习View模块和View的事件属性前面我们已经知道initialize()方法会在实例化Model时执行，而View和Collection也有对应的方法，所以我们可以在此方法里定义一些动作。如：var App = Backbone.View.extend({ initialize: function() {
2015-10-30 23:55:46
651
原创 Backbone系列：简单的helloworld页面
非常简单的定义一个Model类首先让我们以经典的hello world作为Backbone的入门var App = Backbone.Model.extend({ // 通过defaults定义实例属性 defaults: { say: 'hello world!' }, // initialize是在构造函数被实例化的时候调用 in
2015-10-30 22:53:52
1092
原创 Bootstrap插件carousel源码的学习
使用说明轮播的HTML结构可以分为：容器、项目符号、轮播单元、左右的箭头容器：需要data-ride="carousel"用于初始化；对应的id或class作为子元素的目标项目符号：需要在"carousel-indicators"的容器中；data-target或href指向容器；data-slide-to指向对应的轮播单元；需要有"active"类保证在一开始就激活单元：需要"i
2015-10-24 23:43:04
2262
原创 Bootstrap插件collapse源码的学习
使用说明手风琴插件可以分为两部分：可点击的标题区，和展现的内容区标题区，需要定义data-toggle="collapse"和data-parent="#example"（即包含他们的容器），还有data-target或href指向的内容区内容区，需要id或class与标题区定义的一致。添加"collapse"类来默认隐藏该内容区。如果需要在一开始就显示就添加"collapse i
2015-10-24 18:28:18
2449
原创 Bootstrap插件modal源码的学习
使用说明两部分需要定义：模态框的触发元素，需要data-toggle="modal"，以便被初始化；需要data-target="#example"或href指定模态框模态框，模态框容器需要与data-target对应的类或id，其内容部分可以用"modal-content"的类来美化样式 触发按钮 title
2015-10-20 22:55:08
2650
原创 Bootstrap插件transition源码的学习
使用说明主要是用于自定义transitionEnd方法，判断是否支持过渡结束事件定义jquery的原型方法emulateTransitionEnd，保证在过渡效果完成后，一定触发transitionEnd初始化在dom树加载完后，自定义bsTransitionEnd事件$(function () { // 储存当前浏览器是否支持，若支持是支持哪种tr
2015-10-18 23:03:56
1538
原创 Bootstrap插件dropdown源码的学习
使用方法有含有"dropdown"类的容器里面包含下拉触发器（按钮，或链接等），和下拉框的内容下拉触发器必须包含"data-toggle=dropdown"的属性。可以用data-target或href指定包含下拉框的容器，如果没有，则从其父元素内找下拉框内容必须有"dropdown-menu"的类 点击 item1 item1 item3
2015-10-18 22:35:16
3461
原创 Bootstrap插件scrollspy源码的学习
使用方法可以分为nav（导航区）和content（滚动区）Plugin入口分析/** * 把[data-spy="scroll"]的dom元素，及元素property上的参数传给ScrollSpy构造函数 * @param {object} option 之前绑定在元素上的property对象 * 自定义的包含指定content的对象
2015-10-18 18:29:16
2423
原创 Bootstrap插件tab源码的学习
使用方法可以分为Tab区和Content区。Tab区为列表，要求带有"nav nav-tabs"或"nav nav-pills"两种类名。下的标签要求带有data-toggle="tab"属性，可以通过data-target或href指定对应的ContentContent区要求带有"tab-content"类名，每个面板要求有"tab-pane"类名以及Id（即Tab里指定的tar
2015-10-16 22:57:57
1910
1
原创 Bootstrap各JavaScript插件的概述
都定义Plugin函数目前来看，定义Plugin是为了作为jquery的原型方法，可以作为jquery对象初始化的入口。function Plugin(option) { return this.each(function () { var $this = $(this) var data = $this.data('bs.tab') if (!data)
2015-10-16 22:39:18
591
原创 利用DOMContentLoaded判断DOM是否加载完毕
概述浏览器提供一个document.onload事件，但这是页面的全部数据都加载完毕，如果页面有太多图片的话，事件要等很久才触发。如果能在DOM树构建完毕就开始动作就会快很多。核心思想IE8以下的版本可以通过检查document.documentElement.doScroll('left')是否报错来判断IE8支持onreadystatechange事件，每当document
2015-10-11 10:46:14
2528
原创 变量对象VO的学习笔记
变量对象VO的填充顺序函数参数：若未传入，初始化该参数值为undefined函数声明：提升声明和赋值。若发生命名冲突（如传入的参数有同名的变量，或arguments）会覆盖变量声明：初始化变量值为undefined，若发生命名冲突，会忽略（即不会覆盖他的值为undefined）function app(arg1, arg2) { function arguments()
2015-10-06 11:00:45
936
原创 javascript中bind()函数实现和应用以及多次bind的结果和参数位置的思考
概述在ECMA-262第五版引入了bind()方法，该方法创建一个新函数。语法fn.bind(context[, arg1[, arg2[, ...]]])第一个参数context将成为返回的新函数的this对象第二个及以后的参数加上绑定函数运行时本身的参数按照顺序，将作为新函数的擦书实现原理Function.prototype.bind = function (conte
2015-10-05 16:41:43
2411
1
原创 JavaScript中的this学习笔记
《JavaScript中this关键字详解》this指向函数执行时的当前对象，而与声明环境无关var someone = { name: "Bob", showName: function(){ alert(this.name); }};var other = { name: "Tom", showName: someone.sh
2015-09-28 14:31:02
595
原创 JavaScript中闭包的学习笔记
《深入理解javascript原型和闭包》原型对象是函数创建的var ob = new Object(); // 可以看出，其实对象是由函数创建的 函数（也是对象啦）是Function创建的var fn = new Function(参数0[, 参数N], 函数体); 函数是属性的集合（即也是对象）每个函数都有个prototype属性，指向原
2015-09-28 14:21:17
504
原创 JavaScript中作用域的学习笔记
《高级程序设计》作用域的前端，始终是当前的执行的代码所在的执行环境的变量对象作用域与定义时的环境有关，而不是执行时的环境《鸟哥：JavaScirpt作用域原理》JavaScript中的函数运行在它们被定义的作用域里，而不是被执行的作用域里scope chain(作用域)一个函数被定义时，会将它定义时刻的scope chain(作用域)链接到函
2015-09-28 14:13:32
442
原创 [] == ![]涉及的运算符及类型转换
[] == ![];// true首先，是运算符优先级。常用的运算符的优先级如下圆括号()成员访问.后置递增|后置递减++|--逻辑非，一元加，一元减，前置递增，前置递减乘法，除法，取模加法，减法大于，大于等于，小于，小于等于等号，非等号，全等逻辑与... && ...逻辑或... || ...条件运算法... ? ... : ...赋值=所以，会先运算等号左边的。逻
2015-09-28 10:25:44
1124
原创 JavaScript数组的3种循环方式效率的比较
var start0 = new Date();var arr0 = new Array(10000000);for(var i = 0, l = arr0.length; i < l; i++) { arr0[i] = 1;}var end0 = new Date();var time0 = end0 - start0;var start1 = new Date();var ar
2015-08-26 14:50:38
1215
原创 前端题目
1.var bb = 1;function aa(bb) { bb = 2; alert(bb);};aa(bb);alert(bb);// 2 1当时犯了个错误，以为aa()里面对bb赋值，全局变量bb就改变了。这里要注意bb是函数的参数var bb = 1;function aa(value) { value = 2; alert(va
2015-06-22 09:50:55
718
原创 JavaScript类型转换
[] == ![]// true1.考的是数组的类型转换。在犀牛书49页，任意数组转换为字符串""，数字0和布尔值true所以![]会转为布尔值true再取反false然后根据相等运算符“==”的规则，有boolean的转为数字，有Object的转为原始值左右两边会变成“” == 0最后如果是字符串和数字比较，会把字符串转为数字0 == 0结果就是为true
2015-06-19 23:11:02
432
原创 DOM0级, DOM2级和IE事件处理程序的异同
1.DOM2级事件处理程序用addEventListener(eventName, handler, boolean)和removeEventListener(同前).其中参数分别为: 要处理的事件名字, 处理的函数, 布尔值(为true表在捕获阶段调用处理函数.false在冒泡阶段调用.为了兼容,一般都用false)2. IE事件处理程序用attachEvent(eventName, h
2015-06-03 17:31:27
1860
原创 任务2学习感悟
/** * 2. JavaScript数据类型及语言基础 */// 判断是否数组的函数function isArray(arr) { // 利用Object.prototype.toString会返回各种内置类型，来判断返回的是不是'[object Array]'这里o小写 return Object.prototype.toString.call(arr) == '[
2015-06-03 17:00:54
596
原创 javascript中的call()和bind()
var name = 'global';var obj = { name : 'obj', dose : function(){ this.name = 'dose'; return function(){ return this.name; } }}alert(obj.dose().call(this))在window的执行环境下,ca
2015-06-02 18:45:58
487
原创 javascript闭包的学习
var arr = [];for (var i = 0; i < 5; i++) { (function (i) { $.ajax({ url: url, data: data, success: function (repsonse) { arr[i] = repso
2015-06-02 16:48:10
395
转载 断言
转自 http://www.cnblogs.com/iyangyuan/archive/2013/05/30/3107390.html'123456'.replace(/(\d{3})(?[^$])/g, '$1,')//即每3个数字,替换成原数字加','如果遇到字符尾,则不替换.用到了分组和断言正则表达式中的断言，作为高级应用出现，倒不是因为它有多难，而是概念比较抽象，不
2015-05-30 15:49:05
466
原创 用Vue实现排序功能
Vue测试 body { font-family: Helvetica Neue, Arial, sans-serif; font-size: 14px; color: #444; } table { border: 2px solid #
2015-05-30 10:22:31
23093
1
原创 slice(), substring()和substr()3中截断方法的区别
substring()和slice()这两个方法差不多，都是指定开始和结束位置返回新字符串，在参数均为正整数的时候返回结果一样，当参数为负整数的时候，string.substring(from, to) 把负整数都当作0处理，而 string.slice(start, end) 将把负整数加上该字符串的长度处理。string.substr(start, length)这个方
2015-05-29 17:55:07
1923
1
原创 setInterval引发的小问题
W3上的说明，setInterval(code, time)，周期的调用函数，或计算表达式（即执行code）。所以可以有两种形式执行var num = 0;function setPrint() { console.log(num); num++;}setInterval(check(), 1000)相当于用eval(),执行了check()函数一次，输
2015-05-20 23:35:25
689
原创 CSS3做涟漪的效果
涟漪的效果 @keyframes myfirst { from {border:0 solid #E4684D; left:1px;top: 1px;} to {border:12px solid #E4684D; left:-11px;top: -11px;} } @-moz-keyframes myfirst { from {border:0 solid #E4684D
2015-04-24 14:31:16
4644
原创 JS的深拷贝，不含函数
function cloneObject(src) { // 只有object和array里，for-in才能获取到参数 // 注意返回的是'[object Array]'后面大写 if (Object.prototype.toString.call(src).slice(8, -1) === 'Object' || Object.prototype.toS
2015-04-21 22:05:09
788
原创 $(window).load和$(document).ready区别
在jQuery中有3种开头1，$(document).ready(function(){})是在文档准备就绪，但文档中的图片正在加载。所以像瀑布流这种对图片排序操作的不能用这个2，$(function(){})是1的简写3，$(window).load(function(){})是整个文档都都就绪
2015-04-05 19:41:55
479
原创 下拉菜单
重点是看jQuery部分 特效菜单 html, body, div, span {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}.header{width:1105px;margin:0 auto;height:111
2015-04-04 21:44:53
435
原创 jQuery的return false
测试return false的作用 $(document).ready(function () { $("#box").on("click", ".btn", function (event) { $(".text").toggle(); event.preventDefault(); //这里是用来阻止标签的默认打开链接事件，要是不加这句，默认打开链接，当href
2015-04-04 20:59:31
622
原创 Js和jQuery的下拉菜单
三级下拉菜单 window.onload = function() { var Lis = document.getElementsByTagName("li"); for(var i = 0; i < Lis.length; i++) { Lis[i].onmouseover = function () { var u = this. getElemen
2015-04-04 09:59:07
501
原创 jQuery的extend
1，$.extend()的作用$.extend(result, item1, item2)把对象item1和item2合并到result中，并返回。但这样会破坏result原本的结构$.extend({}, item1, item2)把item1和item2合并到{}中，并返回。这样不会破坏结构2，$.extend(boolean,{}, item1,item2)当bool
2015-04-03 16:36:35
591
原创 JS中的prototype,__proto__和constructor
function a(c){ this.b = c; this.d =function(){ alert(this.b); }}var obj = new a('test');alert(obj.constructor);//function a(){}alert(a.prototype.constructor);//function a(){}
2015-04-03 15:36:11
720
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人