1 ExtJS入门 1.1 支持所有主流浏览器 调试推荐：chrome、Safari、Firefox 1.2 推荐目录结构 – appname （包含所有程序代码，是根目录） – app （包含所有类，按包的规则命名子目录） – namespace – Class1.js – Class2.js – … – extjs （ExtJS 4 SDK） – resources （CSS图片等资源文件） – css – images – … – app.js （程序入口，包含程序逻辑） – index.html （入口文件） ExtJS 4 SDK部分说明： – extjs/resources/css/ext-all.css 包含了所有样式 – extjs/ext-debug.js 包含了最基础的一些类，ExtJS 4 Core核心部分，只在开发时使用，任何附加的类都通过动态加载引入（会造成n多请求，所以发布应用的时候不要用这个） – extjs/ext.js 功能和ext-debug.js一致，但是是用于对外发布的，它和app-all.js一起使用 – extjs/ext-all-debug.js 包含ExtJS全部内容，全部class，它可以像ExtJS 3那样使用，可以减少学习成本，官方还是推荐ext-debug.js这种引入了新机制的方式 – extjs/ext-all.js 是ext-all-debug.js的压缩版本，内容跟其一致，可用于发布，但是它包含所有内容，官方不推荐 – all-classes.js 包含app自定义的所有类，这个文件没有压缩可以方便调试 – app-all.js 这个文件是压缩过的，包含所有app代码和依赖的类，相当于一个可以用于发布的 all-classes.js + app.js – builds：是extjs压缩后的代码，体积更小，加载更快 – docs ：extjs的文档 […]
View DetailsExtJS是一个富客户端开发框架，用它做出来的用户界面风格很统一。对于美工不好的的后端开发人员来说，用这个东西做界面，完全就不需要考虑美工了，它内置的样式模板显示的效果还是非常好的。 现代工程应用的开发量，无论是后端逻辑，还是前端的界面展示，代码量都会非常大，如何保持代码的结构逻辑清晰，非常必要。在后端有MVC（Model View Controller）代码分层结构，ExtJS如今也引入了该设计方法，使前端代码看起来也结构规整、逻辑清晰，增强了前端代码的可读性、可维护性。 下面将通过一个例子来看看ExtJS的MVC是怎么回事。 在MVC的布局模式中，所有的类都放置在app文件夹中，这个文件夹还包含了一些子文件夹用于命名你的models,views,controllers,stores.下图为goods这个应用程序的文件夹结构。 Ext工程，必须在应用程序入口（app.html）引入ExtJS的2个文件，一个是SDK核心js类库ext-all.js（也可以是ext-all-debug.js或者bootstrap.js；第一个是服务部署版本，第二个是开发阶段版本，第三个会运行环境调用第一或第二个）、一个是核心样式表ext-theme-classic-all.css（有很多套样式，可以自行选择）。在app.html中，仅需要下面这段代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPEhtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>inv</title> <scriptsrc="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all.js"></script> <linkrel="stylesheet"href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/ext-theme-classic/ext-theme-classic-all.css"> <scripttype="text/javascript"src="app.js"></script> </head> <body></body> </html> |
一、定义应用 每一个ExtJS应用程序都由一个Application类作为开始，这个Application包含了全局设置，比如应用程序的名称，以及需要引用到的所有的models,views,controllers。下面我们创建一个商品模块应用，来管理商品信息。app.js中的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
//覆盖父级包设置 Ext.Loader.setConfig({ enabled: true }); Ext.application({ autoCreateViewport: true, controllers: [ 'GoodsController'//指定应用的控制器 ], name: 'Inv'//设置应用命名空间 }); |
首先，我们调用Ext.application去创建一个Application类，传递一个名字叫Inv。这样它就能够自动的为我们创建一个全局的变量 Inv给我们，并将这个命名空间注册到Ext.Loader。这里还指定应用的控制器，说明这个应用使用哪个或者哪些控制器；这里还设置自动创建并加载显示师徒，也可以在代码中还创建了一个launch函数，这个函数里面创建了一个Viewport，来加载显示界面视图。 二、定义控制器 控制器是跟应用程序绑定在一起的，控制器所做的工作就是监听事件并作出相应，监听的事件通常是在views中，下面我们来创建一个控制器，在app/controller/下面新建一个GoodsController.js 里面代码如下：
|
1 2 3 4 5 6 7 8 9 10 |
Ext.define('Inv.controller.GoodsController', { extend: 'Ext.app.Controller', models: ['GoodsModel'],//指定模型 stores: ['GoodsStore'],//指定存储对象 views: ['GoodsGridPanel']//指定视图 }); |
控制器主要就是绑定应用的视图对象（views）和模型对象（models、stores），应用在加载的时候自动加载控制器，再由控制器来加载应用的视图和模型对象。 三、定义视图 View无非就是一个组件，通常会定义为一个Ext js component的子类。下面我们要创建一个商品列表，可以新建一个GoodsGridPanel.js,位于app/view/下。GoodsGridPanel.js代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
Ext.define('Inv.view.GoodsGridPanel', { extend: 'Ext.grid.Panel',//继承自grid.Panel title: '商品列表',//商品列表名称 store: 'GoodsStore',//存储对象，指定商品列表的数据来源 //列表组件初始化，本视图被加载的时候自动调用 initComponent: function() { var me =this; //向定义的gridPanel中注册子组件，也就是商品列表的显示列 Ext.applyIf(me, { columns: [ { xtype: 'gridcolumn', dataIndex: 'code', text: '编码' }, { xtype: 'gridcolumn', dataIndex: 'name', text: '名称' } ] }); //激活父级组件渲染到页面 me.callParent(arguments); } }); |
在app/view/还有一个Viewport.js，也是定义一个视图的，该视图继承自上面定义的GoodsGridPanel，额外定义这个视图的模板渲染显示为准和其定义相分离，以达到视图组件重用的目的。app.js中定义的自动创建视图也就是指的这个。Viewport.js的代码如下：
|
1 2 3 4 |
Ext.define('Inv.view.Viewport', { extend: 'Inv.view.GoodsGridPanel', renderTo: Ext.getBody() }); |
四、定义模型 数据模型其实包括两个部分，即store和model。其中model负责数据结构的定义，store负责数据的存取。 a) 数据模型定义 在app/model下创建一个GoodsModel.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Ext.define('Inv.model.GoodsModel', { extend: 'Ext.data.Model', fields: [ {name: 'code'}, {name: 'name'} ] }); |
看上面的代码，其实很简单，就是给商品数据模型定义了2个属性：code(编码)、name(名称)，就像定义数据库的字段一样。 b) 定义存储模型(静态数据) 在app/store中创建GoodsStore.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
Ext.define('Inv.store.GoodsStore', { extend: 'Ext.data.Store', requires: ['Inv.model.GoodsModel'], constructor: function(cfg) { var me =this; cfg =cfg || {}; me.callParent([Ext.apply({ model: 'Inv.model.GoodsModel', storeId: 'GoodsStore', data: [ { code: '00001', name: '童靴' }, { code: '00002', name: '短靴' } ] }, cfg)]); } }); |
c) 定义存储模型(从服务器获取数据) 在app/store中创建GoodsStore.js，代码如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
Ext.define('Inv.store.GoodsStore', { extend: 'Ext.data.Store', requires: [ 'Inv.model.GoodsModel' ], constructor: function(cfg) { var me = this; cfg = cfg || {}; me.callParent([Ext.apply({ model: 'Inv.model.GoodsModel', storeId: 'GoodsStore', proxy: { type: 'ajax', url: './queryGoods', reader: { type: 'json', root: 'goodsBeanList', totalProperty: 'totalProperty' } } }, cfg)]); }, autoLoad: true //很关键 }); |
该存储模型首先调用了商品数据模型GoodsModel，然后再构造函数constructor中指定存储对象的数据模型；指定存储实例的ID；指定数据对象并在里面加了2条数据，存储模型也可以通过代理（prox）从服务端获取数据，实际工程中换一下数据来源即可。 最终页面效果 from:https://blog.csdn.net/clj198606061111/article/details/16811665
View Details以下 是 对 axios 请求 错误的处理 ( 困扰我好长时间 的 问题 终于 解决了!)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
axios.get('/user/12345') .catch(function (error) { if (error.response) { // The request was made and the server responded with a status code // that falls out of the range of 2xx console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // The request was made but no response was received // `error.request` is an instance of XMLHttpRequest in the browser and an instance of // http.ClientRequest in node.js console.log(error.request); } else { // Something happened in setting up the request that triggered an Error console.log('Error', error.message); } console.log(error.config); }); |
下图控制台 打印出的 结果 : from:https://blog.csdn.net/bianliuzhu/article/details/88170549
View Details|
1 2 3 4 5 6 7 8 9 10 |
var foo; alert(!foo);//undefind情况下或者null，一个感叹号返回的是true; alert(!goo);//undefind情况下，一个感叹号返回的也是true; 但是这里会报undefind的错误 var o={flag:true}; var test=!!o.flag;//等效于var test=o.flag||false; alert(test); //返回true var test2=!!o.flag1;//当里面没有对象时 alert(test2);//返回false var test3=!!b.flag;//当连b这个对象都没有时 alert(test3);//返回false |
from:https://www.cnblogs.com/EasonJim/p/6239087.html
View Details要获取当前页面URL的参数，可能大家第一个想到是使用 window.location.href 或者是document.location.href ，获取结果诸如http://www.xxx.com/?aa=xx&bb=xx ;但是其实我们需要的只是：?aa=xx&bb=xx。这种形式可以使用 document.location.search 这个属性获取。 如果我想要获取该URL后面参数aa的值该怎么弄呢？常见的方式可能是这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function( param ){ var url = window . location . toString (); url = url . split ('?' ); if (typeof (url [ 1 ]) == 'string' ) { url = url [ 1 ]. split ('&' ); for (i = 0 ;i < url . length ;i ++ ) { s= url [ i ]. split ("=" ); if( s[0 ] == "param" ) return s[1]; } } return null; } |
改用document.location.search和正则获取参数将使代码更加简洁：
|
1 2 3 4 5 6 7 8 |
function getParameter (sProp ) { var re = new RegExp (sProp + "=([^\&]*)" , "i" ); var a = re . exec (document . location . search ); if (a == null ) return null ; return a [ 1 ]; }; |
from:https://www.cnblogs.com/codebean/archive/2011/05/27/2059901.html
View Details1.将json对象转化为json字符串，再判断该字符串是否为"{}" var data = {}; var b = (JSON.stringify(data) == "{}"); alert(b);//true 2.for in 循环判断 var obj = {}; var b = function() { for(var key in obj) { return false; } return true; } alert(b());//true 3.jquery的isEmptyObject方法 此方法是jquery将2方法(for in)进行封装，使用时需要依赖jquery var data = {}; var b = $.isEmptyObject(data); alert(b);//true 4.Object.getOwnPropertyNames()方法 此方法是使用Object对象的getOwnPropertyNames方法，获取到对象中的属性名，存到一个数组中，返回数组对象，我们可以通过判断数组的length来判断此对象是否为空 注意：此方法不兼容ie8，其余浏览器没有测试 var data = {}; var arr = Object.getOwnPropertyNames(data); // Object.keys(objTest).length alert(arr.length == 0);//true 5.使用ES6的Object.keys()方法 与4方法类似，是ES6的新方法, 返回值也是对象中属性名组成的数组 var data = {}; var arr = Object.keys(data); alert(arr.length == 0);//true from:https://www.cnblogs.com/jpfss/p/9105119.html
View Details两种方法 方法一
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var arry = [...]; Promise.all(arry.map(function(elem){ return new Promise(function(resolve, reject){ ... resolve(result); }) })).then(function(data){ //在这就可以等所有的返回结果可以得到 }) |
方法二
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var arry = [...]; var counter = 0; arry.forEach(function(elem){ //异步回调中 counter++; if(counter === arr.length){ //在这执行所有执行的完后的 } }) |
from:https://www.cnblogs.com/ttjm/p/13065240.html
View DetailsExtJs的store默认是异步的，但有时候我们必须要发送同步请求才能满足需求，比如在多线程中，要实现同步很简单，只需继承Ext.data.proxy.Ajax，重写的同步类如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Ext.define('Ext.ux.data.proxy.Ajax', { extend: 'Ext.data.proxy.Ajax', async:true, doRequest: function(operation, callback, scope) { var writer = this.getWriter(), request = this.buildRequest(operation); if (operation.allowWrite()) { request = writer.write(request); } Ext.apply(request, { async : this.async, binary : this.binary, headers : this.headers, timeout : this.timeout, scope : this, callback : this.createRequestCallback(request, operation, callback, scope), method : this.getMethod(request), disableCaching: false }); Ext.Ajax.request(request); return request; } }); |
使用的时候，只需修改代理即可,async：false表示同步，true为异步:
|
1 2 3 4 5 6 7 8 |
proxy: Ext.create("Ext.ux.data.proxy.Ajax",{ async:false, url:" ", reader: { type: 'json', root: 'root' } }) |
from:https://my.oschina.net/wangdaoliang/blog/776567
View Detailspromise是什么？ 1、主要用于异步计算 2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果 3、可以在对象之间传递和操作promise，帮助我们处理队列 为什么会有promise？ 为了避免界面冻结（任务） 同步：假设你去了一家饭店，找个位置，叫来服务员，这个时候服务员对你说，对不起我是“同步”服务员，我要服务完这张桌子才能招呼你。那桌客人明明已经吃上了，你只是想要个菜单，这么小的动作，服务员却要你等到别人的一个大动作完成之后，才能再来招呼你，这个便是同步的问题：也就是“顺序交付的工作1234，必须按照1234的顺序完成”。 异步：则是将耗时很长的A交付的工作交给系统之后，就去继续做B交付的工作，。等到系统完成了前面的工作之后，再通过回调或者事件，继续做A剩下的工作。 AB工作的完成顺序，和交付他们的时间顺序无关，所以叫“异步”。 异步操作的常见语法 事件监听
|
1 2 3 4 5 6 |
document.getElementById('#start').addEventListener('click', start, false); function start() { // 响应事件，进行相应的操作 } // jquery on 监听 $('#start').on('click', start) |
回调
|
1 2 3 4 5 6 7 8 9 10 11 |
// 比较常见的有ajax $.ajax('http://www.wyunfei.com/', { success (res) { // 这里可以监听res返回的数据做回调逻辑的处理 } }) // 或者在页面加载完毕后回调 $(function() { // 页面结构加载完成，做回调逻辑处理 }) |
有了nodeJS之后…对异步的依赖进一步加剧了 大家都知道在nodeJS出来之前PHP、Java、python等后台语言已经很成熟了，nodejs要想能够有自己的一片天，那就得拿出点自己的绝活： 无阻塞高并发，是nodeJS的招牌，要达到无阻塞高并发异步是其基本保障 举例：查询数据从数据库，PHP第一个任务查询数据，后面有了新任务，那么后面任务会被挂起排队；而nodeJS是第一个任务挂起交给数据库去跑，然后去接待第二个任务交给对应的系统组件去处理挂起，接着去接待第三个任务…那这样子的处理必然要依赖于异步操作 异步回调的问题： 之前处理异步是通过纯粹的回调函数的形式进行处理 很容易进入到回调地狱中，剥夺了函数return的能力 问题可以解决，但是难以读懂，维护困难 稍有不慎就会踏入回调地狱 – 嵌套层次深，不好维护 回调地狱 一般情况我们一次性调用API就可以完成请求。 有些情况需要多次调用服务器API，就会形成一个链式调用，比如为了完成一个功能，我们需要调用API1、API2、API3，依次按照顺序进行调用，这个时候就会出现回调地狱的问题 promise promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外） 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据 代码风格，容易理解，便于维护 多个异步等待合并便于解决 promise详解
|
1 2 3 4 5 6 7 8 9 10 |
new Promise( function (resolve, reject) { // 一段耗时的异步操作 resolve('成功') // 数据处理完成 // reject('失败') // 数据处理出错 } ).then( (res) => {console.log(res)}, // 成功 (err) => {console.log(err)} // 失败 ) |
resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去； reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。 promise有三个状态： 1、pending[待定]初始状态 2、fulfilled[实现]操作成功 3、rejected[被否决]操作失败 当promise状态发生改变，就会触发then()里的响应函数处理后续步骤； promise状态一经改变，不会再变。 Promise对象的状态改变，只有两种可能： 从pending变为fulfilled 从pending变为rejected。 这两种情况只要发生，状态就凝固了，不会再变了。 最简单示例：
|
1 2 3 4 5 6 7 |
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(res => { console.log(res) }) |
分两次，顺序执行
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
new Promise(resolve => { setTimeout(() => { resolve('hello') }, 2000) }).then(val => { console.log(val) // 参数val = 'hello' return new Promise(resolve => { setTimeout(() => { resolve('world') }, 2000) }) }).then(val => { console.log(val) // 参数val = 'world' }) |
promise完成后then()
|
1 2 3 4 5 6 7 8 9 10 |
let pro = new Promise(resolve => { setTimeout(() => { resolve('hello world') }, 2000) }) setTimeout(() => { pro.then(value => { console.log(value) // hello world }) }, 2000) |
结论：promise作为队列最为重要的特性，我们在任何一个地方生成了一个promise队列之后，我们可以把他作为一个变量传递到其他地方。 假如在.then()的函数里面不返回新的promise，会怎样？ .then() 1、接收两个函数作为参数，分别代表fulfilled（成功）和rejected（失败） 2、.then()返回一个新的Promise实例，所以它可以链式调用 3、当前面的Promise状态改变时，.then()根据其最终状态，选择特定的状态响应函数执行 4、状态响应函数可以返回新的promise，或其他值，不返回值也可以我们可以认为它返回了一个null； 5、如果返回新的promise，那么下一级.then()会在新的promise状态改变之后执行 6、如果返回其他任何值，则会立即执行下一级.then() .then()里面有.then()的情况 1、因为.then()返回的还是Promise实例 2、会等里面的then()执行完，再执行外面的 then嵌套 对于我们来说，此时最好将其展开，也是一样的结果，而且会更好读： 展开增加可读性 错误处理 Promise会自动捕获内部异常，并交给rejected响应函数处理。 第一种错误处理 第一种错误处理 第二种错误处理 第二种错误处理 错误处理两种做法： 第一种：reject('错误信息').then(() […]
View Details|
1 2 3 4 5 6 7 8 |
{ // 进行路由配置,规定'/'引入到home组件 path: '/', component: resolve => require(['../pages/home.vue'], resolve), meta: { title: 'home' } }] |
这是异步加载组件，当你访问 / ，才会加载 home.vue。 路由懒加载的一种写法 也可以用import
|
1 2 3 4 5 6 7 |
{ path: '/', component: () => import('../pages/home.vue'), meta: { title: 'home' } } |
vue-router中，require代替import解决vue项目首页加载时间过久的问题 vue的路由配置文件(routers.js)，一般使用import引入的写法，当项目打包时路由里的所有component都会打包在一个js中，在项目刚进入首页的时候，就会加载所有的组件，所以导致首页加载较慢， 而用require会将component分别打包成不同的js，按需加载，访问此路由时才会加载这个js，所以就避免进入首页时加载内容过多。 require: 运行时调用，理论上可以运用在代码的任何地方， import：编译时调用，必须放在文件开头 如果使用import方式，还需要安装一个插件 https://blog.csdn.net/hong10086/article/details/89684772 作者：凤箫之舞 链接：https://www.jianshu.com/p/487a600824af 来源：简书 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
View Details