- 浏览: 10547 次
- 性别:
- 来自: 深圳
文章分类
最新评论
在电影《叶问》中,甄子丹饰演的叶问每天会利用木人桩练习武艺,使得泳春拳法成为肌肉记忆的一部分。临场迎敌时,身体会使用正确的拳式,自然而然。
我以为JS编程基本功的练习于武术拳法的练习是一样的。通过一套有效的『拳法』将JS基本功内置其中,反复练习,使得JS技艺成为手指记忆的一部分。这样,当面对实际开发时,我们就不需要为基本技艺而费神,将更多时间应用在业务逻辑的思考上。
那么哪一套『拳法』更适合作为木人桩的演习拳法呢?我个人推荐jQuery。一方面是因为jQuery作为使用量最大的JS类库,最适合学以致用的原则;另一方面,jQuery的设计几乎涵盖了JS编程基本功需要的所有技巧。
基于此,我从jQuery中抽取了一些核心技术实现,并将其设计成为了一套可以反复练习的JSKata。其中涉及了JS在实战过程中会反复出现的技艺和模式,勤加练习,便可轻松应用大部分的JS开发实践了。
函数定义
函数,是JavaScript语言中的一等公民。何以见得?见下图:
函数有三种定义方式。
匿名函数
具名函数
函数对象的创建
匿名函数是最常用的一种函数定义方式,具名函数相对于匿名函数会提升变量的声明时机,在调试的时候,也会有名称标识。 然而匿名函数是通过一个变量来指向一个匿名函数,当这个函数不再需要时,JS的运行时环境会自动收集内存垃圾。
jQuery的$
jQuery的$可以非常方便的选取DOM对象。而它实际上是一个函数:
字面量对象
JavaScript是一种动态的面向对象语言:
但它更推荐字面量的定义方式:
jQuery的show/hide方法
show/hide函数利用DOM封装了CSS样式表操作,作为方法以对象的属性存在:
JS对象是一种集合
JavaScript对象以一种类集合的方式存在:
这个特性非常灵活,可以动态的根据字符串获取或者设置属性信息。
jQuery的getStyle/css方法
回调
函数也是对象:
和其它对象一样,JavaScript也允许将函数对象作为参数传给另外一个函数:
因为不知道会有什么样的客户实现,所以可以利用回调将客户实现的定义延迟到服务调用的时候,如jQuery的ready方法:
下面这个示例是NodeJS利用回调函数快速构建的一个静态服务器:
jQuery的bind方法
构造器
JavaScript的字面量对象非常方便,但是当我们需要创建一批具有相同方法的对象时,使用构造器会更加便捷:
o1、o2都可调用sayHello方法,但是却来自两块内存。创建的对象越多,浪费的内存就越多。 可是如何减少内存的浪费呢?
函数作用域
默认情况下,函数的作用域由local和global组成。 有时候,我们应该将经常使用的global对象通过参数传递到local里,以节省内存:
也可以将变量封装到函数中,以达到Private的效果:
Prototype
prototype属性允许通过构造器创建的对象重用现有方法:
o1与o2的sayHello方法指向同一块内存地址。var o1 = new Person('jobs');等同于以下代码:
使用prototype,可以为JavaScript插上飞翔的翅膀:
this
如果函数是直接调用的,那么this应该是全局作用域(window or global)
如果函数是通过对象调用的,那么this应该就是那个对象:
this取决于函数的调用,而不是函数的定义:
因为函数实际上是函数对象,其中包括了两个方法call,apply。 通过call和apply,可以通过第一个参数指定this:
如果通过构造器来调用,那么this就是创建出来的那个对象:
arguments
arguments是JavaScript的关键字,实际的参数是传给arguments的,而定义的参数实际上相当于根据index取arguments相对应的值
jQuery的fn
转载至 [url=https://mp.weixin.qq.com/s?__biz=MzIxMjE4NzM5MA==&mid=402734795&idx=1&sn=4aad46fb822b73cbbe677e7fd7c717aa&scene=1&srcid=07011aI7OWcfb11SWIPkBZbd&key=77421cf58af4a65305382e3f51eb8831d39401df98d3686797e45cbf551866ea9a23f321906fcaee5e2e59156a2f0dbf&ascene=0&uin=MjAzNzM1NjQwMQ%3D%3D&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.10.5+build(14F1808)&version=11020201&pass_ticket=GOKC%2BtdzItwvKmfRnnbZkw3quvjSCwM9a%2FC0UsWD1oVTWUQWQ8DPXMYI5MbjgTsT]JQlite
[/url]
我以为JS编程基本功的练习于武术拳法的练习是一样的。通过一套有效的『拳法』将JS基本功内置其中,反复练习,使得JS技艺成为手指记忆的一部分。这样,当面对实际开发时,我们就不需要为基本技艺而费神,将更多时间应用在业务逻辑的思考上。
那么哪一套『拳法』更适合作为木人桩的演习拳法呢?我个人推荐jQuery。一方面是因为jQuery作为使用量最大的JS类库,最适合学以致用的原则;另一方面,jQuery的设计几乎涵盖了JS编程基本功需要的所有技巧。
基于此,我从jQuery中抽取了一些核心技术实现,并将其设计成为了一套可以反复练习的JSKata。其中涉及了JS在实战过程中会反复出现的技艺和模式,勤加练习,便可轻松应用大部分的JS开发实践了。
函数定义
函数,是JavaScript语言中的一等公民。何以见得?见下图:
> var i = 5; undefined > var str = 'abc' undefined > typeof i 'number' > typeof str 'string' > typeof Number 'function' > typeof String 'function' > typeof Function 'function'
函数有三种定义方式。
匿名函数
var fn = function(name) { return 'hello, ' + name; };
具名函数
function fn (name) { return 'hello, ' + name; }
函数对象的创建
var fn = new Function('name','return "hello, " + name');
匿名函数是最常用的一种函数定义方式,具名函数相对于匿名函数会提升变量的声明时机,在调试的时候,也会有名称标识。 然而匿名函数是通过一个变量来指向一个匿名函数,当这个函数不再需要时,JS的运行时环境会自动收集内存垃圾。
jQuery的$
jQuery的$可以非常方便的选取DOM对象。而它实际上是一个函数:
var $ = function(selector) { return document.querySelector(selector); };
字面量对象
JavaScript是一种动态的面向对象语言:
var o = new Object(); o.name = 'jobs'; o.age = 55; o.sayHello = function() { console.log(this.name + ":" + this.age); };
但它更推荐字面量的定义方式:
var o = { name:'jobs', age:55, sayHello:function() { console.log(this.name + ":" + this.age); } };
jQuery的show/hide方法
show/hide函数利用DOM封装了CSS样式表操作,作为方法以对象的属性存在:
var $ = function(selector) { var el = document.querySelector(selector); var o = { hide:function() { el.style.display = 'none'; }, show:function(){ el.style.display = 'block'; } }; return o; };
JS对象是一种集合
JavaScript对象以一种类集合的方式存在:
for(var key in o){ console.log(key + ":" + o[key]); } console.log(o.name === o['name']);
这个特性非常灵活,可以动态的根据字符串获取或者设置属性信息。
jQuery的getStyle/css方法
getStyle: function(name) { var style = document.defaultView.getComputedStyle(el); return style[name]; }, css:function(options) { for(var attr in options){ el.style[attr] = options[attr]; } }
回调
函数也是对象:
var fn = new Function('name','return "hello, " + name');
和其它对象一样,JavaScript也允许将函数对象作为参数传给另外一个函数:
var foo = function(arg) { if(typeof arg === 'function') console.log(arg('jobs')); else console.log(arg); }; foo(function(arg){ return 'hello, ' + arg; });
因为不知道会有什么样的客户实现,所以可以利用回调将客户实现的定义延迟到服务调用的时候,如jQuery的ready方法:
$(document).ready(function(){ });
下面这个示例是NodeJS利用回调函数快速构建的一个静态服务器:
var http = require('http'), fs = require('fs'); http.createServer(function(req, res) { var path = req.url.slice(1); fs.exists(path,function(exist){ console.log(path); if(exist){ fs.readFile(path,'utf-8',function(err,content){ res.write(content); res.end(); }); } else{ res.write('404'); res.end(); } }); }).listen(9432);
jQuery的bind方法
bind: function(event, fn) { el.addEventListener(event, fn); }
构造器
JavaScript的字面量对象非常方便,但是当我们需要创建一批具有相同方法的对象时,使用构造器会更加便捷:
var Person = function(name) { this.name = name; this.sayHello = function() { return "Hello, " + this.name; }; }; var o1 = new Person('jobs'); var o2 = new Person('gates');
o1、o2都可调用sayHello方法,但是却来自两块内存。创建的对象越多,浪费的内存就越多。 可是如何减少内存的浪费呢?
函数作用域
默认情况下,函数的作用域由local和global组成。 有时候,我们应该将经常使用的global对象通过参数传递到local里,以节省内存:
var fn = function(document,a,b,c) { console.log('break'); var e,d,f; e = function() {}; function d () {} f = 5; }; fn(document);
也可以将变量封装到函数中,以达到Private的效果:
var Person = (function() { //private var sayHello = function() { return 'Hello, ' + this.name; } //public return function(name) { this.name = name; this.sayHello = sayHello; }; })();
Prototype
prototype属性允许通过构造器创建的对象重用现有方法:
var Person = function(name) { this.name = name; }; Person.prototype.sayHello = function() { return "Hello, " + this.name; }; var o1 = new Person('jobs'); var o2 = new Person('gates');
o1与o2的sayHello方法指向同一块内存地址。var o1 = new Person('jobs');等同于以下代码:
var o1 = new Object(); o1.__proto__ = Person.prototype; Person.call(o1,'jobs');
使用prototype,可以为JavaScript插上飞翔的翅膀:
Function.prototype.method = function(name,fn) { this.prototype[name] = fn; return this; }; function Person (name) { this.name = name; } Person .method('sayHello',function() { return 'Hello,' + this.name; }) .method('show',function() { return 'show'; }); var jobs = new Person('jobs'); console.log('Hello,jobs' === jobs.sayHello()); console.log('show' === jobs.show());
this
如果函数是直接调用的,那么this应该是全局作用域(window or global)
var fn = function(name) { this.name = name; }; fn('jobs');
如果函数是通过对象调用的,那么this应该就是那个对象:
var fn = function(name) { this.name = name; }; var o = { setName:fn } o.setName('jobs');
this取决于函数的调用,而不是函数的定义:
var fn = function(name) { this.name = name; }; var o = { setName:fn } var method = o.setName; method('jobs');
因为函数实际上是函数对象,其中包括了两个方法call,apply。 通过call和apply,可以通过第一个参数指定this:
var fn = function(name) { this.name = name; }; // var fn = new Function('name','this.name = name'); var o = {}; fn.call(o,'jobs'); fn.apply(o,['jobs']);
如果通过构造器来调用,那么this就是创建出来的那个对象:
var Person = function(name) { this.name = name; this.sayHello = function() { return 'Hello, ' + this.name; }; this.show = function() { console.log(this.name); } }; var o1 = new Person('jobs');
arguments
arguments是JavaScript的关键字,实际的参数是传给arguments的,而定义的参数实际上相当于根据index取arguments相对应的值
var fn = function() { console.log(arguments); }; fn(5,6,'abc',[3,4,5]);
jQuery的fn
var $ = function(selector) { return new $.fn.init(selector); }; $.fn = $.prototype = { init:function(selector) { this.el = document.querySelector(selector); for(var method in $.fn){ this[method] = $.fn[method]; } }, slideDown: function() { var height = parseInt(this.getStyle('height')); this.el.style.overflow = 'auto'; var that = this; for (var i = 0; i <= height; i++) { (function(i) { var h = i; setTimeout(function() { that.el.style.height = h + "px"; }, h * 50); })(i); } }, val:function(content) { if(typeof content === 'string'){ this.el.value = content; } else{ return this.el.value; } }, append:function(e) { var tagRegexp = /^<(\w+)>(.*)<\/\1>$/; var match = tagRegexp.exec(e); var tag = document.createElement(match[1]); tag.innerHTML = match[2]; this.el.appendChild(tag); }, hide: function() { this.el.style['display'] = 'none'; }, show: function() { this.el.style['display'] = 'block'; }, getStyle: function(name) { var style = document.defaultView.getComputedStyle(this.el); return style[name]; }, css:function(options) { for(var attr in options){ this.el.style[attr] = options[attr]; } }, bind: function(event, fn) { this.el.addEventListener(event, fn); } }
转载至 [url=https://mp.weixin.qq.com/s?__biz=MzIxMjE4NzM5MA==&mid=402734795&idx=1&sn=4aad46fb822b73cbbe677e7fd7c717aa&scene=1&srcid=07011aI7OWcfb11SWIPkBZbd&key=77421cf58af4a65305382e3f51eb8831d39401df98d3686797e45cbf551866ea9a23f321906fcaee5e2e59156a2f0dbf&ascene=0&uin=MjAzNzM1NjQwMQ%3D%3D&devicetype=iMac+MacBookPro12%2C1+OSX+OSX+10.10.5+build(14F1808)&version=11020201&pass_ticket=GOKC%2BtdzItwvKmfRnnbZkw3quvjSCwM9a%2FC0UsWD1oVTWUQWQ8DPXMYI5MbjgTsT]JQlite
[/url]
发表评论
-
浏览器跨域和安全访问问题
2017-07-20 10:36 1774注:需关闭打开的Chrome。否则,将没有效果! windo ... -
JavaScript常用方法
2017-06-15 13:10 488手机类型判断 var ua = navigator.use ... -
vue项目添加ESLint
2017-05-08 22:06 899eslint配置方式有两种: ... -
JS跨域之document.domain
2017-04-14 10:51 882浏览器在执行Javascript时 ... -
雅虎的34条军规
2017-04-12 17:54 3951、尽量减少HTTP请求次数 2、减少DNS查找次数 3、避 ... -
前端常用正则
2017-04-05 13:06 455// 制表符 ... -
前端知识体系
2016-10-06 20:07 3381. 布局框架: Bootstrap: http://getb ... -
JavaScript函数节流
2016-08-11 11:18 435函数节流 函数节流 ... -
es6学习
2016-07-15 14:01 461ECMAScript 6 在接下来的一段时间内将成为 ECMA ... -
javascript辨别浏览器系统IOS或Android
2016-03-21 17:30 628// 获取当前设备或移动终端浏览器版本信息 var de ... -
javascript中sort()的用法
2016-03-21 16:23 531sort() 方法用于对数组进行排序。 一、默认情况 在 ... -
网站页面添加至收藏夹
2016-03-18 11:01 804<script type="text/ja ...
相关推荐
前端开源库-jeefo_jqliteJeefo_jqlite,Jeefo框架的一部分
一个简单的指令,它仅依赖于angular提供的jqlite来拖动给定容器中的元素。 执照 MIT许可证(MIT) 版权所有(c)2016 drayvock 特此免费授予获得此软件和相关文档文件(“软件”)副本的任何人无限制地处理软件的...
jqlite 使用系统SQLite库构建的janet sqlite库。测验sudo jpm installjpm test学分
jqLite独立angularjs中使用的jqLite.js的独立版本
Inputmask可以针对原始javascript,jQuery和jqlite运行。 输入掩码通过确保预定义格式来帮助用户进行输入。 这对于日期,数字,电话号码等有用。 强调: 便于使用面罩中任何位置的可选部件定义别名以隐藏复杂性的...
初学者必备的速成比笔记,包括数据绑定,控制器,依赖注入,购物车实例,常用工具函数,JQlite,angular模块设计等共23课,课堂笔记代码。
与jQuery,jQlite和Zepto.js兼容 支持嵌套对象和数组 它是如何工作的? jQuery.redirect函数将创建一个表单,并使用数据填充它(它支持嵌套值)。 安装 使用凉亭 bower install jquery.redirect 使用NPM npm ...
$anchorScroll ... 监听$location.hash()并且滚动到url指定的锚点的地方。 可以通过$anchorScrollProvider.disableAutoScrolling()禁用。...属性:number function(){} jqLite 如果设置了这个值,将会
jqLite 为了便于DOM操作,AngularJS内部封装了angular.element,如果现有项目中已经引入的jQuery,angular.element相当于jQuery函数的别名,否则,angular.element代表AngularJS对jQuery封装的一个子集,称为”...
要求:Angular 1.0+ Jquery(仅因为jqlite没有prev()) 使用angularjs的引导选择组件 大多数文档位于fz_select.js中,将在以后进行更新 这是组件的演示 这是重写组件样式的方法,这将更改fz-select-bs样式的...
angular 对象包含了一个精简版的jQuery ,叫做jqLite 。可以使得Angular做一些简单的DOM操作。AngularJS 模块在AngularJS中,一切都被封装在模块之中。AngularJS需要至少一个模块来进行操作。应用模块AngularJS需要...
角滚动 Angular 只是依赖(没有 jQuery)。 8K 缩小或 2K 压缩。 例子 查看或。... 在名称冲突的情况下,现有的 jQuery 或 jqlite 函数将被保留,只需使用前缀版本:即.duScrollTo()而不是.scrollTo
角度滚动 Angular只是依赖项(没有jQuery)。 缩小8K或压缩2K。 例子 ... 如果发生名称冲突,将保留现有的jQuery或jqlite函数,只需使用带前缀的版本:即.duScrollTo()而不是.scrollTo() 。 .scrollT
•使用jqLite工作 一、为什么使用自定义指令 NG内置了许多自定义指令,但是它们有时并不能满足你的要求,这是需要我们创建自定义属性。 二、自定义指令 接下来,我们来做一个小案例,当鼠标单击加价后,列表...
2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块 /** * Created by zhong on 2015/9/7. */ var uiModule = angular.module(uiModule,[ui.bootstrap,ui.router]); }); 3.定义dialog弹出窗口的...
主要介绍了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但还不是完全版的jQuery,需要的朋友可以参考下
angular-tutorial:一些角度教程-《 Angular学习笔记》