框架封装基础

解决污染的几种方式

污染：全局变量！

函数

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

对象

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

立即函数（匿名函数）

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

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

解决方法：

将我们需要的值/方法赋值给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.jssea.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)