非常适合新手的jq/zepto源码分析01】的更多相关文章

(function(global, factory) { // 查看这里是不是定义成模块,如果定义模块就返回 一个模块 if (typeof define === 'function' && define.amd) define(function() { return factory(global) }) else factory(global) //直接执行闭包外传过来的函数 funcutin(window) } var undefined, key, $, classList, emp…
复习下ajax吧! 1.创建XMLHttpRequest对象 xmlhttp=new XMLHttpRequest(); xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); //ie7以下 xmlhttp.open("GET","test1.txt",true); 参数 method,url,async() xmlhttp.send(); xmlhttp.setRequestHeader(name,va…
1.现在看看对JSONP的封装 $.ajaxJSONP = function(options, deferred){ if (!('type' in options)) return $.ajax(options) //不存在type 直接调用$.ajax var _callbackName = options.jsonpCallback, //回调函数名称 callbackName = ($.isFunction(_callbackName) ? _callbackName() : _call…
复习下事件的有关内容: 1.现在用的绑定/删除: obj.addEventListener(type,fn,false) obj.removeEventListener(type) obj.attachEvent(type,fn)   //ie obj.detachEvent(type) 2.js的event对象 type : 事件类型 srcElement/target :  事件源 button : 如果是鼠标按下,则 1左键 2右键 4中间滚轮 多个键则相加按下的所有值. firfox 0…
zepto的原型  $.fn  属性: constructor //构造行数 forEach: emptyArray.forEach, //都是原生数组的函数reduce: emptyArray.reduce,push: emptyArray.push,sort: emptyArray.sort,splice: emptyArray.splice,indexOf: emptyArray.indexOf, concat //合并数组,这里还包含了合并节点集合 add //添加节点集合 is //匹…
zepto.fragment = function(html, name, properties) { var dom, nodes, container // 如果是简单的标签<div></div> <p/> $1 = div / p // 创建节点 if (singleTagRE.test(html)) dom = $(document.createElement(RegExp.$1)) // 不存在,即不是简单的标签 if (!dom) { if (html.re…
$.extend = function(target){ var deep, args = slice.call(arguments, 1) if (typeof target == 'boolean') { deep = target target = args.shift() } args.forEach(function(arg){ extend(target, arg, deep) }) return target } 扩展函数 第一个参数为boolean true 则深扩展, zept…
function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype } Object.getPrototypeOf(obj)    返回 obj 的原型 这是查看是不是简单的对象 function likeArray(obj) { var length = !!obj && 'length'…
如果你也开发移动端web,如果你也用zepto,应该值得你看看.有问题请留言. Zepto源码分析-架构 Zepto源码分析-zepto(DOM)模块 Zepto源码分析-callbacks模块 Zepto源码分析-event模块 Zepto源码分析-ajax模块 Zepto源码分析-form模块 Zepto源码分析-deferred模块 Zepto源码分析-动画(fx fx_method)模块 内容一定要200字一定要200字内容一定要200字一定要200字内容一定要200字一定要200字内容…
一个普通的 Zepto 源码分析(二) - ajax 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form . ie ,其中 ajax 模块是比较重要的模块之一,我们可以借助它提供的方法去做一些网络请求,还可以监听它的生命周期事件. Zepto 基本模块之 ajax 模块 我们都已经知道 Zepto 插件的一般形式是把 Zepto 对象传入给 $ 形参,那么可以…
一个普通的 Zepto 源码分析(三) - event 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form . ie ,其中 event 模块也是比较重要的模块之一,我们可以借助它提供的方法实现事件的监听.自定义事件的派发等.最重要的是,做了一些事件的兼容,简化了我们的编码. event 模块 这个模块代码行数要比 ajax 的少.还是老套路,对函数调用关系做…
一个普通的 Zepto 源码分析(一) - ie 与 form 模块 普通的路人,普通地瞧.分析时使用的是目前最新 1.2.0 版本. Zepto 可以由许多模块组成,默认包含的模块有 zepto 核心模块,以及 event . ajax . form ,还有一个说是可以支持 IE10 和 WP8 的 ie 模块. Zepto 基本模块之 ie 模块 由于这个模块比较短小,就是一个对 getComputedStyle() 的封装,而且核心模块也有用到这个函数.那么首先来看看: ;(functio…
本文只分析核心的部分代码,并且在这部分代码有删减,但是不影响代码的正常运行. 目录 * 用闭包封装Zepto * 开始处理细节 * 正式处理数据(获取选择器选择的DOM) * 正式处理数据(添加DOM到当前实例) * 在实例的原型链上添加方法 * 支持插件扩展 * 验收 用闭包封装Zepto // 对全局暴露Zepto变量 var Zepto = (function() { // 定义$变量,并将具体细节交给zepto.init处理 $ = function(selector, context)…
Zepto源码分析(一)核心代码分析 Zepto源码分析(二)奇淫技巧总结 目录 * 前言 * 短路操作符 * 参数重载(参数个数重载) * 参数重载(参数类型重载) * CSS操作 * 获取属性值的方法 * 获取属性值的方法 * Boolean操作 * 快速转换成Boolean * 日期操作 * 快速获取时间戳 * 数组操作 * 数组去重 * 数组清洗(去除null和undefined) * 字符串操作 * 快速转换成字符串 * CSS命名方式转驼峰命名方式 * 驼峰转CSS命名方式 * 对象…
1. 血案由来 近期我在为Lazada卖家中心做一个自助注册的项目,其中的shop name校验规则较为复杂,要求:1. 英文字母大小写2. 数字3. 越南文4. 一些特殊字符,如“&”,“-”,“_”等看到这个要求的时候,自然而然地想到了正则表达式.于是就有了下面的表达式(写的比较龊): ^([A-Za-z0-9._()&'\- ]|[aAàÀảẢãÃáÁạẠăĂằẰẳẲẵẴắẮặẶâÂầẦẩẨẫẪấẤậẬbBcCdDđĐeEèÈẻẺẽẼéÉẹẸêÊềỀểỂễỄếẾệỆfFgGhHiIì…
目录 一.服务端 二.客户端 NIO 源码分析(01) NIO 最简用法 Netty 系列目录(https://www.cnblogs.com/binarylei/p/10117436.html) Java NIO 主要由三个部分组成:Channel.Buffer 和 Selector.在分析源码前最好对 NIO 的基本用法和 Linux NIO 在一个基本的了解. NIO 入门 Linux NIO 本文会提供一个 NIO 最简使用示例,之后的源码分析都会基于该示例及其扩展进行. 一.服务端 p…
1.Session文档介绍 毋庸置疑学习.Net core最好的方法之一就是学习微软.Net core的官方文档:https://docs.microsoft.com/zh-cn/aspnet/core: .Net core Session的官方文档 https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/app-state .Net core Session Github源码 https://github.com/aspnet/Ses…
一.什么是SPI SPI全称为Service Provider Interface,是一种服务发现机制,其本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件.这样可以在运行时,动态为该接口替换实现类. JDK提供了默认的SPI实现,但是Dubbo并未使用JDK提供的SPI,而是自己封装了一套.我们先来通过Dubbo官网给的两个例子简单了解下JDK和Dubbo的SPI是如何使用的. 1.1.JDK SPI示例 首先定义一个接口以及它的两个实现类 public interface…
源码 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. var Zepto = (function() { //定义局部变量 concat = emptyArray.concat 缩短作用域链 var undefined, key, $, classList, emptyArray = [], concat = emptyArray.conc…
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ , undefined, slice = Array.prototype.slice, isFunction = $.isFunction, isString = function(obj){ return typeof obj == 'string'…
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($, undefined){ var prefix = '', eventPrefix, // prefix浏览器前缀 -webkit等,eventPrefix事件前缀 vendors = { Webkit: 'webkit', Moz: '', O: 'o'…
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. // // Some code (c) 2005, 2013 jQuery Foundation, Inc. and other contributors ;(function($){ var slice = Array.prototype.slice function Deferr…
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ var jsonpID = 0, document = window.document, key, name, rscript = /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/sc…
源码注释 // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT license. ;(function($){ /** * 序列表单内容为JSON数组 * 返回类似[{a1:1},{a2:2}]的数组 * @returns {Array} */ $.fn.serializeArray = function() { var name, type, result =…
关于读源码,读jQuery自然是不错,但太过于庞大不易解读,对于小白,最好从Zepto,Lodash这样的小库入手. 这里使用的是zepto1.1.6版本为例. 自执行函数 在阅读之前,先弄清楚闭包和自执行函数 两种方式: (function() {})() 和 (function() {}()) (function() { console.log('这里直接执行') })() (function () { console.log('这里直接执行') }()) 自执行函数的优势在于,避免了全局变…
准备知识 在看ajax实现的时候,如果对ajax技术知识不是很懂的话,可以参看下ajax基础,以便读分析时不会那么迷糊 全局ajax事件 默认$.ajaxSettings设置中的global为true,因此在Ajax请求的生命周期内,这些事件将被触发: ajaxStart:如果没有其他Ajax请求当前活跃将会被触发 ajaxBeforeSend:再发送请求前,可以被取消 ajaxSend:像 ajaxBeforeSend,但不能取消 ajaxSuccess:当返回成功时 ajaxError:当有…
准备知识 事件的本质就是发布/订阅模式,dom事件也不例外:先简单说明下发布/订阅模式,dom事件api和兼容性 发布/订阅模式 所谓发布/订阅模式,用一个形象的比喻就是买房的人订阅楼房消息,售楼处发布消息,体现为代码的话就是如下形式 var Observable = { callbacks: [], add: function(fn) { this.callbacks.push(fn); }, fire: function(data) { this.callbacks.forEach(func…
准备说明 该模块定义了库的原型链结构,生成了Zepto变量,并将其以'Zepto'和'$'的名字注册到了window,然后开始了其它模块的拓展实现. 模块内部除了对选择器和zepto对象的实现,就是一些工具方法和原型方法的定义. 值得一提的是,内部很多实现都利用了原生数组的方法,很多api也是基于内部或公开的方法进一步拓展实现的. 虽然该模块涉及的api非常多,但内部实现上比较统一,因此只会针对性地挑一些方法进行分析. 实现内容 var Zepto = (function () { // 1.基…
序言:目前有个计划就是准备看一下源码,来提升自己的技术实力.同时现在好多面试官都喜欢问源码,问你是否读过JDK源码等等? 针对如何阅读源码,也请教了我的老师.下面就先来看看老师的回答,也许会有帮助呢. 我很尊敬的一位老师,他姓唐,算是我入门编程的启蒙老师,有10多年的C/C++开发经验,我有幸跟着老师的C++/C课程,自学完,而且还学了数据结构.他的讲课很有风格,幽默风趣,有条有理,深入浅出. 不过后来,我决定走Java这条不归路. 我向老师请教了一个问题:关于如何阅读源码的问题?不乏味,思路清…
1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, undefined ) { // jquery code })(window); 1.这是一个自调用匿名函数.在第一个括号内,创建一个匿名函数:第二个括号,立即执行 2.为什么要创建这样一个“自调用匿名函数”呢? 通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命…