随笔分类 -  [10]JS

• 让代码来写代码才是王道
  摘要：【前端模板之路】二、人肉非智举，让代码来写代码才是王道写在前面在前面一篇文章《【前端模板之路】一、重构的兄弟说：我才不想看你的代码！把HTML给我交出来！》中，我们举了一个人肉各种createElement的例子，那繁琐程度绝对是惨绝人寰。人生本就苦短，每天加班又占据了不少时间，这么折腾下去，还让人怎么活。面对这种场景，我们该怎么做。无需复杂的构建工具，仅几个简单的工具函数，帮我们告别重复意义的劳动：让代码让我们写代码！从最简单的例子说起让代码帮我们写代码，似乎很豪迈的话，但相信部分童鞋听着还是有些丈二和尚摸不着头脑。那我们暂且抛开这句不知所云的话，来看看下面这个例子。一段简单的HTML小卡的 阅读全文
  posted @ 2013-06-30 23:09 HackerVirus 阅读(291) 评论(0) 推荐(0)
• 使用jQuery.form插件，实现完美的表单异步提交
  摘要：使用jQuery.form插件，实现完美的表单异步提交传送门：异步编程系列目录……时间真快，转眼一个月快结束了，一个月没写博客了！手开始生了，怎么开始呢……示例下载：使用jQuery.form插件，实现完美的表单异步提交.rar抓住6月份的尾巴，今天的主题是今天我想介绍的是一款jQuery的插件：Jquery.form.js官网。通过该插件，我们可以非常简单的实现表单的异步提交，并实现文件上传、进度条显示等等。现在我们从一个ASP.NET同步表单提交开始，然后再将其转化为异步的表单提交。我写了3种表单提交示例，并简单分析了各种方式的利弊。当然主题还是使用jQuery表单插件轻松实现表单异步提交 阅读全文
  posted @ 2013-06-30 23:03 HackerVirus 阅读(277) 评论(0) 推荐(0)
