angularjs和ajax的结合使用 （一）

很久没写文了。这是一篇关于easyui配合ajax使用 的文章， 顺带介绍angularjs的使用 以及让你感觉到angularjs的威力。网上对于ajax 的文也是多如牛毛 。我就不直接 从那种原生的httpxmlrequest 对象的js 写起了哈。 看那种东西也存粹是了解 高层的东西是怎么来的 原理是啥 真正作的时候写那种东西 不是扯淡么  你叼 你技术牛逼 整站的代码你全用那种写。html js 这种东西最开始设计出来就没考虑周全 就是坨屎。还好如今有各类框架 能够帮助咱们更容易的把这坨屎作的更美味。也还好因为互联网事业如日中天 的推进 让浏览器端的这堆东西正在往统一规范的方向发展。 好了 正题。

 

咱们来创建一个webform页面 HelloAjaxNet.aspx。先说下ajax 这里我使用网上流传甚广的那个AjaxPro.2.dll  他的网站是 http://www.ajaxpro.info/ 这是一个我的做品 ，很好用。

原本新的asp.net 里自带了 服务端方法用webmethod 属性声明  客户端pagemethods访问 的方式 ，各类对象也能够json数据化 ，功能跟上面同样的。微软自带的是aspx的codebehind 代码方法 必定要加static  ，至于webconfig 在新版的vs2013开发环境下无须配置 若是是老的则新建ajax网站项目则webconfig自动弄好了而后服务端页面载入事件中 ScriptManager.GetCurrent(Page).EnablePageMethods = true; 客户端 必须有runat=server 的form 和 <asp:ScriptManager ID="ScriptManager1" runat="server">        </asp:ScriptManager>  而后客户端就能够pagemethods 的方式访问。

我始终仍是认为上面那个更好用 。关于他的原理我就很少说了  ，经过页面载入时注册服务端对象 ，而后生成的html页面上就多了这么几句

1 <script type="text/javascript" src="/ajaxpro/prototype.ashx"></script> 2 <script type="text/javascript" src="/ajaxpro/core.ashx"></script> 3 <script type="text/javascript" src="/ajaxpro/converter.ashx"></script> 4 <script type="text/javascript" src="/ajaxpro/WebApplication1.StudentsInfo,WebApplication1.ashx"></script> 5 <script type="text/javascript" src="/ajaxpro/WebApplication1.Grad,WebApplication1.ashx"></script> 6 <script type="text/javascript" 
src="/ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx"></script> 7 <script type="text/javascript" src="/ajaxpro/WebApplication1.DataEntity,WebApplication1.ashx"></script>

为是什么呢 为的是引用一段js文件 ajaxpro/WebApplication1.NewFolder2.HelloAjaxNet,WebApplication1.ashx  

而后你就明白了噻 这段客供你进行客户端js调用的脚本 是服务端自动生成的 跟你 服务端的名字如出一辙 而后你就能够貌似像在客户端回调服务端方法样的 没什么神奇的，咱们主要就是想利用他的这个特性和json化数据的方便之处 来实现客户端服务端数据的无缝传递。

关于json数据的序列化 要是之前就只有利用外部json库 或者微软自带的来进行手动解析：

