• 当前标签:Require-css

程序开发 Require.JS学习

首先得把下载好的require.js文件链接到html文档中: <script src="require.js" data-main="main"></script> require.js加载完成后会到页面上查找script[data-main]的值,找到之后会加载data-main指定的js文件,main是入口文件 main.js可以省略.js后缀名 main.js console.log('main loading') // 同时加载js1/和js2文件也可以加载更多的js文件 // 脚本加载完成后 会调用第二参数指定的回调函数 // require.js会自动在head标签中注入script标签 // require.js添加script标签带有async属性  // async属性会使浏览器同时开始异步js // 使用require.js可以很方便的的导入js文件 但是需要解决js文件中 // 变量名 方法名与其他js文件中变量名方法名冲突的问题 // 造成这个问题的原因 // 浏览器端js存在共用的全局作用域 全局变量 方法名 有可能被覆盖掉 // NodeJS中每一个js文件都是一个独立作用域 不存在共用的全局作用域 // NodeJS的js文件是相互隔离的 js文件之间只能通过模块导出的方法相互使用 require(['js1','js2','js3'],function(){      console.log('js/1,2,3已经加载完毕') var total = number1 + number2 + number3      console.log(total)      hello()      hello2()      hello3() }) require模块加载  m.js // var number = 1 // 全局作用域一直存在 除非页面关闭或跳转到其他页面含刷新 //  全局作用域是页面级 而不是网站级的 // define是require.js提供的模块定义函数 // 在这个函数中可以定义模块 方法是 调用define 给它传一个参数 // 模块的所有代码都写在这个函数中 模块代码在函数作用域中 不会干扰、污染全局作用域 // 函数作用域存在的时间非常短 而且在外面无法得到 // 函数作用域内部的内容 所以需要使用return将需要导出的内容返回到函数外部 define(function(){     // 函数作用域      // 调用函数时 代码执行到函数内部时创建的函数作用域     // 函数的代码执行完毕后 函数作用域会立刻销毁     // 函数作用域销毁时 函数内部定义的变量和函数都会销毁     var number = 1     var number2 = 2     var hello = function () {         alert('hello' + number)      }     //  return 将一个值返回给函数的调用者     //  return返回的值会跳出函数作用域     //  返回的值比函数作用域生存的时间长     return{         number1:number,         number2:number2,         hello:hello     } });  m2.js // 让requireJS虚拟出来一个module module通过传 // 参数的方式进入函数作用域 define(['require','module'],function(require,module){ var number1 = 1 var number2 = 2 var hello = function(){         console.log('hello wangBaoQiang')     } // 使用rrequire加载其它js模块 var exports = require('exports') // 导出模块 requireJS中导出模块的方法 // module.exports = { //     number1:number1, //     number2:number2, //     hello:hello // }     exports.number1 = number1     exports.number2 = number2     exports.hello = hello }) require配置 这里不同目录的require.js引入是这样的: <script data-main="./scripts/main" src="./libs/require.js"></script> 这是main.js // requireJS默认会把入口js(本例中的main.js)所在的文件夹 // ./scripts/)的路径当做基本路径 当使用require加载其它的js文件时 // 会把基本路径(./scripts/) + 模块名字 + .js作为模块js的完整路径 // ./scripts/jquery.js // define('jquery',[],function(){ //     return jQuery // }) // 1. 模块名称 // 2.依赖项 依赖项会在你定义的模块加载前加载 // 3.函数作用域 你的模块代码所在位置 // require(['../libs/jquery'],function($){ //     alert($)  // }) // CDN Content Distribute NetWorking 内容分布网络 require.config({     // baseUrl指的是文件的基本路径     baseUrl:'libs',     paths:{         jquery:'jquery',         // jquery:'https://cdn.bootcss.com/jquery/3.2.1/jquery.min',         fullScreen:'jquery.fullScreen',         m:'../scripts/m'     },     // 为那些没有使用define()来声明依赖关系、     // 设置模块的"浏览器全局变量注入"型脚本做依赖和导出配置。     shim:{         // fullScreen:{         //     deps:['jquery'],         //     // exports:'fullScreena'         // }         fullScreen:['jquery']     } }) require(['jquery','m','fullScreen'],function($,m,fullScreena){     console.log(fullScreena)   if($.support.fullscreen){       console.log('vvvvvvvv')         $('#fullscreen').click(function(e){             $('#content').fullScreen();             e.preventDefault();         });     } }) Require-css 在使用require.js的时候,想要在其中设置css样式的话需要require-css插件,具体的实现方法和代码请点击下面的演示效果,按照上图的文件结构修改地址查看源代码。 演示效果 实践 - 工资计算器 使用上次做的工资计算器进行使用require.js修改。 只修改了工资总额的计算,其他的同理。 main.js require(['jquery','gongzi'],function($,$$){     // $$计算工资数据     console.dir($$)     $('button').click(function(){         var jishu = $('#jishu').val(),              jixiao = $('#jixiao').val(),              jiangjin = $('#jiangjin').val()           jishu = parseFloat(jishu) || 0           jixiao = parseFloat(jixiao) || 0           jiangjin= parseFloat(jiangjin) || 0           var data = $$.calc(jishu,jixiao,jiangjin)           console.log(data)           $('#zonge').text(data.total.toFixed(2))           $('section').slideDown()     })     // 监听form表单的input事件 当用户输入时 隐藏计算结果     $('form').on('input',function(){         $('section').fadeOut()     }) }) gongzi.js // 定义一个工资计算模块 // 这个模块导出一个函数 这个函数接受三个参数 // 分别表示基本工资  绩效工资  奖金 // 通过计算返回一个对象 // requireJS定义模块的步骤 // 1.写一个define函数调用 // 2.在define中写一个函数作用域 // 3. 在函数作用域写代码 // 4. 将指定的内容导出

2017-08-22 19:58:14 28 0 0
阅读详情
  • 1
前往