• easyUI DataGrid 分页
  摘要：easyUI DataGrid 分页easyUI 自带了分页控件pagination,那么在datagrid中只需要设置pagination:true即可。datagrid分页如何与后台数据进行交互呢？datagrid设置分页后，会有两个参数传递到后台，在后台接受这两个参数，取出相应数据，返回到前端显示 page :当前第几页 rows :当前页显示多少条数据当点击分页时，都会重新发送一次请求 并且后台需要返回total 表示一共有多少条数据，前端会接受它，算出{pages},{from},{to},{total}等一系列信息。那么怎么设置下面分页工具条显示成中文呢？ var p = $(.. 阅读全文
  posted @ 2013-06-30 12:31 HackerVirus 阅读(354) 评论(0) 推荐(0)
• 面试的几个问题
  摘要：浅谈叶小钗面试的几个问题问题：链接地址：http://www.cnblogs.com/yexiaochai/p/3158443.html① 作用域问题var a = 6;setTimeout(function () { alert(a); a = 666;}, 1000);a = 66;这道题，我可耻的没有答起，我面试结束刚刚上出租就知道这道题很水了。。。。考察作用域的，当时活生生的被大神气场照住了，周围人的集体智商都减低了！！！② 语义化标签这道题我确实没辙，之前其实差点写类似的博客，却没有写，今天结束后补上吧！1）tite与h1的区别2）b与strong的区别3）i与em的区别... 阅读全文
  posted @ 2013-06-29 23:01 HackerVirus 阅读(577) 评论(0) 推荐(0)
• Jqgrid入门-使用模态对话框编辑表格数据(三)
  摘要：Jqgrid入门-使用模态对话框编辑表格数据(三) Jqgrid是一个强大的表格插件，它提供了多种方式来编辑数据。这三种方式分别是：Cell Editing——只允许修改某一个单元格内容Inline Editing——允许在jqGrid中直接修改某一行的数据Form Editing——弹出一个新的编辑窗口进行编辑和新增 在我做的DEMO中，主要运用的是第三种， 弹出一个新窗口来编辑数据。如果想用其它两种方式可以参考官网。 相比较之前的例子，这个例子最重要的变化是添加了一个id为consoleDlg的块。在jquery的ready方法里面我将初始化div生成为一个模态对话框，用作编辑数据... 阅读全文
  posted @ 2013-06-29 22:37 HackerVirus 阅读(560) 评论(0) 推荐(0)
• jquery跨域请求数据
  摘要：jquery跨域请求数据jquery跨越请求数据。实际开发中经常会碰到两个网站数据交互问题，当向另一个站点请求数据该如何做？实际上非常容易，请按照下面的步骤做：第一：编写js，通过get获取远程数据。注意要在链接后面加上callback参数，该参数表示传递回调函数地址到远程页面。var params = 'pam1:1,...'$.get('http://192.168.0.109/test.ashx?callback=?', {params}, function cb(data) { alert(data.chartA[0].name); alert(data 阅读全文
  posted @ 2013-06-29 22:32 HackerVirus 阅读(197) 评论(0) 推荐(0)
• Jquery 图片轮播实现原理总结
  摘要：Jquery 图片轮播实现原理总结以前要做图片轮播效果的时候，总是在网上找一段jquery的复制粘贴进去，只索取不奉献，今个就把我对这个的实现原理讲解一下。 首先说下，我在网上找的例子全是用的UL 实现，其实大可不必，只要是能包含img标签的HTML标签都可以做轮播效果。利用jquery的淡入淡出函数（fadeIn和fadeOut）。废话也不多说，边上代码边讲解。最后附上demo效果地址。先HTML布局: ... 阅读全文
  posted @ 2013-06-27 14:15 HackerVirus 阅读(681) 评论(0) 推荐(0)
• Jqgrid入门-显示基本的表格(一)
  摘要：Jqgrid入门-显示基本的表格(一)首先对Jqgrid网格插件做个简要的说明。在众多的表格插件中，Jqgrid的特点是非常鲜明的。 特点如下:完整的表格呈现与运算功能，包含换页、栏位排序、grouping、新增、修改及删除资料等功能。自定义的工具列。预设的Navigator工具列，可以很容易的使用新增、删除、编辑、检视及搜寻等功能。完整的分页功能。按下任一栏位的标头，皆可以该栏位为排序项目。无论是升序或降序皆可。预设的action formatter，可以快速而直觉地对每笔资料做运算。支持多种数据格式。比如json、xml、array等。 这是我自己做的DEMO， 先上个图片，当大家看... 阅读全文
  posted @ 2013-06-27 14:04 HackerVirus 阅读(375) 评论(0) 推荐(0)
• 自定义树型下拉框
  摘要：自定义树型下拉框这里为大家展示一下前段时间自定义了一个树型下拉框，相对功能比较简单，欢迎引用或改造。让我们先来看一下效果：接下来，我们做个简单的拆解和说明：1、javacript 脚本脚本初始化1 $(function () { 2 $('.treedropdown').each(function () { 3 var id = $(this).attr('id') + "_tree"; 4 var loca = $(this).offset(); 5 $(this).after(''); 6 7 $('#' 阅读全文
  posted @ 2013-06-26 23:17 HackerVirus 阅读(3335) 评论(1) 推荐(0)
• QQ空间如何显示相片
  摘要：QQ空间如何显示相片前言此篇文章估计不会太长，有移除首页的风险，但是老夫（称老夫是因为我们真正的叶小钗其实都100多岁啦）是不会怕滴。所以，我来了哟！题外话：今天我们一起还看了一道前端的面试题，而后我本来还想多找几道来做做，但是没找到什么合适的，各位有什么好的前端面试题请给我留言哦，我们一起来分析面试题进步哟！前端时间，我与我们的产品有一次讨论，是针对图片压缩的，因为我对图片或者说PS这块是个小白，所以当时做了一个广告图片有100来k也直接给传上去了，结果被我们的同事搞起来一压缩，便只有50多k了，此次交流对图片压缩这块有了一点点心得，并且为第二次交流埋下伏笔，第二次便是图片由模糊变清晰的研究 阅读全文
  posted @ 2013-06-24 21:37 HackerVirus 阅读(312) 评论(0) 推荐(0)
• 使用 javascript 来实现 观察者模式
  摘要：以【猫叫、老鼠跑、主人醒】为例子，使用 javascript 来实现 观察者模式 （有在线演示）2013-06-24 08:35 by 金色海洋（jyk）阳光男孩,572阅读,4评论,收藏,编辑 “猫叫、老鼠跑、主人醒”是一个很古老的话题了，大家也都有各自的想法和解决方案。我也是看了很多，一开始的时候是相当的迷糊，这个怎么就是面试题了？考的是啥呀，和编程有关系吗？又是猫又是老鼠的，晕死了。后来遇到有人写就去凑凑热闹看几眼。但还是迷迷糊糊。后来学习了面向对象的知识，知道了接口、委托，然后又看了《大话设计模式》。 这时候再回过头去看猫呀、老鼠什么的，才能看懂一点。为什么只是看懂一点呢？因为还是.. 阅读全文
  posted @ 2013-06-24 10:22 HackerVirus 阅读(262) 评论(0) 推荐(0)
• Bootstrap框架
  摘要：Bootstrap框架很久之前就有很多人给我推荐twitter的Bootstrap框架，但是直到前几天我才真正学习了下Bootstrap，的确是相当棒的框架，至少从视觉体验上超越了很多以前碰到了前端UI框架。今天我要聊聊Bootstrap，最后给出一份我整理的Bootstrap的UI的demo，以及我自己使用Bootstrap开发的例子。 下面我在这里简单的介绍下Bootstrap框架。 Bootstrap框架属于UI框架，这个和jQuery不太一样，其实准确的描述Bootstrap框架属于css框架而非javascript框架，但是它本身也使用javascript来完善Bootstrap.. 阅读全文
  posted @ 2013-06-24 10:11 HackerVirus 阅读(625) 评论(2) 推荐(3)
• MVVM与Knockout
  摘要：MVVM与Knockout前言今天搞的有点快，因为上午简单研究了下MVC，发现MVC不太适合前端开发，然后之前看几位前端前辈都推荐前端使用MVVM，但是我对其还不甚了解，所以我觉得下午还是应该先看看他是神马先，后面再决定要不要继续深入下去。神马是MVVM？借用我们百科一张美图，所谓MVVM就是model-view-viewmodel模型。他是微软带来的一项新的技术体验，最先用于WPF，最后发现其模式对前端开发尤其比较合适，所以便在前端流行起来了。MVVM是对MVC的一个改进，用以适应当代Web开发。model为数据或者业务逻辑，完全与UI无关，它存储了状态并对问题领域做出处理，model可以写 阅读全文
  posted @ 2013-06-21 23:34 HackerVirus 阅读(398) 评论(0) 推荐(0)
• 模块化与MVC
  摘要：【javascript激增的思考02】模块化与MVC前言之前我们遇到了这么一个项目，也就是我们昨天提到的，有很多的小窗口的，昨天说的太抽象了，今天我们再来理一理什么是小窗口（后面点说下），当时由于js有一点复杂，我自己也装B跟风用了一下传说中MVC！！！PS：最后读寒冬老师的文章说是MVC不合适用到前端，但是为什么用以及为什么不能用可能是我半年后才能理解的问题了。其实，我当时对MVC的理解就停留在model view control的地步。。。。项目几个月后，核心功能都实现了，但是不得不面临js文件激增的问题，有时候其它同事要插入进来，便有点困难，于是当时对核心的框架进行了一点重写，缓解了一些 阅读全文
  posted @ 2013-06-21 15:08 HackerVirus 阅读(334) 评论(0) 推荐(0)
• 前端MVVM框架avalon - 模型转换1
  摘要：轻量级前端MVVM框架avalon - 模型转换(一)接上一章ViewModelmodelFactory工厂是如何加工用户定义的VM？附源码洋洋洒洒100多行内部是魔幻般的实现 1: function modelFactory(scope) { 2: var skipArray = scope.$skipArray, //要忽略监控的属性名列表 3: model = {}, 4: Descriptions = {}, //内部用于转换的对象 5: ... 阅读全文
  posted @ 2013-06-21 14:19 HackerVirus 阅读(269) 评论(0) 推荐(0)
• 模块化编程
  摘要：前言之前我做过一个web app（原来可以这么叫啦），在一个页面上有很多小窗口，每个小窗口都是独立的应用，比如：① 我们一个小窗口数据来源是腾讯微博，需要形成腾讯微博app小窗口② 我们一个小窗口数据来源新浪微博，需要形成新浪微博的小窗口我们注意到以上2个的数据源与处理方式较一致，但是需要做处理，而且其鉴权也不尽相同，所以这个js代码有相同的，也有不相同的。③ 我们的一个小窗口数据来源于百度RSS，需要形成点击标题展开的功能④ 我们一个小窗口数据来源于XXX，其表现形式为选项卡......⑤ 我们一个小窗口是flash，需要......⑥ 我们一个小窗口是个综合应用，里面还会有定时器，自动的更 阅读全文
  posted @ 2013-06-20 14:51 HackerVirus 阅读(374) 评论(0) 推荐(0)
• 轻量级前端MVVM框架avalon - ViewModel
  摘要：轻量级前端MVVM框架avalon - ViewModel废话说了大几篇,我们开始来点干货了~ViewModel的内部机制在MVVM中，数据是核心。而jQuery则以DOM为核心。而DOM只是HTML在JS的世界的抽象，是一个很易变的东西。因此如果业务代码遍历选择器表达式会非常难维护。但不可否认，jQuery是操作DOM的王者，让我们操作DOM顺手拈来。但如果不让你操作DOM，不是更好吗？就像jQuery不让你用getElementById，getElementsByTagName, querySelecterAll，大家都不知道里面有多少坑，短短几个字母$(expr)是背后sizzle选择器 阅读全文
  posted @ 2013-06-20 10:46 HackerVirus 阅读(202) 评论(0) 推荐(0)
• Wijmo 日历插件
  摘要：Wijmo 日历插件说明： 因为项目（OA）的需要，我负责开发日程的模块，相信大家用过谷歌的日历了吧，是不是觉得挺好用，但又苦于无法实现？ 这里告诉你一个很好的插件，Wijmo，而里面有一个类似谷歌的日历事件插件，真的很好很强大，注意，我不是托。 当时找到这个插件的时候，真心佩服那些牛逼的外国开发员，能做到这么厉害，并且还开源了。 因为菜鸟，苦苦做了一个多星期才完成，个中原因能归结为：1、没有中文的介绍和帮助，百度谷歌就是找不到很好的例子。2、英文不行，看官网API很吃力，没有认真看官网的Demo。3、不是很熟悉js。技术要点：1、基本的js、jQuery使用2、正则表达式的使用（确实... 阅读全文
  posted @ 2013-06-19 23:03 HackerVirus 阅读(385) 评论(0) 推荐(0)
• Reeder Web版
  摘要：Reeder Web版访Reeder界面效果一直很欣赏触控手势的代码实现，所以最近折腾了个Javascript触控手势库--JTouch，效果还有诸多不完善之处，苦于硬件设备不完善，针对ie10的兼容性一直没有跟上。在版本更新到1.1的时候，又颠覆了自己的好多想法，代码的改动量上比较大。小的改动随时都会出现，所以也就一直在1.1上改来改去。Github地址：https://github.com/liutian1937/ReederDemo地址：http://liutian1937.github.io/Reeder/demo.html图片未完全载入会影响效果，现在采用的兼听图片onload的方式 阅读全文
  posted @ 2013-06-19 17:44 HackerVirus 阅读(253) 评论(0) 推荐(0)
• 轻量级前端MVVM框架avalon - 整体架构
  摘要：轻量级前端MVVM框架avalon - 整体架构官网提供架构图单看这个图呢,还木有说明,感觉有点蛋疼,作者的抽象度太高了,还好在前面已经大概分析过了执行流程如图左边是View视图,我们就理解html结构,换句话就是说用户能看到的界面,渲染页面，绑定事件，切换类名，什么脏活都揽右边是ViewModel 视图模式,就是开发者通过avalon.define("xxx", function(vm){vm.firstName = "模型"})既然是MVVM 那么还有个M跑哪里去了,M在MVVM定义中，M只是一个过客,被VM给再次包装,它与其他表示业务状态的东西融入 阅读全文
  posted @ 2013-06-19 14:13 HackerVirus 阅读(207) 评论(0) 推荐(0)

博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3