JavaScript框架学习笔记（一）

Shonim 发布于2019-08-19 18:10 / 2826人阅读

摘要：基本的学习思路是跟着框架设计这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读的博客和学习资料。当然，最重要的资料还是框架的源代码。后来由于开发者反对，新兴的框架都在命名空间上构建。

JavaScript框架学习笔记（一） 我为什么要学习框架

更深入的理解工具，以后用起来更顺手而且也能做一定的工具取舍，学习理解新工具也就更快，

对提升js水平也很有帮助，框架有很多解决“坑”的经典思路，学习这些对提升开发能力很有帮助。

基本的学习思路是跟着《JavaScript框架设计》这本书，甚至可以说是这本书的读书笔记。也参考很多网上解读jquery的博客和学习资料。当然，最重要的资料还是框架的源代码。

基本学习的框架就是jQuery，也会看看其他库的实现

我不是大神，很多知识估计也没有理解正确，欢迎指出，仅供参考。

1 种子模块 1.1 解决命名空间问题

早期的一些prototype.js库并没有命名空间，它的意义是渗透到JavaScript，DOM中去，希望对原生对象的原型进行扩展。后来由于开发者反对，新兴的框架都在命名空间上构建。
一般的写法都是使用IIFE解决,一般如下两种写法：

(function foo(){...})()
(function(){}(..))

两种写法功能上是一致的.
IIFE可以把他们当函数调用比传递参数。

(function IIFE(global){
    //code
})(window)

一般都是将window传递进去，但现在很多js的非游览器应用领域没有window，所以jquery一些处理办法是又接受一个factory参数：

For CommonJS and CommonJS-like environments where a proper window
   is present, execute the factory and get jQuery.
For environments that do not have a window with a document(such as Node.js), expose a factory as module.exports.
This accentuates the need for the creation of a real window.e.g. var jQuery = require("jquery")(window);

很多前端框架都想要$这个命名空间，jQuery一开始很弱小，但又想要跟多人使用，因此实现了一种多库并存的机制。后成为很多小库的标配，实现很简单：

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

其实就是先把可能存在同名变量保存起来，再放回去。当用户执行

jQuery.noConflict();

就将$的控制权交出去，以后执行$()的时候就是其他库了，如果将deep变量传入true，则将jQuery的控制权也交出去了。

1.2 对象扩展

很多库在扩展方法里还需判断是否覆盖和合并问题，但基本实现对库的扩展比较简单，就是添加一个对象罢了。

function extend(destination,source){
    for(var destination in source){
        destination[property] = source[property];
    }
    return destination;
}

1.3 数组化

这个解决的问题是讲很多像document.getElementByTagName()方法返回的HTMLCollection或者NodeList这样的类数组转化为数组。
为什么做这样转化，因为数组有很多便利的操作。
各个库的实现原理核心也就是调用Array.prototype.slice.call(arguments);这个方法。

1.4 类型的判定

js的经典问题：isXXX系列。主要是js的typeof这些自带的检测方法不靠谱.这类方法在框架实现来说很重要，但说实话自己没怎么仔细看，因为要考虑各个游览器的兼容，感觉都是带有很技巧方面的知识，暂且翻过。

云服务器 GPU云服务器 javascript学习笔记学习笔记一 javascript框架学习学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79277.html

前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

FullStackDeveloper 2019-08-22 16:48 评论0 收藏0
前端学习路线

摘要：具体来说，包管理器就是可以通过命令行，帮助你把外部库和插件放到你的项目里面并在之后进行版本升级，这样就不用手工复制和更新库。现在有的包管理器主要是和。一、基础 1、学习HTML基础 HTML给你的网页赋予了结构。它就像是人的骨架那样让你保持站立。首先你需要去学习语法以及它必须提供的一切。你的学习应该聚焦在下面这些东西上：学习HTML基础，了解如何编写语义HTML 理解如何把网页分...

20171112 2019-08-29 15:12 评论0 收藏0
Vue2.x 的笔记：第一次的感受 Vue 开篇

摘要：在互联网高速发现的今天，可以说每天都在变化着一不留神你就会错过一个亿，所以你不得不时刻的保持着高度的专注。如今为代表的三个框架已然成为了主流成为统治者，呈现了三分天下的局面。有人说如今是框架的时代，只要会一个框架就能开始干活了。在互联网高速发现的今天，可以说每天都在变化着一不留神你就会错过一个亿，所以你不得不时刻的保持着高度的专注。互联网的信息是多元的，大量的，在海量的信息中很容易...

Lowky 2019-08-26 12:19 评论0 收藏0
26天学通前端开发（配资料）

摘要：网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。天了解一个前端框架。也可以关注微信公众号晓舟报告，发送获取资料，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。前言好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。网上有很多前端的学习路径文章，大多是知...

blair 2019-08-21 16:59 评论0 收藏0