![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 50
每天学习一点点 javascript
Mango's Louvre
Mango:珍惜每一天敲代码的机会
展开
-
扩展DOM有什么问题
通过扩展,方法和属性能被直接地添加到对象上,或者直接扩展到它们的原型(prototype)上,如果运行环境支持的话(火狐是支持在DOM对象的prototype上直接扩展的,而ie不支持)。令人不安的是,这个看似不错的做法的缺点并不是那么的众所周知。没有冲突,不需要处理宿主对象这样疯狂的行为,漏洞更加容易管理,更容易在不正常的MSHTML DOM上操作,更好的性能,健全的维护和无痛的缩放。至于我所忧虑的,所有的核心开发者已经都明白了以上提到的问题,封装是在一个健全的发展方向。而且不幸的是,这不只是一个理论。原创 2024-07-31 15:18:21 · 200 阅读 · 0 评论 -
newland框架
newland框架原创 2024-07-16 00:15:10 · 111 阅读 · 0 评论 -
简述domReady
等等,这些东西都会影响到DOM树的构建过程.因此在这时候,当我们贸贸然,使用getElementById, getElementsByTagName获取元素,然后操作它们, 就会有很大机率碰到 元素为null的 异常. 这时, 目标元素还可以没有转换为DOM节点, 还只是一个普通的字符串呢!另一个影响DOM树构建的因此是iframe,它也会加载资源, 虽然不会堵塞DOM构建,但它由于是发出HTTP请求,而HTTP请求是有限,它会与父标签的其他需要加载外部资源的标签产生竞争。原创 2024-07-13 16:47:53 · 658 阅读 · 0 评论 -
javascript测试函数运行速度
通常我们需要对函数进行优化,一般的做法是开始的时候获得时间,结束的时候再获得一次时间,两次时间相减就能到到花费的时间。而函数运行速度之快,基本上都是毫秒级的。下面给出的函数就是就此准备的。测试各种循环的效率,for...in这样慢的循环就不测了!原创 2024-07-10 15:39:44 · 143 阅读 · 0 评论 -
各大类库的类工厂
它应该是所有框架中最复杂也是最强大的,涉及的API就有Mutator Extends Implements还有从Type继承过来的extend implement,它内部拷贝父类属性还用到了深拷贝!supperclass 有两个作用:一是可以用来调用父类的方法,二是可以通过 supperclass.constructor 调用父类的构造函数。由Class.create来创建父类,然后通过父类的extend方法加个属性包创建子类.它有三个参数,类名,父类,与一个对象,里面包含构建这个类的材料。原创 2024-07-10 10:21:44 · 235 阅读 · 0 评论 -
JavaScript验证框架
每一个表单都有一个与它name值同名的类名,并且还有span标签用于放置错误消息,span里面有个em元素,它的类名比控件的类名多了一个“err_”前缀!如果有一些验证一定要在后端,那么发现出错,就把它们放到一个对象中,格式{类名:出错提示,类名2:出错提示2,类名3:出错提示3},即。工作中经常要进行表单验证,一个网站做下来,自己也积累了一套。框架的两个核心方法,一个是用于处理提示信息,另一个是调用验证函数!原创 2024-07-09 23:54:34 · 145 阅读 · 0 评论 -
12个很好用的JavaScript 框架分享
12个很好用的JavaScript 框架分享原创 2024-07-08 08:20:53 · 1308 阅读 · 0 评论 -
前端开发25 个 JavaScript 单行代码
在上面的例子中,如果把?位运算符 (>>>) 确保了即使未找到点号 (.) ,操作也是安全的,因为在这种情况下仍然会返回一个空字符串。其中Object.values(obj)将对象所有的属性值提取为数组,然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。其中Object.values(obj)用于获取对象中所有的值的数组,然后通过includes(value)检查指定值是否在该数组中。它将会从数组中删除所有假值( 0,false,null,undefined,'',NaN)。原创 2024-07-06 10:25:59 · 858 阅读 · 0 评论 -
bootstrap源码学习与示例:bootstrap-affix
bootstrap组件,其实这组件很简单,就是通过添加或移除affix这个类名实现屏幕固定或不固定。当页面加载完毕时,JS插件会搜索页面上所有[data-spy="affix"]的元素,然后找其data-offset-top或data-offset-bottom属性,即离页面顶(底)部少于多少px,就放弃固定,平时你怎么滚动,被固定的元素都定在这个位置上不动。此组件只要用户为元素定义两个属性,引入JS与CSS就生效了。网上许多例子都是多此一举!此组件也没有任何自定义事件!原创 2024-06-28 04:32:09 · 296 阅读 · 0 评论 -
比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
首先我们来简单介绍下什么是 CSS 预处理器,CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强,代码更直观等诸多好处。这是宣传使用预处理的原因之一,并且是一个很好的理由,这样可以节省的大量的时间和汗水。然后你可以任意引用该变量。你所看到的上面的代码中,.block 的样式将会被插入到相应的你想要继承的选择器中,但需要注意的是优先级的问题。原创 2024-06-28 03:56:11 · 1132 阅读 · 0 评论 -
清除文本选择
这分三部分,首先如果支持selectstart事件,则阻止它的默认行为,也就是防止患于未然的聪明做法。再则使用CSS3伪类,最早支持的是firefox与khtml,当然要带前缀,高版本的webkit浏览器也开始支持了。在我的mass框架中,css方法已经为你打理这一切了,自动添加可用的前缀。用法,在mousedown回调中draggable.textselect(false);此方法是放在mousemove中,因此调用非常频繁。在mass ui中许多原件能用到拖拽操作,在拖拽中我们不可避免地要清除选择。原创 2024-06-28 03:19:07 · 113 阅读 · 0 评论 -
一个简单的AJAX示例
虽然现在有了框架,许多AJAX调用直接调用它们的API就可用。但有些极端情况,比如面试,比如第三方应用不想加载这些库,我们就只有自己写。这时想必有许多人要疯狂google,百度了。网上太多垃圾信息,我还是在自己博客上保存一份吧。原创 2024-06-28 03:12:21 · 172 阅读 · 0 评论 -
查询json数据结构的8种方式
TaffyDB是一个Javascript库,它提供了强大的数据库功能以实现之前的想法,大大改善了你在Javascript中使用数据的方式。它背后的理念和John Resig的JavaScript Micro-Templating类似:使用正确表达式将一段非常简单的字符串转换成Javascript函数。objeq是一个简单的库,实现了对POJSO(Plain-Old JavaScript Objects,普通的Javascript对象)的实时查询。目前这是我最喜欢的查询JSON数据结构的方法。原创 2024-06-27 13:59:02 · 423 阅读 · 0 评论 -
清除文本选择
这分三部分,首先如果支持selectstart事件,则阻止它的默认行为,也就是防止患于未然的聪明做法。再则使用CSS3伪类,最早支持的是firefox与khtml,当然要带前缀,高版本的webkit浏览器也开始支持了。在我的mass框架中,css方法已经为你打理这一切了,自动添加可用的前缀。用法,在mousedown回调中draggable.textselect(false);此方法是放在mousemove中,因此调用非常频繁。在mass ui中许多缘件能用到拖拽操作,在拖拽中我们不可避免地要清除选择。原创 2024-06-27 13:34:21 · 144 阅读 · 0 评论 -
监听文本框输入
onpropertychange 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发。oninput 事件在用户输入、退格(backspace)、删除(delete)、剪切(ctrl + x)、粘贴(ctrl + v)及鼠标剪切与粘贴时触发。backspace、delete 两个按键的 keyCode 分别为 8、46。oncut 事件在粘贴(ctrl + v)、鼠标粘贴时触发。原创 2024-06-27 13:24:02 · 125 阅读 · 0 评论 -
knockout 监控数组的缺点
其次,对数组的元素的操作不太人性化。如果我们是用 a.people()[1]({firstName: "7777"}),那么它的lastName的位置为空白,看来它是做替换操作而不是更新操作。首先它那个对绑定属性的值的parser本来就非常弱,$index好像只能独立使用。像avalon的parser也非常弱,但我另一个转换为求值函数的parser还是能拿得出手的。knockout的监控数组没有想象中的强大,只能监控数组元素的位置变化,或个数的增减,然后对视图对应区域进行同步。原创 2024-06-27 09:53:24 · 156 阅读 · 0 评论 -
javascript 的位操作符转换推断
如果猜测没错,js是弱类型,所有内容在位运算操作前需要在js引擎实现内部统一转换为int或long。如果无法转换则默认为赋值为0。就拿String来说,字符串“1”和数值1的二进制难道是一样的?说明1的二进制值是1010,“1”的是110001110000。由于在强类型语言中,位运算符仅能用在int和long类型中。这个太强大了,就是说不管是啥都能转换为number。这就是说这条语句可以将字符串转化为number。位运算是按操作符两边内容的二进制值计算的。控制回调函数结果为10,number。原创 2024-06-27 09:31:50 · 112 阅读 · 0 评论 -
使用Object.observe 实现数据绑定
将前面这个示例中的代码稍作修改,对使用Object.observe API进行监视的对象的属性值连续修改七次(为了避免回调函数的循环调用删除对time_read事件的监视)。可以使用Notifier对象来自定义针对对象的可访问属性(可使用getter方法或setter方法读取或设置的属性)被修改时所触发的事件。Object.observe方法中使用两个参数,其中第一个参数值为需要被监视的对象,第二个参数值为监视到属性修改时调用的回调函数名。可以监视到的事件并不局限于以上所述的几种,可以自定义监视事件。原创 2024-06-27 09:16:51 · 989 阅读 · 0 评论 -
jquery slideDown效果
复制代码运行可以看效果,JQ自带的有副作用,影响到原有布局,是能过改变自身的高度实现,如果它里面的内容是用SPAN等堆砌的,它们会挤在一起,然后慢慢变成你想要的样子。我的是通过两个元素实现的,外围与内部的等高,外围的要求overflow:hidden,防止内部的要一开始放到上方时被暴露出来。然后慢慢改变top,与现实中的窗帘降下效果一致。原创 2024-06-27 08:17:14 · 161 阅读 · 0 评论 -
把符合URL格式的字符串变成链接
【代码】把符合URL格式的字符串变成链接。原创 2024-06-27 08:08:06 · 68 阅读 · 0 评论 -
web界面上的字体兼容方案
但其实问题并没有这么简单,font-family列表是必然要设置的,但这个列表的具体解析,只有浏览器自己才知道,如果coder们不在这个基础上做点儿什么,是完全不知道某个用户浏览到的这个页面究竟应用到了那种字体、此时的页面排版是否美观、页面有没有出现文字很拥挤的情况、给某个节点设置的背景icon是否对其了?类似边距、宽度、高度等的,调整1px并不难,但是如果遇到不同字体的情况,要处理line-height,保证每种字体下,UI效果都非常美观,这就不是一件简单的事情了!等等,各种问题,各种猜测。原创 2024-06-27 08:03:55 · 698 阅读 · 0 评论 -
最流行的JavaScript代码规范
个人觉得,无空格太挤了,不利于快速分清key和value。前后空格的话,恐怕需要对齐冒号,看起来才美观,从统计数据来看,大部分程序员懒得对齐冒号(还是说,大部分程序员的IDE或编辑器不够智能?无空格,22.226 %;前后空格,13.918 %。流行的不一定是好的,但是从交流的角度来说,按照流行的风格编写代码,可以让你的代码在大多数人看起来更习惯。无空格,67.465 %;有空格,32.535 %。无空格,93.965 %;有空格,6.035 %。有空格,78.856 %;无空格,21.144 %。原创 2024-06-27 07:26:42 · 226 阅读 · 0 评论 -
javascript 模拟选择下拉框的某一个option元素的效果
需要在单元测试模拟它,百度了好久都没有。后来想一想,还是找到办法了。因为我们手动交互某一行为,首先是让它的某些属性发生变化,其次是让它触发某事件。想明白这一点就简单了。让属性发生变化,当然是改动其固有属性,因此 setAttribute(aaa,bbb)便淘汰了,它是用来设置自定义属性。想触发事件,我们可以用fireEvent或dispathEvent,想得更加完美,大家想深入可以参考一下。当然现在这样做是不够完美,因为我自己承担了一些计算量。我们需要知道它是否发生了改变。原创 2024-06-27 06:47:50 · 187 阅读 · 0 评论 -
js里面的三种注释方法
第三种注释不是很常见,会和html内的注释混淆,不推荐使用。第三种方法后面是不要加-->,这是和html注释不一样的地方。javascript(js)语言里面的注释方法有三种。原创 2024-06-27 06:38:02 · 92 阅读 · 0 评论 -
优秀MVVM框架的出现,前端开发才能像后端那样轻松
现在HTML里面又有了数字输入,日期时间输入这样的东西,数字的没什么疑问,就是最大最小值,步进值等等,日期时间这个就复杂了,它怎么做,都有人不满意。网站型的逻辑大部分都在处理UI,而应用型可能有很多业务逻辑,这部分需要更好的组织,以便复用,或者即使我们的目标不包括复用,为了这个代码的可维护性,也需要有比较好的组织方式。那就是它的含义尽可能少,比如说单行文本输入框,总没人对它有歧义吧,它无非就是可以设置最大最小长度,是否只读,是否禁用,最多通过某种规则来限制输入字符,最多最多,也就这些可做的了,大家都认同。原创 2024-06-27 06:30:56 · 612 阅读 · 0 评论 -
localForage实现 Web 离线存储
localStorage 能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据。IndexedDB 和 WebSQL 是异步的,速度快,支持大数据集,但他们的API 使用起来有点复杂。如果你不喜欢在你的代码中使用回调,你可以使用 ES6 Promises,来替换 localForage 的回调参数。传统的 API 在许多方面其实是很不错的,使用简单,没有复杂的数据结构。Mozilla 开发了一个叫 localForage 的库 ,使得离线数据存储在任何浏览器都是一项容易的任务。原创 2024-06-26 02:58:35 · 704 阅读 · 0 评论 -
不使用Math.random实现随机数
【代码】不使用Math.random实现随机数。原创 2024-06-26 02:43:05 · 70 阅读 · 0 评论 -
环视非捕获分组
【代码】环视非捕获分组。原创 2024-06-26 02:38:18 · 69 阅读 · 0 评论 -
处理TypeError: Converting circular structure to JSON
【代码】处理TypeError: Converting circular structure to JSON。原创 2024-06-26 02:33:57 · 81 阅读 · 0 评论 -
银行卡号相隔4位插入空格
【代码】银行卡号每隔4位插入空格。原创 2024-06-26 02:13:05 · 80 阅读 · 0 评论 -
如何判定耿耿数被bind过?
因此判定函数名是否匹配/^bound\s\w+/就可以了。原创 2024-06-26 02:03:27 · 310 阅读 · 0 评论 -
能冒泡的事件
事件冒泡是我们实现事件代理(委托)的关键,在avalon1.6中,默认让能冒泡的事件都使用事件代理实现了!还附上了 Legacy Events(旧浏览器支持的非标准遗留事件)的 bubble 属性。还有很多H5新事件,大多在草案阶段,就不一一翻开了。每个 event 都有一个。属性,可以知道它可否冒泡。原创 2024-06-26 01:59:10 · 246 阅读 · 0 评论 -
不使用Math.random实现随机数
【代码】不使用Math.random实现随机数。原创 2024-06-26 01:36:28 · 102 阅读 · 0 评论 -
javascript的闭包
简单来说,闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚,闭包就是“属性表”,闭包就是一个数据块,闭包就是一个存放着“Name=Value”的对照表。我的解释是,onclick的绑定函数 function(){alert(i)}的作用域为对应li对象,它里面alert的i的作用域为window,每次循环都是在重写window.i的值,因此循环完,i已是4,点击哪一个li元素都是4。闭包的定义非常晦涩——原创 2024-06-25 02:15:27 · 384 阅读 · 0 评论 -
document.getElementsByClassName的实现
还有个更古老级的,我从prototype.js1.01版本中找到的,它能支持多个类名的查找(上面两个不行)。它不支持IE5,效率一般般,但作为最早的框架之一,它已经做得很好,其他框架还没有想到这个呢!另一个实现,由Dustin Diaz(《JavaScript Design Patterns》的作者)提供,但兼容性不如上面的,不支持IE5。取出文档中所有元素,然后进行遍历,使用正则表达式找出匹配的元素放入一个数组返回。当然如果游览器原生支持,就用原生的。要使用分支document.all以防错误。原创 2024-06-25 01:50:37 · 455 阅读 · 0 评论 -
javascript测试函数运行速度
通常我们需要对函数进行优化,一般的做法是开始的时候获得时间,结束的时候再获得一次时间,两次时间相减就能到到花费的时间。而函数运行速度之快,基本上都是毫秒级的。下面给出的函数就是就此准备的。测试各种循环的效率,for...in这样慢的循环就不测了!原创 2024-06-25 01:33:23 · 100 阅读 · 0 评论 -
移除DOM节点
在IE中移除容器类节点,会引起内存泄露,最好是创建一个新的节点,比如div,然后将要删除的节点放入这个div中,再将div的innerHTML清空。其它的直接removeChild就可以了。xxx.removeChild(obj) xxx是所删除节点的父节点。xxx.removeNode(true) xxx是所要删除的节点。原创 2024-06-25 01:27:38 · 150 阅读 · 0 评论 -
动态添加样式表规则
如styleSheet是IE独用的,getBoxObjectFor是火狐独用的(当然你也可以使用(/firefox/.test(navigator.userAgent.toLowerCase())),通常DOM操作是最耗时的,能用私有就用私有!大家都知道,富文本输入框最流行的做法是把要输入的内容放到iframe中,这就涉及到两种document,一个主页面的document,另一个是iframe的document。接着我们要加把保险锁,因为当media="print"时,只在页面打印时,定义的效果才有效。原创 2024-06-25 01:18:25 · 905 阅读 · 0 评论