- 博客(545)
- 收藏
- 关注
RSS订阅原创 MVVM框架学习第十篇--avalon v0.5版本
为了方便编写控件，本次升级就是整合了一个迷你的三百行的迷你jQuery进去。主要更新如下：添加强大的UI绑定与自定扫描功能，让你一行JS也不用写生成UI。UI绑定的格式为ms-ui-opts?=uiName。opts为VM中的对象名，uiName为控件名，UI会自动寻找data-id的值作为ViewModel的ID，然后你就可以在avalon.models[id]得到它。UI控件会优先使用data-*的值来作为UI的配置项，设计基本同bootstrap。
2024-07-22 20:25:43
419
原创 MVVM框架学习第十篇--avalon v0.4版本
与其他框架比较，它体积更少，在主要的几个MVVM框架（拥有双向绑定机制），knockout是三千多行，angularjs 1.6万， emberjs2-3万行， winjs是几M， kendoui是几M！动用一切可使用的访问器，及时定向地通知双向绑定链的上层（复合型的Computed属性，监控数组，根据绑定值编译而成的求值函数，视图刷新函数）。让用户写代码更少，上手难度，与knockout差不多，但借鉴了angularjs的，更为易用。节点移除时，智能卸载对应的视图刷新函数，节约内存。
2024-07-21 19:10:03
115
原创 MVVM框架学习第八篇--集合处理
avalon的一个理念是，操作数据即操作DOM。这是集合处理中表现最明显。涉及到each绑定，及集合访问器的一系列方法。
2024-07-21 18:54:26
94
原创 MVVM框架学习第七篇--事件绑定与代理
data-on-type="callback | selector" type为事件类型，callback为事件回调, selector为选择器，使用事件代理。data-on-type="callback" type为事件类型，callback为事件回调，使用事件绑定。这涉及到on绑定，表现形式为。
2024-07-21 18:26:48
130
原创 MVVM框架学习第六篇--类名切换
data-class-className="boolean"，className为要处理的类名，值为一个布尔，用于决定删除或添加。data-class="object", object在VM中是个对象，它的键名即类名，由值的真假情况决定删除或添加。data-class="string"，string为要你要添加的类名。class绑定是用于添加或删除类名。
2024-07-20 20:01:46
122
原创 MVVM框架学习第五篇--流程相关
比如上面这HTML，元素为DIV，绑定器的名字为data-*的属性名的第二个单词on，亦即为事件绑定器，参数为它去掉data-on-剩下的单词，亦即要用到mouseover事件，回调是属性值，enableDetails可能是访问器也可能是命令，这由用户在ViewModel中定义。不过通常情况下它是个普通的函数。each绑定在HTML表现为data-each-*-*，其中第一个*为值，第二个*为键名，*只是一个占位符，只要是合法的变量名就OK。在数组中，每一个*你可以称之为元素，第二个为元素的索引值。
2024-07-20 19:59:22
193
原创 MVVM框架学习第四篇--数据填充
数据填充涉及到text, html, value这三种绑定。value分为单向绑定与双向绑定两种，data-value-one为单向的，data-value为双向的。
2024-07-20 19:55:08
67
原创 MVVM框架学习第三篇
状态的由来有两个，直接从模型得到，比如后端传送过来的JSON与XML，或比较悲剧地把PHP序列化的字段还原出来，第二种是在程序中控制流程时不生的中间量。如果一个字段由模型中的两个属性，或两个以上，或要对这属性进行一下加工才产生它的值呢，这就要用到组合访问器，相当于ko的依赖监控属性，或emberjs中的computed。avalon会将这个属性的名字分解成绑定器与其他参数，再将它的值得到VM中对应的访问器与命令，最后把它们构建成一个叫DOM访问器的东西，作为双向绑定链的顶层，专门与DOM打交道。
2024-07-19 21:28:34
799
原创 MVVM框架学习第一篇
如果我们把DOM操作看成增删改查，那么原始的DOM API相当于直接用二进制手段暴力去改数据库，而像jQuery等主流库提供了强大的选择器引擎与DOM操作函数，相当于发明SQL，而像knockout.js这样的MVVM框架拥有尖端的依赖链机制、双向绑定，让智能的集化操作，事务与锁成为可能，是DOM级别的“ORM系统”！基于选择器的方式是最不可靠的，因为视图的变更最频繁，某一天PM说要多加一功能或不要一功能，于是就多几个父节点或少几个子节点，把HTML的层级关系搞得乱七八糟，我们的选择器寻找就得重写一次！
2024-07-17 09:16:22
177
原创 couchDB学习笔记
插入新记录,记录在nosql数据库大多数称之为文档.它要求有一个UUID,你就随便造一个吧。在一个数据库内插入一条记录,因为上面的aaa被我们删掉了, 我们就再搞个albums。当然,上面这样搞出来的UUID太不安全了,因此你可以利用couthDB给你的UUID。注,不能重复创建相同数据库,我们试再发一次上面的请求,会返回上面请求。我们再把刚才保存的文档取出来吧,就是数据库加ID名,GET请求。删除一个数据库就用DELETE请求,path为数据库名。创建一个数据库，为PUT请求，path为数据库名。
2024-07-14 08:25:38
136
原创 简述domReady
等等，这些东西都会影响到DOM树的构建过程.因此在这时候,当我们贸贸然,使用getElementById, getElementsByTagName获取元素,然后操作它们, 就会有很大机率碰到 元素为null的 异常. 这时, 目标元素还可以没有转换为DOM节点, 还只是一个普通的字符串呢!另一个影响DOM树构建的因此是iframe,它也会加载资源, 虽然不会堵塞DOM构建,但它由于是发出HTTP请求,而HTTP请求是有限,它会与父标签的其他需要加载外部资源的标签产生竞争。
2024-07-13 16:47:53
656
原创 SlidesJS响应式 jQuery 幻灯片插件
SlidesJS 是一款老牌的 jQuery 幻灯片插件，经过多年的发展，已经成为一款功能齐全，设计精巧的幻灯片插件。支持循环、自动播放功能和淡入淡出过渡效果，并且能够自动生成分页，可以帮助开发者制作出优雅的幻灯片效果。
2024-07-10 21:05:14
107
原创 javascript测试函数运行速度
通常我们需要对函数进行优化，一般的做法是开始的时候获得时间，结束的时候再获得一次时间，两次时间相减就能到到花费的时间。而函数运行速度之快，基本上都是毫秒级的。下面给出的函数就是就此准备的。测试各种循环的效率，for...in这样慢的循环就不测了！
2024-07-10 15:39:44
143
原创 各大类库的类工厂
它应该是所有框架中最复杂也是最强大的,涉及的API就有Mutator Extends Implements还有从Type继承过来的extend implement，它内部拷贝父类属性还用到了深拷贝！supperclass 有两个作用：一是可以用来调用父类的方法，二是可以通过 supperclass.constructor 调用父类的构造函数。由Class.create来创建父类,然后通过父类的extend方法加个属性包创建子类.它有三个参数，类名，父类，与一个对象，里面包含构建这个类的材料。
2024-07-10 10:21:44
235
原创 为什么加载 JavaScript 使用 “src“，CSS 使用 “href“？
至于说为什么当初就决定外部样式表用link href来链接，而不是用style src来载入，可能是因为先贤们认为样式表更符合外部链接资源的特征，它更接近附属的资源，而不是内嵌的内容。不过HTML5或者将来的HTML还是会遵循这种设计的，比如video/audio元素中的src属性。理论上说，src表达的是该元素的内容将被整体替换。比如img元素、script元素、iframe元素都是如此。胎死腹中的XHTML2中就将src属性推广到了所有元素。胎死腹中的XHTML2也将href属性推广到了所有元素。
2024-07-10 10:11:42
90
原创 表单元素的下拉系
optgroup只是装饰用，对提交数据没有影响，当我们选中某个option元素时，它的selected属性就变成true，之前被选中的元素的selected属性变成false，select元素中selectedIndex的值会变成被选元素的序号（它在所有option元素的位置 ）。select的值就是被选中的option元素的值，如果用户定义value属性，那么这值就是option.value，否则就是option的innerHTML，也就是option.text。除了第一个参数，其他都是可选的，相当于。
2024-07-10 10:08:08
976
原创 表单元素的图形系
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."：每一对 "x,y" 坐标都定义了多边形的一个顶点（"0,0" 是图像左上角的坐标）。说起图形系，可能有人马上想到，可惜那是谬误，不要想当然，那是一个提交按钮。矩形：shape="rectangle"，coords="x1,y1,x2,y2"：第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0" 是图像左上角的坐标。这可以用判定是否真实用户提交。
2024-07-10 09:54:41
394
原创 HTML自动刷新页面
动态插入meta的支持情况，chrome, opera, safari支持。不过也不是完全没有办法，使用document.write就可以了。上面写表示零秒（亦即“立刻”的意思）跳转到aaa.html页面。如果砍掉后面的URL，即表示每隔10秒重刷页面一次。
2024-07-10 09:30:28
87
原创 HTML5 预加载功能
HTML5对link的rel属性添加N多值，其中最有用的就是预加载功能了。它比网上提到图片预加载有时不同，它的加载时机是由浏览器决定的，只有在空闲时间才偷偷加载指定资源，防止一下子加载这么多东西把页面卡死。当然这不只敢于HTML页面，还可以是图片，JS，HTML等资源。这对于我们加快页面载入速度非常有帮助。支持浏览器Firefox 3.5+，chrome 13+。
2024-07-10 09:25:20
212
原创 JavaScript验证框架
每一个表单都有一个与它name值同名的类名，并且还有span标签用于放置错误消息，span里面有个em元素，它的类名比控件的类名多了一个“err_”前缀！如果有一些验证一定要在后端，那么发现出错，就把它们放到一个对象中，格式{类名：出错提示,类名2：出错提示2,类名3：出错提示3}，即。工作中经常要进行表单验证，一个网站做下来，自己也积累了一套。框架的两个核心方法，一个是用于处理提示信息，另一个是调用验证函数！
2024-07-09 23:54:34
144
原创 ruby 对文件的操作
但这有时可能出现不能添加中文内容的情况，报“invalid multibyte char (US-ASCII) ”错误，我们就要在当前脚本的最上面添加这么一下注释，就没事了，即。创建一个新文件，并往其里面添加内容。后一种能确保文件用完后被关闭。
2024-07-08 07:29:23
197
原创 前端开发25 个 JavaScript 单行代码
在上面的例子中，如果把?位运算符 (>>>) 确保了即使未找到点号 (.) ，操作也是安全的，因为在这种情况下仍然会返回一个空字符串。其中Object.values(obj)将对象所有的属性值提取为数组，然后使用展开运算符将数组的所有元素作为Math.max函数的参数进行最大值查找。其中Object.values(obj)用于获取对象中所有的值的数组，然后通过includes(value)检查指定值是否在该数组中。它将会从数组中删除所有假值（ 0，false，null，undefined，''，NaN）。
2024-07-06 10:25:59
857
原创 Astro 提供两种类型的图片服务
getURL() 指向的本地端点可以同时调用 parseURL() 和 transform()。两种类型的服务都可以提供 getHTMLAttributes() 来确定输出 和 validateOptions() 的其他属性，以验证和增强传递的选项。对于这两种类型的服务，options 是用户作为 组件的属性或作为 getImage() 的选项传递的属性。要创建你自己的本地服务，你可以指向 内置端点 (/_image)，也可以另外创建你自己的可以调用服务方法的端点。
2024-07-05 17:02:13
592
原创 使用Astro 最详细搭建网站以及部署方案
这里我们不会从零到一的去介绍 Astro 的写法，感兴趣的同学可以简单从官网过一遍入门指南（https://docs.astro.build/zh-cn/getting-started），我们要做的就是依靠 Astro 强大的主题模板，实现只需要改改文字、写一写 Markdown 就能轻松搭建一个漂亮的博客网站！没错，依靠 Astro 强大的主题生态就可以帮助我们快速完成这些事情！如果是以前，我可能会挑一个自己熟悉的语言去快速开发，但是现在你问我选什么技术栈，我可能会选择 Astro，为什么？
2024-07-05 16:28:43
844
原创 jQuery学习笔记第三篇
下面添加新的能力时就用jQuery.extend求添加，就像Prototype的Object.extend，mootool的Native.implement，Base2的Base.extend，Ext的apply，凡此种种，把一个属性包或独立的方法名与方法体作为参数加入目标对象中。就像一个茧，jQuery对象包裹着一个或复数个DOM对象，jQuery对象的能力来自其prototype，而其prototype的方法则是jQuery.prototype的一个副本。
2024-07-05 01:58:14
195
原创 jQuery学习笔记第二篇
因此，init之后，作者就放心地往jQuery的原型添加方法。而这些原型更多的时候是往外调用其静态方法来工作。一开始，都是一些用于构建类数组的东西。接着下来分析append，prepend，before，after。内部实现非常复杂，先扼要类比一下已有的API吧。jQuery用init方法创建的，它是jQuery.fn.init的实例而非jQuery的实例，后期会用。这些方法内部都调用一个叫domManip的方法，它的存在价值仅仅是为了兼容火狐。把相应的能力从jQuery.prototype搬运到。
2024-07-04 23:19:06
199
原创 jQuery学习笔记第一篇
基本上init就是个大熔炉，根据传入参数的类型做出不同的处理，如DOM对象，字符串，数组对象与NodeList这样的类数组对象转换成jQuery对象，如果是函数，则改成DOM加载。
2024-07-04 22:40:42
89
原创 less :嵌套规则
就是一个CSS表达式，如果它拥有层级关系，我把可以父级的表达式提出来，从而实现表达式名字的重用！实际生成的表达式名是“父级”+“ ”+"子级"，中间的空白是后代选择器。我们可以留意到& 这个符号，它是直接跟在父级表达式上，中间的后代选择器没有了！
2024-07-03 15:57:05
111
原创 less ：命名空间
上面的命名空间定义，不要以为只有ID选择器才可以，任何合法选择器也行，如。我是强烈建议，对于这些命名空间（其他叫模块更恰切些），只应该包含方法。
2024-07-03 15:32:38
91
原创 less ：作用域
LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止。
2024-07-03 15:09:46
336
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人