LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化.LABjs 是一个文件加载器. RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价值是让 JavaScript 的模块化开发变得更简单自然. 模块加载器一般可降级为文件加载器用,因此使用 RequireJS 和 SeaJS,也可…

本文的目的是为了能大让家更好的认识 Mod,之所以引入 RequireJS/SeaJS 的对比主要是应大家要求更清晰的对比应用场景,并不是为了比较出孰胜孰劣,RequireJS 和 SeaJS 都是模块化漫漫之路的先驱者,向他们致敬! 为工程化为生的Mod 模块化是一种处理复杂系统分解成为更好的可管理模块的方式,它可以把系统代码划分为一系列职责单一,高度解耦且可替换的模块,采用模块化可以让系统的可维护性更加简单易得. JavaScript 并没有为开发者们提供以一种简洁.有条理地的方式来管理模块…

在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 玉伯(王保平),淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人. CSDN:先介绍一下自己和目前的工作吧! 玉伯:…

摘要:玉伯,淘宝前端类库 KISSY.前端模块化开发框架SeaJS.前端基础类库Arale的创始人.本期[开源专访]我们邀请玉伯来为我们分享一些关于前端框架.前端开发的那些事,以及前端大牛是如何炼成的. 在Web应用程序的用户体验越来越被重视的今天,前端开发的地位也上升到了前所未有的高度,而随之而来的也有更多的挑战. 为了将前端开发者繁重的工作变得简单,框架应运而生.国内也不乏一些非常优秀的前端开发框架.本期[开源专访]我们邀请到了国内前端大牛玉伯(@玉伯也叫射雕),请他为我们分享一些关于前端框…

前文 的最后给出了玉伯的一道课后题,今天我们来讲讲这题的思路. 题目是这样的: Number.MAX_VALUE + 1 == Number.MAX_VALUE; Number.MAX_VALUE + 2 == Number.MAX_VALUE; ... Number.MAX_VALUE + x == Number.MAX_VALUE; Number.MAX_VALUE + x + 1 == Infinity; ... Number.MAX_VALUE + Number.MAX_VALUE ==…

重构前的状态:    大量的js代码混在繁多的Jsp文件中,对第三方的js库依赖也很杂乱.虽然在部分交互性较强的页面中,将js代码分离到了独立的js文件中,但是代码结构及依赖管理依然很乱.不说新人来了无所适从,就是我自己看了,也会一头雾水.不是代码有多深奥,是看着实在太累.于是,一次重构工作开始了. 重构中的事情:    1.首先,整个项目的页脚页头都有用到一些js和js库,这些具有共性的js先抽离到一个独立的head.js与foot.js中,放到include文件夹下. 2.对于公用的js库,…

JavaScript 数组去重经常出现在前端招聘的笔试题里,比如: 有数组 var arr = ['a', 'b', 'c', '1', 0, 'c', 1, '', 1, 0],请用 JavaScript 实现去重函数 unqiue,使得 unique(arr) 返回 ['a', 'b', 'c', '1', 0, 1, ''] 作为笔试题,考点有二: 正确.别小看这个考点,考虑到 JavaScript 经常要在浏览器上运行,在千姿百态的各种浏览器环境下要保障一个函数的正确性可不是一件简单的事…

了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开发的概念,但是现阶段我们可以通过第三方控件来实现. 今天我就来给大家介绍下可以帮助我们实现前端模块化的工具——seaJs.如果对seaJs已经有实际使用经验的小伙伴可以直接忽略这篇文章. 如果有小伙伴了解requireJs,那么学习seaJs会相当的容易,因为requireJs也是前端模块化的构建工…

1.Sea.Js是什么 seajs相对于RequireJs与LabJS就比较年轻,2010年玉伯发起了这个开源项目,SeaJS遵循CMD规范,与RequireJS类似,同样做为模块加载器.示例 // File:greet.js define(function (require, exports) { function helloPython() { document.write("Hello,Python"); } function helloJavaScript() { docume…

随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌面应用.越来越庞大的前端项目,越来越复杂的代码,前端开发者们对于模块化的需求空前强烈.后来node出现了,跟随node出现的还有commonjs,这是一种js模块化解决方案,像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作.但是浏览器环境不同于Node,浏览器中获取一个资源必须要…

模块化是软件系统的属性,这个系统被分解为一组高内聚,低耦合的模块.理想状态下我们只需要完成自己部分的核心业务逻辑代码,其他方面的依赖可以通过直接加载被人已经写好模块进行使用即可.一个模块化系统所必须的能力: 定义封装的模块. 定义新模块对其他模块的依赖. 可对其他模块的引入支持. CommonJSnodeJs出现后使用了CommonJS规范来解决JS的模块化问题.由于Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,所以Comm…

