随笔分类 - 前端技术
js,jq,vue,angularjs,knockoutjs,reactjs等
摘要：面向对象的封装面向对象一个入最重要的特性就是“封装”，将一些没有必要公开的方法和属性以特定的方式进行组装，使它对外只公开一个接口，外界在调用它时，不需要关注它实现的细节，而只要关注它的方法签名即可，而对于JS来说，我们也可以利用面向对象的封装性来实现一个标准的消息提示框。JS模版使用JS模版可以大大提高开发效率，有了模版，你不用在去拼接JS串了，这对于开发者来说绝对是个福音！看它多少漂亮：标准消息弹出框的完整代码 function alertBox(msg, timer) { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", '
阅读全文
摘要：JS里的数据类型，它虽然是个弱类型的语言，但它也有自己的规定的，它不会向其它语言那么，使用int来声明一个整形变量，而是使用 var，如果你是一个C#的开发者，你就会知道，原来C#现在也在和JS学，开始提供var了，是的，它的语句简结，清晰，不会出现效率问题，因为它是编译时被执行的，呵呵。下面做了一个例子，将JS里的变量通过typeof函数（方法）进行了输出，自己也再次学习一个JS的数据类型var a=0var b="a"var c=function(){}var d=[]var e={}var f=1.1"a的类型＝"+typeof(a)+"
阅读全文
摘要：返回目录对于Knockoutjs本身来说，没有提供验证模块，不过，有第三方的扩展，就像你为jquery库作extensions一样，这讲中我将介绍一个Knockout插件扩展，knockout.validation.js，用它来实现对HTML标记的验证，下面是它在Github上的地址https://github.com/Knockout-Contrib/Knockout-Validation。这个插件的使用很类似MVC自己的验证，如果你自己手动扩展过它的ValidationAttribute，那么你对下面的JS肯定不会感到陌生，思想是一样的，JS里的Validation也是面向对象的，也支持o
阅读全文
摘要：返回目录在controller里将数据拿到，并且存储到ViewBag对象里，最后在View上显示出来，这是传统的MVC开发方式，事实上引入Knockoutjs以后，这种方式还是适合的，Knockoutjs只是在前台数据绑定中做了一点调整，它不在依赖于后台具体数据，你完全可以在最后去为它动态绑定数据，一般地，我们会为这种页面添加一个JS文件，用来获取数据，以实现前台开发人员与后台代码开发人员的分离。从view层拿数据的方式有两种，第一是通过ViewBag,ViewData,TempData,Model等容器来存储，然后在View上直接取即可，而第二种方式是通过一个GET请求，它通常是异步的，你可
阅读全文
摘要：返回目录在面向对象的程序设计里，对象是核心，一切皆为对象，对象与对象之间的关系可以表现为继承和组合，而在Knockoutjs或者JS里，也存在着对象的概念，今天主要说一下JS里的对象及对象的组合。JS里对象可以使用{}生成，也可以使用function(){}方式生成，而使用function(){}方式我认为更灵活，使用{}方式更正规，我这里总结了一下，也是我的习惯，如果对象只是getter,setter的属性块，可以使用{}的方式，如果对象比较复杂，由属性，方法 组成，这时最好使用function(){}的方式，下面举例说明。下面定义一个user对象，使用{}方式var User={ Na..
阅读全文
摘要：在jquery里有两个方法可以用来绑定自动追加出来的ＤＯＭ对象，它们是live和delegate，事实上，这两个方法是bind方法的一个变体，在对于固定ＤＯＭ对象时，我们通常使用bind就可以了，而对象动态产生的ＤＯＭ对象，使用bind就无能为力了，这时live和delegate就出场了，呵呵。live方法，用来绑定某个（某类）对象，为它们绑定方法 //live $("td").live("click", function () { alert($(this).html()); }); ...
阅读全文
摘要：无意中看到anytao的项目，工作台，使用了Angularjs框架，感觉在前端表现上用户体验比较好，于是就简单看了一下，原来使用很简单，或者说，人家把代码封装的很好，以至于开发人员调用时比较简单，呵呵，使用Angularjs必须将你的html标记进行标识一下，告诉人家，我要用Angularjs来渲染页面了，事实上，Angularjs带合我们最重要的不是页面表现上，而是数据绑定上，它使ＨＴＭＬ标记不那么死板，下面看一个ＤＥＭＯ就会明白了。下面是一个页面元素绑定的例子 Enter name: Hello ! //对应的ＪＳ代码如下： funct...
阅读全文
摘要：百度百科给它的定义实现实时通信。什么是实时通信的Web呢？就是让客户端（Web页面）和服务器端可以互相通知消息及调用方法，当然这是实时操作的。WebSockets是HTML5提供的新的API，可以在Web网页与服务器端间建立Socket连接，当WebSockets可用时（即浏览器支持Html5）Si...
阅读全文
摘要：返回目录众所周知redis量个强大的缓存组件，可以部署在win32和linux环境之上，它有五大存储结构，其中有一种为列表list，它可以实现quene和stack的功能，即队列和堆栈的功能。redis相关文章，可以看我的相关博文《Redis学习笔记~目录》,redis实现消息队列，可以看我的《Re...
阅读全文
摘要：回到目录上一讲中，我们学习了如何使用zTree对一棵大树（大数据量的树型结构的数据表，呵呵，名称有点绕，但说的是事实）进行异步加载，今天这讲，我们来说说，如何去操作这棵大树，无非就是添加子节点，删除节点，编辑节点，节点之间的拖拽，节点位置的变化（排序）等等。事实上，jquery.ZTree的demo已经把前台JS代码给的很清晰了，我们只要稍加修改，然后把后台CS代码写好就可以了，我将demo的前台代码做了简单的处理，减化了些代码，项目架构使用microsoft mvc 3.0前台HTML代码如下： 面各种JS事件，所对应的MVC代码如下：#region 对节点的操作 ///...
阅读全文
摘要：回到目录理论部分：MVC+ZTree：指在.net MVC环境下进行开发，ZTree是一个jquery的树插件大数据：一般我们系统中，有一些表结构属于树型的，如分类，地域，菜单，网站导航等等，而像分类这种表，它的数据量是递增的，不同遇见的，可能几条，几万条，而随着站点的运营，也可能达到几十万条，如果这样的大数据，采用一次读数据到页面的方式，是不可取的，先不说给服务器的压力有多大，只是客户端的浏览器估计就要挂掉，谁愿意加载一个页面等上10多分钟呀，呵呵！异步加载：这种方式已经成为主流，异步事实上是指与当前UI线程不冲突，浏览器不会假死，你的获取数据的动作会重新开启一个通道（线程）来与服务器进行通
阅读全文
摘要：最近在做项目时，遇到一个需求，事实上就是表单联动的问题，单击单选框，下面的复选框联动，当第一次加载时，默认触发第一个单选框，如图：之前的方法，没有完成我的要求，第一次加载时，公司被选中，再“角色”这块并没有触发指定事件，代码如下： //首次加载时，模拟Dept单击事件 $("input[name=Dept]").first().trigger("click"); //Dept单击事件 $("input[name=Dept]").live("click", function () { var deptid = $(&
阅读全文
摘要：参考文章：http://www.w3school.com.cn在我们使用CSS时，经常看到margin:0 0,margin:0 5px,padding:0 5px 10px;而它们研究是什么含义呢，在WEB标准中，它们会有以下含义，它适合于CSS中的margin,padding,border-style等属性第一种情况，四个值都有，它们的含义如下属性：上 右 下 左第二种情况，只有三个值，它们的含义如下属性：上 右左 下第三种情况，只有两个值，它们的含义如下属性：上下 右左第四种情况，只有一个值，它们的含义如下属性：上下右左注意，如果属性值为0，可以不加单元直接是属性：0;如果不...
阅读全文
摘要：JQ也要面向对象，事实上，无论哪种开发语言，在开发功能时，都要把面向对象拿出来，用它的思想去干事，去理解事，面向对象会使问题简单化，清晰化，今天说两个概念“静态方法”与“实现方法”，这个在面向对象的语言中才有的东西，现在要把它搬到JQ中来了，呵呵。静态方法：某种类型才有的方法，这个方法干的事情只有类型本身有关，不受具体实例对象的影响，在C#语言中，它用static表示，VB中用share表示，而在jq中我们一般用$或者JQuery表示JQ类型，而静态方法扩展一般用$.extend。实例方法：当类型被表示为具体事物时，它被称为对象，或者实例对象，它所拥有的行为（方法）我们称为实例方法（一般书上不
阅读全文
摘要：大话开篇 这个系列与其它系列文章不同，不同讲具体的知识点，讲的只是实际工作中开发人员应该如何去写代码，写健壮的代码，写快乐的代码，写面向对象的代码，事实上，从一个人写的代码中，可以品味出这个人的心情，这个人对待代码的态度（注意，不是工作态度，而是代码的态度）。 作为开发人员的你，是否是为了实现一个功能，实现一个效果，而去百度一些代码，或者连自己都搞不懂自己写代码的意义呢，如果是，那您应该读一下这篇文章，它会告诉你代码是什么，如何写好代码，如何写开发者快乐的工作。什么是用心体会在我看来，用心体会，就是你发自内心去写代码，你把你的代码拟人化，它可能是你的爱人，情人，或者一个不能分开的人，只...
阅读全文
摘要：YslowYahoo发布的一款基于FireFox的插件,主要是为了提高网页性能而设计的，下面是它提倡了23条规则，还是很不错的，分享一下：1.减少HTTP请求次数合并图片、CSS、JS，改进首次访问用户等待时间。2. 使用CDN就近缓存==>智能路由==>负载均衡==>WSA全站动态加速3. 避免空的src和href当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面的内容加载进来作为它们的值。测试4. 为文件头指定Expires使内容具有缓存性。避免了接下来的页面访问中不必要的HTTP请求
阅读全文
摘要：回到目录我很荣幸来写这个结局，有时，我们看人，物，事需要用心去看，而不是用眼睛，因为用眼睛看到的往往是事物的假像，在这里对我最可爱的兄弟说一声，对不起。从人类的起源谈面向对象，事实上主要说的是面向对象，现在我简单来说一下面向对象的特性吧，当你把一个程序写成面向对象的之后，它将有三个好处，即封装，继承和多态，这是所有面向对象语言的一个共性，而对于JS这个语言来说，也可以借鉴一下，如JS里实现封装，JS里的继承等等。JS封装：当我们干某件事时，需要将一些代码组织在一起，形成一个function，而这个过程我们称为封装，而在使用这个功能时，只要知识function的方法签名即可，你不需要管它的实现细
阅读全文
摘要：回到目录事件机制，在JS中感觉很容易让人接受，一个鼠标被按下时会发生一些事情，一个键盘的键被抬起时同样可以发生一些事情，这种比喻很容易让人接受，不是吗，呵呵。下面我将JS中几个主要的事件说一下，然后再说一下触发事件的几个方法。JS中的主要事件说明以下是我们在项目开发中常用到的事件，红色的为最常用的事件，呵呵onclick 鼠标点击某个对象ondblclick 鼠标双击某个对象onerror 当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载o
阅读全文
摘要：回到目录上一文章主要说的是JS中的类，有很多朋友回复了我的文章，在此很感谢大家，也对一些朋友提出的问题进行了回复，“类”这东西，只是一种思想，我们不应该把重点放在“某种语言是否提供类，或者是否实现了类”，这是不重要的，重要的是面向对象中的类的思想！今天主要说的是方法，JS中的方法也叫做函数function,它将一些有关系的代码组织在一起，形成一个整体，这类似于面向对象中的封装，你不需要了解方法的实现细节，你只要去调用它，了解方法的签名即可。最简单的函数（方法）：<script type="text/javascript"> //加运算 function Sum(
阅读全文
摘要：回到目录 今天来说ＪＳ中如何实现类（class），事实上本应该昨天晚上写的，可我失言了，在些说一声“抱歉”！ＪＳ中的类是ＪＳ面向对象的基础，也是我最拿手的东西，你写的代码能否提高一个层次，一般是从这点上看出来的。占占对类的定义：类是对现实中的事物的抽象，一个类一般由属性和方法构成，属性是一些固定的信息，而方法是类的某种行为，类往往用来抽象一些复杂的对象，类与类这间可以进行继承，一般通过ＪＳ的function实现，ＪＳ中的类对象是实现ＪＳ面向对象的基础。占占对结构体的定义：一个结构体也是对现实事物的一种抽象，它用来表示逻辑简单的对象，一般通过ＪＳ的object对象实现实现结构体的代码： ...
阅读全文