syy课程学习笔记

2015-06-26  本文已影响0人  沿溪行

浏览器是如何工作的？ （工作原理）

sublime text 3 快捷键大全以及配置编译环境

socket

变量声明提前

总之声明会提前，赋值等不会提前。

变量声明提前.jpg 
 * 附代码：
           "use strict";
            function get1(){
               return yy;
               var yy = function (){};
            }
            function get2(){
               return yy;
               function yy(){};
            }
            console.log( get1() );
            console.log( get2() );

 *结果：
                           undefined //不提前
                           yy()          //提前
link放在头部，script放到尾部的原因：

  1. chrome只渲染一遍（dom+css一起渲染）。firefox渲染两遍（dom+css分别渲染）。 所以css的link放到头部。

  2. 父级先加载（从外到内），子级由上到下依次加载。如何加载呢？跟解析有啥关系？如果有脚本阻塞（用defer="defer"或者async="async"(IE不支持)防止阻塞）的话就暂停往后加载。并且索引不到后面的元素。所以script放到尾部。

UI后端，IE：ActiveX
浏览器的引擎

总结： 查看浏览器版本，控制台：window.navigator.userAgent

渲染引擎（html/css）、js解释器H5的web database网络里的MIME
type若是非浏览器可以解析的，则会下载存到本地。

虽然浏览器容错很强，但是代码越规范越好。避免问题产生。在业内实现自我价值。
正则

\s是空格，\w是字母数字下划线,[]+表示多个，^[]是非。*[]是？。正则里有特殊意义的都需要转义，即\

CSS

最后一条声明的；分号可以省略。大小写不敏感的。

