随笔分类 - 前端技术
js,jq,vue,angularjs,knockoutjs,reactjs等
摘要：返回目录这个功能我认为非常有用，尤其在后台管理系统中，它对用户来说，使用体验这块非常不错，下面是它的截图说在前在实现这个功能中，我们对knockout的基础知识一定要牢牢掌握，要知道，在knockout里一切都是对象，并且要知识knockout可以根据ＤＩＶ进行绑定，对于验证这块，可以根据你的obj...
阅读全文
摘要：返回目录MVVM是一种架构思想，是一种解决问题的方式，对于一个项目，一个功能模块，你可以选择使用ＭＶＶＭ的架构来实现，而knockoutjs只是实现MVVM的一种工具，它是在前端实现的，这一点，我们必须的清楚．思想下面说一下这讲的重点，前台和后台的分工问题，占占认为，前台只负责页面及页面ＣＳＳ及实现...
阅读全文
摘要：对于网站图像的不显示有很多原因，网络问题，文件本身问题，文件ＵＲＬ问题等，而当图像加载失败时会触发onerror这个事件，我们利用这点，可以有效的避免图像加载失败的尴尬！ＪＳ代码 //图像加载出错时的处理 function errorImg(img) { img.src = "...
阅读全文
摘要：返回目录对于一个项目的表单验证，方式有很多，效果也有很多，具体使用哪种完成取决于产品这边，产品让你用什么，你就要用什么，而做为开发人员，我们要做的就是＂整理近可能多的架构方式＂，这样才可以自由的应变．对于表单验证，我今天看了新浪的邮箱注册，觉得效果还可以，所以，就写了一个，它利用了knockoutj...
阅读全文
摘要：返回目录上一讲中，我以一个实际中的例子说明了knockoutjs的自定义验证功能，在使用过程中，出现了一个问题，当然了不是问题，只是一种需求，上一讲中自定义验证的表现是：当页面加载后，自动显示有问题的表单元素，这在有些场合是不适合的，有时，我们希望它在被失去焦点时才将错误消息显示出来，而不去输入信息...
阅读全文
摘要：返回目录这个文章非常重要,也是非常必要的,在我们进行项目开发时,后台无所谓,对样式无要求,而网站前台来说,对样式要求严格,你的验证信息都是前台设计好的,所以,不能使用knockoutjs自带的了,我们需要将验证的消息输出到指定的元素上!在写这个文章之前,我一直没有找到好的办法来实现这种功能,但我没有放弃,终于今天找到了比较不错的解决方案,对于一个元素的验证我们可以使用isValid()方法,而对于它的错误消息的显示,我们可以使用error()方法,注意是error()不是errors(),从这一点上我们可以看到,它是针对某点元素来说的,因为它是单数,呵呵.功能实现Html代码 *班级圈名...
阅读全文
摘要：对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了.今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立都要改成新建,这代码量可是不小,当然,如果你这样写建立这改起来是挺麻烦的,而如果你使用伪元素呢?看下面代码:,而在页面上也会显示&q
阅读全文
摘要：返回目录这个例子我做了几次，之前总是有BUG，目前测试后，确定没有BUG才发上来的，主要功能是实现“我的银行”模块的增删改的功能，这个里面包括了级联列表的区域选择，这部分是难点，在开发过程中，我们应该知道一个概念，在knockoutjs里，如果你的select被绑定了optionsValue属性，那么它将存储这个普通的字符，而如果你没有设置optionsValue，那么它存储的是JS对象。Html代码 银行开户名： 开户行所在城市： ...
阅读全文
摘要：返回目录对于下拉列表框的绑定在之前的knockoutjs文章中已经介绍过，今天主要说一下级联的select，事实上，在knockoutjs里，是以数据绑定为中心的，而数据是以面向对象为前提的，而对于级联绑定来说，它也是一种面向对象里关系对象的体现，有了关系对象，我们就可以把级联很容易的开发出来，而不用像之前JS那么麻烦了。准备数据对象 var Grade_Subject_R = function () { var self = this; self.Grades = [ { 'subjects': [{ 'id'...
阅读全文
摘要：返回目录本文章应该是knockoutjs系列的最后一篇了，前几篇中主要讲一些基础知识，这一讲主要是一个实际的例子，对于一个对象的添加与编辑功能的实现，并将项目源代码公开了，共大家一起学习！knockoutjs系列目录MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定MVVM架构~Knockoutjs系列之对象与对象组合MVVM架构~Knockoutjs系列之js接收C#数据集合的方式MVVM架构~Knockoutjs系列之验证机制的引入MVVM架构~knockoutjs实现简单的购物车MVVM架构~knockoutjs与MVC配合，实现列
阅读全文
摘要：返回目录对于knockout.validation来说，我们已经知道了如何去验证大部分表单元素，而有时，我们的需求希望在每个元素验证成功后，去显示正确的提示，这个我们很容易的使用self.元素.isValid()方法来实现。下面给出相关的代码CSS代码JS代码HTML代码 添加商品 name 请输入用户名账号，它由字母汉字数字组成 price CategoryId ...
阅读全文
摘要：返回目录几乎每种验证架构都会有正则表达式的加盟，一般地，一种验证架构首先会提供一些标准的，常用的验证规则，它们通常是数字验证，电话验证，email验证，长度验证，范围验证，日期验证等，而如果使你的验证更强大，那一定要加入正则表达式！一般叫它：Regx下面我来说一下KnockoutJS里如何加入正则表达式调用方法： self.Property= ko.observable().extend({ required: true, pattern: { params:regex正则, message: "提示信息" } });下面举几个例子验证为整数，并且小数部分为2位 self.
阅读全文
摘要：起因对于从C#返回的日期字段，当进行JSON序列化后，在前台JS里显示的并不是真正的日期，这让我们感觉很不爽，我们不可能为了这东西，把所有日期字段都变成string吧，所以，找了一个JS的扩展方法，来实现这个功能实现function ChangeDateFormat(jsondate) { jsondate = jsondate.replace("/Date(", "").replace(")/", ""); if (jsondate.indexOf("+") > 0) { jsondat
阅读全文
摘要：返回目录说在前有时，我们在使用一个插件时，在网上即找不到它的相关API，这时，我们会很抓狂的，与其抓狂，还不如踏下心来，分析一下它的源码，事实上，对于JS这种开发语言来说，它开发的插件的使用方法都在它的源码里，只要你踏下心去看，一切就都有了！Knockout.Validation.js是为Knockout插件服务的，它可以为Knockout对象进行验证，就像你使用MVC模型验证一样，而这种绑定的验证方式对于开发人员来说是很容易接受的，也是一种趋势，它在验证过程中，会将出现异常的点记录下来，然后在某个时候将它抛出来，这个抛出的时刻通常是对象失去焦点时（blur)。总结Knockout.Valid
阅读全文
摘要：插件与系统命令对于很多JS弹框插件来说，都提供了alter,confirm等功能，如fancybox,Boxy等插件，今天来介绍一下如何将系统的alter和confirm替换成指定插件的alter和confirm，使用替换的方式的好处就是不用修改之前的代码，这在面向对象里，叫做“对修改关闭，对扩展开放”，也称为OCP原则，即开闭原则。fancybox替换系统命令，它需要有一个HTML容器来展现弹框下面是复写语句 window.alert = function (msg) { var reg = new RegExp("\\[([^\\[\\]]*?)\\]", 'i
阅读全文
摘要：面向对象的封装面向对象一个入最重要的特性就是“封装”，将一些没有必要公开的方法和属性以特定的方式进行组装，使它对外只公开一个接口，外界在调用它时，不需要关注它实现的细节，而只要关注它的方法签名即可，而对于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..
阅读全文
浙公网安备 33010602011771号