服务端：

 1 public string ServerProcerMethod4(string stu)  2  {  3 //System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();  4 //StuInfo s= jsSerializer.Deserialize<StuInfo>(stu);  5  6 System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();  7 List<StuInfo> s = jsSerializer.Deserialize<List<StuInfo>>(stu);  8 if (s != null && s.Count > 0)  9  { 10 StuInfo stu2= s[0]; 11 StringBuilder sb = new StringBuilder(); 12  jsSerializer.Serialize(stu2, sb); 13 return sb.ToString(); 14  } 15 else 16 return null; 17 }

客户端：

1 //javascript 字符串转json对象：
2 
3 var obj = JSON.parse(str);
4 
5 //javascript json 对象转字符串：
6 
7 JSON.stringify(obj);

 

关于AjaxPro.2.dll  和ajax.dll的关系 ，网上说他们不同 其实压根就是一我的搞的吧 我擦 。请在上面网站下载ajaxpro 这个才是完善的版本

引用dll文件后须要配置webconfig httphandler 做用就是让 上面的ashx请求转到咱们的 ajaxpro代码 ，进而让咱们的客户端js直接调用服务端方法调用成功。

1 <system.webServer>
2     <directoryBrowse enabled="true"/>
3     <handlers>
4       <add verb="*" path="*.ashx" name="myhandler" type="AjaxPro.AjaxHandlerFactory,AjaxPro.2"/>
5       
6       <!--<add verb="POST,GET" path="ajax/*.ashx" name="myhandler" type="Ajax.PageHandlerFactory, Ajax" />-->
7     </handlers>
8   </system.webServer>

而后其余的我就很少说了哈待会直接看服务端代码。

 

easyui 你就能够理解为一堆扩展了的控件。就像jquery同样 你把js对象 原生的html控件用他的东西一包 而后就能够点得出他一些为你写好的方法 帮助你方便的处理数据。而且还有默认的还能够的控件外观，这点对于作企业管理类软件来讲 仍是真心不错的，作其余的就只能呵呵了。下载easyui的文件 放到项目中 并引入easyui 相关js和样式文件 还有jquery：

1     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.min.js"> </script>
2     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/default/easyui.css" />
3     <link rel="stylesheet" type="text/css" href="../jquery-easyui-1.4.3/themes/icon.css" />
4     <script type="text/javascript" src="../jquery-easyui-1.4.3/jquery.easyui.min.js"></script>

 

而后 ，而后你就可使用easyui了 就像easyui 首页 http://jeasyui.com/ 上介绍的那样 经过css样式 或者js代码 把原生html控件渲染成easyui控件

1 <div class="easyui-dialog" style="width:400px;height:200px"
2     data-options="
3         title:'My Dialog',
4         iconCls:'icon-ok',
5         onOpen:function(){}">
6     dialog content.
7 </div>

1 <input id="cc" style="width:200px" />
2 
3 $('#cc').combobox({
4     url: ...,
5     required: true,
6     valueField: 'id',
7     textField: 'text'
8 });

是的 很是方便。其实国内还有好些js写的比较牛的 弄了一些这样ui 那样ui 选来选去仍是用这个吧。用的最多的需求就是ajax服务端分页 ，咱们来弄个吧。

咱们先说下这个easyui的datagrid  打他狗日的，客户端html放个table标签 ：<table id="studb"></table> 而后用js这么一搞 $('#studb').datagrid() 他就给你渲染成easyui datagrid控件了 ，你能够在document.ready()时作这个事情。咱们的数据表格是须要填充数据的 这些数据从哪来 显示哪些列 怎么分页 每页显示多少条，这些都是参数，怎么传进去。easyui不少地方都接收json对象形式的一坨参数 ，好比这个datagrid：

 1 function bindDataToTb() {
 2             var keywordStr = $('#keyword').val();
 3             $('#studb').datagrid(
 4            {
 5                queryParams: { keyword: keywordStr },
 6                //url:"WebForm2.aspx/BindData",
 7                toolbar: '#searchBar',
 8                pagination: true,
 9                pageNumber: 1,
10                singleSelect: true,
11                pageSize: 5,
12                pageList: [5, 10, 20],
13                loader: function (param, success, error) {
14                    var da = WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows)
15                    if (da.value.rows == null) {
16                        success();
17                    }
18                    else
19                        success(da.value);
20                },
21                pagePosition: 'bottom',
22                columns: [[
23                    { field: 'stuNo', title: 'Id', width: 100 },
24                    { field: 'name', title: '名字', width: 100 },
25                    { field: 'age', title: '年龄', width: 100 },
26                    { field: 'loginName', title: '登陆名', width: 100 },
27                    { field: 'loginPwd', title: '密码', width: 100 },
28                    { field: 'GradId', title: '班级Id', width: 100 },
29                    { field: 'gradName', title: '班级', width: 100 },
30                    {
31                        field: 'none', title: '操做', width: 100, formatter: function (value, row, index) {
32                            var btn = '<a class="editcls" href="#" onclick="delstuClick(' + row.stuNo + ')">删除</a>';
33                            return btn;
34                        }
35                    }
36                ]]
37            });
38 
39         }

具体看loader 和columns ，loader用于定义你以什么形式载入数据 定义了loader上面的url就没有必要了。

我这里的WebApplication1.NewFolder2.HelloAjaxNet.BindData(param.keyword, param.page, param.rows) 天然也是服务端的方法 用于检索数据的 。

