diff --git "a/practice/xny/--\350\257\276\345\220\216\345\255\246\344\271\240\347\254\224\350\256\260--.md" "b/practice/xny/--\350\257\276\345\220\216\345\255\246\344\271\240\347\254\224\350\256\260--.md" new file mode 100644 index 0000000..4f3bb2b --- /dev/null +++ "b/practice/xny/--\350\257\276\345\220\216\345\255\246\344\271\240\347\254\224\350\256\260--.md" @@ -0,0 +1,34 @@ +# **课后学习笔记** + +标签（空格分隔）： web React + +--- + +###### 文章一 http://www.infoq.com/cn/articles/subversion-front-end-ui-development-framework-react +###### 心得： 感觉React把搭建网页变成搭积木，搭建好了之后也不用修改整个积木堆，只要对具体的某个积木进行操作，讲道理就是更高效更偷懒了 + +###### 文章二 http://www.infoq.com/cn/articles/react-art-of-simplity +###### 心得： + 1.取消自动绑定 + 2.代码容易理解 + 3.将HTML直接嵌入到JavaScript代码中 + 4.通过虚拟DOM让框架自身去解决哪些局部UI需要更新的问题 + 5.单向数据流动：Flux + 6.使用只读数据来建立数据模型 +###### 文章三 http://reactjs.cn/react/docs/thinking-in-react.html +###### 心得： prop预设 不可变 state状态 反复变（不准确的说法。。。） +---------- +**问题：** +我找了一个例子 主要是两个人读了他的代码，基本知道了怎么写 +https://github.com/YikaJ/react-todos +1. 代码里 bundle.js 这里面的代码是手写的还是生成的？ +2. localdb 这个本地数据库 了解和使用 +3. +```html +todoCount: this.state.todos.length || 0, + todoDoneCount: (this.state.todos && this.state.todos.filter((todo)=>todo.isDone)).length || 0 +``` +####这里的逻辑判断是什么意思？ +---------- +######**Tips（提醒我自己。。。）：http://www.cnblogs.com/vajoy/p/4591274.html 最后讲了怎么实现onclick 可以用来实现TODO中勾选完成事项** + diff --git a/practice/xny/1/Thinking liujiawang.txt b/practice/xny/1/Thinking liujiawang.txt new file mode 100644 index 0000000..6901b93 --- /dev/null +++ b/practice/xny/1/Thinking liujiawang.txt @@ -0,0 +1,7 @@ +#前端学习课程1感想 +##感觉这并不是老师你要求的那个markdown 所以我觉得我加的这些##号看起来和智障一样。 +###其实报班之前挺忐忑的，无悬念9个人中基础最差的我，也是赶鸭子上架，可能先学一下css html js打好基础再来学习会更好，可是又觉得这样的机会挺难得的，没法错过，所以硬着头皮来听课 +###第一节课听紧张的，看那些东西都是一脸懵逼，要是再被提问还不会，那特么就比较尴尬了 +###不过大神们讲的很细很慢，思维还能跟得上，没出现那种一言不合就开快车的情况，听欣慰了 +###关于这次作业的话。。。清明出去玩了四天。。。作业也是压着deadline。。。全靠队友carry，我还在看他的代码。。。 +####最后还是感谢大神们提供这么好的学习机会，希望下次的感想我扯得是些关于代码的问题。。。康桑米达。。。 \ No newline at end of file diff --git a/practice/xny/1/Thinking xieninyu.txt b/practice/xny/1/Thinking xieninyu.txt new file mode 100644 index 0000000..a6df2d8 --- /dev/null +++ b/practice/xny/1/Thinking xieninyu.txt @@ -0,0 +1,3 @@ +深复制和浅复制的一点疑问，深复制是对对象的所有属性进行遍历直到出现出现基本类型再直接复制过来，然后基本类型是储存在栈中， +对于对象，栈中储存的是对象名和地址，然后储存的内容是存放在堆中，当进行深复制时，通过栈中储存的地址进入到堆中，遍历所有 +属性然后直到出现基本属性，那是不是深复制后的都是储存在栈中..堆中储存的是像树那样的子类和父类的关系么。。。 \ No newline at end of file diff --git a/practice/xny/1/answer1.js b/practice/xny/1/answer1.js new file mode 100644 index 0000000..820c72b --- /dev/null +++ b/practice/xny/1/answer1.js @@ -0,0 +1,14 @@ +var str1 = "123" +var answer1 = parseInt(str1) +console.log(str1) +console.log(answer1); + + + + + + + + + + diff --git a/practice/xny/1/answer2.js b/practice/xny/1/answer2.js new file mode 100644 index 0000000..4555996 --- /dev/null +++ b/practice/xny/1/answer2.js @@ -0,0 +1,9 @@ +/** + * Created by Khalil on 2016/4/4. + */ +var array = ['1','2','1','3','4'] +var answer2 = array.map(function (num) { + return Number(num) +}) +console.log(array); +console.log(answer2); \ No newline at end of file diff --git a/practice/xny/1/answer3.js b/practice/xny/1/answer3.js new file mode 100644 index 0000000..e9d22e1 --- /dev/null +++ b/practice/xny/1/answer3.js @@ -0,0 +1,7 @@ +/** + * Created by Khalil on 2016/4/4. + */ + +//var childCollection = document.querySelectorAll('div'); +//TODO:将集合转化为真正的数组 +//var childs = Array.call(childCollection) \ No newline at end of file diff --git a/practice/xny/1/answer4.js b/practice/xny/1/answer4.js new file mode 100644 index 0000000..5fab4b8 --- /dev/null +++ b/practice/xny/1/answer4.js @@ -0,0 +1,9 @@ +/** + * Created by Khalil on 2016/4/4. + */ +function spacify(str) { + var newStr = str.replace(/ /,'').split(''); + return newStr.join(' ') +} +var answer4 = spacify('hello world') +console.log(answer4); diff --git a/practice/xny/1/answer5.js b/practice/xny/1/answer5.js new file mode 100644 index 0000000..4b90ad9 --- /dev/null +++ b/practice/xny/1/answer5.js @@ -0,0 +1,8 @@ +/** + * Created by Khalil on 2016/4/4. + */ +function Convension(str) { + var tmp = str.split('').sort() + return tmp.join('') +} +console.log(Convension('dsadafafasfdg')) \ No newline at end of file diff --git a/practice/xny/1/answer6.js b/practice/xny/1/answer6.js new file mode 100644 index 0000000..799106f --- /dev/null +++ b/practice/xny/1/answer6.js @@ -0,0 +1,12 @@ +/** + * Created by Khalil on 2016/4/4. + */ +function Logbytime(arr) { + var a = ['a', 'b', 'c', 'd'] + for(var i = 0; i < a.length;i++) + { + (function(j){setTimeout(function(){console.log(a[j]);}, j * 1000);})(i); + //var t = setTimeout(function(){console.log(a[i]);}, 1000); + } +} +var answer6 = Logbytime(); \ No newline at end of file diff --git a/practice/xny/1/answer7.js b/practice/xny/1/answer7.js new file mode 100644 index 0000000..a7a3bf0 --- /dev/null +++ b/practice/xny/1/answer7.js @@ -0,0 +1,7 @@ +/** + * Created by Khalil on 2016/4/4. + */ + +function log() { + console.log.apply(console, arguments) +} diff --git a/practice/xny/1/answer8.js b/practice/xny/1/answer8.js new file mode 100644 index 0000000..dad95aa --- /dev/null +++ b/practice/xny/1/answer8.js @@ -0,0 +1,15 @@ +/** + * Created by Khalil on 2016/4/4. + */ +var User = { + count:1, + + getCount:function() { + return this.count; + } +}; + +console.log(User.getCount());// 1 + +var func = User.getCount(); +console.log(func());//报错 func is not a function this这里指向的是func不是user 所以func中没有count \ No newline at end of file diff --git a/practice/xny/1/try.js b/practice/xny/1/try.js new file mode 100644 index 0000000..ae1622d --- /dev/null +++ b/practice/xny/1/try.js @@ -0,0 +1,7 @@ +/** + * Created by Khalil on 2016/4/4. + */ +var array = ['1','2','1','3','4'] +var answer2 = array.map(Number) +console.log(array); +console.log(answer2); \ No newline at end of file diff --git a/practice/xny/2/Xieninyu.txt b/practice/xny/2/Xieninyu.txt new file mode 100644 index 0000000..7c7fd7c --- /dev/null +++ b/practice/xny/2/Xieninyu.txt @@ -0,0 +1,2 @@ + ϿθľDZ̷ ʵһֱ һһֱ̫ ʹEnterеʱ ʱԶǰճ +ʱ򲻻 Ҫֶ ȻֻǸСϸ дʱͦĵ Ų \ No newline at end of file diff --git a/practice/xny/2/code2.html b/practice/xny/2/code2.html new file mode 100644 index 0000000..9e93438 --- /dev/null +++ b/practice/xny/2/code2.html @@ -0,0 +1,23 @@ + + + + + Web homework 2 + + + +

