分类： JavaScript

一般从JSP文件中，可以直接使用${pageContext.request.contextPath}非常方便的获得当前页面的路径，用来处理被Apache2代理之后出现URL变化的问题,比如增加了某些前缀，方便转发,即使是JSP内嵌的JavaScript脚本，也是可以如此操作。但是如果是一个独立的JavaScript文件，通过

这样的方式引入，则在JavaScript文件内部是无法直接调用${pageContext.request.contextPath}获取前缀的，因为${pageContext.request.contextPath}是需要JSP文件处理的变量，而对于独立的JavaScript文件，默认是不做任何处理的。

因此这个变量只能是通过某个全局变量传递到JavaScript文件中。
目前比较有效的实现方法是通过设置一个隐藏的文本框的方式来处理。

JavaScript文件中获取这个变量的方法如下：

在JS中使用变量，使用=号拷贝，如

obj1 = obj2

是浅拷贝，即改变obj1内容的时候也会改变obj2.

有时候我们是不希望看到这种情况的，JS使用深拷贝有很多方法，介绍一个简单好用的

这种用法会破坏obj2的构造类型，但一般情况是足够了。

最近遇到任务，需要对外提供接口。发现最困难的事是写文档，因为代码经常在修改，每天更新word很困难。然后就发现了文档神器YUI doc，以及神器的剑鞘smartdoc：http://www.cnblogs.com/zhh8077/p/4010991.html。

简单介绍一下使用方法和遇到的坑。

YUI doc可以看成一种标准，主要看这里http://www.cnblogs.com/zhh8077/p/4011769.html或者YUI doc的官方文档。

module写法

class写法

method常用写法

其中 param.xx是二级参数的写法。

event与method一样

常量

smartdoc的使用就比较简单了，参考其主页文档。

这里主要想说的是 使用过程中遇到的一些坑。

1.生成的method event等等按照字母顺序排列，而不是按照我们文档中的顺序排列。

.YUIDoc生成的API文档目录不按源文件注释顺序

YUIDoc默认将所有的class、method、properties、events等按字母进行排序。

而且这个是在生成文档时进行排序的，所以如果除去按字母进行排序这种默认行为。

就必须修改YUIDoc的工具文件。修改C:\Users\Administrator\AppData\Roaming\npm\node_modules\yuidocjs\lib 下的 builder.js 文件

第1313-1316行，就是这几句罪魁祸首，注释掉后就可以按源文件注释顺序，当然你也可以自己弄其他排序方法。

方法源自：http://www.cnblogs.com/lovesong/p/3341453.html

2.event的example不显示。使用smartdoc生成文档后，其他地方都挺好，但event的example就是显示不出来。chrome上面，直接F12，看document，看到example部分，display：none。method增加了一个active的class，display：block。很简单，看看这个css是在哪里写的。

C:\Users\用户名\AppData\Roaming\npm\node_modules\smartdoc\theme-smart\assets\css

路径下的main.css。改一下其中的example的display就可以了。

修改整个页面的布局也是修改这里。这里就是我们使用的主题，自己可以改，也可以搞一套。

 

Webstorm是一个很优秀的js IDE。今天打算学习less的时候，创建一个less文件后发现webstorm提示是否AddWatcher，点开后发现是一个自动编译less文件的工具，可惜不能直接使用，需要简单配置一下。

所有资料来自于

https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html。

洋洋洒洒一大坨，读起来有点费劲。实际操作了一下，发现简单的要命。

首先，你要装好node环境，没装的请自行百度。

1.View-ToolWindows-Terminal

2.输入 npm install -g less

搞定。

 

再次打开AddWatcher窗口，你就发现所有选项已经自动填好了。

less文件左边出现了一个小箭头，点开看到了css文件，完全同步。

获得某个element在parent中的index。

jquery提供了index接口，可以直接拿到。

如果没有jquery的话，

将document查询到的HTML Collection转为Array，

然后使用Array的index接口拿到index。

之前写css，一直是把position:absolute当做android的FrameLayout用的，其他类似。

后来看了下面的文章，满面羞愧。

这些基础的东西，还是要了解透彻的，一直不求甚解的搞下去，自己都不知道做的什么，为什么会出现这种错误，希望能从下面的内容中，总结出一个类似于Androidlayout的规则。

关于position看下面的文章就够了

http://blog.csdn.net/chen_zw/article/details/8741365

css属性大全

http://css.doyoe.com/

这里主要记一下看完自己的理解：

文档流

首先需要了解什么是文档流，可以理解为方块布局，从上到下，从左到右的布局方式就是文档流。

1.margin和padding是占用文档流的，也就是说，layout函数一定是这么写的

element.margin + elment.width/height +element.padding = dom真正占用的空间。

position：static很容易理解，完全遵循文档流。

position:relative 有点特殊，本身遵循文档流，但可以在文档流中使用top left bottom right设置偏移，偏移不遵循文档流。需要注意的是，后面的dom会按照relative元素不偏移来排列。layout函数中完全可以把relative按照static先处理，最后在当前位置进行偏移。

