框架封装基础

解决污染的几种方式

    污染：全局变量！  

• 函数

  把所有的全局函数和变量使用一个函数包裹，这样的话对全局的污染源就只有一个    
  

• 对象

  把所有的属性和函数设置给一个对象，然后通过对象访问属性和方法  
  

• 立即函数（匿名函数）

• 将我们需要的值赋值给任意一个全局变量，使其成为这个变量的值/方法

  • 存在的问题：无法在外部使用函数内部定义的变量和函数

  • 解决方法：

    • 将我们需要的值/方法赋值给window，使其成为一个window对象的属性或者方法 ；也就是把所有的属性和方法挂在一个对象，然后让这个对象成为window的属性，

    //通过传参，可以让程序减少查找过程 优化代码
    (function(win){
        var name = 'leo',
            age = 18,
            say = function(){
                console.log('say hello world')
            },
            json = {
                name : name,
                age : age,
                say : say
            };
    
            window[json] = json;
    })(window)

• return

  • 必须定义一个变量接收
  • 在内部定义在内部定义一个return 对象，
  • 然后 通过变量访问需要的内容

• 零污染框架雏形

  (function(win){
      var $$ = {
          //我是封装的框架
      }
  
      win.$ = $$
  })(window)
  

模块化

• 模块化的好处

  主要解决命名冲突的，文件依赖的问题
  

• 基于文件的模块化

  • require.js
  • sea.js

• 命名空间的模块化

  (function(win){
      /*框架最顶层*/
      var $l = {}
  
      /*公共模块*/
      $l.common = {}
  
      /*字符串*/
      $l.common.str = {}
  
      /*数组*/
      $l.common.arr = {}
  
      /*数字*/
      $l.common.num = {}
  
      /*判断类型*/
      $l.common.type = {}
  
      /*事件*/
      $l.common.event = {}
  
      /*选择*/
      $l.common.selector = {}
  
      /*css*/
      $l.common.css = {}
  
      /*属性*/
      $l.common.attr = {}
  
      /*内容*/
      $l.common.html = {}
  
      /*ajax*/
      $l.common.ajax = {}
  
      /*动画*/
      $l.common.animation = {}
  
      win.$ = win.$l = $l;
  })(window)

链式访问

• 什么是链式访问

  $('id').addClass('active').css({height:100}).attr('data-src','www.hellowrold.cc')  
  就是可以无限调用
  

• 链式访问的实现

  在函数执行完毕以后返回对象本身,只有方法返回当前对象，才能访问对象的属性和方法 
  

  (function(win){
      var $$ = {
          //我是封装的框架
          on:function(type,fn){
              //do somethin
              this.addEventListener(type,fn);
              return this
          },
          of:function(type,fn){
              this.removeEventListener(type,fn)
              return this
          }
      }
  
      win.$ = $$
  })(window)

jQuery原理

• 定义一个fn
• 然后给fn的原型添加方法
• return new fn()

 (function(win){
        //新建对象
        var fn = function(str){
            this.elem = [];
            this.selecto(str)
        }
        //给对象原型添加方法
        fn.prototype = {
            select:function(str){
                this.elem = document.querySelectorAll(str)
            }
        }

        //返回对象 实现调用
        function $(str){
            return new fn(str)
        }
 })(window)