+ + + + diff --git a/practice/xny/2/tee.js b/practice/xny/2/tee.js new file mode 100644 index 0000000..b906a44 --- /dev/null +++ b/practice/xny/2/tee.js @@ -0,0 +1,99 @@ +/** + * Created by Khalil on 2016/4/6. + */ +var input=document.getElementById('search'); +var data=[ + { + key:'alibaba', + value:'阿里巴巴' + }, + { + key:'baidu', + value:'百度' + }, + { + key:'sexi', + value:'色系' + }, + { + key:'sejie', + value:'色戒' + }, + { + key:'sina', + value:'sina' + }, + { + key:'secai', + value:'色彩' + }, + { + key:'sennv', + value:'森女' + }, + { + key:'secaixinggeceshi', + value:'色彩性格测试' + }, + { + key:'seo', + value:'seo' + }, + { + key:'sem', + value:'sem' + }, + { + key:'22cunxianshiqi', + value:'22寸显示器' + }, + { + key:'22cunlaganxiang', + value:'22寸拉杆箱' + }, + { + key:'zhizhang', + value:'智障' + }, +]; +var result=[]; +var msg=document.createElement('div'); +msg.id="msg"; +input.parentNode.appendChild(msg); + +input.onfocus=function(event){ + + result=[]; + msg.innerHTML=''; + auto(); +}; +input.onkeyup=auto; +input.onblur=function(event){ + if(msg){ + document.body.removeChild(msg); + } +}; +function auto(event){ + var reg=new RegExp('^'+input.value); + var i; + result=[]; + msg.innerHTML=''; + if(input.value===''){ + msg.innerHTML=''; + return; + } + if(msg){ + for(i=0;i