关于这三个param.keyword, param.page, param.rows 是咱们用于实现loader时 easyui那种设计方式故意暴露给咱们的参数 方便咱们使用。

param.keyword 是咱们上面定义的 咱们点搜索的时候须要往服务端传一个查询关键词 queryParams: { keyword: keywordStr }

param.page 是easyui本身的参数表示当前第几页 param.rows表示每页行数，每当你 点表格的 上一页 下一页 的时候 就会自动往loader 发翻页的参数 这个是自动的。

而后就从服务端获取数据填充表格 ，就是这么一个工做过程。 还有colums 我就不说了就是定义显示哪些列 和自定义列 那个很容易看懂。

easyui控件有属性 方法，调用方法 的形式总算像这样 ：$('#studb').datagrid('reload')  这就至关于调用了#studb这个表格控件的reload方法了 而后数据就会自动刷新，每一个控件的具体见文档。

服务端数据处理咱们仍是用entityframework 我通常都用codefirst的方式 这东西跟他本身的mssql数据库 结合的很好 用起很方便。

 

服务端代码：

 1 //查询（带分页  2  [AjaxPro.AjaxMethod]  3 public static WebApplication1.DataEntity BindData(string keyword, int page, int rows)  4  {  5 //, ref int pageIndex, out int totalPage  6  7 if (keyword == null)  8 keyword = "";  9 10 int pageIndex = 1; 11 int pageSize = 3; 12 int totalPage; 13 if (page != 0) 14 pageIndex = page; 15 if (rows != 0) 16 pageSize = rows; 17 18 MyDb db = new MyDb(); 19 var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select new 
{ stuNo = studentInfo.stuNo, name = studentInfo.name, age = studentInfo.age, gradName = studentInfo.grad.gradName }; 20 //var data = from studentInfo in db.Students where studentInfo.name.Contains(keyword) select studentInfo; 21 22 totalPage = data.Count() % pageSize == 0 ? data.Count() / pageSize : data.Count() / pageSize + 1; 23 24 if (pageIndex > totalPage) 25 pageIndex = totalPage; 26 else if (pageIndex < 1) 27 pageIndex = 1; 28 29 //var dt = DataList<object>.Create(data.OrderBy(r => r.stuNo), new StudentsInfo(), pageIndex, pageSize).Value; 30 object dt=null ; 31 if(data.Count()>0) 32 dt= DataList<object>.Create(data.OrderBy(r => r.stuNo), 33 new { stuNo = 1, name = "", age = 1, gradName = "" }, pageIndex, pageSize).Value; 34 35 WebApplication1.DataEntity result = new WebApplication1.DataEntity(); 36 result.total = data.Count(); 37 result.rows = dt; 38 return result; 39 }

 

关于数据部分 和EF linq 分页那些我就不贴出来了 完整示例下载里面有。走走看吧 试试看吧 彻底无刷新 服务端分页，感受棒棒哒

搜索那个我也不想说了哈 就是从新载入下数据而已，删除是经过自定义 列的方式 传id到js函数 而后调用服务端删除。而后要说下 录入功能 以及easyui自带 的表单验证也是至关方便的。

新建一个div 做为弹出层 里面有一个录入信息的表格 各类html控件 只要写上easyui对应的样式  就自动渲染了 看弹出层的  class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true"

其实很简单噻看字面意思就明白了 这些参数 都在easyui的文档里有。验证 也是在html元素上写data-options 就能够了， ：

 1 <div id="addBox" class="easyui-dialog" data-options="closed:true,title:'新学生注册',modal:true" style="width: 400px; height: 150px">
 2 
 3             <table class="auto-style1">
 4                 <tr>
 5                     <td>学生姓名：</td>
 6                     <td>
 7                         <input id="stuname" class=" easyui-textbox" data-options="required:true,missingMessage:'必填项！',validType:'email',invalidMessage:'email格式不正确！'" type="text" /></td>
 8                 </tr>
 9                 <tr>
10                     <td>班级： </td>
11                     <td>
12                         <input class="easyui-combobox" id="grad" name="grad"
13                             data-options="valueField:'id',textField:'gradName',required:true,missingMessage:'必填项！'" /></td>
14                 </tr>
15                 <tr>
16                     <td>
17                         <input id="saveBtn" onclick="saveClick()" type="button" value="保存" /></td>
18                     <td>
19                         <input id="Button1" type="button" onclick="$('#addBox').dialog('close');" value="关闭" /></td>
20                 </tr>
21             </table>
22         </div>