层叠样式表的层叠顺序（css权重优先级）层叠次序
细节注意：IE6不符合规范的几点：
  * 如果出现ID，不管多少个，以最后出现的一个为准。
  * 不支持!important。利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。
  * ie6不完全支持!important
  * IE支持重定义中的!important，例如：
        .yuanxin {color:#e00!important;}.yuanxin {color:#000;}
        你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。
        但不支持同一定义中的!important。例如：
        .yuanxin {color:#e00!important;color:#000;}
        此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。
css hack的机制：
IE特有
CSS选择器

  1. 选择器有益于写比较复杂的css和jquery。

  2. 基本选择器，*{margin:0;padding:0;}

  3. 选择器分组，选择器用逗号分隔，组合为一组，然后样式代码公用。

  4. 关联选择器，【有需要就去查表】
    父子关系 >，
    只是后代 空格，
    兄弟前后关系 + -，
    所有兄弟关系 变通实现
    索引index ul > li:nth-child(1或者2n等){}
    第一个 ul > li:first-child(1或者2n等){}

  5. 属性选择器[没有分组概念，要求精确的属性值]
    li[class="third"]{} 注意这种对于 <li class="third f4">不起作用，换成 .third{}可以
    选择其 class 属性值以 "top" 开头的元素，并设置其样式：
    [class|=top]{ background-color:yellow;}

伪类【标签状态，着重性级别由低到高的顺序】
a:link
a:visited
a:active
a:hover
聚焦标签：所有标签增加属性tabindex=1，都可以聚焦。均有个outline.
    a:focus{
   outline:1px solid red;
    }
   鼠标选中状态
   ::selection{//没有标签的概念了，所有标签都可以选中。必须是双冒号。
       color:#fff;
    }
伪属性【标签结构】
 xxx:first-letter{}【只与一些css属性有效，XXX是块级的才能定义，行内的不行。】
 :not(p),非p标签。支持IE9及以上。
 ul > li:first-child(1或者2n等){}
 p:before{
centent:"345";
 }
p:after{
centent:"789";
 }
清除浮动

浮动的元素脱离了正常的文档流【子标签不会撑开父标签】

方法三：直接用overflow:hidden，但是CSS3的效果【变换阴影变大时】会出问题，除非没有ＣＳＳ３效果。

CSS3：

background-size:100%;或者background-size:100%,100%;[宽高] background-position：left center;

background-image:-webkit-gradient(linear,50% 0%,50% 100%, from(#45B5DA),to(#0382ad));

-webkit-box-align:center;-webkit-box-pack:center;display:-webkit-box;

【研究东西，摒弃其他干扰，集中注意力。工作用到了或者平时有空就研究下】
keyframes
animation: mymove 5s linear infinite;

JS

  1. 是不是质数

  2. 打印1000以内的质数。

  3. 代码优化
    1. 跳出return，减少循环次数
    2. 找数学上的规律length，减少循环运行次数
    3. 找出1000以内有多少个平方？

  4. 裴波那切数列-递归案例以及实现要素( 结束标志 + 可递归算法 )
    【没太懂，再听：19ke,15min】
    递归:

     * 描述 ，程序调用自身的编程技巧称为递归（ recursion）。递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。递归的能力在于用有限的语句来定义对象的无限集合。一般来说，递归需要有边界条件、递归前进段和递归返回段。当边界条件不满足时，递归前进；当边界条件满足时，递归返回。

 * 递归定义，就是在运行的过程中调用自己。
 * 构成递归需具备的条件：
          1. 子问题须与原始问题为同样的事，且更为简单；
          2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。
 * 实例
![递归.jpg](https://img.haomeiwen.com/i629416/235c3acb5d94712b.jpg) 
    * 应用

用递归求解比迭代求解更简单，
数据的结构形式是按递归定义的。
如二叉树、广义表等，由于结构本身固有的递归特性，则它们的操作可递归地描述。

    * 递归的缺点：

递归算法解题相对常用的算法如普通循环等，运行效率较低。因此，应该尽量避免使用递归，除非没有更好的算法或者某种特定情况，递归更为适合的时候。在递归调用的过程当中系统为每一层的返回点、局部量等开辟了栈来存储。递归次数过多容易造成栈溢出等。

  1. 普通对象
    的key的引号可加可不加，如果有特殊字符最好加上。
    json里的key必须加引号，val里只要是显式变量【字面值（literal）】就可，不能写function，正则，也不能叠加引用。json按照字符串的识别规则。

  2. 方法

* 只定义，不调用（方法名()）就不会执行，代码没有意义。解析器也不会解释，只有在运行的时候才去解析。没有语法错误（整个解析出错了），里面的代码没有意义。

整个排完后（比如100个，首元素左侧20个数，右侧79个数），循环再排左侧和右侧的子数组。【太复杂了，可以自己试试】
这样原来顺序就正确的，就没动位置，效率较高，性能较好。

方法定义和调用的时间点不同，决定了变量的值不同。如下实例：
var students = [
{name: "小明"},
{name: "小虎"},
{name: "珊珊"},
{name: "小慧"},
{name: "大胖"}
];
var sports = [
"踢足球",
"打棒球",
"踢毽子",
"跳绳子",
"拔河"
];
for (var i = 0; i < students.length; i++) {
//循环时就执行，
sport = sports[i];
//调用的时候才会执行，这时sport = ‘拔河’;
students[i].play = function(){
console.log( this.name + sport );
};
};
for (var j = 0; j < students.length; j++) {
students[j].play();
};
VM95:19 小明拔河
VM95:19 小虎拔河
VM95:19 珊珊拔河
VM95:19 小慧拔河
VM95:19 大胖拔河
解决方法一闭包

 * 写匿名方法,写在括号里，使优先级提升，然后加括号（调用这个方法，即调用自身）
* 方法参数，只对内，基础类型（数字字符串布尔型的显示变量）参数，是复制（如果是引用的话，则是引用的复制）一份来用，有自己的运行环境，不受外界环境影响）：
        var students = [
        {name: "小明"},
        {name: "小虎"},
        {name: "珊珊"},
        {name: "小慧"},
        {name: "大胖"}
        ];
        var sports = [
          "踢足球",
          "打棒球",
          "踢毽子",
          "跳绳子",
          "拔河"
        ];
        for (var i = 0; i < students.length; i++) {
             (function(_i){
                 var sport = sports[_i];
                 students[_i].play = function(){
                 console.log( this.name + sport );
                 };
            })(i);
        };
        for (var j = 0; j < students.length; j++) {
          students[j].play();
        };

执行结果

       小明踢足球
       小虎打棒球
       珊珊踢毽子
       小慧跳绳子
       大胖拔河

**解决方法二 **

如何看API

  1. eval("");灵活但不严谨。js代码混淆，它还可以把字符串转成json：parseJson或者（eval("")）;


    eval.jpg

  2. Number


    number.jpg
    数字转换.jpg
  3. 编码解码
    浏览器默认只支持ascii编码（256以内的），一些字符和标点符号，协议上不支持中文等Unicode编码，所以传之前先转成这些字符。（中文传到地址栏，若是get请求会默认转成ISO-8859-1格式）往地址栏传的时候需要进行处理，比如以下方法：
  1. 全局对象
    任何运行环境都有全局对象
    顶层对象在不同的环境是不一样的。
  1. 数学Math
  1. 顶层内置对象

实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。

  1. 急需练习的

md或者简书来写笔记
http://www.jianshu.com/p/f992705d795d
http://www.jianshu.com/users/00ac3d5d475f/latest_articles
IE滤镜等
css3
递归
常用排序算法
闭包

  1. 漏讲的内容：
上一篇 下一篇

猜你喜欢

热点阅读