前台对Seajs的用法个人见解

最新推荐文章于 2021-03-21 17:57:31 发布

weixin_34019929

最新推荐文章于 2021-03-21 17:57:31 发布

阅读量150

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/1399599/blog/816242

版权

2019独角兽企业重金招聘Python工程师标准>>>

Sea.js可以直接去官网下载，然后进行配置。主要配置如下：

/*! Sea.js 2.2.3 | seajs.org/LICENSE.md */
!function(a,b){function c(a){return function(b){return{}.toString.call(b)=="[object "+a+"]"}}function d(){return B++}function e(a){return a.match(E)[0]}function f(a){for(a=a.replace(F,"/");a.match(G);)a=a.replace(G,"/");return a=a.replace(H,"$1/")}function g(a){var b=a.length-1,c=a.charAt(b);return"#"===c?a.substring(0,b):".js"===a.substring(b-2)||a.indexOf("?")>0||".css"===a.substring(b-3)||"/"===c?a:a+".js"}function h(a){var b=v.alias;return b&&x(b[a])?b[a]:a}function i(a){var b=v.paths,c;return b&&(c=a.match(I))&&x(b[c[1]])&&(a=b[c[1]]+c[2]),a}function j(a){var b=v.vars;return b&&a.indexOf("{")>-1&&(a=a.replace(J,function(a,c){return x(b[c])?b[c]:a})),a}function k(a){var b=v.map,c=a;if(b)for(var d=0,e=b.length;e>d;d++){var f=b[d];if(c=z(f)?f(a)||a:a.replace(f[0],f[1]),c!==a)break}return c}function l(a,b){var c,d=a.charAt(0);if(K.test(a))c=a;else if("."===d)c=f((b?e(b):v.cwd)+a);else if("/"===d){var g=v.cwd.match(L);c=g?g[0]+a.substring(1):a}else c=v.base+a;return 0===c.indexOf("//")&&(c=location.protocol+c),c}function m(a,b){if(!a)return"";a=h(a),a=i(a),a=j(a),a=g(a);var c=l(a,b);return c=k(c)}function n(a){return a.hasAttribute?a.src:a.getAttribute("src",4)}function o(a,b,c,d){var e=T.test(a),f=M.createElement(e?"link":"script");c&&(f.charset=c),A(d)||f.setAttribute("crossorigin",d),p(f,b,e,a),e?(f.rel="stylesheet",f.href=a):(f.async=!0,f.src=a),U=f,S?R.insertBefore(f,S):R.appendChild(f),U=null}function p(a,c,d,e){function f(){a.onload=a.onerror=a.onreadystatechange=null,d||v.debug||R.removeChild(a),a=null,c()}var g="onload"in a;return!d||!W&&g?(g?(a.onload=f,a.onerror=function(){D("error",{uri:e,node:a}),f()}):a.onreadystatechange=function(){/loaded|complete/.test(a.readyState)&&f()},b):(setTimeout(function(){q(a,c)},1),b)}function q(a,b){var c=a.sheet,d;if(W)c&&(d=!0);else if(c)try{c.cssRules&&(d=!0)}catch(e){"NS_ERROR_DOM_SECURITY_ERR"===e.name&&(d=!0)}setTimeout(function(){d?b():q(a,b)},20)}function r(){if(U)return U;if(V&&"interactive"===V.readyState)return V;for(var a=R.getElementsByTagName("script"),b=a.length-1;b>=0;b--){var c=a[b];if("interactive"===c.readyState)return V=c}}function s(a){var b=[];return a.replace(Y,"").replace(X,function(a,c,d){d&&b.push(d)}),b}function t(a,b){this.uri=a,this.dependencies=b||[],this.exports=null,this.status=0,this._waitings={},this._remain=0}if(!a.seajs){var u=a.seajs={version:"2.2.3"},v=u.data={},w=c("Object"),x=c("String"),y=Array.isArray||c("Array"),z=c("Function"),A=c("Undefined"),B=0,C=v.events={};u.on=function(a,b){var c=C[a]||(C[a]=[]);return c.push(b),u},u.off=function(a,b){if(!a&&!b)return C=v.events={},u;var c=C[a];if(c)if(b)for(var d=c.length-1;d>=0;d--)c[d]===b&&c.splice(d,1);else delete C[a];return u};var D=u.emit=function(a,b){var c=C[a],d;if(c)for(c=c.slice();d=c.shift();)d(b);return u},E=/[^?#]*\//,F=/\/\.\//g,G=/\/[^/]+\/\.\.\//,H=/([^:/])\/\//g,I=/^([^/:]+)(\/.+)$/,J=/{([^{]+)}/g,K=/^\/\/.|:\//,L=/^.*?\/\/.*?\//,M=document,N=e(M.URL),O=M.scripts,P=M.getElementById("seajsnode")||O[O.length-1],Q=e(n(P)||N);u.resolve=m;var R=M.head||M.getElementsByTagName("head")[0]||M.documentElement,S=R.getElementsByTagName("base")[0],T=/\.css(?:\?|$)/i,U,V,W=+navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/(\d+).*/,"$1")<536;u.request=o;var X=/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g,Y=/\\\\/g,Z=u.cache={},$,_={},ab={},bb={},cb=t.STATUS={FETCHING:1,SAVED:2,LOADING:3,LOADED:4,EXECUTING:5,EXECUTED:6};t.prototype.resolve=function(){for(var a=this,b=a.dependencies,c=[],d=0,e=b.length;e>d;d++)c[d]=t.resolve(b[d],a.uri);return c},t.prototype.load=function(){var a=this;if(!(a.status>=cb.LOADING)){a.status=cb.LOADING;var c=a.resolve();D("load",c);for(var d=a._remain=c.length,e,f=0;d>f;f++)e=t.get(c[f]),e.status<cb.LOADED?e._waitings[a.uri]=(e._waitings[a.uri]||0)+1:a._remain--;if(0===a._remain)return a.onload(),b;var g={};for(f=0;d>f;f++)e=Z[c[f]],e.status<cb.FETCHING?e.fetch(g):e.status===cb.SAVED&&e.load();for(var h in g)g.hasOwnProperty(h)&&g[h]()}},t.prototype.onload=function(){var a=this;a.status=cb.LOADED,a.callback&&a.callback();var b=a._waitings,c,d;for(c in b)b.hasOwnProperty(c)&&(d=Z[c],d._remain-=b[c],0===d._remain&&d.onload());delete a._waitings,delete a._remain},t.prototype.fetch=function(a){function c(){u.request(g.requestUri,g.onRequest,g.charset,g.crossorigin)}function d(){delete _[h],ab[h]=!0,$&&(t.save(f,$),$=null);var a,b=bb[h];for(delete bb[h];a=b.shift();)a.load()}var e=this,f=e.uri;e.status=cb.FETCHING;var g={uri:f};D("fetch",g);var h=g.requestUri||f;return!h||ab[h]?(e.load(),b):_[h]?(bb[h].push(e),b):(_[h]=!0,bb[h]=[e],D("request",g={uri:f,requestUri:h,onRequest:d,charset:z(v.charset)?v.charset(h):v.charset,crossorigin:z(v.crossorigin)?v.crossorigin(h):v.crossorigin}),g.requested||(a?a[g.requestUri]=c:c()),b)},t.prototype.exec=function(){function a(b){return t.get(a.resolve(b)).exec()}var c=this;if(c.status>=cb.EXECUTING)return c.exports;c.status=cb.EXECUTING;var e=c.uri;a.resolve=function(a){return t.resolve(a,e)},a.async=function(b,c){return t.use(b,c,e+"_async_"+d()),a};var f=c.factory,g=z(f)?f(a,c.exports={},c):f;return g===b&&(g=c.exports),delete c.factory,c.exports=g,c.status=cb.EXECUTED,D("exec",c),g},t.resolve=function(a,b){var c={id:a,refUri:b};return D("resolve",c),c.uri||u.resolve(c.id,b)},t.define=function(a,c,d){var e=arguments.length;1===e?(d=a,a=b):2===e&&(d=c,y(a)?(c=a,a=b):c=b),!y(c)&&z(d)&&(c=s(""+d));var f={id:a,uri:t.resolve(a),deps:c,factory:d};if(!f.uri&&M.attachEvent){var g=r();g&&(f.uri=g.src)}D("define",f),f.uri?t.save(f.uri,f):$=f},t.save=function(a,b){var c=t.get(a);c.status<cb.SAVED&&(c.id=b.id||a,c.dependencies=b.deps||[],c.factory=b.factory,c.status=cb.SAVED)},t.get=function(a,b){return Z[a]||(Z[a]=new t(a,b))},t.use=function(b,c,d){var e=t.get(d,y(b)?b:[b]);e.callback=function(){for(var b=[],d=e.resolve(),f=0,g=d.length;g>f;f++)b[f]=Z[d[f]].exec();c&&c.apply(a,b),delete e.callback},e.load()},t.preload=function(a){var b=v.preload,c=b.length;c?t.use(b,function(){b.splice(0,c),t.preload(a)},v.cwd+"_preload_"+d()):a()},u.use=function(a,b){return t.preload(function(){t.use(a,b,v.cwd+"_use_"+d())}),u},t.define.cmd={},a.define=t.define,u.Module=t,v.fetchedList=ab,v.cid=d,u.require=function(a){var b=t.get(t.resolve(a));return b.status<cb.EXECUTING&&(b.onload(),b.exec()),b.exports};var db=/^(.+?\/)(\?\?)?(seajs\/)+/;v.base=(Q.match(db)||["",Q])[1],v.dir=Q,v.cwd=N,v.charset="utf-8",v.preload=function(){var a=[],b=location.search.replace(/(seajs-\w+)(&|$)/g,"$1=1$2");return b+=" "+M.cookie,b.replace(/(seajs-\w+)=1/g,function(b,c){a.push(c)}),a}(),u.config=function(a){for(var b in a){var c=a[b],d=v[b];if(d&&w(d))for(var e in c)d[e]=c[e];else y(d)?c=d.concat(c):"base"===b&&("/"!==c.slice(-1)&&(c+="/"),c=l(c)),v[b]=c}return D("config",a),u}}}(this);
/*seajs-css.js插件*/
//function isType(type){return function(obj){return{}.toString.call(obj)=="[object "+type+"]"}}var isString=isType("String");var doc=document;var head=doc.head||doc.getElementsByTagName("head")[0]||doc.documentElement;var baseElement=head.getElementsByTagName("base")[0];var IS_CSS_RE=/\.css(?:\?|$)/i;var currentlyAddingScript;var interactiveScript;var isOldWebKit=+navigator.userAgent.replace(/.*(?:AppleWebKit|AndroidWebKit)\/?(\d+).*/i,"$1")<536;function isFunction(obj){return{}.toString.call(obj)=="[object Function]"}function request(url,callback,charset,crossorigin){var isCSS=IS_CSS_RE.test(url);var node=doc.createElement(isCSS?"link":"script");if(charset){var cs=isFunction(charset)?charset(url):charset;if(cs){node.charset=cs}}if(crossorigin!==void 0){node.setAttribute("crossorigin",crossorigin)}addOnload(node,callback,isCSS,url);if(isCSS){node.rel="stylesheet";node.href=url}else{node.async=true;node.src=url}currentlyAddingScript=node;baseElement?head.insertBefore(node,baseElement):head.appendChild(node);currentlyAddingScript=null}function addOnload(node,callback,isCSS,url){var supportOnload="onload" in node;if(isCSS&&(isOldWebKit||!supportOnload)){setTimeout(function(){pollCss(node,callback)},1);return}if(supportOnload){node.onload=onload;node.onerror=function(){seajs.emit("error",{uri:url,node:node});onload()}}else{node.onreadystatechange=function(){if(/loaded|complete/.test(node.readyState)){onload()}}}function onload(){node.onload=node.onerror=node.onreadystatechange=null;if(!isCSS&&!seajs.data.debug){head.removeChild(node)}node=null;callback()}}function pollCss(node,callback){var sheet=node.sheet;var isLoaded;if(isOldWebKit){if(sheet){isLoaded=true}}else{if(sheet){try{if(sheet.cssRules){isLoaded=true}}catch(ex){if(ex.name==="NS_ERROR_DOM_SECURITY_ERR"){isLoaded=true}}}}setTimeout(function(){if(isLoaded){callback()}else{pollCss(node,callback)}},20)}seajs.request=request;var data=seajs.data;var DIRNAME_RE=/[^?#]*\//;var DOT_RE=/\/\.\//g;var DOUBLE_DOT_RE=/\/[^/]+\/\.\.\//;var MULTI_SLASH_RE=/([^:/])\/+\//g;function dirname(path){return path.match(DIRNAME_RE)[0]}function realpath(path){path=path.replace(DOT_RE,"/");path=path.replace(MULTI_SLASH_RE,"$1/");while(path.match(DOUBLE_DOT_RE)){path=path.replace(DOUBLE_DOT_RE,"/")}return path}function normalize(path){var last=path.length-1;var lastC=path.charAt(last);if(lastC==="#"){return path.substring(0,last)}return(path.substring(last-2)===".js"||path.indexOf("?")>0||path.substring(last-3)===".css"||lastC==="/")?path:path+".js"}var PATHS_RE=/^([^/:]+)(\/.+)$/;var VARS_RE=/{([^{]+)}/g;function parseAlias(id){var alias=data.alias;return alias&&isString(alias[id])?alias[id]:id}function parsePaths(id){var paths=data.paths;var m;if(paths&&(m=id.match(PATHS_RE))&&isString(paths[m[1]])){id=paths[m[1]]+m[2]}return id}function parseVars(id){var vars=data.vars;if(vars&&id.indexOf("{")>-1){id=id.replace(VARS_RE,function(m,key){return isString(vars[key])?vars[key]:m})}return id}function parseMap(uri){var map=data.map;var ret=uri;if(map){for(var i=0,len=map.length;i<len;i++){var rule=map[i];ret=isFunction(rule)?(rule(uri)||uri):uri.replace(rule[0],rule[1]);if(ret!==uri){break}}}return ret}var ABSOLUTE_RE=/^\/\/.|:\//;var ROOT_DIR_RE=/^.*?\/\/.*?\//;function addBase(id,refUri){var ret;var first=id.charAt(0);if(ABSOLUTE_RE.test(id)){ret=id}else{if(first==="."){ret=realpath((refUri?dirname(refUri):data.cwd)+id)}else{if(first==="/"){var m=data.cwd.match(ROOT_DIR_RE);ret=m?m[0]+id.substring(1):id}else{ret=data.base+id}}}if(ret.indexOf("//")===0){ret=location.protocol+ret}return ret}function id2Uri(id,refUri){if(!id){return""}id=parseAlias(id);id=parsePaths(id);id=parseVars(id);id=normalize(id);var uri=addBase(id,refUri);uri=parseMap(uri);return uri}var doc=document;var cwd=(!location.href||location.href.indexOf("about:")===0)?"":dirname(location.href);var scripts=doc.scripts;var loaderScript=doc.getElementById("seajsnode")||scripts[scripts.length-1];var loaderDir=dirname(getScriptAbsoluteSrc(loaderScript)||cwd);function getScriptAbsoluteSrc(node){return node.hasAttribute?node.src:node.getAttribute("src",4)}seajs.resolve=id2Uri;
/*seajs-preload插件*/
!function(){var a=seajs.data,b=document;seajs.Module.preload=function(b){var c=a.preload,d=c.length;d?seajs.Module.use(c,function(){c.splice(0,d),seajs.Module.preload(b)},a.cwd+"_preload_"+a.cid()):b()},seajs.use=function(b,c){return seajs.Module.preload(function(){seajs.Module.use(b,c,a.cwd+"_use_"+a.cid())}),seajs},a.preload=function(){var a=[],c=location.search.replace(/(seajs-\w+)(&|$)/g,"$1=1$2");return c+=" "+b.cookie,c.replace(/(seajs-\w+)=1/g,function(b,c){a.push(c)}),a}(),define("seajs/seajs-preload/1.0.0/seajs-preload",[],{})}();
seajs.config({
	  // 文件编码
	  charset: 'utf-8',
	  //设置根路径
	  base:'/hhagentapp',
	  //该配置可对模块路径进行映射修改，可用于路径转换、在线调试等,暂时不启用
	  paths: {
		   'cm_bus': 'jd/js',//'common/js/business',
		   'js_bus': 'jd/js/business',
		   'cm_css': 'common/css',
		   'css_bus': 'jd/css',
           'hh_agent': 'hhagent/js',
		   'hh_bus': 'hh/js',
		   'hh_css': 'hh/css'
	  },
     //这里引入对应的js，并且自己起一个别名
	  alias: {
		  'jquery': 'common/js/framework/jquery.min.js',
		  'jquery-classloader': 'common/js/framework/jquery.classyloader.min.js',
		  'jquery-bottomLoad':'common/js/framework/jquery.bottomLoad.js',
		  'jquery-dateChose':'common/js/framework/jquery.dateChose.js',
		  'jquery-ratioSlide':'common/js/framework/jquery.ratioSlide.js',
		  'tripledes': 'common/js/framework/tripledes.js',
		  'template': 'common/js/framework/template.js',
		  'commonTemplate': 'common/js/framework/commonTemplate.js',
		  'fastclick': 'common/js/framework/fastclick.js',	
		  'WebTools': 'common/js/framework/WebTools.js',
		  'datepicker': 'common/js/framework/datepicker.js',
		  'commonMod':'common/js/framework/commonMod.js'

	  },
	  //切换公共js . css	
	  preload: ['jquery','commonTemplate','WebTools']

	});

最主要的配置就是如下这段：

seajs.config({
	  // 文件编码
	  charset: 'utf-8',
	  //设置根路径
	  base:'/hhagent',
	  paths: {
		   'cm_bus': 'jd/js',//'common/js/business',
		   'js_bus': 'jd/js/business',
		   'cm_css': 'common/css',
		   'css_bus': 'jd/css',
		   'hh_bus': 'hh/js',
           'hh_agent': 'hhagent/js',
		   'hh_css': 'hh/css'
	  },
	  alias: {
		  'jquery': 'common/js/framework/jquery.min.js',
		  'jquery-classloader': 'common/js/framework/jquery.classyloader.min.js',
		  'jquery-bottomLoad':'common/js/framework/jquery.bottomLoad.js',
		  'jquery-dateChose':'common/js/framework/jquery.dateChose.js',
		  'jquery-ratioSlide':'common/js/framework/jquery.ratioSlide.js',
		  'tripledes': 'common/js/framework/tripledes.js',
		  'template': 'common/js/framework/template.js',
		  'commonTemplate': 'common/js/framework/commonTemplate.js',
		  'fastclick': 'common/js/framework/fastclick.js',	
		  'WebTools': 'common/js/framework/WebTools.js',
		  'datepicker': 'common/js/framework/datepicker.js',
		  'commonMod':'common/js/framework/commonMod.js'

	  },
      //需要提前加载的js
	  preload: ['jquery','commonTemplate','WebTools']
	});

在html中如何引用：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试程序</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="format-detection" content="telephone=no" />
	<meta name="format-detection" content="email=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	
</head>
<body class="bg">
	<div class="wraper">
		<h2>测试js的引入规则</h2>
	</div>
	<script type="text/javascript" src="../../common/js/framework/sea.js"></script>
	<script>
	//引入css
		//seajs.use("hh_css/photo.css");
	//公共模块加载完成后加载自己的业务模块
		seajs.use('hh_agent/hhagentSuccess');
	</script>
</body>
</html>

按照上面的方法就能直接引用需要的js了。

seajs.use('hh_agent/hhagentSuccess');

这个地方是根据sea.js中的配置信息得来的。

hh_agent 是路径配置指的是：

hhagent/js

hhagentSuccess指的是js的名字，你要引入的js文件名称。

sea.js是通用js的引用配置。

hhagentSuccess.js是针对该页面一些触发相关事件的单独js

hhagentSuccess.js的主要代码如下：

/**
 * js模板代码
 */
define(function(require, exports, module) {
	var hhagentSuccess = {};
	var $u = require("WebTools"), $ = require("jquery");

	/**
	 * 事件注册
	 */
	hhagentSuccess.initEvent = function() {
		$("#verification").on("click", hhagentSuccess.check);
	};
	/**
	 * 点击登录
	 */
	hhagentSuccess.check = function() {
		$u.callback.simpleCall("exitSystem","",function(){
		});
		window.location.href = "index.html";
	};
	/**
	 *调用方法
	 * */
	$(document).ready(function(){
		$u.pv_util.init("common","agentlogin")
		hhagentSuccess.initEvent();
		
	});
});

转载于:https://my.oschina.net/u/1399599/blog/816242