新建按钮：

1 <a id="Button1" onclick="$('#addBox').dialog('open');" class="easyui-linkbutton">加新的</a>

注意千万别用button 元素  就是这种 <button>新加的</button>  这是个坑 ，折腾了很久。

保存按钮调用 的js函数：

 1 //保存信息
 2         function saveClick() {
 3             var isvaliok = $("#addBox").form('validate');//包起来的须要提交信息的那个div框的id
 4             if (isvaliok == false) {
 5                 $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' });
 6                 return;
 7             }
 8             var stu = {};
 9             stu.name = $("#stuname").val();
10             stu.age = 22;
11             stu.GradId = $("#grad").combobox('getValue');
12             stu.gradName = $("#grad").combobox('getValue');
13             if (isNaN(stu.GradId))
14                 stu.GradId = null;
15             var rst = WebApplication1.NewFolder2.HelloAjaxNet.addStu(stu);
16 
17             if (rst.value == "ok") {
18                 $('#addBox').dialog('close');
19                 $('#studb').datagrid('reload');
20 
21                 var gradData = WebApplication1.NewFolder2.HelloAjaxNet.getGrad().value;
22                 $('#grad').combobox({ data: gradData }).combobox('reload');
23             }
24             else {
25                 $.messager.show({ title: '提示', msg: rst.error.Message + rst.value, showType: 'show' });
26             }
27 
28         }

注意到了噻：

1 var isvaliok = $("#addBox").form('validate');//包起来的须要提交信息的那个div框的id
2             if (isvaliok == false) {
3                 $.messager.show({ title: '提示', msg: '请完善不正确的项后再提交', showType: 'show' });
4                 return;
5             }

在easyui里进行验证很简单噻 只要在html代码里把验证格式定义好了 ，只须要传入一个最外面容器控件的id $("#addBox").form('validate') 就自动帮咱们验证了。而且界面上还有提示 焦点自动放到第一个验证不经过的控件上去了 彻底不须要咱们动手。

固然咱们在客户端 document.ready()的时候 必需要绑定表格和下拉框的数据：

1 $(function () {
2             //页面初始化
3             //载入表格数据
4             bindDataToTb();
5             //载入班级下拉框
6             var gradData = WebApplication1.NewFolder2.HelloAjaxNet.getGrad().value;
7             $('#grad').combobox({ data: gradData }).combobox('reload');
8             var fd = new FormData();
9         });

 

服务端保存的代码：

 1 //添加
 2         [AjaxPro.AjaxMethod]
 3         public string addStu(StudentsInfo stu)
 4         {
 5             MyDb db = new MyDb();
 6             if(stu.GradId==null)
 7             {
 8                 if (string.IsNullOrEmpty(stu.gradName) == false)
 9                 {
10                     Grad grd = new Grad();
11                     grd.gradName = stu.gradName;
12 
13                     Grad grdOld = db.grads.FirstOrDefault(r => r.gradName == stu.gradName);
14                     if(grdOld!=null)
15                     {
16                         return "类别已存在";
17                     }
18                     else
19                     {
20                         db.grads.Add(grd);
21                         stu.grad = grd;
22                     }
23                 }
24             }
25             db.Students.Add(stu);
26             db.SaveChanges();
27             return "ok";
28         }

服务端代码  若是咱们没有这个id的类别咱们就认为这个类别是新的 ，新加一个类别 而后当即绑定 perfect 完美 ，棒棒哒

 

看上去是否是有模有样。作管理类软件还行。

这样ui 那样ui当你须要自定义样式的时候发现什么ui都是浮云，例如我说的国内的写js比较牛的 就已经造出来不少ui了 ，表格是很漂亮 很强大。 其实不少功能你仍是用不到 你想改还很困难 固然个人js也是很菜的。 当你用到另外一套ui 的时候又要熟悉它那一套 。我只想用个简简单单的自定义分页表格而已 或者像asp.net里的服务器控件repeat 流式布局 四个数据一行那种 你怎么作。 仍是本身动手吧。php里面有前端模板。

我这里只是简单从实际需求了解下angular的威力 php里面模板什么的都是浮云   新建一个webform  HelloAjaxNetAngular.aspx

