博客园 - rentj
uuid:6cbd1ba2-f883-4c34-aed1-30dde64a3a3e;id=661972
2015-11-26T09:03:08Z
rentj
https://www.cnblogs.com/rentj1/
feed.cnblogs.com
https://www.cnblogs.com/rentj1/p/4617765.html
内推阿里巴巴前端开发工程师 - rentj
阿里巴巴菜鸟网络招聘前端开发工程师,我也是这里的前端开发工程师。现在加入,您将有可能成为阿里系创业公司早期员工的一员。电商、物流和金融是阿里的铁三角,互联网+物流会给行业带来怎样的改变?阿里的福利你懂的!工作地点:杭州阿里巴巴西溪园区联系邮箱:tongjie.rtj@alibaba-inc.com
2015-07-03T01:39:00Z
2015-07-03T01:39:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】阿里巴巴菜鸟网络招聘前端开发工程师,我也是这里的前端开发工程师。现在加入,您将有可能成为阿里系创业公司早期员工的一员。电商、物流和金融是阿里的铁三角,互联网+物流会给行业带来怎样的改变?阿里的福利你懂的!工作地点:杭州阿里巴巴西溪园区联系邮箱:tongjie.rtj@alibaba-inc.com <a href="https://www.cnblogs.com/rentj1/p/4617765.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/p/4413946.html
光标操作快捷键 - rentj
这些光标操作快捷键适用mac/linux终端和chrome控制台,这些快捷键都是emacs的快捷键,常用的快捷键:Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit;处理多行标准输入时也表示eof)Ctrl + h 退格删除一个字符,相当于通...
2015-04-10T02:52:00Z
2015-04-10T02:52:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】这些光标操作快捷键适用mac/linux终端和chrome控制台,这些快捷键都是emacs的快捷键,常用的快捷键:Ctrl + d 删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit;处理多行标准输入时也表示eof)Ctrl + h 退格删除一个字符,相当于通... <a href="https://www.cnblogs.com/rentj1/p/4413946.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/p/4409167.html
Git使用日记 - rentj
git是个分布式的版本管理工具,现在我们前端这边用它做版本管理。之前也看过一些相关资料,不过没有使用它管理过项目代码。如今,用它也有段时间了所以就写些东西,仅供参考。###快速上手工作经常用到的几个git命令:1. git clone 版本库地址 克隆远程版本库到本地2. git checkou...
2015-04-09T03:33:00Z
2015-04-09T03:33:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】git是个分布式的版本管理工具,现在我们前端这边用它做版本管理。之前也看过一些相关资料,不过没有使用它管理过项目代码。如今,用它也有段时间了所以就写些东西,仅供参考。###快速上手工作经常用到的几个git命令:1. git clone 版本库地址 克隆远程版本库到本地2. git checkou... <a href="https://www.cnblogs.com/rentj1/p/4409167.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/p/4096167.html
从逻辑解偶到物理解耦再到前后端分离 - rentj
逻辑解偶: MVC是一个表现层的架构模式,它把我们的Web应用划分成模型,视图,控制器三部分。从逻辑上解耦了系统的业务逻辑和表现逻辑。但问题在于MVC的各部分并没有一个严格的定义,去指导我们什么时候使用M什么时候应该使用V,这些判断都取决于我们以往的项目经验,所以对于工作应验不多的人来说要完全理...
2014-11-13T15:16:00Z
2014-11-13T15:16:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】逻辑解偶: MVC是一个表现层的架构模式,它把我们的Web应用划分成模型,视图,控制器三部分。从逻辑上解耦了系统的业务逻辑和表现逻辑。但问题在于MVC的各部分并没有一个严格的定义,去指导我们什么时候使用M什么时候应该使用V,这些判断都取决于我们以往的项目经验,所以对于工作应验不多的人来说要完全理... <a href="https://www.cnblogs.com/rentj1/p/4096167.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/p/3908601.html
Javascript倒计时组件new TimeSpan(hours, minutes, minutes) - rentj
function TimeSpan(h, m, s) { this.h = Number(h); this.m = Number(m); this.s = Number(s);}TimeSpan.prototype = { timer: null, stop: func...
2014-08-12T14:03:00Z
2014-08-12T14:03:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】function TimeSpan(h, m, s) { this.h = Number(h); this.m = Number(m); this.s = Number(s);}TimeSpan.prototype = { timer: null, stop: func... <a href="https://www.cnblogs.com/rentj1/p/3908601.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/p/3553223.html
移动WEB开发中媒体查询里的width, device-width, resolution - rentj
/*1、width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px。 当设置viewport width=device-width时,对应的媒体查询中width的值为:设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------*/ @media screen and (width:360px){ body{ background-color:#0f0; } } /*2、device-with: 屏幕宽度,and...
2014-02-17T12:49:00Z
2014-02-17T12:49:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】/*1、width: viewport的宽度,css像素,三星S3的viewort默认宽度是980px。 当设置viewport width=device-width时,对应的媒体查询中width的值为:设备物理像素 / window.devicePixelRatio。 ----------------------------------------------------------*/ @media screen and (width:360px){ body{ background-color:#0f0; } } /*2、device-with: 屏幕宽度,and... <a href="https://www.cnblogs.com/rentj1/p/3553223.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/04/22/3035181.html
一键发布应用了seajs的asp.net项目 - rentj
应用了seajs的模块化js文件不能像普通js文件一样直接合并和压缩,具体可以看这里为什么 SeaJS 模块的合并这么麻烦。下面演示了如何使用VS2012一键发布应用了seajs的asp.net项目,需要用到的工具有nodejs、grunt、msbuild等。项目目录结构其中base.js是一个公用的JS库,pulg-a.js,pulg-b.js是基于base的公用插件。对于开发环境的项目,在浏览器中访问Index.html 会加载base.js、sea.js、 common.js、 plug-a.js、plug-b.js。对于发布后的项目,在浏览器中访问Index.html只会加载 seas
2013-04-22T03:35:00Z
2013-04-22T03:35:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】应用了seajs的模块化js文件不能像普通js文件一样直接合并和压缩,具体可以看这里为什么 SeaJS 模块的合并这么麻烦。下面演示了如何使用VS2012一键发布应用了seajs的asp.net项目,需要用到的工具有nodejs、grunt、msbuild等。项目目录结构其中base.js是一个公用的JS库,pulg-a.js,pulg-b.js是基于base的公用插件。对于开发环境的项目,在浏览器中访问Index.html 会加载base.js、sea.js、 common.js、 plug-a.js、plug-b.js。对于发布后的项目,在浏览器中访问Index.html只会加载 seas <a href="https://www.cnblogs.com/rentj1/archive/2013/04/22/3035181.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/03/06/2946568.html
VS发布Web时自动调用YUICompressor批量压缩JS、CSS - rentj
在Visual Studio中通过修改发布配置文件,可以在发布Web时自动调用YUICompressor批量压缩项目中JS和CSS。这种方式的优点,一是不需要在项目的js、css文件夹中单独建立debug子文件夹来存放未经压缩的文件,二是使用debug模式发布时不会进行压缩方便调试。具体方法如下:1 安装JRE,下载YUICompressor,并解压(如:E:\工具\yuicompressor)2 新建Compressor.bat文件内容为:@echo offif "%1" == "" goto exitpushd "%1"echo
2013-03-06T10:12:00Z
2013-03-06T10:12:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】在Visual Studio中通过修改发布配置文件,可以在发布Web时自动调用YUICompressor批量压缩项目中JS和CSS。这种方式的优点,一是不需要在项目的js、css文件夹中单独建立debug子文件夹来存放未经压缩的文件,二是使用debug模式发布时不会进行压缩方便调试。具体方法如下:1 安装JRE,下载YUICompressor,并解压(如:E:\工具\yuicompressor)2 新建Compressor.bat文件内容为:@echo offif "%1" == "" goto exitpushd "%1"echo <a href="https://www.cnblogs.com/rentj1/archive/2013/03/06/2946568.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/03/04/2942764.html
在JavaScript中应用单例模式 - rentj
单例模式确保一个类在整个应用程序中只有一个是实例对象,在Javascript可以使用单例模式来管理命名空间;代码:function Namespace(name){ return window[name] || (window[name] = {}); }(function(){ var DOM = Namespace("DOM"); DOM.method = function(){ //..... };}())console.log(DOM.method());
2013-03-04T06:58:00Z
2013-03-04T06:58:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】单例模式确保一个类在整个应用程序中只有一个是实例对象,在Javascript可以使用单例模式来管理命名空间;代码:function Namespace(name){ return window[name] || (window[name] = {}); }(function(){ var DOM = Namespace("DOM"); DOM.method = function(){ //..... };}())console.log(DOM.method()); <a href="https://www.cnblogs.com/rentj1/archive/2013/03/04/2942764.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/03/01/2938431.html
用JavaScript实现自己的DOM选择器 - rentj
解释器模式(Interpreter):定义一种语法格式,通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。开放封闭原则:面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭,在这个dom选择器中实现id选择器,元素选择器,类选择器,如果以后需要属性选择器的话定义一个属性选择器实现相应的方法,同时在简单工厂中增加相应的创建属性选择器对象分支即可。匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。代码:(function (ns) { /* //tagNam.
2013-03-01T04:19:00Z
2013-03-01T04:19:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】解释器模式(Interpreter):定义一种语法格式,通过程序解释执行它并完成相应的任务。在前端编程场景中可以应用解释器模式来解释CSS选择符实现DOM元素的选择。开放封闭原则:面向对象中的开放封闭原则是类或模块应该对扩展开放对修改封闭,在这个dom选择器中实现id选择器,元素选择器,类选择器,如果以后需要属性选择器的话定义一个属性选择器实现相应的方法,同时在简单工厂中增加相应的创建属性选择器对象分支即可。匹配原理:浏览器在匹配CSS选择符时是按照从右到左匹配的,所以实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致。代码:(function (ns) { /* //tagNam. <a href="https://www.cnblogs.com/rentj1/archive/2013/03/01/2938431.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/01/09/2853154.html
Javascript 继承模式 - rentj
在面向对象的JavaScript开发中使用继承可以提高代码重用性,javascript有多重方式可以实现继承,考虑代码的可维护性在项目中应该保持代码风格的一致性,下面是JavaScript中继承的实现方式之一:辅助对象:var global = window;(function(ns,undefined){ //辅助对象: var Class = { extends: function(SubClass, SuperClass){ var F = function() {}; F.prototype = SuperClass.prototype; SubClas...
2013-01-09T08:24:00Z
2013-01-09T08:24:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】在面向对象的JavaScript开发中使用继承可以提高代码重用性,javascript有多重方式可以实现继承,考虑代码的可维护性在项目中应该保持代码风格的一致性,下面是JavaScript中继承的实现方式之一:辅助对象:var global = window;(function(ns,undefined){ //辅助对象: var Class = { extends: function(SubClass, SuperClass){ var F = function() {}; F.prototype = SuperClass.prototype; SubClas... <a href="https://www.cnblogs.com/rentj1/archive/2013/01/09/2853154.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2013/01/08/2851383.html
观察者模式的Javascript实现方式 - rentj
观察者模式也被称作发布/订阅模式,下面是JAVASCRIPT的一种实现方式var global = window;(function(ns, base){ //被观察的对象 function Observable(){ this.observers = {}; } Observable.prototype = { //subscribe bind: function(name, observer){ var observers = this.observers[name] || ( this.observers[name] = [] ); var isbind = ...
2013-01-08T08:35:00Z
2013-01-08T08:35:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】观察者模式也被称作发布/订阅模式,下面是JAVASCRIPT的一种实现方式var global = window;(function(ns, base){ //被观察的对象 function Observable(){ this.observers = {}; } Observable.prototype = { //subscribe bind: function(name, observer){ var observers = this.observers[name] || ( this.observers[name] = [] ); var isbind = ... <a href="https://www.cnblogs.com/rentj1/archive/2013/01/08/2851383.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/11/15/2772021.html
Javascript AMD模块化规范 - rentj
AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义"。模块定义define(id?, dependencies?, factory);其中:id: 模块标识,可以省略。dependencies: 所依赖的模块,可以省略。factory: 模块的实现,或者一个JavaScript对象。代码示例1: 定义一个alpha模块,依赖require,exports,beta模块define("alpha", ["require", "exports", &
2012-11-15T10:11:00Z
2012-11-15T10:11:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】AMD是"Asynchronous Module Definition"的缩写,意思是"异步模块定义"。模块定义define(id?, dependencies?, factory);其中:id: 模块标识,可以省略。dependencies: 所依赖的模块,可以省略。factory: 模块的实现,或者一个JavaScript对象。代码示例1: 定义一个alpha模块,依赖require,exports,beta模块define("alpha", ["require", "exports", & <a href="https://www.cnblogs.com/rentj1/archive/2012/11/15/2772021.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/11/12/2766541.html
关于Javsript代码的注释和模块定义 - rentj
可以这样定义模块:(function(ns, required){ })(window, base); 在上面的代码中使用一个匿名立即执行函数来限定代码的作用域在匿名函数内,用来封模块装逻辑并避免全局命名空间污染。其中ns表示命名空间,required表示依赖的模块。模块通过ns[name] = name; 这样导出,供外部使用。 我们将全局对象作为参数传入匿名函数,这样写的目有两个:一方面可以使我们一眼就看出来模块使用了那些全局对象;另一方面因为在Javascript中访问局部变量不需要遍历作用域链所以性能会比访问访问全局变量更高。这样写注释://class TabVi...
2012-11-12T08:25:00Z
2012-11-12T08:25:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】可以这样定义模块:(function(ns, required){ })(window, base); 在上面的代码中使用一个匿名立即执行函数来限定代码的作用域在匿名函数内,用来封模块装逻辑并避免全局命名空间污染。其中ns表示命名空间,required表示依赖的模块。模块通过ns[name] = name; 这样导出,供外部使用。 我们将全局对象作为参数传入匿名函数,这样写的目有两个:一方面可以使我们一眼就看出来模块使用了那些全局对象;另一方面因为在Javascript中访问局部变量不需要遍历作用域链所以性能会比访问访问全局变量更高。这样写注释://class TabVi... <a href="https://www.cnblogs.com/rentj1/archive/2012/11/12/2766541.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/10/13/2722124.html
网页中图片旋转的几种实现方式 - rentj
网页中图片旋转一般有下面三种常见的实现方式:一、 ie 滤镜IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。浏览器支持: IE5.5+CSS代码:.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS代码:element.style.filter = "progid:DXImageTransform
2012-10-12T23:14:00Z
2012-10-12T23:14:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】网页中图片旋转一般有下面三种常见的实现方式:一、 ie 滤镜IE的图形旋转滤镜,通过指定BasicImage滤镜的rotation值旋转元素,旋转方向为顺时针,旋转的中心点为元素的左上角。rotation可以有4个旋转值:0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。浏览器支持: IE5.5+CSS代码:.rotate{ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } JS代码:element.style.filter = "progid:DXImageTransform <a href="https://www.cnblogs.com/rentj1/archive/2012/10/13/2722124.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/10/09/2716532.html
JS Runcode运行网页上的HTML/CSS/Javascrip代码 - rentj
<!DOCTYPE html><html><head><meta charset="gb2312" /><title>runcode-运行HTML/CSS/Jvascrip代码</title></head><body><form> <textarea name="codearea" style="width:800px; height:600px"> </textarea> <br /> &l
2012-10-09T04:06:00Z
2012-10-09T04:06:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】<!DOCTYPE html><html><head><meta charset="gb2312" /><title>runcode-运行HTML/CSS/Jvascrip代码</title></head><body><form> <textarea name="codearea" style="width:800px; height:600px"> </textarea> <br /> &l <a href="https://www.cnblogs.com/rentj1/archive/2012/10/09/2716532.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/10/08/2715057.html
活动广告滑动切换JS效果 - rentj
之前写了个javascript动画对象里面的demo比较简单,这是一个比较完整的JS效果。代码很简单,通过修改position:absolute元素的left属性实现滑动切换。点击这里查看淘宝活动广告滑动切换JS效果JS代码:(function(){ //rentj1@163.com var left = 0; var slide = document.getElementById("slide-content"); var options = document.getElementById("slide-options").getElementsByT
2012-10-08T04:32:00Z
2012-10-08T04:32:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】之前写了个javascript动画对象里面的demo比较简单,这是一个比较完整的JS效果。代码很简单,通过修改position:absolute元素的left属性实现滑动切换。点击这里查看淘宝活动广告滑动切换JS效果JS代码:(function(){ //rentj1@163.com var left = 0; var slide = document.getElementById("slide-content"); var options = document.getElementById("slide-options").getElementsByT <a href="https://www.cnblogs.com/rentj1/archive/2012/10/08/2715057.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/09/30/2709392.html
原生Javascript焦点图切换控件 - rentj
很常见的javascript效果,写成控件,需要的时候可以直接拿来用点击这里查看原生Javascript焦点图切换控件的演示代码://原生JavaScript焦点图切换控件function PicSlide(){ var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素 var list = document.getElementById("slide-list").getElementsByTagName(&#
2012-09-30T13:29:00Z
2012-09-30T13:29:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】很常见的javascript效果,写成控件,需要的时候可以直接拿来用点击这里查看原生Javascript焦点图切换控件的演示代码://原生JavaScript焦点图切换控件function PicSlide(){ var controls = document.getElementById('slide-controls').getElementsByTagName('li');//根据需要选择元素 var list = document.getElementById("slide-list").getElementsByTagName(&# <a href="https://www.cnblogs.com/rentj1/archive/2012/09/30/2709392.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/09/29/2708126.html
javascript动画对象支持加速、减速、缓入、缓出 - rentj
调用接口:/** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选,动画执行时间,单位毫秒 * @param easing {String} 可选,动画执行的方式,缓入easeIn、缓出easeOut * @param callback {Function} 可选,动画执行完成时的回调函数 * @return */effect.animate(elem, params, duration, easing, callba.
2012-09-29T02:26:00Z
2012-09-29T02:26:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】调用接口:/** * @param elem {HTMLElement} 执行动画的HTML元素 * @param params {JSON} 动画执行过过程中需要修改的HTML属性 * @param duration {Number} 可选,动画执行时间,单位毫秒 * @param easing {String} 可选,动画执行的方式,缓入easeIn、缓出easeOut * @param callback {Function} 可选,动画执行完成时的回调函数 * @return */effect.animate(elem, params, duration, easing, callba. <a href="https://www.cnblogs.com/rentj1/archive/2012/09/29/2708126.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/rentj1/archive/2012/09/13/2683249.html
求数组中元素的最大值最小值 - rentj
求数组中元素的最大值、最小值方法一 遍历数组方法二 使用数组自带的排序方法,如:array.sort() 。返回的数组中第一个元素值最小,最后一个元素值最大方法三 使用Math对象的Math.min(arg1, arg2[,...])、Math.max(arg1, arg2[,...])方法,经测试这种方式较前面两种性能更好。使用函数对象的apply方法可以将参数列表作为数组进行传递,如果数组元素是自定义对象可以先重写元素的valueOf方法再调用,下面是实现代码://最大值Array.prototype.max = function(){return Math.max.apply(Math,
2012-09-13T06:12:00Z
2012-09-13T06:12:00Z
rentj
https://www.cnblogs.com/rentj1/
【摘要】求数组中元素的最大值、最小值方法一 遍历数组方法二 使用数组自带的排序方法,如:array.sort() 。返回的数组中第一个元素值最小,最后一个元素值最大方法三 使用Math对象的Math.min(arg1, arg2[,...])、Math.max(arg1, arg2[,...])方法,经测试这种方式较前面两种性能更好。使用函数对象的apply方法可以将参数列表作为数组进行传递,如果数组元素是自定义对象可以先重写元素的valueOf方法再调用,下面是实现代码://最大值Array.prototype.max = function(){return Math.max.apply(Math, <a href="https://www.cnblogs.com/rentj1/archive/2012/09/13/2683249.html" target="_blank">阅读全文</a>