![js中temp=deck[i], deck[i]=deck[r], deck[r]=temp怎么理解？,第1张](/aiimages/js%E4%B8%ADtemp%3Ddeck%5Bi%5D%2C+deck%5Bi%5D%3Ddeck%5Br%5D%2C+deck%5Br%5D%3Dtemp%E6%80%8E%E4%B9%88%E7%90%86%E8%A7%A3%EF%BC%9F.png "js中temp=deck[i], deck[i]=deck[r], deck[r]=temp怎么理解？,第1张")
使用交换律
r为0~i的随机索引
索引为i的数据和索引为r的数据进行交换，循环len个长度进行交换，也就是说交换len次
类似冒泡排序法
var a = [3,2,13], len = a.lengthfor(var i = 0 i < len i++){
for(var j = i + 1 j < len j++){
if(a[i] > a[j]){
// 把a[i]先存储到tmp中
var tmp = a[i]
//然后把a[j]存储到a[i]
a[i] = a[j]
//原来的a[i]就是tmp，存储到a[j]，这样就换过来了
a[j] = tmp
}
}
}
看来你还不会冒泡排序法
只不过少了个for循环，j换成了随机的r，从而实现了洗牌功能。
React的组件式开发，让我们可以利用其Component Model，专注于单个组件的逻辑开发，其中还包括组织组件的样式。先声明，本文并不是webpack配置教程，不会介绍详细的配置过程，假设你们已经用过了css-loader style-loaderextract-text-webpack-plugin。正在使用的方式
我们理想中的文件结构可能会是这样的：
- components
- modal
- modal.jsx
- modal.css // 可以是任意预处理器
- dropdown
- dropdown.jsx
- dropdown.css
然而，js现在可以做模块化，css并不行，所有css的定义都可以被视为全局变量，在css被打包后，一个组件的样式有可能会影响到其他组件，于是我们可以通过命名约定（name convention）来曲线救国（这一点并不局限于react开发）。
@modal-prefix: modal
.@{modal-prefix} {
}
.@{modal-prefix}-title {
}
类似于上面的使用less的方式，在文件顶部先定义个类的前缀，来尽量避免命名冲突的可能。于是在组件中就可以这样做
import React from 'react'
import './modal.less'
export default React.createClass({
render () {
return
<div className="modal-title">Hello</div>
}
})
上面就是我现在在用的方式，利用命名约定做到了伪模块化（其实即便不是在使用react开发项目，也会用类似的方式）。
CSS in JS
之前看到过一个ppt：https://speakerdeck.com/vjeux/react-css-in-js，谈到了类似的问题。
一个方向是把样式也直接写进组件里，即使用inline style。首先，直接用传统的inline style并不可取，它对属性的支持有限，比如不能用伪类、多个不同浏览器前缀的相同属性、媒体查询、动画等。至于重用样式而言，在react中倒是还行：将需要重用的样式对象作为模块导出即可。
其实大家很努力地希望CSS in JS可以实现，比如：
react-style
github地址
它的局限就是上面提到过的属性支持的问题，没有细究这个东西，不太喜欢。
local scoped CSS
https://github.com/css-modules/css-modules
https://github.com/webpack/css-loader#local-scope
用这个东西现在是webpack官方支持的，已在css-loader中实现，可以真正让你的css代码作为本地声明，类似的代码：
// style.css
:local(.title) { background: red}
在需要这份样式的组件里引入这个模块：
import styles from 'style.css'
<div className={styles.title}></div>
首先css的语法中是不支持这个:local()的，我们先看看页面最终的代码：
<div class="_3dpOqNNJl6oyjYpdDHCFD9" data-reactid=".0.2.1">Info</div>
到这里应该明白了，其实这也算是个预处理器，它将:local(.title)的类名变成了一个哈希值，仅可以通过模块导入的方式来获取这个哈希值并应用到组件上（生成的类名是可以配置的）。现在css-loader可以通过添加module选项（详细内容可以参考上面CSS Modules的链接）使得css默认定义的是local scoped的，希望共享的可以用:global()定义。
也可以和预处理器混用：
:global {
.global-class-name {
color: green
}
}
目前看下来，它只对class名做哈希，也就是说：
:local(.title span) // .[hash] span
然而
:local(.title .name) // .[hash0] .[hash1]
这个算是一个有意思的方式，首先它依赖于webpack，而webpack并不局限于React的开发，任何前端项目都可以使用webpack，那么就也都可以使用CSS Modules的概念，不知道这个CSS Modules会有怎么样的发展，感觉可以尝试。
这里是一个使用样例：https://github.com/css-modules/webpack-demo
写在最后的话
目前的探索结果暂时是这样，之后可能会继续来填坑。反正现在应该不会去用CSS in JS，CSS Modules可以一试，因为css-loader这个插件基本react的项目里都会使用，写好的组件一个import， 样式和组件都有了，不过仍需实践。
<!DOCTYPE HTML><html>
<head>
<title>JS无缝滚动图片</title>
<meta charset=UTF-8 />
<style type="text/css">
* {
margin: 0
padding: 0
}
#div2 {
margin: auto
width: 602px
overflow: hidden
left: 200px
}
#div1 {
position: relative
left: 0px
width: 1200px
}
#div1 li {
list-style-type: none
float: left
width: 200px
height: 180px
}
img {
width: 200px
height: 180px
}
ul#ul1 {
position: relative
}
</style>
<script type="text/javascript">
window.onload = function ()
{
var oUl = document.getElementById ('ul1')
var t,o
var speed = 0
var funny = function ()
{
t && clearInterval(t)
t = setInterval (function ()
{
speed -= 200/11
if(speed<-200){
speed=0
oUl.appendChild (oUl.children[0])
t && clearInterval(t)
t = null
o && clearTimeout(o)
o=setTimeout(funny,1000)
}
oUl.style.left = speed + "px"
}, 60)
}
funny ()
}
</script>
</head>
<body>
<div id="div2">
<div id="div1">
<ul id="ul1">
<li><img src="../../images/choose.png">
</li>
<li><img src="../../images/deck.png">
</li>
<li><img src="../../images/duel.png">
</li>
<li><img src="../../images/list.png">
</li>
</ul>
</div>
</div>
</body>
</html>
