决心从java后台转做前端有些日子了,不断关注前端知识.从学习了nodejs的 require按需加载模块的思路之后感觉js的世界变得好美好啊,前几天无意看到了seajs,国内大牛的作品,专为前端js模块化而设计,项目地址.遂学习了一把,并且把该项目examples的第一个例子做成了一个jQuery的插件,分享如下: 1.项目目录 HelloSeaJS                                项目目录 --app                         存放html…

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

一.前端模块化 关于前端模块化,参考以下链接 : https://github.com/seajs/seajs/issues/547 http://www.cnblogs.com/huiguo/category/1125329.html 二.SeaJS SeaJS:SeaJS 是一个适用于 Web 浏览器端的模块加载器,主要为了实现JS文件的异步加载以及管理模块之间的依赖性.在 SeaJS 的世界里,一个文件就是一个模块.所有模块都遵循 CMD 规范. 三.CMD规范 参考https://git…

标签:seajs   nodejs   npm   spm   js 1. 概述 本文章来源于本人在项目的实际应用中写下的记录.因初期在安装和使用Seajs和SPM的时候,有点不知所措的经历.为此,我们编写本文档,通过图文并茂的方式来为大家讲解seajs和spm编译环境的搭建和基本使用方法. 2. 认识SEAJS seajs是一种前端模块化加载框架,与jQuery等javascript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目…

目录 一:前端模块化概要 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…

先列举下一些著名言论: "我想定义一个 each 方法遍历对象,但页头的 util.js 里已经定义了一个,我的只能叫 eachObject 了,好无奈." "RequireJS 是没有明显的 bug,SeaJS 是明显没有 bug." "在用SeaJS,除了打包非常痛苦外,其他的还好" "你变了精彩的魔术,我们会为你喝彩.但你想让我们信任你,你得主动解释魔术的奥秘.否则我会觉得自己被耍了." "这两个加载器和标准没…

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

模块化的开发方式可以提高代码复用率,方便进行代码的管理.通常一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块系统.前端模块化的演进过程可以看看阮一峰老师的文章.本文主要介绍各规范下的模块化实现方式. 一.CommonJS Node.js是commonJS规范的主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module.exports.require.global.实际使用时,用module.e…

前端模块化开发的价值 AMD (中文版) CMD 模块定义规范 标准构建 http://seajs.org http://chaoskeh.com/blog/why-seajs.html http://www.cnblogs.com/leoo2sk/archive/2011/06/27/write-javascript-with-seajs.html www.xidea.org/project/jsi/…

使用seaJs也有一阵子了,一直也想抽个时间写个这方面的博客,直到今天才写……也许写的不是很完善,但跟大伙分享也是一种乐趣,不对之处欢迎指出.[抱拳] 时间有限,我这里不过多介绍前端模块化,有兴趣可以去了解. 一.写在前面 seaJs出自前端工程师玉伯之手,一个文件就是一个模块,实现JavaScript的模块化及按模块加载.使用SeaJS可以提高JavaScript代码的可读性和清晰度,确保各个JS文件先后加载的顺序,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便…

