14 - 프레임 캡슐화
jquery ：jQuery $,
，
， jQuery 。
2.2.0 버전
(function(w,factory){
console.log(' ');
factory();
}(window,function(){
return jQuery;
}));
1.7 버전
(function(w){
//
function jQuery(){
return new jQuery.fn.init();
}
//
jQuery.fn = jQuery.prototype ={
};
// init jQuery
var init = jQuery.fn.init = function(){
};
// jQuery
init.prototype = jQuery.fn;
//
w.jQuery = w.$ = jQuery;
}(window));
3. jQuery 플러그인 구현 메커니즘
jQuery.fn.alert = function(msg){
alert(msg);
};
fn에 추가
4. 입구 함수 init
$공장을 통해 최종적으로 init구조 함수에 도달하였습니다. 모든 초기화 실례 과정이 이곳에서 이루어졌기 때문에 이곳을 입구함수라고 부릅니다.
5. 입구 함수 실현 사고방식
==jq 입구가 서로 다른 매개 변수에 대한 처리 법칙:==
==입구 함수 논리 구현:==
funciton init(selector){
// null、undefined、0、NaN、'' （ ）
if(!selector){
return this;
}
// ， html
else if(typeof selector == 'string'){
// ， DOM， 。 , length>=3, html
if( html ){
/*
1、 div
2、 div innerHTML html
3、 div this ， length
4、 push ， apply
*/
}
// DOM， DOM
else {
/*
* ：
* 1、 querySelectorAll
* 2、 this ， length ，
* push ， apply 。
* */
}
}
/*
* ：
* 1、 window ，
* 2、 toString
* 3、
* ： ， ，
* ：[ 0:1, , , ] ， false， 。
* 3.1、 length ，
* 3.2、 ， length 0， 0，OK ，
* 3.3、 length 0， length - 1 ， ，OK 。
* ， 。
* */
else if ( ) {
/*
* ：
* ， length ，
* push ， apply 。
* */
}else {
/*
* ：
* ，length 1 。
* */
}
}
6. 코드 블록
：
， ，
：
({}).toString()
{}.toString();
7. window의length 속성은 페이지의 iframe 수량을 나타낸다
window에는 자신을 가리키는 window 속성이 있습니다
8. 수조를 봉인하는 trim 방법
function trim(str){
if(typeof str!== 'string'){
return str;
}
if(str.trim){
return str.trim();
}
return str.replace(/^\s+|\s+$/g,'');
}
다음 날 핵심 방법==> 중간 수준
jQuery.extend({
isFunction: function( fn ) {
return typeof fn === 'function';
}
});
jQuery.prototype.extend({
alert: function( msg ) {
alert( msg );
}
});
jQuery.isFunction([])
var $$ = new jQuery();
$$.alert( ' ' );
==구조 함수는 자신의 원형에서 방법을 사용할 수 없습니다(Function 예외)==
==실례는 구조 함수에 있는 정적 방법을 직접 사용할 수 없다==
2, IE8 중 apply 문제
apply this ， ，
IE8，apply ， 。
IE8에서 사용자 정의 위조 그룹을 진수 그룹으로 변환해야 apply를 빌릴 수 있습니다.수조의 슬라이스 방법을 빌려 위조수조를 통해 진수조를 얻다
//
[].splce.call( )
//
[].push.apply( ，[].splice.call( ));
3. 입구 함수
， jQuery，
。 DOM 。
$(function(){
//
})
==IE9+==
document.addEventListener( 'DOMContentLoaded', function() {
var spans = document.querySelectorAll( 'span' );
console.log( spans, 'DOMContentLoaded');
} );
==IE8 호환 ==
document.attachEvent( 'onreadystatechange', function() {
if ( document.readyState === 'complete' ) {
/*var spans = document.querySelectorAll( 'span' );
console.log( spans, 'DOMContentLoaded');*/
/* */
}
4, jQ 원형 핵심 방법
5.each 방법
function each(obj,fn){
var i,len,key;
if('length' in obj){
for(i = 0,len=obj.length;i6、맵 구현
function map( obj, fn ) {
/*
* 1、 obj ，
* 2、 ， i
* 3、 ， for in
* 4、 ， key val 。
* 5、 ， ， 。
* */
var i, len, key, result = [];
if( 'length' in obj ) {
for ( i = 0, len = obj.length; i < len; i++ ) {
result.push( fn.call( obj[ i ], obj[ i ], i ) );
}
}else {
for ( key in obj ) {
result.push( fn.call( obj[ key ], obj[ key ], key ) );
}
}
return result;
}
console.log(map(obj, function (val, key) {
console.log(val, key, this);
}));
3일차 DOM 작업 ==> 중간
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
