GithubHelp home page GithubHelp logo

blog's Introduction

##animation 这个文件存放一些css3 animation相关的demo。

(1) 该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

(2) 该文件夹内容的相关介绍:

  1. animation-fill-mode的一些思考

##backbone_ajax 这个文件夹提供了一个简单的自定义ajax模块,覆盖了Backbone原有的ajax模块的实现,使得我们可以在用Backbone 完成异步请求时,完全跟传统的异步方式保持一致,代码很简单,相关的测试页面如下:

backbone_ajax的测试地址

但是该地址中大部分测试代码都无法获取期望的结果,因为是在gh-pages分支上发布的,github不允许静态页面内发送post请求,所以要想看到测试效果,最好是clone到本地预览了。

该文件夹内容的也在下面这篇文章中的第3部分有说明:

我对Backbone.js的一些认识

##backbone_router (1) 该文件夹内容的相关介绍:

使用backbone的history管理SPA应用的url

##css_name (1) 该文件夹内容的相关介绍:

  1. 面向属性的CSS命名

##form (1) 该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

(2) 该文件夹内容的相关介绍:

  1. 简洁易用的表单数据设置和收集管理组件

  2. 进一步丰富和简化表单管理的组件:form.js

  3. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

  4. 简单封装分页功能pageView.js

  5. 列表组件抽象(1)-概述

  6. 列表组件抽象(2)-listViewBase说明

  7. 列表组件抽象(3)-分页和排序管理说明

  8. 列表组件抽象(4)-滚动列表及分页说明

  9. 列表组件抽象(5)-简洁易用的表格组件

##lottery

一个简单的根据不同的概率进行抽奖的DEMO。在该DEMO中,我预先定义好了五种类型的数据,用probability表示它们被抽到的概率。最后通过drawLottery 实现单次的抽奖。

##h5_demo

该文件夹存放我做的一些h5活动页面的demo,现在放的还比较少,将来会放地更多,对h5活动页面制作感兴趣的话欢迎关注这个文件夹的内容。

另外该文件夹里的东西,也包含一个比较全的gulp配置方案,可以做压缩,合并,以及资源的内联处理等,通过研究里面的gulpfile.js就能明白。

该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

##mouse_direction

该文件夹内容的相关介绍:

  1. 判断鼠标移入移出元素时的方向

##history

该文件夹内容的相关介绍:

  1. 理解浏览器的历史记录

##numerGrow 原本应该把这个文件夹命名为numberGrow,结果弄错了,懒得改了...

(1) 该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

(2) 该文件夹内容的相关介绍:

  1. 数字限时增长效果实现:numberGrow.js

##pushState

该文件夹内容的相关介绍:

  1. 理解浏览器历史记录(2)-hashchange、pushState

##quick_layout 这个文件夹里面的内容是对zxx.lib.css的一个整理,将这些代码利用less进行了整合,同时扩充了更多的属性。

里面提供有mixin,来快速对单个属性,进行等差序列的扩充。详情请研究里面的less代码,相对简单,所以没有写专门的博客介绍。针对zxx.lib.css提供的一些快速布局的类(如.inline_two,.inline_three这种),做了一个demo,演示它里面一些类的具体作用。你可以通过下面的方法来查看demo,并了解那些类的用法。

(1) 该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

##seajs

(1) 该文件夹内的demo运行方法:

  1. 前提:安装node.js git gulp

  2. 安装:npm install --save

  3. 运行:gulp -sw

(2) 该文件夹内容的相关介绍:

  1. 介绍一种基于gulp对seajs的模块做合并压缩的方式

  2. 快速了解微信小程序的使用,一个根据小程序的框架开发的todos app

##todos 这个文件夹提供多个版本的todos这个经典应用的实现。里面的子文件夹名分别代表它的实现方式。暂时只想用jquery和 backbone两个库来分别实现。目的是为了对比传统面向对象开发方法与MVVM开发方法的区别。

jquery版本的预览地址(我实现的)

backbone版本的预览地址(我实现的),跟官方版本不同的是,这个版本带交互效果,而且更接近真实的开发场景

jquery版本的其它实现(可通过chrome的开发者工具查看源码)

backbone版本的官方实现(可通过chrome的开发者工具查看源码)

原生js的实现(可通过chrome的开发者工具查看源码)

该文件夹内容的相关介绍:

我对Backbone.js的一些认识

blog's People

Contributors

liuyunzhuge avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.