标签‘JavaScript’

我为什么选择Nunjucks作为NodeJS模板引擎

最近换了工作,在新的工作中,需要实现后端渲染,故而一改最初的纯html+js形式,选择页面框架、TDK及部分页面后端渲染,由于后台采用java开发,一开始曾考虑另起一个tomcat服务,用于渲染前端页面,而实际搭建完框架后发现,一年多不碰java(期间虽然用过Groovy、kotlin,但实际开发起来还是不如js来得畅快),已经对java的繁琐有些不耐烦,最后转而选择采用NodeJS做后端渲染,一来部分前端模板可以复用(后面发现复用其实是个很纠结的想法),二来做前端开发的兄弟也可以快速上手,相比他们并不懂的java来说,毕竟NodeJS更容易学习接受。

确定了适用NodeJS,下面就确定一下大概框架,采用了目前常见的组合——express+template,因为最初前端使用了所谓最快的模板引擎artTemplate,这里tempate想进行复用,就采用了服务器版artTemplate,实际测试发现并不符合我的需求,由于最近一年使用PHP的YII框架,其中模板layout可以使用block,很方便重写样式、脚本等部分,这里实测后发现,后端模板如果没有layout,基本和写纯静态无异了。 查看更多...

JavaScript函数究竟是值传递还是引用传递?

很多人认为 JavaScript中函数进行参数传递有两种方式:基础类型值传递;对象类型按引用传递。很长一段时间我也这样认为,其实都是一种值传递。

事情是在近期QQ群里偶尔聊到,JavaScript函数传值到底是值传递还是引用传递,看到有人说都是值,原因即使是对象也是传了对象的拷贝,即对象的值本身。本着对技术的刨根问底儿的精神,查了相关资料,得到结论:ECMAScript中所有函数的参数都是按值来传递的

下面是一些相关概念的解释,整理自网络:

众所周知,在JavaScript中数据类型可以分为两类:

原始数据类型值 primitive type,比如Undefined,Null,Boolean,Number,String。

引用类型值,也就是对象类型 Object type,比如Object,Array,Function,Date等。 查看更多...

JS获取鼠标点击坐标五种方式及兼容性

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种

event.clientX/Y
event.pageX/Y
event.offsetX/Y
event.layerX/Y
event.screenX/Y

clientX/Y:

clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变

兼容性:所有浏览器均支持 查看更多...

IE8及以下浏览器js中日期字符串格式化问题解决

最近一个小项目上涉及日期字符串格式化的问题,由于之前大部分工作中使用现有js框架自带的组件库,并没有注意此类兼容性问题,直到最近才发现,原来在IE8及以下IE版本中,JavaScript的Date函数是不支持new Date("2013-12-31")、new Date("2013-12-31 00:00:00")或者new Date("2013-12-31T00:00:00Z")这样的构造方式的。

网上关于字符串格式化的函数一般都雷同,如下

function dateFormat(dateString,format) {
            if(!dateString)return "";
            var time = new Date(dateString);
            var o = {
                "M+": time.getMonth() + 1, //月份
                "d+": time.getDate(), //日
                "h+": time.getHours(), //小时
                "m+": time.getMinutes(), //分
                "s+": time.getSeconds(), //秒
                "q+": Math.floor((time.getMonth() + 3) / 3), //季度
                "S": time.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(format)) format = format.replace(RegExp.$1, (time.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format)) format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return format;
        }

查看更多...

Extjs 4.2 Grid增删改及后台交互(Java)

上次发了Easyui Datagrid的增删改查的使用学习记录后一直想整理下基于Extjs4.2的Grid学习使用记录。苦于抽不出时间,一直拖到现在。不得不说,Extjs确实很强大,新版的Neptune风格也很入我眼,但毕竟没怎么用过,第一次用,也不敢上来就搞什么自定义组件,也就纯粹的model+store+panel声明式创建表格了。

抛开分页,抛开排序,今天只简单讲一下最近使用中总结出来的rest形式增删改查数据的方式。发现这种方式挺不错的,故而分享下。
代码Example如下:
定义Model

Ext.define('Person', {
    extend: 'Ext.data.Model',
    fields: [{name: 'id',
        type: 'int',
        useNull: true
    }, 'email', 'first', 'last'],
    validations: [{ type: 'length',
        field: 'email',
        min: 1
    }, {type: 'length',
        field: 'first',
        min: 1
    }, {type: 'length',
        field: 'last',
        min: 1
    }]
});

查看更多...

Easyui Datagrid增删改及后台交互(java)