注意这个例子  服务端代码我一概用上面的丝毫都不会变 只是前端变了，angularjs 的主打思想是mvvm 模式 就是wpf里面那种依赖属性 动态绑定 ，不知道大家用过没 反正我用过 感受就一个字 爽 ，作这种数据库平台程序 mfc winform 都是渣。

angularjs 的基础我就不介绍了 哈 直接从需求入手 作一个分页表格 加 信息更新 功能

angularjs的网站是 http://www.angularjs.org/ 这个网址在国内也是访问不了的。一些相关的其余人的学习笔记有 http://www.angularjs.cn/ http://www.zouyesheng.com/angular.html

反正这两个教程看了下对我没 对我没起到啥做用 感受跟嚼木渣样的 ，angularjs的理念虽然是mvvm 可是angularjs自己仍是感受晦涩难懂。

我就在这样一个半懂不懂的状态下写了这个例子 ，全部的操做 几乎都彻底不须要向jquery那样动dom 。真心感受到了他的强大。前端就一个controller函数 管整个页面，怎么一个一个的分 我也不明白 只知道controller 跟html限定同样的树状结构。没在范围的html元素不能访问其controller里的 变量。
咱们来看这个controller 函数 ，我写的时候也没什么感受 。就是感受很存粹 就只感受到两个东西存在 。业务逻辑在操做数据。 就像在写c#数据操做代码样：

 1 function myCtr($scope) {
 2             var mod = [{ name: 'xiang', age: 21 }, { name: 'xiang', age: 25 }, { name: 'xiang', age: 23 }];
 3             $scope.data = mod;
 4             $scope.curobj = {};
 5             $scope.pageEntity = { total: 0, rows: 5, page: 1, pgmsg: '' }
 6 
 7             //初始化默认第一页
 8             $scope.initPage = function () {
 9                 var firstPage = WebApplication1.NewFolder2.HelloAjaxNetAngular1.BindData($("#txtkeyword").val(), $scope.pageEntity.page, $scope.pageEntity.rows);
10                 $scope.data = firstPage.value.rows;
11 
12                 var pageEntityMod = {};
13                 pageEntityMod.total = firstPage.value.total;
14                 pageEntityMod.rows = $scope.pageEntity.rows;
15                 pageEntityMod.page = $scope.pageEntity.page;
16                 var totalpage = pageEntityMod.total % pageEntityMod.rows == 0 ?
17                     parseInt(pageEntityMod.total / pageEntityMod.rows) :
18                     parseInt(pageEntityMod.total / pageEntityMod.rows) + 1;
19                 pageEntityMod.pgmsg = "共 " + pageEntityMod.total + "条记录 每页 " + pageEntityMod.rows
20                     + "条，共 " + totalpage + "页 ，当前第 " + pageEntityMod.page + "页";
21                 $scope.pageEntity = pageEntityMod;
22 
23                 $scope.curobj = {};
24             }
25 
26             //更新当前 选定的
27             $scope.modifyCur = function () {
28                 var rst = WebApplication1.NewFolder2.HelloAjaxNetAngular1.updateStu($scope.curobj)
29                 //刷新表格 当前选中信息 复原
30                 $scope.initPage();
31                 alert(rst.value);
32             }
33 
34             //下翻页
35             $scope.nextPage = function () {
36                 var totalpage = $scope.pageEntity.total % $scope.pageEntity.rows == 0 ?
37                     parseInt($scope.pageEntity.total / $scope.pageEntity.rows) :
38                     parseInt($scope.pageEntity.total / $scope.pageEntity.rows) + 1;
39                 var pagenewnum = $scope.pageEntity.page + 1;
40                 if (pagenewnum <= totalpage)
41                     $scope.pageEntity.page += 1;
42                 $scope.initPage();
43             }
44             //上翻页
45             $scope.previousPage = function () {
46                 var pagenewnum = $scope.pageEntity.page - 1;
47                 if (pagenewnum >= 1)
48                     $scope.pageEntity.page -= 1;
49                 $scope.initPage();
50             }
51             //搜索
52             $scope.search = function () {
53             }
54             //选中一行
55             $scope.del = function (sender, curobj) {
56                 //全部行的颜色还原//设置选中那一行的颜色
57                 var rows = $(sender.target).parent().parent().parent().find("tbody").find("tr");
58                 for (var i = 0; i < rows.length; i++) {
59                     $(rows[i]).css("background", "white");
60                 }
61                 $(sender.target).parent().css("background", "#ffe48d");
62                 $scope.curobj = curobj;
63             }
64 
65             //首次先调用下 以获取第一页
66             $scope.initPage();
67         }