注：relative static无父辈时以body为参考；

position：absolute 脱离文档流，使用top left bottom right设置偏移，偏移参照为父辈最近的非static元素（之前一直认为absolute参照window，深刻检讨）。

注：absolute无父辈时以html为参考。

1、body默认有9个px的margin

2、absolute的元素没有设置top、left时，默认是文档流的位置，会造成设置了absolute，看起来没有效果的现象。

position：fixed fixed以window为参考（即不管你怎么scroll，位置都不会变），设置偏移。

float：absolute会屏蔽掉float，其他的可以共存。

float不遵循文档流。

clear：clear是配合float使用的。意思是把dom的哪边给清除掉。

如clear：both，意思是两边都不许浮动。

如果我来写 html的layout，

1.dom tree static，relative的按照文档流布局，relative单独处理下偏移，完全不影响文档流。

fixed很简单粗暴。

2.处理absolute float

absolute屏蔽float

absolute需要寻找父辈非static元素直到html，比较蛋疼。这个webkit在渲染的时候会把absolute的元素单独出来一层。

float是浮动排版，按文档流布局就差不多。

当然，css3还有更多的排版方式，上面几种已经基本够用，如果还要学习的话就是box了。

经常碰到JS中的这三兄弟，记一下他们的用法和区别。

1.改变函数上下文

2.就算不为了改变，但JS那坑爹的作用域下，也为了能够明确知道函数上下文

（为什么要改变请参考JS的作用域链）

区别：

call与apply

call与apply用法很相似，区别就是一个是一个一个传参数，一个是传一个参数数组

fun().call(object, p1, p2);

fun().apply(object, [p1,p2]);

或者经常直接继承父函数参数

fun().apply(object, arguments);

call和apply都会立刻执行，只是改变了fun()里面的this

bind不会立刻执行，bind会返回一个指定上下文的函数

var fun1 = fun().bind(object, p1, p2); //参数传递跟call一样

bind最适合作为回调函数使用，尤其是setTimeout

func(function(){}.bind(this));

我们知道，setTimeout的回调函数上下文会被置为window（use strict下是null），在setTimeout中没办法使用原有实例，bind就可以了

setTimeout(function(){}.bind(this), 1000);

HTML5中提供了transform transition等动画方式，已经能够满足绝大部分动画需求。

但在移动端，使用Transform等还是会出现不流畅的情况，比如背景上一个无限循环的动画，不管是使用setInterval 还是捕捉每次的AnimationEnd来实现，都会有一定的问题，因为我们设定的延时还是动画时间都不能得到保证，并且会影响页面性能。

优化是无尽的，所以学习使用Canvas

使用Canvas能做什么？

1.知道/控制每帧的绘制

2.预加载img来绘制

3.canvas保证了性能

如何使用Canvas？

http://www.w3school.com.cn/html5/html_5_canvas.asp

W3C等有canvas的简单介绍，使用Canvas的基本步骤就是

拿到canvas标签的dom，调用dom的getContext接口拿到Canvas类，就可以使用canvas的各种接口了

Canvas接口手册：http://www.w3school.com.cn/tags/html_ref_canvas.asp

canvas简单使用

1.绘制矩形

2.绘制线

3.绘制圆形

4.绘制渐变

5.绘制图

这些绘制组合使用基本上可以满足我们的一般绘制需求。

绘制动画基本流程

But，如果要绘制动画，还需要配合另一个神接口，

requestAnimationFrame的用法请自行google。大概原理就是，requestAnimationFrame需要传入一个函数，浏览器每绘制一帧都会通过requestAnimationFrame来调用这个函数。通常，我们把这个函数命名为step，在step中，放入我们的draw函数（这里与Android的draw流程很类似，不过Android更方便些）。

draw与requestAnimationFrame绑定

解绑（这里把绑定与show/hide放到了一起）

draw函数

draw函数中我们把绘制分为两步，一步是update（和Android类比就是在这里做mesure，确定View中各个元素的位置），第二步是绘制。

子View中实现各自的update和draw

需要注意的是，Canvas的使用宽高默认为300 150，我们设定的宽高只会对Canvas进行缩放。

update-动画曲线

使用css动画时，可以方便的给一个动画曲线，比如easeinout等，使用canvas绘制就需要我们不断的update绘制范围。

在update里面，我们完成让一个矩形以指定动画曲线在四个方向转圈的位移。

缓动函数就负责返回位移的值

下面的easeInOutQuint按照步进返回值

更高明的做法，比如Jquery中，以时间为参数

draw就比较简单了

在自己的服务器上跑一个页面，页面出错，调试后发现，载入.json还有自定义类型（.tpl）时404。

查了一下，是window上IIS默认不支持这两种格式。

IIS配置MIME

添加了这两种格式分别为text/xml text/html后，可以正常加载。