模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一个模块,可以是JS 模块,也可以是 CSS 模块,或是 Template 等模块.在 Sea.js 里,我们专注于 JS 模块(其他类型的模块可以转换为 JS 模块):模块是一段 JavaScript 代码,具有统一的基本书写格式.模块之间通过基本交互规则,能彼此引用,协同工作(怎么书写以及交互规则…

前端模块化和AMD.CMD规范 先看下基础:https://github.com/seajs/seajs/issues/547…

问题由来,为什么要前端模块化管理: 假设我们有个组件名为Acomponent.js, 是架构封装的,里面依赖另一个公司公用库common.js: 那我们引入Acomponent.js的时候,怎么知道要引入common.js? 看文档? demo写的往往忘掉写这些,如果类似common.js太多,那只能引入后人工排错; 事实上作为一个使用方,我并不想关心这些: java 的maven和.net的Nuget 的引入,就是为了解决相互依赖这种问题: 使用方引入一个包,并不需要挨个引入它需要的包,完全自…

文章链接 WEB 前端模块化都有什么? 知识点 根据平台划分 浏览器 AMD.CMD 存在网络瓶颈,使用异步加载 非浏览器 CommonJS 直接操作 IO,同步加载 浏览器 AMD 依赖前置 requirejs CMD 就近依赖 seajs AMD 与 CMD 都是在页面初始化时加载完成所有模块,唯一的区别就是就近依赖是当模块被 require 时才会触发执行. CommonJS 的模块,是一个对象 console.log('b.js ', require('./a.js').x); 可以看成…

我们知道,在NodeJS之前,由于没有过于复杂的开发场景,前端是不存在模块化的,后端才有模块化.NodeJS诞生之后,它使用CommonJS的模块化规范.从此,js模块化开始快速发展. 模块化的开发方式可以提供代码复用率,方便进行代码的管理.通常来说,一个文件就是一个模块,有自己的作用域,只向外暴露特定的变量和函数.目前流行的js模块化规范有CommonJS.AMD.CMD以及ES6的模块系统.下面开始一一介绍: CommonJS NodeJS是CommonJS规范的主要实践者,它有四个重要的环…

先来说一下前端模块化的价值:引用模块此处有详细的介绍,可以自行前往观看. 一.总结如下优点: (1)解决命名冲突(2)烦琐的文件依赖(3)模块的版本管理(4)提高可维护性(5)前端性能优化(6)跨环境共享模块 二.加载器的基本思路: 如何去定义我们的模块? 如何将我们定义的模块去合并? 我们想一下,如果我们正常的引用入js到页面我们需要做神马事情,是否是使用:<script type="text/javascript" src="xxx"></sc…

详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不在,这时,使日渐增多的js代码变得合理有序就显得尤为必要,也应运而生了很多模块化工具.从服务器端到浏览器端,从原生的没有模块系统的`<script>`到基于Commonjs和AMD规范的实现到ES6 modules.为了模块化和更好的模块化,我们总是走在探索的路上. 但是这些实现模块化的方法或多或…

前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果B依赖A,那么必须在B文件前面先加载好A.如果使用了模块化,只需要在模块内部申明依赖即可. AMD规范 & CMD规范 说到前端模块化,就不得不提AMD规范(中文版.英文版)和CMD规范(英文版) 它们的区别: http://www.zhihu.com/question/20351507 http:…

 随着web应用的发展,前端的比重占得越来越多,编写代码从而也越来越复杂.而通常我们需要将不同功能或者不同模块的代码分开写,最后在html中一起加载,这样做是可以的,但是当你需要进行维护或者是二次开发的时候,你会觉得十分费劲,因为你不知道文件之间复杂的关系,所以我们需要利用一些插件来配合进行模块化的开发. 所谓模块化的开发,写过nodejs的人都知道,文件之间的依赖可以用require()实现,但是浏览器端是不支持这样的依赖形式的,而browserify却可以解决这个问题,再加上gulp这个强大…

前端构建工具 面对日益复杂的前端环境以及前端技术.node技术的高速发展,前端的开发也越来越工程化,体系化,也就是出现了前端自动化构建工具.他们完成的任务目标基本是: js,css,图片的自动压缩合并(图片也即是是自动sprite) js,css,图片自动添加域名 js,css,图片自动添加md5或版本号 自动监听文件变化 sass/less/coffee等的自动编译 支持amd/cmd的模块开发,可自动文件依赖 可以部署文件 网页自动刷新 实时编译 成熟的前端构建工具也有很多,比如:Gulp.…

从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是浏览器它本身是并不能够"理解"这些语法的呀.就像下面这张图:       在开发代码文件 --> 生产代码文件的转换过程中,我们到底需要做些什么呢?没错,这一切都和webpack(或gulp)有关:       转一张webpack官网的图,webpack能把less/sass文件,…

前言 前端模块化能解决什么问题? 模块的版本管理 提高可维护性 -- 通过模块化,可以让每个文件职责单一,非常有利于代码的维护 按需加载 -- 提高显示效率 更好的依赖处理 -- 传统的开发模式,如果B依赖A,那么必须在B文件前面先加载好A.如果使用了模块化,只需要在模块内部申明依赖即可. AMD规范 & CMD规范 说到前端模块化,就不得不提AMD规范(中文版.英文版)和CMD规范(英文版) 它们的区别: http://www.zhihu.com/question/20351507 http:…

从开发文件到生产文件   有一天我突然意识到一个问题,在使用react框架搭建应用时,我使用到了sass/less,JSX模版以及ES6的语法在编辑器下进行开发,使用这些写法是可以提高开发的效率.可是浏览器它本身是并不能够“理解”这些语法的呀.就像下面这张图:       在开发代码文件 --> 生产代码文件的转换过程中,我们到底需要做些什么呢?没错,这一切都和webpack(或gulp)有关:       转一张webpack官网的图,webpack能把less/sass文件,json文件,乃…

legend3---11.php前端模块化开发 一.总结 一句话总结: 把常用的前端块(比如课程列表,比如评论列表)放进模块列表里面,通过外部php变量给数据,可以很好的实现复用和修改 页面调用 @php $lesson_list=$lessons; @endphp @include('home.module.lesson_list') lesson_list模块 {{--1.用php变量接收外部变量,在外部要把lesson数据赋值给$lesson_list--}} <div class="…

前言: <!DOCTYPE html> <html> <head> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <body> <!-- 前端模块化的必须性. 由于展示的方便性,将以下多个scrit块视为多个script文件 --> <!-- 小明…

随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函数统一放在 util.js 里.需要用到时,引入该文件就行.这一切工作得很好,同事也很…

在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完全避免冲突 // JavaScript Document /*var a = 10; function tab(){} function drag(){} function dialog(){}*/ var miaov = {}; //名字比较长 , 只能降低冲突,不能完全避免 miaov.a =…

1.seaJS手记 一:Bower获取 要安装bower Npm install -g bower Bower install seajs 二:Use方法是整个项目的入口方法,通常一个项目中只调用一次即可 方法接受两个参数 第一个参数表示引入模块的路径 可以是一个字符串,此时引入一个文件 也可以是一个数组,每个成员表示一个文件地址 第二个参数是一个回调函数 作用是全局作用域 回调中的参数个数与前面加载的模块一一对应 三:Seajs中根目录就是seajs所在的目录: 在使用seajs时候,要将se…

说在前面 上午给大家分享的个人认为比较全,比较官方,比较清晰的grunt使用教程,被挪出首页了,不过没关系,毕竟不是原创,大家想看,我现在贴出地址: http://www.cnblogs.com/sybboy/p/4877055.html 下面可是我自己的东西,算是这段时间搞前端架构的总结吧: 目录 1.遇到的问题 2.目标 3.如何解决 4.结果分析 5.尚未解决 遇到的问题 问题1----脚本混乱,没有层次和固定代码位置 问题2----脚本和css请求较多,请求未压缩,文件未压缩合并 问题3…

在JavaScript发展初期就是为了实现简单的页面交互逻辑,寥寥数语即可:如今CPU.浏览器性能得到了极大的提升,很多页面逻辑迁移到了客 户端(表单验证等),随着web2.0时代的到来,Ajax技术得到广泛应用,jQuery等前端库层出不穷,前端代码日益膨胀 这时候JavaScript作为嵌入式的脚本语言的定位动摇了,JavaScript却没有为组织代码提供任何明显帮助,甚至没有类的概念,更不用说模块(module)了,JavaScript极其简单的代码组织规范不足以驾驭如此庞大规模的代码 模…