我要评论1.模块化
1.代码隔离
//js作用域：函数级作用域范围
var module1 = (function() {
var a = {
name: 123
}
return a;
})();
var module2 = (function() {
var Obj = {
name: 123,
age: 20
}
return Obj
})();
2.cdn引用和本地引用
访问速度，cdn访问快于本地，先访问区域cdn，再找本地服务器。
3.模块的放大模式-嵌套
模块的宽大模式-容错
//js作用域：函数级作用域范围
var module1 = (function() {
var a = {
key: 123
}
return a;
})();
var module2 = (function(a) {
var Obj = {
name: 123,
age: 20
}
function get(){
console.log(a);
console.log({...a,...Obj});
}
return get
})(module1||{});
console.log(module2())
2.require.js的简单实用
1.解决问题：
a:js文件引入顺序 依赖关系
b:提高js加载速度，页面访问速度
c.js与js文件可相互访问 require.js实现文件与文件隔离，需要引入
2.下载require.js
main.js
/**
* 入口文件，配置文件
*/
/**
* 入口文件，配置文件
*/
require.config({
baseUrl:'script/',//文件根目录
//映射
paths:{
index:'app/index',
data:'app/data'
}
})
//js加载文件,顺序加载 index->data
require(['index','data'],function(index,data){
})
或者
/**
* 入口文件，配置文件
*/
require.config({
//映射
paths:{
index:'./app/index',
data:'./app/data'
}
})
//js加载文件,顺序加载 index->data
require(['index','data'],function(index,data){
})
html：
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" data-main='script/main.js' src="./script/libs/require.js"></script>
<body>
</body>
</html>
3.requirejs的定义模块
- 简单名称、键值对
define({
name:123
})
- 定义函数
define(function(){
return {
hello:'hello world!'
}
})
- 具有依赖关系的模块定义,依赖前置
define(['jquery'],function($){
console.log($)
})
- 定义与简体CommonJS的 ，依赖就近
define(function(require,exports,module){
//require引入模块,exports,module暴露模块
var aa = require('data');
console.log(aa);
})
按需加载简单例子：
- 目录结构
2.样式文件根据需要填写，各文件名为了方便最好一致
3.ips.js
//通用频率极高的公共方法
define([], () => {
let ips = {
getHtmlDocName: () => {
let str = window.location.href;
str = str.substring(str.lastIndexOf("/") + 1);
str = str.substring(0, str.lastIndexOf("."));
return str;
},
isUserAgent: () => {
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)))
return 'MOBILE';
else
return 'PC';
}
}
return ips;
})
4.detail.js
define((require,exports,module)=>{
console.log('对detail页面的操作')
})
5.index.js，判断pc和移动端加载插件
define((require,exports,module)=>{
let addJS = new Array;
let ips = require('ips');
if(ips.isUserAgent()==='PC'){
addJS=['jquery']
}else{
addJS=['zepto']
}
require(addJS,function(page){
console.log($)
})
})
6.css.min.js-找不到时直接复制使用
define(function(){if("undefined"==typeof window)return{load:function(a,b,c){c()}};var a=document.getElementsByTagName("head")[0],b=window.navigator.userAgent.match(/Trident\/([^ ;]*)|AppleWebKit\/([^ ;]*)|Opera\/([^ ;]*)|rv\:([^ ;]*)(.*?)Gecko\/([^ ;]*)|MSIE\s([^ ;]*)|AndroidWebKit\/([^ ;]*)/)||0,c=!1,d=!0;b[1]||b[7]?c=parseInt(b[1])<6||parseInt(b[7])<=9:b[2]||b[8]?d=!1:b[4]&&(c=parseInt(b[4])<18);var e={};e.pluginBuilder="./css-builder";var f,g,h,i=function(){f=document.createElement("style"),a.appendChild(f),g=f.styleSheet||f.sheet},j=0,k=[],l=function(a){g.addImport(a),f.onload=function(){m()},j++,31==j&&(i(),j=0)},m=function(){h();var a=k.shift();return a?(h=a[1],void l(a[0])):void(h=null)},n=function(a,b){if(g&&g.addImport||i(),g&&g.addImport)h?k.push([a,b]):(l(a),h=b);else{f.textContent='@import "'+a+'";';var c=setInterval(function(){try{f.sheet.cssRules,clearInterval(c),b()}catch(a){}},10)}},o=function(b,c){var e=document.createElement("link");if(e.type="text/css",e.rel="stylesheet",d)e.onload=function(){e.onload=function(){},setTimeout(c,7)};else var f=setInterval(function(){for(var a=0;a<document.styleSheets.length;a++){var b=document.styleSheets[a];if(b.href==e.href)return clearInterval(f),c()}},10);e.href=b,a.appendChild(e)};return e.normalize=function(a,b){return".css"==a.substr(a.length-4,4)&&(a=a.substr(0,a.length-4)),b(a)},e.load=function(a,b,d,e){(c?n:o)(b.toUrl(a+".css"),d)},e});
7.require.js
8.config.js
define({
baseurl:'',
port:''
})
9.http.js
//定义模块请求数据
define(['jquery','config'], ($,config) => {
let http = (options)=>{
$.ajax({
type:options.type,
url:`${config.baseurl}:${config.port}/${options.url}`,
success:(res)=>{
options.callback(res);
}
})
}
return http;
})
10.main.js
/**
* 入口文件，配置文件
*/
require.config({
//映射
paths: {
jquery: './libs/jquery-2.1.1.min',
zepto: './libs/zepto.min',
http: './server/http',
config: './server/config',
ips: './app/components/ips',
view: './app/components/view',
index: './app/index',
detail: './app/detail'
},
map: {
'*': {
'css': './libs/css.min'
}
},
shim : {
'index': ['css!../css/index.css','css!../css/index2.css'],
'detail': ['css!../css/detail.css']
}
})
define((require, exports, module) => {
let pageName = require('ips').getHtmlDocName();
//js加载文件
require([pageName], function(page) {
})
})
11.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" data-main='script/main.js' src="./script/libs/require.js"></script>
<body>
</body>
</html>
本文地址：https://blog.csdn.net/qq_41876209/article/details/108691861
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论