Category: Javascript /Jquery / React / Bootstrap / Web
在上篇文章我们简单实现了一个 jQuery 的基础结构，不过为了顺应潮流，这次咱把它改为模块化的写法，此举得以有效提升项目的可维护性，因此在后续也将以模块化形式进行持续开发。
模块化开发和编译需要用上 ES6 和 rollup，具体原因和使用方法请参照我之前的《冗余代码都走开——前端模块打包利器 Rollup.js 入门》一文。
本期代码均挂在我的github上，有需要的童鞋自行下载（DIY-A-jQuery-master)。
1. 基本配置
为了让 rollup 得以静态解析模块，从而减少可能存在的冗余代码，我们得用上 ES6 的解构赋值语法，因此得配合 babel 辅助开发。
在目录下我们新建一个 babel 配置“.babelr…
Read More
从本篇开始会陪大家一起从零开始走一遍 jQuery 的奇妙旅途，在整个系列的实践中，我们会把 jQuery 的主要功能模块都了解和实现一遍。
这会是一段很长的历程，但也会很有意思 —— 作为前端领域的经典之作，jQuery 里有着太多奇思妙想，如果能够深入理解它，对于我们稳固js基础、提升前端大法技能来说大有裨益。
另外，本系列的相关代码均可以从 我的github 上获取到（DIY-A-jQuery-master）。
1. 免 new 实现
我们在使用很多插件的时候，都需要使用 new XXX() 的写法来实例化一个引用:
var list = new Slip(document.getElementById('slip'), {
//op…
Read More
每一次操作select的时候，总是要谷歌一下资料，真是太不爽了, 在这里记录一下。
公共select代码
<select id="sel">
<option value="gideon">gideon</option>
<option value="lisha">lisha</option>
<option value="samuel">samuel</option>
<option value="nathan">nathan</option>
<option value="noah">noah<…
Read More
传统的AJAX轮询方式，客服端以用户定义的时间间隔去服务器上查询最新的数据。种这种拉取数据的方式需要很短的时间间隔才能保证数据的精确度，但太短的时间间隔客服端会对服务器在短时间内发送出多个请求。
反转AJAX，就是所谓的长轮询或者COMET。服务器与客服端需要保持一条长时间的请求，它使得服务器在有数据时可以返回消息给客户端。
Comet是一种服务器向页面推送数据的技术，Comet能让信息近乎实时的被推送到页面上。
前端 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title&g…
Read More
原文:http://www.codeceo.com/article/jquery-plugin-develop.html
软件开发过程中是需要一定的设计模式来指导开发的，有了模式，我们就能更好地组织我们的代码，并且从这些前人总结出来的模式中学到很多好的实践。
根据《jQuery高级编程》的描述，jQuery插件开发方式主要有三种：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发，说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的，该模式开发出来的…
Read More
出处：http://www.cnblogs.com/starof/p/5411457.html
大部分选择器都是基于下面这个简单的页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,span,p{
width: 140px;
height: 140px;
一、效果
二、代码
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<meta charset="utf-8"/>
<style></style>
<script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
<table id="process" cellpadding="2" cellspacing="0" border="1">
<thead>…
Read More
一、bootstrap样式
在Bootstrap v3.3.4中有下面一条重置样式：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
将所有的元素的默认盒模型box-sizing都设置成了border-box，而现代浏览器的标准默认box model是 content-box。很多第三方其他的UI库…
Read More
代码：
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function($)
{
//After it toggle the content with this button
$('.content_toggle').…
Read More
插件：
(function($) {
$.fn.clickToggle = function(func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function() {
var data = $(this).data();
上一篇博客已经说了关于javascript中的封装, 其中也说了javascript中本来是没有类的,我们上一篇的封装也是用javascript中的函数去模拟一个类,最后我们还模拟了一个构造函数.那 么今天和大家分享的关于继承,同样不是真正严格意义上面向对象的继承,而是通过javascript中的原型链关系实现函数之间的属性,方法共享.下面简 单分享几种封装的方法.
既然说到继承,我们必须有一个基类
function Person(){
this.eat=function(){
return '吃食物';
}
}
Person.prototype.sport=function(){
return '运动';
}
Person…
Read More
javascript 是一门很灵活的语言,也是一门有缺陷的语言.
比如我们今天要谈的,如何用面向对象的手法来封装javascript ,javascript是没有类的概念的.
所以今天谈到的封装,其实就是用javascript的函数来实现的.
var People{
name:'一介布衣',
age:'30'
};
这就是javascript中的一个对象,里面封装了2个属性.
实例化一个对象的实例 people
var people=new People();
console.log(people.name,people.age); //一介布衣,30
如果我们需要在函数里返回一个对象,如下代码:
function CreateP…
Read More
寻找正确的方法，如何在AngularJS里使用jQuery
一、为什么还是要使用jquery
在使用Angular一段时间后，发现还是很难逃脱jquery 插件的魔掌。尽管对于angular，内置了jQLite.
但是为了更好的实现功能，不可避免的要使用一些jquery的插件。
二、如何在Angular里使用jquery
1. 如果使用jquery的插件，我们不应该把对应的code放到controller里面。我们应该创建directive，然后通常把jquery的code放在 link里面
2. 当我们引入jquery 插件库的时候，我们要保证是在最后倒入的，在angularjs，controllers，serv…
Read More
Angular.js 是一个MV*（Model-View-Whatever，不管是MVC或者MVVM，统归MDV(model Drive View)）JavaScript框架，其是Google推出的SPA（single-page-application）应用框架，其为我们的web应 用开发增加不少魔法变换。
头条推荐
现在就开始使用AngularJS的三个重要原因
要 知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的，比如，Cappucino 还有 Knockout。而anguar.js是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架，第 二天发…
Read More
