React学习(二)-JavaScript

Posted by syea on January 11, 2018

React学习(二)-JavaScript

本以为只要学习 React 就好了,还是太天真了。

想学前端,Html + CSS + JavaScript 是一定要懂的。
(特么我原来就是想用一下 ReactNative) 基础知识推荐看书并且实践:《JavaScript 权威指南》
本篇只能简单介绍一下JavaScript以及分享一些我的理解,包含的内容实在太多了。

JavaScript基础语法

第一反应是跟swift类似,我写的比较乱,基本可以跳过语法这段。
有个大神把 js 的语法写的很详细, 5星推荐, github 地址:https://github.com/lidaguang1989/javascript-knowhow

var hi_str = "string";
var hi_number = 123;
var hi_map = {"key1":"hi","key2":hi_array}
var hi_array = [1,2,3,4,5,hi_str,hi_number,hi_map];
var hi_object = {
  p1 : 123,
  p2 : 456,
  p3 : hi_map,
}
var helloFunc = () => {
  console.log('hello, world!');
}
function clickWeather(e) {
  // e 是事件对象
  console.log('clickWeather',e.target.id);
  // 1.用 target 获取对象
  e.target.style.color="blue";
  // 2.用 getElementById 获取对象, tip:原来 css 设置的 text-decoration 需要改为 textDecoration
  document.getElementById("weather").style.textDecoration="line-through";
  hi_testParams(hi_array,"hello","red");
}

// 测试函数传参
function hi_testParams(var1,var2,var3) {
  var1.forEach(element => {
    // 判断对象类型
    console.log(typeof element,element.constructor.name);
    if (element.constructor.name === "Number") {
      console.log("this is number",element);
    }
  });
  // 修改页面元素属性
  document.getElementById("weather").style.color=var3;
}

关于 getElementById 有一些疑惑

  1. 万一 id 被其他人或者自己不小心改了,方法不就炸了
  2. 万一其他人或者自己新建元素的时候起了相同的 id,又炸了

元素 id 的注册散落在各处,还不好维护。总感觉这种方式到处是坑。


JavaScript常用场景

  1. 对元素进行各种操作,增删改查。

  2. 相应以及处理用户的各种事件

  3. 做特效、动画

总结

目前还没有很好的心得,还得多进行实践。