每天都学一点新知识

240 阅读5分钟

JS

  1. JSON.stringify(对象)把对象变成字符串,序列化;JSON.parse(字符串)把字符串变回对象,反序列化

  2. typeOf xxx === 'string'用于xxx的非对象的检测xxx instanceof Array用于判断xxx的对象的检测

  3. icon找图标

  4. ES6新语法

  • 在一个对象里增加一个函数属性
{
    add(x,y){x+y};              //function缩写
    add: (x)=>{console.log(x)  //箭头函数
        
}  
  • 析构赋值
const {response}=request
//等同于
const response = request.response
  • 当函数的参数和函数的return里的参数一模一样时,可以化简
function f1(x) { console.log(x) }
摇骰子(f1)

//因为我们声明了函数f1后只调用了它一次,所以用不着给它取名字,所以在调用f1的地方化简为
摇骰子(x=>{console.log(x)})

//因为该箭头函数的参数和他return里的参数一模一样,所以化简为
摇骰子(console.log)


//注意不要乱用
[1,2,3].map(x=>console.log(x))
//不可以化简!
//因为map里面实际接受三个参数(item,i,array)!我们用不到后两个参数才没有写。所以前后参数不一致!不能化简!
[1,2,3].map((x,y,z)=>console.log(x))
  1. indexOflastIndexOf 都是一个字符串中一个特定字符串的位置
  • indexOf 是查某个指定的字符串在字符串首次出现的位置(索引值) (也就是从前往后查)
  • lastIndexOf 是从右向左查某个指定的字符串在字符串中最后一次出现的位置(也就是从后往前查)
  1. string.substring(start,stop)方法用于提取字符串中介于两个指定下标之间的字符。start是必需的。stop 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。

  2. 我们想输出一个字符串,这个字符串里面又必须引用变量的值,那必须把变量外面加上${},不然字符串会有反引号包起来,那变量不包起来就会变成普通字符串了。这时候字符串必须要反引号包起来。

  1. setInterval() 方法--可以多次
  • setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

  • setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  1. setTimeout() 方法--就是一次
  • setTimeout() 方法用于在指定的毫秒数后尽快调用函数或计算表达式。(1000ms后如果你不忙就执行,你要是还忙你就先忙,忙完了在执行)
  1. $xxx.eq()这个数组中的第n个
  2. $xxx.index()$xxx在他的兄弟姐妹中的排名
  3. 样式与行为分离!永远不要在js里写css样式!
  • $xxx.show()$xxx.hide()$xxx.css()绝对不要用。
  • 在js用.addClass("actions").removeClass("actions")$xxx.toggleClass("active",布尔值)布尔值可省,有布尔值就根据布尔值真假决定要不要添加,没有布尔值就根据实际中有没有添加;
  • 在css里写好有或者没有class时的样式
  1. $xxx.trigger("click")让js先自己点击,不是我们用户点击

  2. 装个Chrome插件:JSON Viewer 。可以在测试请求JSON时很好的查看JSON

  3. try{}catch(error){console.log(error)}尝试,有错代码也不会停下来

最小知识原则

都要由main.js引入css reset 、整个页面的css、每个模块的js

每个模块的js引入jquery 、 他的css 、他的html
这样html里面就是空空的

  1. localStorage存的都是字符串。所以取出来要变成数字

localStorage.setItem("n", x);

parseInt(localStorage.getItem("n"))

  1. 不可以在声明一个变量的时候引用这个变量

  1. Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。
var target = { a: 1 };
var source1 = { b: 2 };
var source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。

注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。

  1. js代码永远不要以()或者[]开头,不然可能会和前面一句合成一句。不然你就每句后面加分号呗。看你要选哪个
  2. 添加了事件监听,那就想办法在一定的时机删掉,不然越累积越多
new Vue({
  directives: {
    on2: {
      //当元素出现在页面时,会调用bind函数,我把bind函数写成添加事件监听
      //bind和inserted都行
      bind(el, info) {
        //console.log(info); //打印出info,看看我们需要他的哪些信息
        el.addEventListener(info.arg, info.value);
      },
      //添加了事件监听,那就想办法在一定的时机删掉,不然越累积越多
      //当元素要消亡时,会调用unbind函数,我把unbind函数写成删除事件监听
      unbind(el, info) {
        el.removeEventListener(info.arg, info.value);
      }
    }
  },
  template: `
    <button v-on2:click="f1">点我</button>  //button使用了我们写的指令
  `,
  methods: {
    f1() {
      console.log("Hi");
    }
  }
}).$mount("#app");
  1. window.prompt('请输入标签名');会出现输入框,本身返回用户输入的内容 window.alert('标签名不能为空');提示

  2. ...xxx把xxx对象的所有属性复制放进来 数组/对象扩展运算符 假设您有以下对象:

const adrian = {
  fullName: 'Adrian Oprea',
  occupation: 'Software developer',
  age: 31,
  website: 'https://oprea.rocks'};

假设您要创建一个具有不同名称和网站但具有相同职业和年龄的新对象(人)。

您可以通过仅指定所需的属性来执行此操作,并使用扩展运算符来完成其余操作,如下所示:

const bill = {
  ...adrian,
  fullName: 'Bill Gates',
 website: 'https://microsoft.com'};

上面代码的作用是遍布adrian对象并获取其所有属性,然后用我们传递的属性覆盖现有属性。可以将这种传播视为逐个提取所有单个属性并将它们传递给新对象。

CSS

  1. 宽度固定的元素,用margin-left : automargin-right : auto可以居中
  2. vertical-align:middle取消图片漂浮现象
  3. flex与margin-xxx:auto搭配有意外的效果。比如一行有俩,我想一头一尾,那就在第二个元素写margin-left : auto
  4. body的边框是内联元素的高度,但是background却会被浏览器自动扩充到整个页面
  5. 如果需要一个椭圆的下半部分,那这个圆的高度就必须大,不然用border-radios无法设置椭圆。多出的部分,在他的父元素里面overflow:hidden就行。还有z-index设置高低后盖住
  6. border还有许许多多有用的属性!一定要多学点!
  7. 响应式页面= meta viewpoint + 媒体查询
  8. 多出来14-19px,应该是滚动条的宽度
  9. box-shadow阴影
  10. scss语法:这样写的好处就是所有nav和nav里的元素的样式都在一块了,很方便移动成模块化(这也是模块化呀)
  • nav标签里有个.item.a
nav{
    >.item{
        &.a {}
    }
}

&:nth-child(2)  //第二个孩子
  1. 把a标签的下划线去掉,颜色是继承他的父元素的颜色
  a{
    text-decoration: none;
    color:inherit;
  }
  1. input输入标签<input type="text" placeholder="在这里输入备注"/>
  2. 鼠标点到输入框会有个边框,那就让任何focus的元素的outline为none
:focus{
  outline: none;
}
  1. 只有一行,上下居中的话可以让高度和行高相等
        $h: 24px;
        height: $h;
        line-height: $h;

  1. text -align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。
  2. font-family 规定元素的字体系列。

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。也就是说,font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。

  1. 比这个颜色深x%darken(颜色,x%)

HTML

  1. 在html中,style全局属性用来指定当前标签的 CSS 样式。
  • 比如<p style="color: red;">hello</p>

其他

  1. 提交项目到仓库,请记住新建文件.gitignore,把不需要提交的写进去
/node_modules/
/.idea/