界面部分：

 1 <div ng-controller="myCtr" id="mygrid">
 2                 <input id="txtkeyword" type="text" /><input ng-click="initPage()" type="button" value="搜索" />
 3                 <br />
 4                 <br />
 5                 <div style="height: 200px">
 6                     <table cellspacing="0" border="1" class="gridtable">
 7                         <thead>
 8                             <th width="150px">name</th>
 9                             <th width="150px">age</th>
10                         </thead>
11                         <tbody ng-repeat="stu in data">
12                             <tr ng-click='del($event,stu)' style="background-color: white">
13                                 <td>{{stu.name}}</td>
14                                 <td>{{stu.age}}</td>
15                             </tr>
16                         </tbody>
17                     </table>
18 
19                 </div>
20                 <div id="pager">
21                     <a href="#" ng-click="previousPage()">上一页</a> <a href="#" ng-click="nextPage()">下一页</a>
22                     <span>{{pageEntity.pgmsg}}</span>
23                 </div>
24 
25                 <div>
26                     姓名：<input type="text" value="{{curobj.name}}" ng-model="curobj.name" /><br />
27                     年龄：<input type="text" value="{{curobj.age}}" ng-model="curobj.age" />
28                     <input id="Button1" type="button" ng-click="modifyCur()" value="更改" />
29                 </div>
30             </div>

 

看到我本身搞了一个数据绑定函数 参照easyui里datagrid的loader。  第一次请求获得分页信息后 我当即把数据绑定到表格 你能够看到彻底就像作模板样的，而后初始化本身的分页控件。 在ng-click 的时候像原来同样触发客户端单击 而后调用controller里的方法去更新数据 ，注意仅仅是根据业务逻辑去更新数据 其余的不须要作。关于上面两段代码不明白的自行去看angularjs 入门和数据绑定 用不了10分钟，

因为有wpf那种双向绑定机制，数据模型 数据更新了 页面内容自动跟着变。甚至你能够看到我编辑下面文本框里的数据的时候 都还没提交 上面表格的数据就跟着变 由于他们的数据是从同一个地方来的，看着恍惚都感受是ajax哈。

上面全部示例的项目源码下载 可直接运行，因为引了些外部库进来十兆差点放不下

说点后话

其实照互联网这样推进发展下去的话 前端会统一 前端才是王道 到时候一个网页 就是一个系统 一个客户端。 后端只负责数据和安全。 如今的什么html5不是几乎都成为工业标准了么 有些嵌入式设备都支持

暂时像博客园里我看到的有几个讲的 先后端天人合一的那种mvc模式 前端后端操做同一个model 前端更新属性了有一种机制自动就更新到后端持久化到数据库去了  或者后端更新model的某个属性 前端html页面的值自动就变了。 不是说作不到 毕竟牛人这么多 ，我以为至少还不稳定吧。

各类ui有easyui ligerui fineui miniui  Devexpress 还有不少js框架 seajs requirejs JavaScriptMVC  backbone avalonjs knockout angular jquery jqueryui js真是屎同样的东西啊各类框架学都学不完

尤为是软件行业突飞猛进 基于框架 和平台的技术太多了 不精通某样技术不要紧 能使用就行 ，可是做为一个技术人员 你至少得精通同样 或者一门技术 要否则就是个搬砖的 很遗憾 我基本还在搬砖的路上。写业务代码就是用一年的经验混十年，写业务代码是他的工做 工做之余还得有点精神追究 研究下事情的本质 ，只要是还不错的程序员 作这种数据库系统久了都会本身搞点能快速开发的所谓的小框架 积累一些本身的工具库 和经验。

在工做上不要有什么偏见  只要他天天把业务代码写的出来 软件开发也只是一门职业 你不是英雄 ，目的是解决问题 不是转牛角尖。

 

我本人对js是不怎么感冒的 js也很烂，当初设计这个东西的时候就不完善给咱们使用它形成了各类阻碍 ，可是你作web开发又不得不用它。这里也并非对作前端的有什么偏见 感谢那些前端吃的很透的人 像司徒正美那些高手 制造了这些工具让咱们更容易的去完成这些网站程序。