大前端 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Pages: 11/43 First page Previous page 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Next page Final page [ View by Articles | List ]
Jan 3
【私有变量】 在对象内部使用'var'关键字来声明,而且它只能被私有函数和特权方法访问。
【私有方法】 在对象的构造函数里声明(或者是通过varfunctionName=function(){...}来定义),
它能被特权方法调用(包括对象的构造方法)和私有方法调用,私有函数只能访问私有的方法和属性。
【特权方法】通过this.methodName=function(){...}来声明而且可能被对象外部的代码调用。
它可以使用:this.特权函数() 方式来调用特权函数,使用 :私有函数()方式来调用私有函数。

【公共属性】 通过this.variableName来定义而且在对象外部是可以读写的。不能被私有函数所调用。
【公共方法】 通过ClassName.prototype.methodName=function(){...}来定义可以从对象外部来调用。
【原型属性】 通过ClassName.prototype.propertyName=someValue 来定义。
【静态属性】 通过ClassName.propertyName=someValue 来定义。
【静态方法】 通过ClassName.funName=function(){...} 来定义。
Dec 23
移动端的单位现在都是用rem,icon太多合成雪碧图减少网络请求

安装ruby,
安装sass或升级到最新


安装compass或升级到最新


步骤
1、建立一个目录,当然具体的项目应该整合到项目里
mkdir work;

2、到这个目录并初始化


发现work目录下生成了项目文件
Highslide JS
建立images/icons目录,并将i需要合并的con拷贝到该目录
在sass下建立icons.scc文件内容如下


3、执行compass compile
生成了合并图icons-saafd78ade7.png
以及css


comprass api

Download ( 349 downloads)

Dec 15
animate.css – 是一个齐全的CSS3动画库,查看效果:http://www.dowebok.com/demo/2014/98/
简介

animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn/rotateOut)、淡入淡出(fadeIn/fadeOut)等多达 60 多种动画效果,几乎包含了所有常见的动画效果。

虽然借助 animate.css 能够很方便、快速的制作 CSS3 动画效果,但还是建议看看 animate.css 的代码,也许你能从中学到一些东西。

兼容

浏览器兼容:当然是只兼容支持 CSS3 animate 属性的浏览器,他们分别是:IE10+、Firefox、Chrome、Opera、Safari。

使用方法

1、引入文件


2、HTML 及使用

给元素加上 class 后,刷新页面,就能看到动画效果了。animated 类似于全局变量,它定义了动画的持续时间;bounce 是动画具体的动画效果的名称,你可以选择任意的效果。

如果动画是无限播放的,可以添加 class infinite。

你也可以通过 JavaScript 或 jQuery 给元素添加这些 class,比如:

有些动画效果最后会让元素不可见,比如淡出、向左滑动等等,可能你又需要将 class 删除,比如:

animate.css 的默认设置也许有些时候并不是我们想要的,所以你可以重新设置,比如:

注意添加浏览器前缀。
Dec 15
nodejs守护进程,常用的有下面两个,推荐是用pm2,pm2 是一个带有负载均衡功能的Node应用的进程管理器.
forever
npm install -g forever
forever start app.js
forever stop app.js
forever restart app.js
forever list

