underscore.js依赖库函数分析二（查找）

查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素,则返回的就是一个数组,如果没有找到符合条件,则返回一个空的数组.接下来一个个分析: find()函数: 该函数根据iterator迭代器中的自定义函数条件,在集合列表中查找符合条件的第一个元素,如果找到,则返回第一个元素,否则返回“undefined”. 实例: /** * Created by…

underscore.js依赖库函数分析一（遍历）

Underscore简介: underscore是一个非常简洁,实用的javascript库,和jQuery封装类型差不多,但underscore是backbone的依赖库,想运行backbone就必须先引入underscore.js.“_”开头是依赖库underscore的一个特征,用于区分其他库函数名.“.” 以后就是函数的名称. Underscore函数: underscore中封装了60多个函数,供开发者使用,接下来我进行分类一个个分析. 1.遍历在underscore中,提供了ea…

underscore.js 源码分析5 基础函数和each函数的使用

isArrayLike 检测是数组对象还是纯数组 var property = function(key) { return function(obj) { return obj == null ? void 0 : obj[key]; }; }; var getLength = property('length'); var isArrayLike = function(collection) { var length = getLength(collection); return typeo…

Vue.js 源码分析(二十七) 高级应用异步组件详解

当我们的项目足够大,使用的组件就会很多,此时如果一次性加载所有的组件是比较花费时间的.一开始就把所有的组件都加载是没必要的一笔开销,此时可以用异步组件来优化一下. 异步组件简单的说就是只有等到在页面里显示该组件的时候才会从服务器加载,不显式的话就不会加载,这样即可提高客户端的访问速度也可以降低对服务器的请求次数,可谓优化的一个利器. 异步组件常用有3种异步组件的实现:工厂函数.Promise加载和高级异步组件. 注:一般的项目都是在vue-router的路由里面创建vue-router实例时通过…

Vue.js 源码分析(二十六) 高级应用作用域插槽详解

普通的插槽里面的数据是在父组件里定义的,而作用域插槽里的数据是在子组件定义的. 有时候作用域插槽很有用,比如使用Element-ui表格自定义模板时就用到了作用域插槽,Element-ui定义了每个单元格数据的显示格式,我们可以通过作用域插槽自定义数据的显示格式,对于二次开发来说具有很强的扩展性. 作用域插槽使用<template>来定义模板,可以带两个参数,分别是: slot-scope ;模板里的变量,旧版使用scope属性 slot ;该作用域插槽的nam…

Vue.js 源码分析(二十九) 高级应用 transition-group组件详解

对于过度动画如果要同时渲染整个列表时,可以使用transition-group组件. transition-group组件的props和transition组件类似,不同点是transition-group组件的props是没有mode属性的,另外多了以下两个props tag 标签名 moveClass 新增/移除元素时的过渡 ;如果未指定则默认会拼凑出name+"-move"这个格式的,一般很少用到,比较复杂的动画可以该…

Vue.js 源码分析(二十八) 高级应用 transition组件详解

transition组件可以给任何元素和组件添加进入/离开过渡,但只能给单个组件实行过渡效果(多个元素可以用transition-group组件,下一节再讲),调用该内置组件时,可以传入如下特性: name 用于自动生成CSS过渡类名例如:name:'fade'将自动拓展为.fade-enter,.fade-enter-active等 appear 是否在初始渲染时使用过渡默认为false css 是否…

Vue.js 源码分析(二十五) 高级应用插槽详解

我们定义一个组件的时候,可以在组件的某个节点内预留一个位置,当父组件调用该组件的时候可以指定该位置具体的内容,这就是插槽的用法,子组件模板可以通过slot标签(插槽)规定对应的内容放置在哪里,比如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script s…

Vue.js 源码分析(二十四) 高级应用自定义指令详解

除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 官网介绍的比较抽象,显得很高大上,我个人对自定义指令的理解是:当自定义指令作用在一些DOM元素或组件上时,该元素在初次渲染.插入到父节点.更新.解绑时可以执行一些特定的操作(钩子函数() 自定义指令有两种注册方式,一种是全局注册,使用Vue.directive(指令名,配置参数)注册,注册之后所有的Vue实例都可以使用,另一种是局部注册,在创建Vue实例时通过directives属性创建局部指令,局…

Vue.js 源码分析(二十三) 指令篇 v-show指令详解

v-show的作用是将表达式值转换为布尔值,根据该布尔值的真假来显示/隐藏切换元素,它是通过切换元素的display这个css属性值来实现的,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsde…

Vue.js 源码分析(二十二) 指令篇 v-model指令详解

Vue.js提供了v-model指令用于双向数据绑定,比如在输入框上使用时,输入的内容会事实映射到绑定的数据上,绑定的数据又可以显示在页面里,数据显示的过程是自动完成的. v-model本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理.例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti…

Vue.js 源码分析(二十一) 指令篇 v-pre指令详解

该指令会跳过所在元素和它的子元素的编译过程,也就是把这个节点及其子节点当作一个静态节点来处理,例如: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/…

Vue.js 源码分析(二十) 指令篇 v-once指令详解

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值,例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变,插值处的内容都会自动更新. 可以给DOM节点添加一个v-once指令,这样模板只会在第一次更新时显示数据,此后再次更新该DOM里面引用的数据时,内容不会自动更新了,例如: <!DOCTYPE html> <html lang="en"> <head> <me…

Vue.js 源码分析(二) 基础篇全局配置

Vue.config是一个对象,包含Vue的全局配置,可以在启动应用之前修改下列属性,如下: ptionMergeStrategies ;自定义合并策略的选项silent ;是否关闭警告,默认为false,如果设置true,那么将不会有各种报错productionTip ;开发模式下是否在控制台显示生产提示,即一条You are running Vue in development mode提示,设置false,即可关闭该提示devto…

underscore.js源码解析（五）—— 完结篇

最近公司各种上线,所以回家略感疲惫就懒得写了,这次我准备把剩下的所有方法全部分析完,可能篇幅过长...那么废话不多说让我们进入正题. 没看过前几篇的可以猛戳这里: underscore.js源码解析(一) underscore.js源码解析(二) underscore.js源码解析(三) underscore.js源码解析(四) underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/undersc…

高德JS依赖分析工程及关键原理

一.背景高德 App 进行 Bundle 化后,由于业务的复杂性,Bundle 的数量非常多.而这带来了一个新的问题——Bundle 之间的依赖关系错综复杂,需要进行管控,使 Bundle 之间的依赖保持在架构设计之下. 并且,为了保证 Bundle 能实现独立运转,在业务持续迭代的过程中,需要逆向的依赖关系来迅速确定迭代的影响范围.同时,对于切面 API(即对容器提供的系统 API,类似浏览器中的 BOM API),也需要确定每个切面 API 的影响范围以及使用趋势,来作为修改或下线某个 A…

underscore.js源码解析（二）

前几天我对underscore.js的整体结构做了分析,今天我将针对underscore封装的方法进行具体的分析,代码的一些解释都写在了注释里,那么废话不多说进入今天的正文. 没看过上一篇的可以猛戳这里:underscore.js源码解析(一) underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3 _.each _.…

深入解析Backbone.js框架的依赖库Underscore.js的作用

这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依赖underscore.js才能够使用,它必须通过underscore中的函数来完成访问页面元素.处理元素的基本操作. 注:backbone可以很好的与其它js库一起工作,所以说它是一个库,而不是框架. Underscore并没有对原生对象进行扩展,而是调用_()方法进行封装,一旦封装完成,js对象…

HiShop2.x版本中的上传插件分析，得出所用的模板语言为Underscore.js 1.6.0且自己已修改

效果: 上传组件非常的酷,但是分析其使用JS写法使用了模板语言的,代码如下: <script type="text/j-template" id="tpl_popbox_ImgPicker_listItem"> <# _.each(dataset,function(url){ #> <li> <span class="img-list-overlay"><i class="img-l…

Underscore.js 1.3.3 源码分析收藏

Underscore是一个提供许多函数编程功能的库,里面包含了你期待(在Prototype.js和Ruby中)的许多功能.但是没有扩展任何内置的Javascript对象,也就是说它没有扩展任何内置对象的原型.它被定位为jQuery和Backbone.js的基础层源码注释转之网上他人之备注,特收藏以后方便阅读. // Underscore.js 1.3.3 // (c) 2009-2012 Jeremy Ashkenas, DocumentCloud Inc. // Underscore is…

underscore.js 分析第三天

// Create a safe reference to the Underscore object for use below. // 为Underscore对象创建一个安全的引用 // _为一个函数对象,它的实例服从单例模式. var _ = function(obj) { if (obj instanceof _) return obj; if (!(this instanceof _)) return new _(obj); this._wrapped = obj; }; 来一个最简单…

underscore.js源码解析（三）

最近工作比较忙,做不到每周两篇了,周末赶着写吧,上篇我针对一些方法进行了分析,今天继续. 没看过前两篇的可以猛戳这里: underscore.js源码解析(一) underscore.js源码解析(二) underscore.js源码GitHub地址: https://github.com/jashkenas/underscore/blob/master/underscore.js 本文解析的underscore.js版本是1.8.3 _.map/_.collect _.map = _.coll…

钉钉js依赖库学习

看别人用的依赖库的好处在于,你知道有什么可以用,什么可以借鉴.(钉钉——协作桌面应用) PS:人最怕是不知道,而不是你不会. 1. jQuery 钉钉使用了1.9.1版本的jQuery,jQuery作为一个最为广泛使用库,已经不用说明它是什么了. 学习地址:http://jquery.com/ PS:Includes Sizzle.js 2. jQuery Hotkeys jQuery插件,可用来监听键盘事件,几乎支持所有的组合键. 学习地址:https://github.com/jeresig…

WPF入门教程系列十二——依赖属性（二）

二. 依赖属性的优先级由于WPF 允许我们可以在多个地方设置依赖属性的值,所以我们就必须要用一个标准来保证值的优先级别.比如下面的例子中,我们在三个地方设置了按钮的背景颜色,那么哪一个设置才会是最终的结果呢?是Black.Red还是Azure呢? <Window x:Class="WpfApp1.WindowDepend" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xm…

（1）Underscore.js入门

1. Underscore对象封装 Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称"Underscore对象"). 你可以通过调用一个Underscore对象的value()方法来获取原生的JavaScript数据,例如: window.onload = function () { // 定义一个JavaScript内置对象 var jsData = …

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…

Underscore.js 源码学习笔记（下）

上接 Underscore.js 源码学习笔记(上) === 756 行开始函数部分. var executeBound = function(sourceFunc, boundFunc, context, callingContext, args) { if (!(callingContext instanceof boundFunc)) return sourceFunc.apply(context, args); var self = baseCreate(sourceFunc.prot…

Underscore.js 源码学习笔记（上）

版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行函数). var root = typeof self == 'object' && self.self === self && self || typeof global == 'object' && global.global === global &…

underscore.js学习笔记

一.理清概念 1.Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率,Underscore还可以被使用在Node.js运行环境.从API中,你已经可以看出,Underscore没有任何复杂的结构和流程,它仅仅提供了一系列常用的函数.如果你将API中的方法从头至尾用一遍,你就会对它非常了解. 2.Underscore并没有在原生的JavaScript对象原型中进行扩展,而是像jQuery一样,将数据封装在一个自定义对象中(下文中称“Underscore对象”).可以…

JS模块化编程（二）

背景我们常在页面引用js遇到下面情况 <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></script> <script src="4.js"></script> <script src="5.js"…

【underscore.js依赖库函数分析二（查找）】的更多相关文章