最近项目的特殊性可算是把我折腾得够呛,从最开始的整站JS,到现在的Liferay,且不说后台,单单前台框架就让我从Dojo到YUI又到AUI、jQuery、ExtJS,常用API翻了一遍,常见问题解决了一遍,而归根结底,为的就是一个方便好用、加载迅速的Grid控件。还好目前是定准用ExtJS了,不然常用控件都用一遍也没找到完全合适的,就困难了。题外话至此,下面开始正题。

刚刚看到同学在之前发的文章,在使用Easyui DataGrid时遇到新增行数据在保存时不能获取的问题,解决方法是在保存时先执行$('#example′).datagrid('acceptChanges');然后前台获取全部行,再拼装字符串传到后台,这样做是可以解决,但实际上Easyui Datagrid似乎有更好的API供调用。为了和我一样的新手少走弯路,故写此篇文章以便参考。 查看更多...

分享一段javascript编写的editplus注册机

一直以来,习惯于使用免费、特别版软件的我,经常免不了去收集一些激活码、注册机,虽然杀毒软件各种报毒,但为了便于使用和学习,还是忍住了。最近发现有朋友做了网页版的editplus注册机,看了下源码原来是javascript写的,于是就瞧瞧的拿来分享了。
wordpress原因,代码可能会出现排版不整齐、符号被转义等,想要原始代码的朋友可以直接下载小子正在使用的js文件或者在线打开直接复制即可。

代码链接:传送门

废话不说,code如下: 查看更多...

JavaScript:世界上误解最深的语言

JavaScript,是世界上最流行的编程语言之一。事实上世界上的每一台个人电脑都安装并在频繁使用至少一个JavaScript解释器。JavaScript的流行完全是由于他在WWW脚本语言领域中的地位决定的。

Despite its popularity, few know that JavaScript is a very nice dynamic object-oriented general-purpose programming language. How can this be a secret? Why is this language so misunderstood?

尽管它很流行,但是很少有人知道JavaScript是一个非常棒的动态面向对象通用编程语言。这居然能成为一个秘密!这门语言为什么被误解如此之深?

The Name

名字

The Java- prefix suggests that JavaScript is somehow related to Java, that it is a subset or less capable version of Java. It seems that the name was intentionally selected to create confusion, and from confusion comes misunderstanding. JavaScript is not interpreted Java. Java is interpreted Java. JavaScript is a different language.

Java- 前缀很容易使人联想到Java,并认为它是Java的子集或简化版的Java。 查看更多...

Ajax应用事件处理及浏览器内存泄漏实践

事件处理是 Ajax 应用中的重要组成部分,也是应用动态变化的源动力。本文详细介绍了浏览器中的事件处理相关的内容,包括注册事件监听器、事件发生之后的传播机制、编写事件监听器等,还介绍了 Dojo 对事件处理提供的支持。最后介绍了与浏览器内存泄露和性能相关的最佳实践。

浏览器中的事件是 Ajax 应用动态变化的源动力。用户通过输入设备(主要是键盘和鼠标)与应用进行互动。对于用户不同的动作,如点击鼠标左键、右键、或是按下键盘上的回车键,浏览器会产生与之对应的事件。这些事件按照一定的规则在当前文档树中传播。应用可以根据自己的需要,对特定的事件进行处理,以响应用户的动作。这种事件驱动的方式,不仅在 Web 应用中被使用,在桌面应用中也广泛流行。本文详细介绍了浏览器中事件处理的各个方面,包括事件监听器的注册、事件的传播、事件处理和其它高级话题。本文还介绍了如何使用 Dojo 提供的 dojo.connect()。本文中使用的 Dojo 版本是 1.4。下面首先介绍如何注册事件监听器。

注册事件监听器

注册事件监听器的目的是在事件发生的时候添加相应的处理逻辑。浏览器中的事件处理采用经典的观察者(Observer)设计模式。对于可能产生的各种事件,Ajax 应用通过脚本在节点上关注自己感兴趣的事件,并添加相应的处理逻辑。当相应的事件发生并传播到监听器注册的节点时,处理逻辑会被调用。 查看更多...

巧用Google API为文章(文件)添加二维码链接

在这个3G(4G)智能手机的时代,很多事其实都可以在手机上完成了,二维码(QR CODE)的使用也越来越多了。利用手机的拍照功能,再加上一些QR CODE识别软件,就可以通过二维码来记录一些比较枯燥、不好记的信息,比如说长长的网址。现在很多手机软件下载网站都提供了可视化的下载路径,就是将下载路径做成QR CODE,让手机用户快速读取QR CODE中的下载链接转到下载页面。同样道理,为了博客访客能够方便的收藏、分享博客相关链接,我们也可以为每篇文章做一个对应的QR CODE。

由于QR CODE的算法比较深奥,这里我们就不再研究了,推荐大家使用现有的API链接来生成QR CODE。 查看更多...

无觅相关文章插件,快速提升流量