可以使用 less, sass 等写法，通过预编译处理，得到最终的css。

less， sass 都可以支持 变量，函数等基本操作语法。

举例： 使用 less 的 mixin 来模拟实现继承

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

menu a 直接将 .bordered 的样式合并进来， 从而实现了类似 #menu a 继承 .bordered 样式的效果。

可以的，确保组件 DidMount 的情况下，是可以获取到真实 dom 并进行操作的。

但是， 非常不建议这么做。

react 是一个数据(状态)驱动的视图层框架， UI = f(state) ， 用 jquery 修改真实的 dom 是很危险的事情，只是控制显示隐藏还好，尤其是对真实dom 的增删改，会破坏原有的结构。

完全可以换一个思路来解决这个问题。 可以用 css3 定义 fadeIn,fadeOut 等动画。通过 添加和移除 className 来实现动画效果， 而 className 本身可以作为组件的状态。 通过修改状态来驱动视图变化

可以理解为 react-native 是和 react-dom 一样的渲染引擎。 react 本身是跨平台的，react创建的虚拟dom对象，在web平台上，由 react-dom 去渲染成真实的 dom 结构； 而在 native 平台则是通过 react-native 作为桥接层，驱动原生UI渲染。

react-native 内置了一些原生组件和功能API， 这些组件和API可以通过 react-native 的 bridge 暴露给js调用，同时也提供了自定义原生组件和模块的方式来扩充组件和API。

前端和后端之间本身并没有什么优劣之分。
只是各自有自己的特点和学习曲线，还是要看你喜欢哪个，适合哪个。

后端：重逻辑，适合逻辑思维强的同学，技术难度相对是要比前端深的，虽然会基本的CURD就能从事后端开发，但是在云计算时代，只会CURD是迟早会被淘汰的，docker容器技术，serverless ，函数计算， devops 越来越多的新技术和新架构出来，需要很长时间去慢慢学习和积累，后端的学习是一个漫长的过程。

前端：从开始的切页面，到现在复杂的前端单页应用，node服务端应用，移动端react-native等，前端的技术更新速度远远超过服务端的更新速度，这也就要求前端同学，需要不停的学习新的技术来跟上前端技术的升级，一旦松懈，就可能被淘汰。前端现在所覆盖的场景已经越来越广，从传统的前端，已经延伸到服务端，工具链，移动端等。而对于新手来说，前端入门是最容易的，现在很多人直接从主流框架开始学习前端，react, vue 看一看就可以直接开始项目开发了（但是不推荐，还是从 HTML, CSS, ECMAScript 基础学期）

前端入门容易，但是比较容易陷入API型程序员，各类框架和库都会用，但是都不够深入。
服务端入门相对难，但是时间长了，比较容易构建技术壁垒，拉开差距。

题主提到了 Java Web， 那自然少不了模板引擎，Velocity 就是一个不错的Java模板引擎。为了达到前后端分离，通常情况下服务端模板只是作为一个落地页面以及承载SEO的关键词信息。页面逻辑再通过加载外部静态资源(js,css)来实现。

对于纯前端部分，需要看业务规模，以及团队成员来选择。

Vue 上手最简单，传统的开发者也能快速上手。React 需要去理解JSX，函数式，以及状态管理，应用越复杂，对开发者的能力要求就越高。

另外要看是要看组件，对于如果是小公司来说，迭代速度快，人力少，就没有办法自己去维护一套组件库，那么哪个框架对应的组件库能满足你的需求，就能快速出开发出需要的应用，便可以去选择。

先获取 div 元素
var divDom = document. getElementById('#xxx')

再增加 class
divDom.className = divDom.className + " newClass"

JS 可以通过闭包去模拟实现私有方法

function Factory () {
    var _privateProperty = 0;
    var _privateMathod = function(num){
       _privateProperty = _privateProperty + num
   }

    return {
        publicAdd(num) {
            return _privateMathod(num);
        }
        publicShow() {
            console.log(_privateProperty);
        }
    }
}

var inst = Factory();

inst.publicAdd(3);
inst.publicShow();

// inst 无法直接访问 _privateProperty 和 _privateMathod

1.for ... in 循环

for (var key in object) {
    console.log('key=', key, '&value=', object(key))
}

2.先取得keys，再循环。

Object.keys(object).forEach((key) => { console.log('key=', key, '&value=', object(key)) })

先创建定时器，拿到定时器句柄，再清楚该定时器

1. 单次定时

// 创建定时器， 仅一秒后执行一次
var timer = setTimeout(function(){ console.log('something') }, 1000)

// 清除定时器
clearTimeout(timer)

1. 循环定时

// 创建定时器, 每秒执行一次
var timer = setInterval(function(){ console.log('something') }, 1000)

// 清除定时器
clearInterval(timer)

以 <button id="btn"></button> 为例:

1.可以直接内嵌事件监听:

<button id="btn" onClick="_click"></button>

function _click(event) {
    console.log(event);
}

2.dom赋值：

var $btn = document.getElementById('btn');
$btn.onClick = _click;
function _click(event) {
    console.log(event);
}

3.使用事件监听器：

var $btn = document.getElementById('btn');
$btn.addEventListener('click', _click, false);

function _click(event) {
    console.log(event);
}

楼上用 forEach 虽然没什么问题，但是最合适的方法应该是 Array.prototype.map()

ES6: const result = arr.map(x => 0)

ES5: var result = arr.map(function(item){ return 0; })

更多关于 map 的描述 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

两端空格可以用字符串的 String.prototype.trim() 方法。例如 var str = ' hello world '; str.trim() 将输出 'hello world';

中间空格可以用 String.prototype.replace() 方法。例如 var str = 'h e l l o'; str.replace(/s/g, '') 将输出 'hello'

具体 replace 的正则怎么写，则需要看需求的过滤规则是怎么样的。

css reset 是为了抹平不同浏览器之间的初始样式差异。放在所有页面级css前面。
常见的 reset 有 normalize.css

参考地址 https://github.com/necolas/normalize.css/

选择什么样的方式取决于你的使用场景。
1.直接编译 scss 到 css ， 可以直接安装 sass 编译工具，sass 基于 ruby 开发，需要安装 ruby 环境。
2.使用webpack sass-loader , 增加 .scss 文件规则配置，参考 https://webpack.js.org/loaders/sass-loader/ , 其他构件工具同理，会有 scss插件。

css垂直排列有很多方式，现在弹性盒flex布局已经没什么兼容性问题了。父容器设置display:flex ，再通过 flex-direction:column 定义主轴方向。 更多 flex 用法参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox