jQuery - DOM操作-html-text-css

课程目标：
1. html-text-css的作用
2.html-text-css 源码解析

html(), text(), css() 都是通过jQuery.access提供底层支持。jQuery.access是一个多功能方法，作为set和get值来使用。

jQuery使用示例：

<script>
    console.log($('#app').text());
    console.log($('#app').text("this is set"));
    console.log($('#app').css('color'));     // 返回字符串
    console.log($('#app').css(['color']));   // 返回对象 如：{color: 'rgb(255, 0, 0)'}
    console.log($('#app').css('color', '#abcdef'));
    console.log($('#app').css({
        "color": '#abcdef',
        "font-size": '20px'
    }));
</script>

通过上面的示例可以知道：
html函数：不穿参数，或一个字符串做为参数；
css函数： 一个字符串为参数，或一个字符串数组，或两个字符串，或一个对象；

在设计access的时候要充分考虑到以上的情况。

    jQuery.extend({
        access: function(elements, func, key, value) {
           //element可能是一个，也可能是多个
           var len = elements.length;
           var testing = key === null;
           var chain, cache, i = 0;
           var name;
           if(key !== null && jQuery.isPlainObject(key)) {
              chain = true; //要返回对象
              // 批量设置属性, 递归调用access
              for(name in key) {
                 jQuery.access(elements, func, name, key[name]);
              }
           }
           if(value !== undefined) {   // 需要设置chain 凭证
              chain = true; //要返回对象
              if(testing) {
                  cache = func;
                  func = function(key, value) {
                    cache.call(this, value);
                  };
              }
              for(; i < len; i++) {
                func.call(elements[i], key, value);
              }
           }
           return chain ? elements : (testing ? func.call(elements[0]) : func.call(elements[0], key));
        },
        content: function(elem, value) {
           var nodeType = elem.nodeType;
           // 1 -> element, 9 - > document, 11 -> ducument fragment （文档碎片）
           if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
               elem.textContent = value;
           }
        },
        text: function(elem) {
            var nodeType = elem.nodeType;
            if (nodeType === 1 || nodeType === 9 || nodeType === 11) {
                return elem.textContent;
            }
        },
        style: function(elem, key, value) {
            var nodeType = elem.nodeType;  // 3 -> 文本，8 -> 注释comment
            if (!elem || nodeType === 3 || nodeType === 8 || !elem.style) {
                return;
            }
            elem.style[key] = value;
        }
    });
    // 在text方法中，key为null，要么什么都不传，要么传一个value就可以了。text本身并不需要key，只是底层是通过access实现的，
    // access为了支持css方法，所以需要key，因为css离需要key参数。
    // jQuery.access方法的参数：access(element, callbacks, key, value)
    jQuery.fn.extend({
       text: function(value) {
            return jQuery.access(this, function(value) {   // this -> jQuery对象
                //回调处理逻辑
                return value !== undefined ?  jQuery.content(this, value) : jQuery.text(this);
            }, null, value);
       },
       css: function(key, value) {
           return jQuery.access(this, function(key, value) {
                //回调处理逻辑
               return value !== undefined ? jQuery.style(this, key, value) : getComputedStyle(this, null).getPropertyValue(key) || undefined;
            }, key, value);
       }
    });

**Javascript面向对象设计

**

1. 什么是对象？
   ① 可以看得见，摸得着的东西；
   ② 可以理解的东西；

   ③ 可以指导思想或行动的东西；

2. 对象的特征？
   ① 对象具有唯一的标示性，用内存地址来体现；
   ② 对象是有状态的；
   ③ 对象是有行为的；

Note：JS对象具有高度灵活性（如：在运行状态中可以添加属性）。

1. JS对象的 属性描述对象
   JavaScript 提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”（attributes object）。每个属性都有自己对应的属性描述对象，保存该属性的一些元信息。

下面是属性描述对象的一个例子。

{
value: 123,
writable: false,
enumerable: true,
configurable: false,
get: undefined,
set: undefined
}
属性描述对象提供6个元属性。

（1）value：value是该属性的属性值，默认为undefined。

（2）writable：writable是一个布尔值，表示属性值（value）是否可改变（即是否可写），默认为true。

（3）enumerable：enumerable是一个布尔值，表示该属性是否可遍历，默认为true。如果设为false，会使得某些操作（比如for…in循环、Object.keys()）跳过该属性。

（4）configurable：configurable是一个布尔值，表示可配置性，默认为true。如果设为false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（value属性除外）。也就是说，configurable属性控制了属性描述对象的可写性。

（5）get：get是一个函数，表示该属性的取值函数（getter），默认为undefined。

（6）set：set是一个函数，表示该属性的存值函数（setter），默认为undefined。

Object.getOwnPropertyDescriptor()方法可以获取属性描述对象。它的第一个参数是目标对象，第二个参数是一个字符串，对应目标对象的某个属性名。
注意，Object.getOwnPropertyDescriptor()方法只能用于对象自身的属性，不能用于继承的属性。

var obj = { p: 'a' };
Object.getOwnPropertyDescriptor(obj, 'p')
// { 
//   value: "a",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Object.getOwnPropertyNames方法返回一个数组，成员是参数对象自身的全部属性的属性名，不管该属性是否可遍历。
这跟Object.keys的行为不同，Object.keys只返回对象自身的可遍历属性的全部属性名。

JS是基于原型的面向对象的语言。

Notes:
element.style: 只能获取到行内样式（内联样式）-（可读，可写）；
window.getComputedStyle()：可以获取外部样式表设置的样式（只读）；

Node Types
文档、元素、属性以及 HTML 或 XML 文档的其他方面拥有不同的节点类型。
存在 12 种不同的节点类型，其中可能会有不同节点类型的子节点：