requirejs

require.js使用 1. require.js介绍 ：可以帮助我们去管理项目的依赖关系，解决页面的变量冲突。 2. 新建以下目录 　　 app目录 ：放的是我们自定义的模块逻辑 　　 lib目录 ：放的是一些第三方的插件 　　 main.js ：是所有模块的主入口文件 　　 index.html ：模板文件　　 2. 目录内容 // main.js // requirejs.config：require.js的配置项 requirejs.config({ // 基础路径 baseUrl: "js/" , 模块的路径 paths: { config: "app/config" , view: "app/view" , http: "app/http" , index: "app/index" , jquery: "lib/jquery" , vue: "lib/vue" }, // 配置那些没有使用define规范的第三方插件 shim: { // 要配置的第三方插件的名字，当然vue是支持的，只是一个例子 "vue" : { // 第三方插件的依赖项 deps: [], // 导处去使用 exports: "vue" } } }) // 导入模块使用 requirejs([ "config" , "view" , "http" , "index" , "jquery" ,

这两天正好看到了程序员小卡同学的一篇博客，里面对requireJS路径的解析做了一些说明，里面有点问题待解决，我这里正好知道一点，所以整理成文，不知对小卡同学是否有帮助。 http://www.cnblogs.com/chyingp/p/3677425.html http://www.cnblogs.com/chyingp/p/requirejs-path-resolve.html 首先以其例子为例： requirejs.config({ baseUrl: 'js' }); // 依赖lib.js，实际加载的路径是 js/common/lib.js，而lib模块又依赖于util模块('./util')，解析后的实际路径为 js/common/util.js require(['common/lib'], function(Lib){ Lib.say('hello'); }); // 依赖util模块 define(['./util'], function(Util){ return { say: function(msg){ Util.say(msg); } }; }); 若是变个写法，util的目录结构就变了 requirejs.config({ baseUrl: 'js', paths: { lib: 'common/lib' } }); // 实际加载的路径是 js

1 为什么要模块化？ 在阮一峰的博客中已经阐述得非常清楚了 http://www.ruanyifeng.com/blog/2012/11/require_js.html 2 模块化编程 模块化也就是加载js，加载js依赖的管理和使用过程，由于js存在同步和异步加载模式相应的也就有了同步和异步加载模式，即cmd，amd同步主要用于加载时间很短，比如nodejs的本地加载，而异步加载amd则用于 很耗时间的场景中。这些都是有commonjs规范中制约着。 3 AMD的实现 requirejs，和curljs两者都实现了amd加载的方式，实际项目中requirejs使用较多 4 requirejs 其实requirejs有一个js目录的约定吧，他约定我们的js目录如下，appjs为我们的模块入口 www/ index.html js/ app/ sub.js lib/ jquery.js canvas.js app.js 1）requirejs加载js模块 通过require.config配置的paths进行，这里有一个根目录即baseUrl，这个很好理解，即js所在的相对根目录吧。 通paths配置的都不是直接在baseUrl目录下的js文件，他们可能是在本地其他目录，页可能是在网络cdn中 如 paths : { "jquery" : ["https://cdn.bootcss

3 月，跳不动了？>>> 什么是模块化开发？ 前端开发中，起初只要在 script 标签中嵌入几十上百行代码就能实现一些基本的交互效果，后来js得到重视，应用也广泛起来了， jQuery，Ajax，Node.Js，MVC，MVVM 等的助力也使得前端开发得到重视，也使得前端项目越来越复杂，然而， JavaScript 却没有为组织代码提供任何明显帮助，甚至没有类的概念，更不用说模块（module）了，那么什么是模块呢？ 一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。模块开发需要遵循一定的规范，否则就都乱套了。 根据AMD规范，我们可以使用 define 定义模块，使用 require 调用模块。 目前，通行的js模块规范主要有两种： CommonJS 和 AMD 。 AMD规范 AMD 即 Asynchronous Module Definition ，中文名是“异步模块定义”的意思。它是一个在浏览器端模块化开发的规范，服务器端的规范是 CommonJS 模块将被异步加载，模块加载不影响后面语句的运行。所有依赖某些模块的语句均放置在回调函数中。 AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出。 define() 函数 AMD规范只定义了一个函数 define ，它是全局变量。函数的描述为：

3 月，跳不动了？>>> 我在 _Layout.cshtml 定义了此部分 @RenderSection("Scripts", false) 我可以很容易地从视图中使用它： @section Scripts { @*Stuff comes here*@ } 我正在努力的是如何从局部视图中将一些内容注入到本节中。 假设这是我的视图页面： @section Scripts { <script> //code comes here </script> } <div> poo bar poo </div> <div> @Html.Partial("_myPartial") </div> 我需要从 _myPartial 局部视图的“ Scripts 部分中注入一些内容。 我怎样才能做到这一点？ #1楼 这是一个很受欢迎的问题，所以我将发布解决方案。 我遇到了同样的问题，尽管它不是理想的，但我认为它实际上工作得很好，并且不会部分依赖视图。 我的情况是，动作本身可以访问，但也可以嵌入到视图中-谷歌地图。 在我的 _layout 我有： @RenderSection("body_scripts", false) 在我的 index 视图中，我有： @Html.Partial("Clients") @section body_scripts { @Html.Partial("Clients

打一个通用 UMD 包 有这样一个场景，客户端运行很久，但是法务部和数据部需要收集用户的一些信息，这些信息收集好之后需要进行相应的数据处理，之后上报到服务端。客户端提供一个纯粹的 JS 执行引擎，不需要 WebView 容器。iOS 端有成熟的 JavaScriptCore、Android 可以使用 V8 引擎。这样一个引擎配套有一个 SDK，访问 Native 的基础能力和数据运算能力，可以看成是一个阉割版的 Hybrid SDK 额外增加了一些数据处理能力。 问题结束了吗？处理逻辑的时候还需要用到2个库： cheerio 和 sql 。因为都是 Node 工程，所以纯粹的 JS 环境是没办法直接执行。所以需求就进行了转变 ———— 将 Node 项目打包成 UMD 规范。这样就可以在纯粹的 JS 环境下运行。接下来的文章就分析下各种规范。其实也就是前端模块化的几种规范。 前端模块化开发的价值 随着互联网的飞速发展，前端开发越来越复杂。本文将从实际项目中遇到的问题出发，讲述模块化能解决哪些问题，以及以 Sea.js 为例讲解如何进行前端的模块化开发。 恼人的命名冲突 我们从一个简单的习惯出发。我做项目时，常常会将一些通用的、底层的功能抽象出来，独立成一个个函数，比如 function each(arr) { // 实现代码 } function log(str) { //