22 |
23 |
24 |
25 |
26 |
27 |
41 |
42 |
--------------------------------------------------------------------------------
/点头猪分享用户体验笔记.md:
--------------------------------------------------------------------------------
1 | ##用户体验：
2 |
3 | ###1.动画
4 |
5 | 考虑： 移动端性能，transform性能比较好，因为只计算了一次； 速度，贝塞尔曲线网站；
6 |
7 | ###2.用户体验真的那么重要吗？
8 | - 稀缺型产品（不在乎用户体验）；
9 | - 紧急不重要的产品（没空填坑的时候，就不要填）
10 | - 重体验型产品（发现问题解决问题）；
11 |
12 | ###3.因什么妥协（为什么选择图片去实现动画效果，不是css3去实现）
13 |
14 | 时间！！！
15 |
16 | > 1）.工期、推广实效、老板要求、人力资源不足
17 |
18 | > 2）.代码的生命体系
19 |
20 | > 3）.时间是高于技术和体验的不可控的因素
21 |
22 | - 四维空间（时间是单线的）： 到了这个时间，发现问题，改变方案，解决它。再次遇到问题:
23 | - 五维空间 ：看得到这样做产生的画面（带来的后果）调整方案
24 | - 六维空间：不用等到遇到问题才去解决 ，一开始就找到解决方案。
25 | - 七维空间：不是寻求解决方案，而是制定规则的人（工程实现 －> 体验）。
26 |
27 | ### 4、css实现影响因素
28 |
29 | > 1）.技术自身的表现： css属性
30 |
31 | > 2）.开发及维护成本
32 |
33 | > 3）. 项目工期、发布deadline
34 |
35 | > 4) .csser个人知识结构
36 |
37 | ### 5、产品工程师
38 |
39 | ui规范 ui guidelines
40 |
41 | >（为什么工程师不喜欢调界面？
42 | 因为设计的质量决定了工程师的热情。）
43 |
44 | #### 产品考虑：
45 | - 物理尺寸更大，容纳更多信息
46 | - 相对单位：vw\vh\rem\percent...
47 | - 断点：media query
48 | - 横屏，场景变化，界面重排（多少app不考虑）
49 |
50 | ### 6、这部分工程师做还是设计师做？
51 |
52 | > 工程师提供解决方案的人，哪些可以做到，建议那些地方应该怎么样处理。（取决于公司的组织结构
53 | ）
54 |
55 | > 理解页面场景，用户做什么，意图是什么，后选择合适表现形式实现它。
56 |
57 | ### 视频链接
58 | - [移动时代css对用户体验的影响（点头猪）](http://www.imooc.com/video/6362)
59 |
--------------------------------------------------------------------------------
/html&css/css3/transition.md:
--------------------------------------------------------------------------------
1 | transition
2 | ==========
3 |
4 | transition呈现的是一种过渡。PS：就是一种动画转换过程，如渐显、渐弱、动画快慢等。
5 |
6 | transition可以和transform同时使用。
7 |
8 | transition是复合属性。PS：如下：
9 |
10 | ###transition属性
11 | > - transition-property [过渡css属性]
12 | > - transition-duration[过渡时间]; PS：单位为s(秒) or ms(毫秒)
13 | > - transition-delay[延迟时间]
14 | > - transition-timing-function[过渡效果]
15 |
16 | ###transition-timing-function过渡的效果包括:
17 |
18 | 1、ease(逐渐变慢)
19 |
20 | 2、linear(均速)
21 |
22 | 3、ease-in(加速)
23 |
24 | 4、ease-out(减速)
25 |
26 | 5、cubic-bezier(该值允许你去自定义一个时间曲线)
27 |
28 | 6、ease-in-out(加速然后减速)
29 |
30 | ###语法
31 |
32 | ```css
33 | transition-property: all | none |
27 |
28 |
29 |
35 |
36 |
55 |
56 |
--------------------------------------------------------------------------------
/this变量.md:
--------------------------------------------------------------------------------
1 | ###this变量
2 |
3 | > - 函数运行时，自动生成的一个内部对象，只能在函数内部使用。
4 | > - !important: this指的是调用函数的那个对象。
5 |
6 | #### this调用的四种方法
7 |
8 | > 普通函数调用（指向的是全局）
9 |
10 | ```js
11 | var x = 1;
12 | function test() {
13 | this.x = 0; //this指向的是全局
14 | }
15 | test();
16 | console.log(x); //0
17 | ```
18 |
19 | > 对象方法调用（this指这个上级对象）
20 |
21 | ```js
22 | function test() {
23 | console.log(this.x); //this指向的是obj对象方法
24 | }
25 | var obj = {};
26 | obj.x = 1;
27 | obj.m = test;
28 | console.log(obj.m()); //1
29 | ```
30 |
31 | > 构造函数调用
32 |
33 | ```js
34 | var x = 2;
35 | function Test() {
36 | this.x = 1;
37 | }
38 | var test = new Test();
39 | console.log(test.x); //1
40 | console.log(x); //2
41 | ```
42 |
43 | > apply函数调用(改变函数的调用对象)
44 |
45 | apply(改变后的调用这个函数的对象) this指向的是第一个参数
46 |
47 | ```js
48 | var x = 0;
49 | function test() {
50 | console.log(this.x);
51 | }
52 |
53 | var obj = {};
54 | obj.x = 1;
55 | obj.m = test;
56 |
57 | obj.m.apply(); //apply为空的时候指向的是全局对象，x为0
58 | obj.m.apply(obj); //1
59 | ```
60 |
61 | > 对象原型链上的this
62 |
63 | ```js
64 | var o = {
65 | f : function() {
66 | return this.a + this.b;
67 | }
68 | };
69 | var p = Object.create(o);
70 | p.a = 1;
71 | p.b = 4;
72 | console.log(p.f()); //5
73 | ```
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
--------------------------------------------------------------------------------
/事件代理.md:
--------------------------------------------------------------------------------
1 | 事件代理
2 | ========
3 |
4 | ### 什么是代理
5 |
6 | 给很多元素添加事件的时候，将事件委托给所有元素的父节点来触发处理函数。
7 |
8 | ### 简单使用代理
9 |
10 | ```js
11 | // 找到父节点,并添加click事件
12 | document.getElementById('parent').addListener('click', function(e) {
13 | // 检查事件目标e.target是否为li
14 | if(e.target && e.target.nodeName.toUpperCase == 'LI') {
15 | console.log('yep, i am li');
16 | }
17 | });
18 | ```
19 |
20 | ### DOM中常用的事件类型
21 |
22 | ```js
23 | e.type // 事件类型
24 | e.target // 事件目标
25 | e.target.nodeName // 事件目标节点的名称
26 | e.stopPropagation(); // 阻止冒泡
27 | e.preventDefault(); // 阻止默认行为
28 |
29 | IE
30 |
31 | event = e || window.e;
32 |
33 | event.srcElement; // 事件目标
34 | event.cancelBubble = false; // 阻止冒泡
35 | event.cancelBubble = true; // 不阻止冒泡
36 | event.returnValue = true; // 不阻止默认行为
37 | event.returnValue = false; // 阻止默认行为
38 | ```
39 |
40 | 使用代理
41 |
42 | ```js
43 | var delegate = function(client, clientMethod) {
44 | return function() {
45 | return clientMethod.apply(client, arguments);
46 | };
47 | };
48 |
49 | var ClassA = function() {
50 | var _color = 'red';
51 | return {
52 | getColor : function() {
53 | console.log('Color:' + _color);
54 | },
55 | setColor : function(color) {
56 | _color = color;
57 | console.log(_color)
58 | }
59 | };
60 | };
61 |
62 | var a = new ClassA();
63 | var d = delegate(a, a.setColor);
64 | d('blue');
65 | ```
66 |
--------------------------------------------------------------------------------
/循环(迭代)过程.md:
--------------------------------------------------------------------------------
1 | 循环(迭代)过程
2 | ==============
3 |
4 | ### filter 返回符合条件的新数组
5 |
6 | ```js
7 | var arr = [1, 22, 33, 23, 2, 5, 8];
8 |
9 | arr.filter(function(value, index, arr) {
10 | if(value > 10) {
11 | console.log('value:'+ value +'; index:'+ index +'; arr:'+arr);
12 | }
13 | });
14 | // value:22; index:1; arr:1,22,33,23,2,5,8
15 | // value:33; index:2; arr:1,22,33,23,2,5,8
16 | // value:23; index:3; arr:1,22,33,23,2,5,8
17 | ```
18 |
19 | ### forEach 遍历
20 |
21 | > 遍历的时候会跳过被删除或未被赋值的项（undefined除外）
22 |
23 | ```js
24 | var arr = [1, 22, 33, 23, 2, 5, 8, undefined];
25 | delete arr[1];
26 | arr.forEach(function(value, index, arr) {
27 | console.log(value);
28 | });
29 | ```
30 |
31 | ### map 返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组
32 |
33 | ```js
34 | ['foot', 'goose', 'moose', 'kangaroo'].map(function(value, index, arr) {
35 | var result = value.replace(/o/g, 'e');
36 | if(value === 'kangaroo') {
37 | result += 'se';
38 | }
39 | console.log(result);
40 | });
41 | ```
42 |
43 | ### every 每一个元素都满足参数中提供的测试函数，返回真
44 |
45 | > 那些被删除的元素或从来未被赋值的元素将不会被访问到
46 |
47 | > 不会改变原数组
48 |
49 | ```js
50 | var arr = [1, 22, 33, 23, 2, 5, 8];
51 |
52 | arr.every(function(value, index, arr) {
53 | if(value > 0) {
54 | return value;
55 | }
56 | });
57 | ```
58 |
59 | ### some 至少有一个元素满足函数测试，返回真
60 |
61 | ```js
62 | var arr = [1, 22, 33, 23, 2, 5, 8];
63 |
64 | arr.some(function(value, index, arr) {
65 | if(value === 1) {
66 | return value;
67 | }
68 | });
69 | ```
70 |
--------------------------------------------------------------------------------
/html&css/css3/animation.md:
--------------------------------------------------------------------------------
1 | animation(动画)
2 | ========
3 |
4 | > - animation-name[动画名称]
5 | > - animation-duration[动画时间] PS:单位为s or ms；默认为0
6 | > - animation-timing-function[播放方式] PS: ease(逐渐变慢)|linear（均速）|ease-in(加速)|ease-out(减速)|ease-in-out(加速然后减速)|step-start(马上转跳到动画结束的状态)|step-end(马上跳转到动画开始的状态)|cubic-bezier(自定义一个时间曲线)
7 | > - animation-delay[开始播放时间]
8 | > - animation-iteration-count[播放次数] PS：默认值为1; `n|infinite(无限)`
9 | > - animation-direction[播放方向] PS： 默认`normal`->动画每次循环都是向前播放；reverse->动画反向运行，方向始终与normal相反；`alternate`->动画播放在第偶数次向前播放，第奇数次向反方向播放。
10 | > - animation-fill-mode[播放后的状态]
11 | > - animation-play-state[对象动画的装填] PS：默认running; paused
12 |
13 | ```css
14 | animation: 'ellyliang' 20s ease-in-out 2s infinite alternate
15 | animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction
16 | ```
17 |
18 | ###如何开始进行动画（@keyframes）
19 |
20 | 检索或设置对象所应用的动画名称，必须与规则@keyframes配合使用。
21 |
22 | ```css
23 | @-webkit-keyframes demo {
24 | from {
25 | left: 0;
26 | }
27 | to {
28 | left: 400px;
29 | }
30 | }
31 |
32 | 复杂动画
33 | @-webkit-keyframes demo {
34 | 0% {left: 0;}
35 | 50%{left: 200px;}
36 | 100%{left: 400px;}
37 | }
38 | ```
39 |
40 | [http://ecd.tencent.com/css3/guide.html?transform](http://ecd.tencent.com/css3/guide.html?transform)
41 |
42 | [http://www.w3cplus.com/content/css3-transition](http://www.w3cplus.com/content/css3-transition)
43 |
--------------------------------------------------------------------------------
/javascript单例模式.md:
--------------------------------------------------------------------------------
1 | 单例模式
2 | ========
3 |
4 | ###什么是单例模式？
5 |
6 | 利用私有构造函数来保证只有一个实例，使不同的地方调用同一个实例对象。
7 |
8 | ###单例模式的例子：
9 |
10 | ```js
11 | var Useless = {
12 | name: "useless",
13 | age: function() {
14 | console.log("secret!");
15 | }
16 | };
17 | Useless.age();
18 | ```
19 |
20 | ###闭包实现私有成员的单例模式例子：
21 |
22 | ```js
23 | var Ellyliang = (function() {
24 | var name = "useLess",
25 | age = function() {
26 | console.log("secret!");
27 | };
28 |
29 | return {
30 | getName: function() {
31 | return name;
32 | },
33 | getAge: function() {
34 | age();
35 | }
36 | }
37 | })();
38 | Ellyliang.getName();
39 | Ellyliang.getAge();
40 | ```
41 |
42 | ###闭包实现私有成员的惰性实例化单例模式:
43 |
44 | ```js
45 | var Ellyliang = (function() {
46 | var name = "useLess",
47 | age = function() {
48 | console.log("secret!");
49 | };
50 |
51 | var obj = {
52 | getName: function(){
53 | return name;
54 | },
55 | getAge: function(){
56 | age();
57 | }
58 | };
59 |
60 | function init(){
61 | return obj;
62 | }
63 |
64 | return {
65 | getInstace: init
66 | };
67 | })();
68 |
69 | Ellyliang.getInstace().getAge();
70 | Ellyliang.getInstace().getAge();
71 | ```
72 | NOTE: 适用场景－> 必须加载大量数据的单体知道需要使用它的时候才实例化。
73 |
74 | ###笔记链接：
75 |
76 | > - [http://www.cnblogs.com/snandy/archive/2011/04/07/2007717.html](http://www.cnblogs.com/snandy/archive/2011/04/07/2007717.html)
77 | > - [http://rolfzhang.com/articles/920.html](http://rolfzhang.com/articles/920.html)
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
--------------------------------------------------------------------------------
/项目中不懂的基础知识（8月份）.md:
--------------------------------------------------------------------------------
1 | 项目中不懂的基础知识（8月份）
2 | ===========================
3 |
4 | ### 1. Filter()
5 | > filter()方法利用所有通过指定函数测试的元素创建一个新的数组，并返回。
6 |
7 | > 注意：两个数组间的对比要用id,不用索引
8 |
9 | #### 如何获取对应的id
10 |
11 | 栗子：
12 |
13 | ```js
14 | var arr = [{
15 | id : 1,
16 | name : 'use'
17 | }, {
18 | id : 2,
19 | name : 'you zi'
20 | }];
21 |
22 | var getArrId = function(id) {
23 | return arr.filter(function(objArr) {
24 | return +objArr.id === id;
25 | });
26 | };
27 |
28 | getArrId(2); //[{id: 2,name: "you zi"}]
29 | ```
30 |
31 | ### 数据同步（基础）
32 |
33 | > 问题描述：在地图中有很多marker,数据中只有2条数据，当然这时地图中也有2个marker。当我从数据中删除1条数据的时候，bug就产生了，地图中还是有2个marker。这是为什么呢？因为代码中是用数组把marker存起来的，然后数据也是个数组，当数据更新的时候，并没有更新marker的数组。（估计这里很多人不知道说的是什么，因为我的描述有点问题）所以这时要实现数据同步，如果实现数据同步呢？代码如下：
34 |
35 | ```js
36 | var arrOne = [
37 | {
38 | id: 1,
39 | word : 'e'
40 | },{
41 | id: 2,
42 | word: 'l'
43 | },{
44 | id: 3,
45 | word: 'l'
46 | },{
47 | id: 4,
48 | word: 'y'
49 | },{
50 | id: 5,
51 | word: '2'
52 | }
53 | ];
54 |
55 | var arrTwo = [
56 | {
57 | id: 1,
58 | word : 'e'
59 | },{
60 | id: 2,
61 | word: 'l'
62 | },{
63 | id: 3,
64 | word: 'l'
65 | },{
66 | id: 4,
67 | word: 'y'
68 | }
69 | ];
70 |
71 | var newArr = []; // 产生的新数组
72 |
73 | arrOne.forEach(function(element, index) {
74 | var arrOneId = +arrOne[index].id; // arrOne数组的id
75 |
76 | arrTwo.forEach(function(ele, idx) {
77 | var arrTwoId = +arrTwo[idx].id; // arrTwo数组的id
78 | if(arrOneId === arrTwoId) {
79 | newArr.push(ele.word); // 如果2个数组中有相同的id，就把它们存到新的数组中
80 | }
81 | });
82 |
83 | });
84 |
85 | console.log(newArr); // 新数组： ['e', 'l', 'l', 'y']
86 | ```
87 |
--------------------------------------------------------------------------------
/assign().md:
--------------------------------------------------------------------------------
1 | ```js
2 | var createAssigner = function(keysFunc, defaults) {
3 | return function(obj) {
4 | var length = arguments.length; // 获取arguments的长度
5 |
6 | if(defaults) { // 如果defaults为真的话，不管传入什么，强制转化为对象
7 | obj = Object(obj);
8 | }
9 |
10 | if(length < 2 || obj == null) { // 如果参数长度小于1或传入的参数为null,则返回obj
11 | return obj; // return obj停止执行下边
12 | }
13 |
14 | for(var index = 1; index < length; index++) { // 当参数大于2的时候循环
15 | var source = arguments[index], // arguments返回的是数组
16 | keys = keysFunc(source), // 获取数组中对象的key值
17 | l = keys.length;
18 |
19 | for(var i = 0; i
30 |
31 |
32 |
33 |
34 |
47 |
48 |
49 | 这是个简单的例子
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | ```
59 |
60 | ###笔记参考链接 ：
61 |
62 | > * [http://www.cssstickyfooter.com/using-sticky-footer-code.html](http://www.cssstickyfooter.com/using-sticky-footer-code.html)
63 | >* [http://ryanfait.com/resources/footer-stick-to-bottom-of-page/](http://ryanfait.com/resources/footer-stick-to-bottom-of-page/)
64 |
65 |
66 |
--------------------------------------------------------------------------------
/html&css/canvas/canvas.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
54 |
66 |
67 |
85 |
86 |
--------------------------------------------------------------------------------
/html&css/css3/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
55 |
56 |
57 |
58 |
-
61 |
- item1 62 |
- item2 63 |
- item3 64 |
75 | Welcome to the world of USELESS!
77 |
56 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/html&css/雅虎性能优化的14条规则.md:
--------------------------------------------------------------------------------
1 | 雅虎性能优化的十四条规则
2 | =====================
3 |
4 | 作为一位前端技术人员，了解网站的性能优化方面的知识是很基本的，但是我很惭愧我现在才了解到这一点T^T，以下是我学习yahoo性能优化十四条规则的笔记：
5 |
6 | - __一、减少http请求次数__
7 |
8 | 如何减少http请求次数：
9 |
10 | > - 组合页面中的图片到单个文件中，并使用css的background-image和background-position属性来实现所需部分的图片；
11 | > - 组合多个脚本文件到单一文件中。意思就是：把页面中的多个css 或js文件合并在一个文件中。
12 |
13 | 减少http请求次数是性能优化的起点！对提高首次访问效率起到很重要的作用。
14 |
15 | - __二、使用cdn（Content Delivery Network,内容分发网络）__
16 |
17 | 这条可以忽略之。。。。
18 |
19 | - __三、增加expires header__
20 |
21 | 浏览器（和代理）使用缓存来减少http请求次数和大小，使得网页加速装载。
22 |
23 | 如何增加expires header
24 |
25 | > - 如果是apache，可以使用expiresDefault基于当期日期来设置过期日期。
26 | > - 记住：如果使用超长的过期时间，则当内容改变时，必须改变文件名称。
27 | > - 版本号内嵌在文件名中，如：useless_1.0.0.js.
28 |
29 | - __四、压缩页面元素__
30 |
31 | 压缩http响应内容可以减少页面响应时间，同时，对尽量度的文件类型进行压缩是一种减少页面大小和提高用户体验的简便方法。
32 |
33 | 通过Accept-Encoding头来表明支持的压缩类型，如：
34 |
35 | `Accept-Encoding: gzip,deflate`
36 |
37 | PS:这个可以忽略，因为一般浏览器都支持gzip之类压缩，然后服务端前端这边不用管。
38 |
39 | - __五、把样式表放在头上__
40 |
41 | 把样式表移到head中，可以提高界面的加载速度，因此这使得页面元素可以顺序显示。
42 |
43 | 原因： 避免空白屏幕或闪烁的问题。
44 |
45 | - __六、把脚本文件放在底部__
46 |
47 | 尽量把脚本文件放在页面底部，好处就是，一能顺序显示，二可达到最大的并行下载。
48 |
49 | - __七、避免css表达式__
50 |
51 | css表达式是强大的（同时也是危险的）用于动态设置css属性的方式。ie，从版本5开始支持css表达式。
52 |
53 | 所谓的表达式是，看例子：
54 |
55 | `expression((new Date()).getHours()%2?"#B8D4FF":"#F08A00")`,即背景色每个小时切换一次。
56 |
57 | ps：一般很少用css表达式
58 |
59 | - __八、把js和css放到外部文件中__
60 |
61 | > - 使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。
62 | > - 内置的js和css在页面中虽然会减少http请求次数，但是增大了页面的大小。
63 | > - 使用外部文件，会被浏览器缓存，则页面大小会减小，同时又不增加http请求次数。
64 |
65 | - __九、减少DNS查询次数__
66 |
67 | 这个不说明，了解下，这主要是服务端的优化
68 |
69 | - __十、最小化js代码__
70 |
71 | 最小化js代码是指在js代码中删除不必要的字符，从而降低下载时间。
72 |
73 | ps:其实就是压缩js。
74 |
75 | - __十一、避免重定向__
76 |
77 | 重定向功能是通过301和302这两个http状态码完成的，如：
78 |
79 | > - `HTTP/1.1 301 Moved Permanently`
80 | > - `Location:http://example.com/newuri`
81 | > - `Content-Type:text/html`
82 |
83 | ps：没用过这个
84 |
85 | - __十二、删除重复的脚本文件__
86 |
87 | 在一个页面中包含重复的js脚本会影响性能，即它会建立不必要的http请求和额外的js执行。
88 |
89 | - __十三、配置etags__
90 |
91 | 忽略吧。。。。
92 |
93 | - __十四、缓存ajax__
94 |
95 | 提高ajax的性能最重要的方式是使得其response可缓存。
96 |
97 | 学习链接如下：
98 |
99 | > - [https://developer.yahoo.com/performance/rules.html](https://developer.yahoo.com/performance/rules.html)
100 | > - [http://3y.uu456.com/bp-58a2922f647d27284b73512a-2.html](http://3y.uu456.com/bp-58a2922f647d27284b73512a-2.html)
101 | > - [http://fex.baidu.com/blog/2014/03/fis-optimize/](http://fex.baidu.com/blog/2014/03/fis-optimize/)
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
--------------------------------------------------------------------------------
/javascript栗子/图片切换/imgToggle.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | -
57 |
- 1JAN 58 |
- 2FER 59 |
- 3MAR 60 |
- 4APR 61 |
- 5MAY 62 |
- 6JUN 63 |
- 7JUL 64 |
- 8AUG 65 |
- 9SEP 66 |
- 10OCT 67 |
- 11NOV 68 |
- 12DEC 69 |
71 |
77 | 72 | 6 73 | 月节日 74 |
75 |端午节：6月4日至6日放假3天。
76 |
-
59 |
-
60 |
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | -
68 |
69 | -
70 |
136 |
137 |
138 |
139 |
140 |
141 |
--------------------------------------------------------------------------------
/html&css/snail/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
146 |
147 |
148 |
149 |
150 |
--------------------------------------------------------------------------------
/javascript栗子/闭包:
--------------------------------------------------------------------------------
1 | //此笔记原文来自http://miyuki.42code.com/2012/05/closures/#more-619
2 |
3 | //JS中，每件事物都是一个对象，当然包括函数（PS：这句话很重要，我在很多JS文章中都看到）
4 |
5 | //闭包
6 | //什么是闭包：
7 | //闭包就是拥有许多变量并且绑定这些变量的环境的表达式（函数），因而这些变量是表达式的一部分
8 | //阮一峰的理解是：读取其他函数内部变量的函数。
9 |
10 | //闭包由来:能关闭内容的方式而得名
11 |
12 | outerMost = 'my'; //变量的存取从外到内：定义某个函数外的变量是可以被函数访问的
13 | function useLess(name){
14 | //console.log('Yes,' + outerMost + ' ' + 'name is' + ' ' + name ); //Yes,my name is Lcm
15 |
16 | var outerMost = 'Your', //如果我们忽略这个变量，那么下面的console.log()返回的是Yes,my name is Lcm
17 | interFunc=function(){
18 | var outerMost = 'Her';
19 | console.log('Yes,' + outerMost + ' ' + 'name is' + ' ' + name );
20 | };
21 | interFunc(); //Yes,His name is Lcm
22 | console.log('Yes,' + outerMost + ' ' + 'name is' + ' ' + name ); //Yes,Your name is Lcm
23 |
24 | }
25 | useLess('Lcm');
26 |
27 | //一个闭包即一个函数对象
28 | //上面的例子中，有个2个函数对象，分别是：useLess();和interFunc();
29 |
30 |
31 | //一个闭包拥有他自己的作用域
32 | //变量不能从内到外读取：就如放在innerFunc()中的变量outerMost不能被其外部的函数访问到。
33 |
34 |
35 | //JS的词法作用域:变量的作用域是在定义的时候决定的，而不是执行的时候决定的。也就是词法作用域取决于源码，跟函数调用的什么木有关系。
36 |
37 |
38 | //哈哈，为什么使用闭包，@张小雪的博客里说，为了隐私！
39 | //闭包是将你的代码在公共环境中隐藏的一种方式。通过闭包，你可以简单地创建与外界隔离的私有成员
40 |
41 | (function(exports){ //匿名函数
42 | function mycode(num,num2){ //这是个嵌入函数，它仅仅存在于闭包的作用域内，所以我们能在作用域内任意的使用它
43 | return num * num2; //同时也仅仅只能在这个匿名函数的作用域内使用
44 | }
45 |
46 | exports.publicCode = function(num1,num2){ //将私有方法曝露为公有方法，我的理解就是，通过父对象的变量或是this
47 | console.log(mycode(num1,num2)); //使父对象中的私有成员让外界访问到
48 | };
49 | })(window);
50 |
51 | publicCode(3,5); //15
52 | mycode(3,5); //私有方法，只能在匿名函数中的作用域中使用 Uncaught ReferenceError: mycode is not defined
53 |
54 | //注：哈哈，终于搞清楚以下2种的区别了
55 | //(function(){}());---->这是即时函数
56 | //(function(){})(); --->这是匿名函数的调用
57 |
58 | //使用闭包进行元编程
59 | var KeyMap = {
60 | "Enter" : 13,
61 | "Shift" : 16,
62 | "Tab" : 9,
63 | "LeftArrow" : '37'
64 | };
65 |
66 | var txtInput = document.getElementById('myTextInput');
67 | txtInput.onkeypress = function(e){
68 | var code = e.keyCode || e.which;
69 |
70 | if(code === KeyMap.Enter){
71 | console.log(txtInput.value);
72 | }
73 | }
74 |
75 | //及时的捕获一个时刻
76 | for(var key in KeyMap){
77 | KeyMap['is' + key] = (function(compare){
78 | return function(ev){
79 | var code = ev.keyCode || ev.which;
80 | return code === compare;
81 | };
82 | })(KeyMap[key]);
83 | }
84 | //使用闭包来扩展语言
85 | Function.prototype.cached = function(){
86 | var self = this,
87 | cached = {};
88 |
89 | return function(args){
90 | if(args in cached){
91 | return cached[args];
92 | }
93 | return cached[args] = self[args];
94 | };
95 | };
96 |
97 | //闭包在外界的使用
98 | //jQuery
99 | (function($){
100 | $(document).ready(function(){
101 | //.......
102 | });
103 | })(jQuery);
104 |
105 | //Backbone.js
106 | (function(exports){
107 | var Product = Backbone.Model.extend({
108 | urlRoot : '/Products',
109 | });
110 | var ProductList = Backbone.Collection.extend({
111 | url : '/products',
112 | model : Product
113 | });
114 | var Products = new ProductList;
115 | var ShoppingCartView = Backbone.View.extend({
116 | addProduct : function(product, opts){
117 | return CartItems.creat(product, opts);
118 | },
119 | removeProduct : function(product, opts){
120 | Products.remove(product, opts);
121 | },
122 | getProduct : function(productId){
123 | return Products.get(productId);
124 | },
125 | getProducts : function(){
126 | return Products.models;
127 | }
128 | });
129 |
130 | exports.ShoppingCart = new ShoppingCartView;
131 | })(window);
132 |
--------------------------------------------------------------------------------
/javascript栗子/Carousel/Carousel.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
80 |
93 |
94 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
--------------------------------------------------------------------------------
/html&css/CSS:响应式导航菜单.md:
--------------------------------------------------------------------------------
1 | CSS:响应式导航菜单
2 | =================
3 |
4 | 之前我（原文作者）已经写过一篇关于如何制作响应式设计[手机导航 ](http://webdesignerwall.com/tutorials/mobile-navigation-design-tutorial)的教程，但现在我（原文作者）发现一个不需要使用javascript也可以制作响应式菜单的方法。它使用了简洁和语义化的html5标签，菜单可以向左，中间或右对齐。前面的教程菜单只能点击切换，本教程的菜单是通过hover切换，这样用户体验更友好。另外，用active/current来提示选中的菜单项，还可以在所有移动端浏览器和包括ie在内的桌面浏览器中运行。
5 |
6 | > [响应式菜单demo](http://webdesignerwall.com/demo/responsive-menu/)
7 |
8 | ### 目的
9 | 本教程的目的是告诉你如何把一个普通列表菜单变成下拉菜单显示在更小的屏幕上。
10 |
11 | 
12 |
13 | 这种做法对带有许多链接的导航更有用些，如下图。你可以将所有的按钮集成一个优雅的下拉菜单。
14 |
15 | 
16 |
17 | ###导航的html标签
18 |
19 | 这个是导航的标签。`
81 | 
82 | 
83 | 
84 |
85 | -
86 |
87 |
88 |
89 |