非常适合新手的jq/zepto源码分析02

简介: function isPlainObject(obj) { return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.
  function isPlainObject(obj) {
    return isObject(obj) && !isWindow(obj) && Object.getPrototypeOf(obj) == Object.prototype
  }

  

Object.getPrototypeOf(obj)    返回 obj 的原型

这是查看是不是简单的对象

 

   function likeArray(obj) {
            var length = !!obj && 'length' in obj && obj.length,
                type = $.type(obj)

            return 'function' != type && !isWindow(obj) && (
                    'array' == type || length === 0 ||
                    (typeof length == 'number' && length > 0 && (length - 1) in obj)
                )
        }

  

'length' in obj      对象obj是否有length属性

是否为类数组

 

compact(array)   去除array里面的空数组

flatten(array)    如果array数组是个Z对象数组,则合并

 camelize = function(str){ return str.replace(/-+(.)?/g, function(match, chr){ return chr ? chr.toUpperCase() : '' }) }

  

str.replace(reg/str,rep/fun)  用rep替换匹配到的字符串

如果rep里面有$ , 则代表匹配的子表达式等 ,fun(match,$1,$2)  match匹配的字符,$1第一个返回的值

转为驼峰命名

dasherize(str)  将驼峰命令转为 abcAac  -- >  abc-abc

 

uniq(array)  查看这个键值是否唯一,

classRE(name)  添加样式的正则到classCashe里面

maybeAddPx(name,value)    查看name这样式属性是否需要添加px,并返回

     function defaultDisplay(nodeName) {
            var element, display
            if (!elementDisplay[nodeName]) {
                element = document.createElement(nodeName)
                document.body.appendChild(element)
                display = getComputedStyle(element, '').getPropertyValue("display")
                element.parentNode.removeChild(element)
                display == "none" && (display = "block")
                elementDisplay[nodeName] = display
            }
            return elementDisplay[nodeName]
        }

  

getComputedStyle(elem)  获取元素的样式列表,只读

getPropertyValue(name)  获取元素的某个样式属性  

设置节点默认display属性

 

 

     function Z(dom, selector) {
            var i, len = dom ? dom.length : 0
            for (i = 0; i < len; i++) this[i] = dom[i]
            this.length = len
            this.selector = selector || ''
        }

  

类数组的dom的list对象

 

代码仅供参考,具体功能可以自己扩展。

 

http://www.cnblogs.com/jiebba/p/6530304.html 

 

http://www.cnblogs.com/jiebba    我的博客,来看吧!

 

如果有错误,请留言修改下 哦!

 

相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
40 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
7月前
|
存储 前端开发 中间件
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
🚀React+Node全栈无死角解析,吃透文件上传的各个场景
|
JavaScript 前端开发 API
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
Vue.js入门指南:从基础到进阶,掌握现代JavaScript框架的核心概念与高级特性(2W字小白教程)
187 0
|
JavaScript 前端开发
📕 重学JavaScript:如何实现一个`new`?
如何实现一个new的效果呢?
129 0
|
JavaScript 前端开发
Vue内部原理(三)| 小册免费学
JavaScript中Array.prototype上有很多常用的方法,MDN上也给出了介绍,虽然方法众多,但是可以改变数组内容的只有7个(fill和copyWithin处于试验阶段,所以源码中没有适配),分别是:pop、push、shift、unshift、splice、sort、reverse。
78 0
|
JavaScript 前端开发
Vue内部原理(二)| 小册免费学
上一讲主要介绍了数据劫持相关的概念,现在起我们正式进入到Vue的数据绑定原理,开始感受Vue源码的精妙
89 0
|
JavaScript API
# Vue内部原理(四)| 小册免费学
与依赖收集相关的模块是:Dep实例负责维护属性的依赖列表,Watcher就是Dep实例维护的观察者队列中的观察者
92 0
|
JavaScript
js基础笔记学习155-闭包简介1
js基础笔记学习155-闭包简介1
74 0
js基础笔记学习155-闭包简介1
|
XML JavaScript 前端开发
Vue 完整版与非完整版的区别和使用方法
在使用Vue的时候,分为两个版本 一个是完整版(vue.js), 另一个是非完整版也叫运行时版本(vue.runtime.js)。
188 0
Vue 完整版与非完整版的区别和使用方法
下一篇
DataWorks