本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而在chrchromium中,js是这样解析的:(其实第一章末尾已经有了) 至于一些步骤的解释,这里就不再复述了,不懂的请戳:浏览器渲染过程 拉至末尾. 简直就是大魔王有木有?心中可有一万只草泥马奔腾而过?为什么在所有的下载线程中: i.css加载不会阻塞页面 ii.images加载不会阻塞页面 ii…

前言 JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可: 随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 问题: 这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 一.模块 模块化:是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式. 在理想状态下我们只需…

引子 在研究完前面的vue开发后,其实已经可以自己开发点东西了,靠前面的指令集,组件,还有vue-router,还有异步请求这些知识点,是完全可以开发出来的,完全可以达到时下前后端分离的效果. 但是,你在开发的过程当中,可能会遇到很多问题,而你只能用很低端的手段来解决问题,也可能在开发中,会遇到大量重复代码,而且还没有个很好的解决办法,并且在以后实际开发中,并不会像前面那样,一个html页面就搞定所有了,绝对不会的,肯定会有很多个文件,各种库,各种包之类的,这里倒过来,那里倒过去,哪个放前面,哪…

目录 一:前端模块化概要 1.1.模块化概要 1.2.函数封装 1.3.对象封装 1.4.立即执行函数表达式(IIFE) 1.5.模块化规范 1.5.1.CommonJS 1.5.2.AMD((Asynchromous Module Definition) 异步模块定义 1.5.3.CMD(Common Module Definition)通用模块定义 1.5.4.UMD 1.5.5.原生JS模块化(Native JS) 1.5.6.小结 二.CommonJS 2.1.NodeJS中使用Comm…

早期的javascript版本没有块级作用域.没有类.没有包.也没有模块,这样会带来一些问题,如复用.依赖.冲突.代码组织混乱等,随着前端的膨胀,模块化显得非常迫切. 前端模块化规范如下: 一.前端模块化概要 1.1.模块概要 JavaScript在早期的设计中就没有模块.包.类的概念,开发者需要模拟出类似的功能,来隔离.组织复杂的JavaScript代码,我们称为模块化. 模块就是一个实现特定功能的文件,有了模块我们就可以更方便的使用别人的代码,要用什么功能就加载什么模块. 模块化开发的四点好…

随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌面应用.越来越庞大的前端项目,越来越复杂的代码,前端开发者们对于模块化的需求空前强烈.后来node出现了,跟随node出现的还有commonjs,这是一种js模块化解决方案,像Node.js主要用于服务器的编程,加载的模块文件一般都已经存在本地硬盘,所以加载起来比较快,不用考虑异步加载的方式,CommonJS 加载模块是同步的,所以只有加载完成才能执行后面的操作.但是浏览器环境不同于Node,浏览器中获取一个资源必须要…

本文原链接:https://cloud.tencent.com/developer/article/1177217 AMD && CMD 前言 一.模块 二.CommonJS 三.AMD 四.CMD 五. ES6 模块 前言 JavaScript初衷:实现简单的页面交互逻辑,寥寥数语即可: 随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 问题: 这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织…

vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript 经验总结 更多总结 猛戳这里 属性与方法 不要在实例属性或者回调函数中(例如,vm.$watch('a', newVal => this.myMethod())使用箭头函数.因为箭头函数会绑定父级上下文,所以 this 不会按照预期指向 Vue 实例,然后 this.myMethod 将是未定义.…

AMD AMD一开始是CommonJS规范中的一个草案,全称是Asynchronous Module Definition,即异步模块加载机制.后来由该草案的作者以RequireJS实现了AMD规范,所以一般说AMD也是指RequireJS. RequireJS的基本用法 通过define来定义一个模块,使用require可以导入定义的模块. //a.js //define可以传入三个参数,分别是字符串-模块名.数组-依赖模块.函数-回调函数 define(function(){ return…

看到很多人傻傻的分不清楚 AMD.CMD . commonJS . es6的区别,实际上这跟这几年前段技术的发展有很大的关系. 实际上这是JavaScript的模块化思想演进的一个过程. 最开始的时候我们都是在 首页 index.html 中,通过N多个<script>标签来引入各个js文件(每个js 文件就是一个单独的模块).这其中我们的加载先后的顺序非常的受限制.需要根据依赖的先后进行依次加载. AMD首先它是一个规范  全称是Asynchronous Module Definition,…

感谢玉伯在知乎的奉献,下面全文转载:http://www.zhihu.com/question/20342350/answer/14828786 LABjs 的核心是 LAB(Loading and Blocking):Loading 指异步并行加载,Blocking 是指同步等待执行.LABjs 通过优雅的语法(script 和 wait)实现了这两大特性,核心价值是性能优化.LABjs 是一个文件加载器. RequireJS 和 SeaJS 则是模块加载器,倡导的是一种模块化开发理念,核心价…

这篇文章主要介绍了SeaJS 与 RequireJS 的差异对比,本文主要对CMD规范和AMD规范的弊端做了对比,并做出了一个总结,需要的朋友可以参考下 “历史不是过去,历史正在上演.随着 W3C 等规范.以及浏览器的飞速发展,前端的模块化开发会逐步成为基础设施.一切终究都会成为历史,未来会更好.”——引用玉伯原文最后一段话,我个人也非常赞同.既然谈到了“未来”,我个人认为:前端 js 模块如果继续发展,其模块格式很可能会成为未来 WEB 一种标准规范,产生多种实现方式.就好比 JSON 格式一…

这几天看了下前端模块化的知识,主要是requirejs和seajs相关的知识,还未看es6的模块化知识. 由于目前项目组内的开始推广使用vue,并且开始简单的封装组件,但发现组件js的使用方式依然是原先的script标签引用方式,同时组件的template文件需作为字符串变量在组件js文件内封装,无法使用html标签的验证.补全.语法高亮等功能,此外多个小型组件组合成大型组件时,需要在每个使用到大型组件的html页面中把所有的小型组件js引入,代码重复并且容易出现遗漏情况.于是想到了前端模块化相…

RequireJS SeaJS CMD规范 CommonJS的规范: 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象 SeaJS定义模块方式 在 SeaJS 里,模块只有一种书写格式 define(function(require, exports, module) { var A = require('a'); A.do(); return function () {}; }); Requir…

RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺序来确定,项目会变得复杂难以维护. 复杂的脚本会暴露很多全局变量, 比如 $,_. ... . 同步加载的时候,网页会停止渲染,加载时间越长,网页失去响应的事件就越长. 于是,AMD 规范就诞生了,AMD 即为异步模块定义,有效避免同步加载导致页面的假死现象.RequireJS 是一个 AMD 的实现,后来…

一.扯淡部分 很久很久以前,也就是刚开始接触前端的那会儿,脑袋里压根没有什么架构.重构.性能这些概念,天真地以为前端===好看的页面,甚至把js都划分到除了用来写一些美美的特效别无它用的阴暗角落里,就更别说会知道js还有面向对象,设计模式,MVC,MVVM,模块化,构建工具等等这些高大上的概念了.现在想想还真是Too young too naive.前两天某大神在群里分享他招聘前端的心得的时候就说,就是那些以为能写两个页面就可以自称前端的人拉低了行业水平.这样看来前两年我还真的扯了不少后腿呢………

公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴奋的开始了seajs的学习,正好对模块化开发仰慕已久,终于有机会大展身手了! 一开始总是有点曲折的,我照着玉伯的github上的教程一步步来,然后发现在我引入jquery的时候,require到的jquery竟然是undefined,经过一番摸索,我发现原来jquery是基于amd规范的,seajs…

Seajs是什么及sea.js 由来,特点以及优势 这篇文章主要介绍了Seajs的相关知识和和学习心得,适合刚接触SeaJS的同学,需要的朋友可以参考下,有更好的新手教程或文档,欢迎推荐.分享   1.Seajs简介   Seajs,一个Web模块加载框架,追求简单.自然的代码书写和组织方式,:Sea.js 遵循 CMD 规范,模块化JS代码.依赖的自动加载.配置的简洁清晰,可以让程序员更多地专注编码.   2.Seajs优缺点   优点: 1).提高可维护性. 2).模块化编程. 3).动态加…

好久没有用seajs了,之前对spm也只是一知半解,这些天再次拿起来研究.谈谈我的认识与理解. 声明:本文不适合对seajs完全不了解的同学阅读.对于想知道seajs来龙去脉以及spm相关的同学"可能"有帮助.对于我自己也是个梳理的机会. 一.seajs部分 1.seajs由来: 传统web前端的js开发,主要基于script标签的引入,一个文件一个script标签,或者对他们进行简单的压缩与合并,以减少http请求. 没错,我们以前都是这么干的,甚至现在还有很多人这么干. 随着这些年…