pm2(https://github.com/Unitech/pm2
npm install -g pm2
pm2 start app.js
pm2 stop app.js
pm2 restart app.js
pm2 list
#开启自启动
pm2 startup centos
pm2 save
Highslide JS
Dec 8
hybridapp h5手机横竖屏样式js、css
当然这样一句少不了


css监视横竖屏样式


js监视横竖屏样式
Nov 25
underscore前端函数库
Grunt打包压缩工具
bluebird promise
Nov 16
app开发讲就的是少请求,这样就需要更多的合并,通过一个url后面加带js或者css路径进而输入一个压缩合并的文件不失为一个好的idea,而Minify把CSS和JS压缩和削减给了我们一个思路,目前很多的公司的app都使用了这种手法,例如携程、同程的hybrid app,webapp等
Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里。不要以为你的大带宽没有必要进行这类优化。使用它的理由更重要的是文件合并,而不是压缩,而是文件整合,这样可以减少浏览器端不断发出新的连接请求,就像FTP服务器一样,多个小文件和一个大文件耗时是不一样的。

Minify是用PHP写的,项目地址 http://code.google.com/p/minify/

安 装
   1. 下载最新的Minify然后解压缩到minify目录。
   2. 复制"min"目录到你的DOCUMENT_ROOT.

基本用法
假设你有http://localhost/a.js,http://localhost/b.js两个文件。那么现在,你可以使用http://localhost/min/?f=a.js,b.js,看看浏览器返回结果,是不是minify的两个js文件的内容?

附译min目录下的README.txt
引用

该目录中的文件包含默认Minify设置,旨在简化整合您的网站。Minify将合并削减JavaScript或CSS文件,并进行HTTP压缩和缓存头。

推 荐
建议修改config.php中设置$min_cachePath到一个PHP可写目录。这将提高性能。

GETTING STARTED
最快的开始Minify的方法是使用Minify Builder应用程序的URI
访问您的网站:http://example.com/min/builder/

压缩单个文件
比方说,你要服务于这个文件:
  http://example.com/wp-content/themes/default/default.css
下面是“Minify网址”该文件:
  http://example.com/min/?f=wp-content/themes/default/default.css

换句话说,“f”参数设置为从WEB根路径下的目标文件(不需要路径/)”。由于CSS文件可能包含相对URI,Minify会自动通过重写机制找到它们。

合并多个文件到一个文件下载
用','分隔f参数的每一个文件名。
比如,有如下CSS文件:
  http://example.com/scripts/jquery-1.2.6.js
  http://example.com/scripts/site.js
您可以通过Minify结合起来:
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js

简化基本路径
如果你合并的文件共享同一父目录,你可以使用b参数设置的f参数的基本目录(同样不包括前导或者后缀/字符)。
例如,以下两种写法效果相同:
  http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js
  http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

在Html中使用MINIFY
在(X)HTML文件,不要忘记将&替换为&

指定允许的目录
默认情况下,Minify不会有任何DOCUMENT_ROOT范围内的*.css/*.js文件。如果你希望限制Minify存取某些目录,在config.php中设置
$min_serveOptions ['minApp'] ['allowDirs']数组。例如:限制到/js和/themes/default目录,使用:
$min_serveOptions['minApp']['allowDirs'] = array('//js', '//themes/default');  


"组":更快的性能和更好的网址
为了获得最佳性能,编辑groupsConfig.php中的预指定文件组,下面是一个例子配置:
return array(  
    'js' => array('//js/Class.js', '//js/email.js')  
);  

以上预指定js将结果是合并了如下文件:
  http://example.com/js/Class.js
  http://example.com/js/email.js
现在,您可以如此简化URL:
  http://example.com/min/?g=js
  
组:指定document_root目录以外的文件
在groupsConfig.php阵中,//是指向DOCUMENT_ROOT,但你也可以指定从系统的绝对目录路径或相对于document_root的相对目录:
return array(  
  'js' => array(  
    '//js/file.js'            // file within DOC_ROOT  
    ,'//../file.js'           // file in parent directory of DOC_ROOT  
    ,'C:/Users/Steve/file.js' // file anywhere on filesystem  
  )  
);  

未来过期HTTP头
Minify可以发送未来(一年)过期HTTP头。要启用该功能,您必须添加一个数字到URIs(例如/min/?g=js&1234 or /min/f=file.js&1234),每当源文件修改时改变该数字。如果你使用SVN/CVS,你可以考虑使用修订版号作为该数字。

如果使用"组"来合并压缩你的文件,可以使用工具函数Minify_groupUri()来得到一个“版本”的URI。例如:
// 之前确保min/lib目录设置到include_path  
// add /min/lib to your include_path first!  
require $_SERVER['DOCUMENT_ROOT'] . '/min/utils.php';  
$jsUri = Minify_groupUri('js');    
echo "";  


调试模式
在调试模式下,Minify不压缩文件,而是发送合并后的带有行号的文件。要启用该模式,在config.php中设置为$min_allowDebugFlag为true,并增加"&debug=1" 到你的URIs.
例如:/min/?f=script1.js,script2.js&debug=1

注:对于该模式,注释风格的字符串正则表达式可能会导致问题。


把min目录上传根目录,根目录打开http://example.com/min/

Note: Please set $min_cachePath in /min/config.php to improve performance.

设置/min/config.php文件  ,$min_cachePath 有3个选择。

//$min_cachePath = ‘c://WINDOWS//Temp’;
//$min_cachePath = ‘/tmp’;
//$min_cachePath = preg_replace(‘/^//d+;/’, ”, session_save_path());

选择第2个,去除//  .设置tmp属性777

在显示的界面中加入你想合并压缩的 js/css 路径,点击 ‘Update’ 之后会为你生成一个 url,如:http://localhost/min/b=googletesting/js& f=mootools.js,iAction.js,iAjax.js,global.js

css和JS分别合并,2个地址。如果需要组合的文件很多,url 就会变得很长,Minify 支持 group,可以将这些文件分组,这样 url 中只需指定 g=group名字 就可以了。

安装完毕后删除min/builder/index.php  文件。防止其他人登陆!后期如需编辑再次上传!
Nov 15
典型的场景
点击button请求一个同步的ajax,在ajax之前show loading效果,gif或之类,当展现的效果是 loading并没有show出来,这是因为ajax阻塞了ui的渲染,下面的方法可以参考
方法一:
使用settimeout


方法二:
上面的图片在IE与Chrome浏览器不显示,在firefox里面正常,通过Chrome debug模式发现,它是会显示的,由于后面的计算是JQuery同步操作,需要过长时间计算,导致界面UI卡死(来不及展示)。
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求 时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案,deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
解决方法:使用JQuery Deferred对象。
Pages: 11/43 First page Previous page 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Next page Final page [ View by Articles | List ]